Fundamentals of Mobile Web Development(Matt Gaunt) - 1503150416
Last updated
Was this helpful?
Last updated
Was this helpful?
视频发布时间
2014年11月20日
视频介绍
Matt gives a whirlwind tour of getting started on Web, from our Web Fundamentals guide to jump-starting with the Web Starter Kit, and also cover some of the stunning advancements in DevTools.
视频推介语
暂无，待补充。
翻译
润稿
终审
原始链接
中文字幕
翻译流水号
加入字幕组
Wallace4ever
黄莘
——
1503150416
虽然还是很奇怪 但相比于去年Jake对我的介绍来说
不像去年 这次的介绍有了极大的进步
你简直是要将我的信息一股脑吐露给观众朋友们
因此Jake 这次你做得不错
你学到了不少东西
好的 我叫Matt Gaunt
我算是个谷歌团队的拥护者吧
我来自伦敦
因而有这英式口音
我可不是Rob Dodson
我将要谈的是关于移动网站开发的
基本法则
本次我的介绍内容的结构
就是相当概要地看看
我们这些天听说的内容
我们看到了SILK团队带来的性能展现
帧数始终保持在60FPS 还有ServiceWorker这个API
以及它真正离线缓存你的网页的能力
此外还有一些用来实现这些的
后台功能 例如后台同步
推送通知 事实是所有这些都需要TLS安全传输层协议
以及Polymer框架——当下的一种构建你的网页应用的全新方式
这实际上的确是一个开发网站的
激动人心的时刻，不是吗
例如 这些全新的API都棒极了
并且当你将它添加在我们之前已经用
WebRTC, Web Audio, WebGL做出的成果上时候，一切都令人激动
不过如果你还是个web开发的新人
或者假设你已经从事web开发一小段时间了
但是响应式网页设计的理念
或为移动平台进行开发对你来说有些可怕的话
那么这些全新的API可能会让你失去信心
我记得因该是Paul Kennan
做了对Alexis上超过一千个的网站的调查
然而结果是 超过百分之三十的网站没有开发适合移动端的视图
另一个例子是 当你和一些机构 公司和开发者交流时
你会发现 响应式网站设计的概念
对于他们来说还很新颖
他们几乎对此没什么了解
对他们来说 如果你采用了那些新特性
为web进行开发的感觉可能就是这样
想一想你就能明白是为什么
举例来说 当你对这些新特性还不是很熟时
你会觉得自己好像站稳了脚跟
但事实是你完全摸不着头脑
你是个彻底的新人
不过这已经够打击人了
没人会希望这种事会发生在自己身上
这种情况比较有趣 因为我们仍在
用已掌握的这套核心技术进行开发
仍然是 html css和javascript
我们只不过是在不同的方案中用不同的方式使用它们罢了
我的意思是 就算你退一万步
去思考你自己会如何开发新的API
你还是会和大家一样做相同的事
你会去学习移动网站开发
然后你可能会开始去用这些API开发一些东西
然后你很有可能重复做那件事
并修改它以适应你的用例或者其它的任何事情
于是我们团队就开始思考 如果有人真的来找我们
问我们 我们如何构建一个响应式移动网站
我们该朝哪里发展
我该做什么
我该学什么
我如何做这件事
途径是什么
我们想了想
并且认识到我们没有一个好的答案
实际上 你有了使用细则
有相关的博客文章
其中有些紧跟潮流 有些则不会
于是我们认为 事实上
我们可以做点事去帮助他人
因此 在今年年初
我们有了网页基本原理这一概念
这一概念基本上呈现在一套
为应用实例而编写的文档之中
好了 现在再来看看这个例子 你如何创建一个响应式移动网页呢
答案自然是我们基本上会
让某个想学的人参与进来
来尽快学习前人的最佳实践
并且上手使用它
所以今年开始 我们开始做这件事
并且相当快地做完了这些重复性工作
在经历了几个月之后
我们意识到终于可以发布点东西了
我们之所以迫切的做这件事
是因为想要检验我们是不是
能够去解答没人回答的问题
而现在我站在这台上了 是的 我将发布它
刚刚我们的网站上线了
悄无声息 我们不想引起太大关注
因为如果这个
是没人想要的
确实有可能没人喜欢
那么这就算是个实验吧
我们尝试了不过没怎么见着效果 就是这样
同时我们也在和总代理人做相同的工作
他为我们设计并搭建网站
方便我们专注于网站的内容
我想Phil Hawksworth已经总结了
在这方面整个项目进度如何
他说 我发现不是所有的软项目启动都是温和的
那就接受随之而来的众包质量保证要求吧
总的说来 背后的事情是
我们刚启动了网站
这句话就很快就在推特 博客和黑客新闻上被转载
这使我们遇到了不曾想过的拥堵事件
你可能也注意到 我和Kennan
以及Paul Lewis用 你什么意思 这种话来挖苦他
这实际上很好 因为
我们本来在Github上有个链接去
鼓励人们去提出问题
我们发现这使得不少人向我们提意见
抱怨错别字 当然打字错误是很愚蠢的
还有许多人在投诉
我们使用了英式英语而不是美式英语
当然我们也得到了许多
来自专业人士的意见
比如其中一个情况就是我写了一些关于
触控的文档
我写的是指导 我说
如果你要同时支持鼠标和触控
你应该使用鼠标悬停和获取焦点功能
这是个好的实践经验
你应该试试
然后 PPK 通读了我的文档
她做在那儿告诉我
”你说过人们应该使用鼠标悬停
这没有问题
但是你没有提到 如果你触碰了某物
然后当你实际上放手的时候 鼠标悬停的状态仍然保持着“
我第一反应是 这什么鬼
什么还在保持不变
不过另一方面 我的确没注意到这个事实
因为我总是在使用鼠标悬停
所以反馈由于两点原因很便捷
第一 某人在这领域是个专家
他过来说 你需要把这个加进去
这就是最佳实践 你得告诉人们这一点
你得更新文档 使得要点被添加 一切就绪
第二点是 我可以去向
Chrome工程团队抱怨 我们为什么要做这件事
还有什么我们不能做的 因为我们不能在我的
手机上实现鼠标悬停并且用这一事件做点什么
所以网页基本原则的关键点就是寻求最佳实践方法
我们现在还在为其添加文档
但是其中一个重要的地方就在于
做这些文档就是其基本的实践之一
因此如果你使用像ServiceWorker这样的东西的话
它短期内不会被加入网页基本原则
只是因为它是全新的
这就意味着它可能不是最佳的实践方案
我想每一个实际上
在使用ServiceWorker的人都做了些
有些不同的事 一些对他们有用的事
所以老实说 所谓最佳实践的概念
对它的定义 实际上并不存在
可是人们还在试图弄清楚它
但同样重要的是指出 使用的实例是第一位的。
所以 你永远不会真正在网络基本准则上站稳脚跟然后说
啊 有一个关于如何实现ServiceWorker一个文档
它会是怎样的 如何实现离线网络应用程序
所以我认为的主要的原因是
如果有人写了一篇文章像杰克为App Cash做的那样
并有一个新的我们可以真正换出的API
那时候 随着时间推移 API就来来去去
我们可以有相同的文档结构
并更改最佳实践一段时间
主要原因之一是 我们想要这个相当快的
反馈回路 因为我们的所有文档都有些自以为是
如果你看过类似的模具部分
你采取一种典型的热烈讨论
我们可以说 在Web开发社区内
像是Gulp对Grunt 我们只是挑其中一个
我们做出明智的决定了所有可用的工具
我们挑选了一个我们认为是适合大多数的用例
现在 主要的原因是 如果你是一个新的开发者
你不知道什么是Gulp和Grunt
你从未有过自己的构建过程
那么有可能你不想要这一选择
因为你很快就会选择这样
没人能教你明辨两者的优劣
而另一面是 好吧 如果你的使用了这文档
并继续探索 如果我在这里和你意见不同
那就有可能你足够知道自己其实做出一个明智的决定了
所以 你应该这样做下去
但是有一个巨大的问题是
我们所做的与网络基础 而事实是
我们没有帮助建立的东西
这是一组文档
你仍然可以被这一切搞得真正不堪重负
而这正是我们提出网络入门套件的原因
而这背后的想法是 所有的最佳实践
我们其实都可以交给一名开发者 然后从事我们自己的事
和别人交流是有趣的
因为他们得到了一点东西 很难界定
网络入门套件是什么东西 因为我们没必要
做解释它的浩大的工作 因为我们基本上是想
得到的反馈 弄清楚人们想让我们用它做什么
我关于它的想法是 如果你创建一个新的Web项目
有可能有一些你默认需要做的事
对于我来说 我总是最终
用Grunt和Gulp结束某项开发工作
我才刚刚添加它的 因为它只是
为我处理大量的任务
它很好使用
我也只是做些从旧的网站上复制和粘贴东西的事
如页眉和页脚
因为我也懒得记住它
千真万确
但它的另一面是
或许我可能定义了一组风格
只是为了让事情看起来OK 抑或我只是去用些
像Bootstrap或者Foundation的东西 因为最终
我只想要能够激发的外观和感觉的东西
然后我以后会改变它 如果我想的话
因此 这是网络入门套件的目的
因此 我们选择了Gulp
并且用它做了这一套任务
所以对于你的样式 我们有CSS和Sass支持
我们串联起来 这意味着只有两个文件
将它们糅合在一起 这意味着当浏览器去获取
一个CSS文件时 它只需要取一个文件而不是五个
这就让它在让浏览器获取所有需要的东西方面
更方便 更快捷了
经过我们代码格式化的文件实际上更小更快了
实际在设备上就是如此
而且它已经非常有趣 因为我
每一天都使用Sass 大多数人实际上理解了这样的一点
当他们对此还很陌生的时候 他们不希望安装Ruby。
也不想再那基础之上安装Sass
因此 在网络入门套件的下一个版本中
我们要去完全去除对Sass的依赖
我们要使它成为一个可选的东西
所以在默认情况下 没有Sass
但是如果你添加了它 我们将使用node Sass
所以基本上 这是一个NPM模块
没有额外的依赖
JavaScript缩小再拼接 因为它是有效的
其实我们还使用JSON
所以 如果你是一个全新的开发者
我觉得这可能有点吓人
因为你突然上手这个东西 那么实际上在JavaScript中
你需要修复这些一系列问题
但它是非常有用的
它捕获很简单的错误
而且 它鼓励在JavaScript中的最佳实践教育
图片是有趣的一个东西 因为
你们有多少人听说过PageSpeed Insights
好吧 只有一点点
所以PageSpeed Insights监控你的网站
其中很重要的是 基本分析着
你的网页加载时间的表现
它监控的事情之一就是图像压缩
而在谷歌I/O 我们有一个设备实验室
我们得以知道 人们想要
在所有设备上看到我的网站
而我们 我和Pete LePage指的是整个站点
我们达到了一个我们可以说OK的地步
我们会把它放在所有这些设备上
如果你让我们来分析你的网站的每一个组成部分
和一些你可以做得更好的地方
还有图像 还有一大堆
人没有压缩他们的图片
而这些甚至都不是个宠物项目
这些都是正经的公司在他们的网站上
大量花费的时间
这个东西可以在一个图像上为您节省50％ 60％ 70％的时间
所以 是的
我们只是把它放在那里
这是最好的做法
然后 我们还有一个风格指南
而坦白说 与此的最初的意图是
如果你只是想出发 你会有很好的一套风格
然后 随着时间的推移 我们会希望你深入研究风格指南
自定义它 做你想做的
打开入口 放进东西 它会是你的
开发者们其实真的很喜欢这一点
他们喜欢从风格和内容分开的概念
我不知道它是否是一个温柔的风格指南驱动的
开发 但这就是一般人怎么来参考一下它的
但跟随着这个当前版本的问题是
真正做出改变是可怕的
这是很棒的
很多人会参与进来并使用它
但调整它是一种痛苦 因为我们
都依赖于Sass
它不是那么好
我要说说我们
将在一分钟内就此改变
但首先 还有两个工具
我们也将其加入了web入门套件中
基本上 从你用Gulp服务器启动开发服务器的那一分钟开始
它就增加了在LiveReload上
现在 如果你看过我在过去的任何谈判
我爱LiveReload 爱得要死
我还是偶尔能看到专业的Web开发人员
做出改变 进入浏览器 敲击刷新键
偶尔他也会按下 Ctrl+Shift+刷新组合键
因为缓存正在发挥作用
是啊
这简直让我疯狂
但基本上 实际上发生的是 你在HTML CSS或JavaScript中
做出的变化 然后它会为你立即刷新页面
你得到这个非常好的开发流程
因为你可以专心在你的编辑过程上
同时作出你想要的变化
而且你立即看到它们生效
我们还添加的另一个工具是BrowserSync
现在，BrowserSync是个奇怪的小东西
如果你有一组设备和浏览器
它们指向您的本地开发服务器
你与这些网页之一做出的任何交互
都得以在所有的其他装置同步
所以 这就比如敲击 滚动
您可以输入文本
同时所有的网页都是跨设备匹配
现在这在你有不同平台的设备是
真的是很方便 比如像不同的平台 不同的浏览器
还有你办公桌上面对你的不同尺寸的屏幕
也许就像一个有几个不同的版本平板电脑
有着不同的操作系统
这的确对你很有用
因为你可以只需坐在电脑前 做你需要做的事
然后检查你的页面的所有部分 只是从你的
开发机器上检查就行
所以，你不必在每一点上拘泥
好了 这就是我们今天在网络入门套件中所包涵的
我提到过 我们要取消对Sass的支持
这似乎是人们想要的一个相当大的改变
另一处是在风格指南
而与此最大的问题 IC已经成了一个事实A，
它的超级不友好 并且对于B 我们遇到了一种
它甚至对我来说都是越来越难以管理的地步
因此 我们需要正确地矫正它
我们也刚刚弄清楚
我们需要解决所有这种依赖性
我们已经到了一种我认为 我们应该
重新开始的地步
因为基本上 这是一个我们从网络基础
继承下来的样式风格
到了这个地步，我们认识到实际上
很多使用Web入门套件的人
也有很多围绕浏览器支持的要求
很多这些开发者在一个
需要支持所有的浏览器的地步
然后我们算是意识到
这就是通常在Ploymer里的门控性因素
我们算了一下 如果我们要做一个风格指南
我们可以使用材料设计规范
并把它带到一些旧的浏览器上
因此就算是个我们目前掌握的早起前瞻吧
重要的是 这只是一个从材料设计得到灵感的风格指南
它有平常的你能够想到的事情
当然也有 排版 列表
我真的很喜欢这一点 因为它像一道彩虹
很明显 因为你已经学到了材料设计规范
你必须有所有的涟漪所有按钮
我个人最喜欢的是文本字段
我只是喜欢出下划线的动画
然后当你到下一个时 标签上升
我们基本上都有一组默认样板组件
但在真的很好用的东西在幕后
它是比我们以前容易得多
你可以从字面上深入进来理解
如果你想改变一些这按钮的东西
实际上你可能很清楚地
在这种新的结构里发现它 因为它和字面意思一样
按钮文件夹对应 button.sass
很简单对吧
但它真的很有趣 在这个过程中
我们意识到 材料规格
不一定是面向标准的网页设计
例如 如果你认为一个刻板的网站链接头 设置链接
这几乎是网页设计的必经之路
我保证你们已经就像这样
在你生活中的某一刻实现了一个网站
然而 在材料设计中没什么能
刚好实现这点
所以，我们一直在和材料设计团队的合作 例如问在材料设计中
这图案是什么样
他们一直很好 因为事情就这样简单
我们刚拿到一些变量
所以只在右侧有一种标准的链接栏
还有居中水平的
让内容镶嵌在其中的导航栏
如果你看一下材料设计规范
你也有静态导航栏
它会在移动设备上隐藏起来
但会在桌面环境中保持展现状态
所有的这种想法是
你会看到进入标准的汉堡包
菜单 它有着侧边导航栏
但有趣的是 我们会在不是为展现内容的网站中
遇到这样的问题
所以遇到这种情况是一个有趣的过程
如果我们遇到另外一些问题的话 我也不会感到惊讶
像这样的地方其实我们与材料设计团队紧密合作
去真正实现这些新的设计图案
我们一直很幸运 因为我们
在伦敦有遇到一些的UX设计师
他们碰巧不幸坐在在我们附近
所以我们基本上可以引诱他们来帮助做我们的事情
而他们，汉娜和Ed的确很伟大
因为他们看了一眼我们的风格指南
他们可能纠结于里面一点点
可能说 你在干什么
但汉娜的将这个惊人的模拟放在一起
这基本上是她设想的风格指南将被怎么使用的
像检查框和按钮
就真的应该分成同一种形式
这是它是如何被使用的
我很困难地开始把这放在一起
因为 bacon ipsum
但它是一个有趣的问题
那种风格指南应该得到这个地步
它可以帮助你 鼓励你用一个特定的方式使用它
因此，我们将要包括像刚才复制的东西
到剪贴板 所以你不必担心找不到
藏在别处的一个特定的片段
而这给我们带到了这个迭代的一步
由于Web基础应该帮助你学习
网络入门套件可帮助你构建和启动
一个全新的项目
并且在你做迭代工作的时候
就是开发工具自主奏效的时候
我保证你所有可能已经打开了DevTools
所以DevTools团队一直在作出
许多能够基本上在移动网络发展方面帮助您的变化
也找出了浏览器在执行什么步骤
所以 第一件事是设备模式
这基本上是在左上角这个蓝色移动图标
现在，召唤出的第一件事情是那些
在网页上的栏目
这些基本上是一个关于
你的媒体查询在哪里进行的提示
现在，这个东西真正有用的地方在于
如果你达到了一种
在页面内有一堆媒体查询的地步时
你也许正在用组件来做它
你可能意识到已经让媒体查询间
出现冲突了 一切都变得一团糟
有一个很可能的情况
可能是一些这些补丁中出错
因为你已经有了这么多重叠的东西
你可能已经全部见过的另一部分就是
说得好听些，就是这个设备的选择
其中，基本上选择一个特定的设备
并且，它会设置该特定设备的
宽度和高度 包括屏幕的密度
这是非常好的，因为你达到了一种
如果你使用响应式图像
你能见到其精华的地步
但我特别的最爱之一就是这个新的网络限制
现在 你基本上可以
选择一个特定的网络类型 一个你
想要在浏览器中模拟的类型
然后它使其适应你的需求
所以在这里 如果我选择2G 刷新网页
这是一个非常坚实的指示
对于图像顶部我需要做点改动
因为这对2G用户来说是痛苦的
但好处是它实际上是嵌入在DevTools里的
因此，这是你已经达到
尝试不同事物的程度了
之前，你必须拿出一个不同的应用
这取决于你使用哪种技术
有时它们实际上是对工作来说有点繁琐
其实我曾经做到过把自己锁在
我的机器外面，因为我想它应用到我的
能想到的实际上有最慢的网络连接的所有机器上
在这一点上 我的机器决定锁定
然后还决定它需要打电话回家
以确保我其实还是在这里好好地工作
我不记得我是怎么摆脱出来的
但我可以告诉你 它不是一个愉快的经历
但至少有这一点 它是内置进去的
它真的很容易改变
而在这段时间内的在开发工具里的
另一大改变就是 浏览器时间线
所以，如果我只是刷新页面，我得到了正式
浏览器引擎实时在做什么的情况
并且我们总是得到这个典型的瀑布图
展示着浏览器完成了什么样的事
但第一个新添加的一个是涂料探查
所以在这里我刚选择了在页面上的涂料
它看起来是相当沉重的
但向下看 你所看到的是这种新的涂料事件探查器选项卡
现在 沿着左边 我们有一组绘图命令
这基本上是浏览器
将这些特定的东西渲染到屏幕上所做的事
因此当我向下滚动时 我们应该到了一个
你可以开始真正看到命令如何渲染
画在页面上的东西的地方
沿着这里的顶部，我们也能看到
这些命令中的每一个是如何发生的
他们花了多长时间来实际发生
然后在中心 我们有这个大坏小子
这基本上是浏览器的实渲染的东西
现在，与此相连的非常好的事情是
如果我在渲染上选择小块的指令
我开始擦动
实际上你可以看到浏览器的渲染过程
以及它如何做到的
所以，如果你到一个
需要这个庞大的 长期的渲染过程 那么实际上
它会真正给你带来问题 这是第一次
你可以真的深入看到
浏览器实际上在后台做什么
但无可否认 你有这样的一个问题
就是满足这样的渲染过程
但是 如果浏览器可以告诉你
渲染过程发生在哪里 同时告诉你
到底为什么它实际上这样做
所以，如果我去我们可信赖的Chrome开发者网站
我应该能在上面
找到相似的效果
现在，我真的觉得时间线是令人困惑的
而且我也觉得更加混乱如果要我
要弄清楚当浏览器决定这样做时浏览器在做什么的话
所以 当我看到这样的渲染效果 那里只有
个蓝色块 我有点疑问
为什么它在渲染一个蓝色的块时，它能
一直在那里
因此 在渲染事件探查器里 你能看到所有的这些
但是，如果你看底部的细节 就在按钮那里
我们有这风格和验证
基本上 这告诉你的就是
它的在页面上的这个特定元素
已经被渲染了
以及它被这样渲染的原因是动画
现在 这是非常好的 因为之前 你会运行一个时间表
你必须是像Paul Lewis那样的黑暗艺术的高手
明白这到底是怎么回事
因为你知道浏览器后台在做什么
这是第一次DevTools实际运行 我已经展示出来了
这是为什么我做它的原因
它是一种很好的范例演示
因为我其实可以点击这个 你会看到添加样式
所以 你可以在渲染进行时
看到风格和验证
但还在沿着这些线路想
如果我们回到这个时间线的另一部分
你可以看到，我们已经重新计算了它和此布局
由于不是黑暗艺术时间轴的高手
我真的还不知道为什么会发生
因此 如果我向下滚动到该布局的底部
我们也得到了布局和验证
这是另一种情况，其中DevTools实际上是
告诉我们 这种特殊的事情发生了
这是为什么
所以在这里，我们实际上可以得到一个堆栈跟踪
它告诉我们 CDS.card.coolproperties 是
造成这种特定布局发生的原因
而且它也具有一个被布置为这样的结果
的部件列表
现在 这是真正有用的 因为之前你
真的被到底发生什么搞得焦头烂额
现在，你可以真正得到一点
你的代码在哪里导致
浏览器产生行为的指示
现在 我不知道你怎么想 但是有那么一刻
如果我在看瀑布，它只是
成为了很多漂亮的彩色砖块而已
而那种真正令人困惑的事情是
如果我用像这样的东西
我已经预见到布局和重新计算的风格的发生
而这个黄色块告诉我
我的JavaScript做了这样的东西
但是，这是不是真正的好 没有画面清晰
发生了什么 为什么发生
每段花费了多久
这只是一个彩色砖而已
而这正是新的火焰图查看器的用武之地
基本上 当你放大的时候
得到了更好的对这段时间内
动画框架的理解
你的JavaScript实际上是
花费了大量时间
而且里面的东西 导致浏览器重新计算样式和布局
现在 它是完全相同的信息
但它在以不同的方式显示
但好处与这就是你实际上可以
开始看到多一点的原因和影响
但无可否认，这实际上仍然不能
帮我弄清楚是CDS.min中的什么
造成了这种对样式的计算，随后的布局
所以 如果你能真正弄清楚到底发生了什么
它就感觉上没有方便多少
而这正是JS探查用武之地
所以 如果我回去 并重复同样的事情。
所以在这里 我现在已经启用了JS探查
如果我去 再次发现这个动画框架 你们中的一些
可能已经注意到了 东西看起来忽然
变得很耗时可怕了
但在这里 我们已经让动画框架开动 随后
是我们的JavaScript完全相同的函数调用
但是你会注意到几个进度条
突然 我们就有了这个CDS.card.expand
跟着是CDS.cardcollectproperties
它的这种方法这实际上
导致浏览器重计算样式和布局
所以这是非常有用的 因为现在 你实际上是在一个点上，
在那里 你不具备这个神奇的黑盒子
你做了点什么 现在我也做了点什么
实际上你做了一些东西
这一切都很好
你用这个方法那一刻开始 这就是发生的事
因此 它实际上开始为我们做了很多事
【掌声】
是啊 继续
这是非常好的，因为，通常情况下，你会
到这个地步：你会意识到
也许你测得了顶部补偿或什么的
但是 除非你知道这是一个问题
否则这是非常难以诊断的
这里的东西确实有鬼
而且 至少降低了你的整个搜索
到一个非常非常小的面上 来试图弄明白整件事
所以其他很新很酷的事情之一
再次，仍然是在DevTools的服务信息中
就是你在浏览器火焰注意到的，我们到了一个
我们在顶端遇到这类怪异的
东西的地步 还耗费了一点时间
现在这些东西都代表帧
诚然 我的网站是不行的 因为从外表来看
它肯定达不到60 FPS
但是 我们再来看看以往 仅仅一分钟
但是，当你真正点击这些框架之一时
你就让这个图层面板向下探底
现在 当我说复合材料层的概念时
你们中有多少是开心的呢
哦，哇
于是杰克居然给了惊人的比喻
如果你有一堵墙而且你
让个有画棒男子从左至右移动
你可以用记号笔一棒的人画在墙上
画一次 然后叫出这个男人 再次画一遍
重复，直到你达到你的最终目的
你可以做的是重复覆盖透明塑料
叫出绘制的人一次，然后只需将它附在墙上
复合层的想法就是
基本上都在透明层作画
移过来移过去
它的效率更高
它只是在GPU中加载，你可以做你的事了
所以，这图层面板实际上做的事
告诉你 所有东西都被附在了层上
而在此之前 情况是你会
有可能会被告知一些不知道什么意思的橙色的边框
现在 它是真正的明确清楚
现在另一面是
你可以看到 在右手边 是复合原因
现在，这是伟大的，因为有时候你到一个点
那里的东西会被提升至
一个你本不希望如此的图层
其他时候，你希望它被提升到一个图层
它又会告诉你事实不是这样
但是 如果你有什么事情完全不了解
例如为什么它被提升到一个图层这样的件事
复合材料的原因会告诉你它为什么作出这一决定
所以在这种情况下 “与其他复合重叠的内容不能
被压扁了，因为这层图层被滚动成
挤压层了“ 我没打算让这种情况发生
讽刺的是，这会导致Android上的Chrome浏览器的错误
在那里 当你把它滚动出屏幕
它就不会成为一个层了 而且事情有点古怪
但其实这是第一次
我调试它 因为你可以看到所有的图层
好处是 如果你
通过点击启动每一帧
你应该开始看到图层在移动
但是因为我不是janktastic
你没法看到帧
但是如果这是很好的演示 它会一直工作
但同样 综合原因的好处是
DevTools实际上再次解释它在做什么
为什么它做到了
现在 作为好的演讲者 我有所有这些的备份
因为 当你已经让Polaris告诉你
不更新Canary 它会破坏你的演示
你有备份的视频
所以 是的
这就是我们在Chrome团队正在做的事
网络基础知识可以帮助你学习 网络入门套件
帮你建立新项目 DevTools
加入了大量的新功能以帮助您的移动网络的发展
以及了解什么浏览器在做什么
这样一来 当你遇到
达不到60 FPS的这个问题时 你其实更容易
诊断出问题所在
所以 非常感谢你的聆听
希望这是一些对你有用的东西
谢谢！
[掌声]
