# Fundamentals of Mobile Web Development(Matt Gaunt) - 1503150416

![video\_screenshot](https://2300623831-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M42R_LUyJKgBHlKjSRa%2F-M42Rc6P9yocNdfaP271%2F-M42RxvZRbXL2vjYdU-_%2Fz6dg_V22wV0.jpg?generation=1585974621676793\&alt=media)

&#x20;**视频发布时间**

> 2014年11月20日

&#x20;**视频介绍**

> 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.

&#x20;**视频推介语**&#x20;

> 暂无，待补充。

## 译者信息

| 翻译           | 润稿 | 终审 | 原始链接                                                     | 中文字幕                                                     | 翻译流水号      | 加入字幕组                                                                                                                                                                                  |
| ------------ | -- | -- | -------------------------------------------------------- | -------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Wallace4ever | 黄莘 | —— | [ Youtube ](https://www.youtube.com/watch?v=z6dg_V22wV0) | [ Youtube ](https://www.youtube.com/watch?v=P0c6onWLdgM) | 1503150416 | [ 加入 GDG 字幕组 ](https://github.com/gdsub/pub/tree/420613f9ff598576d7b4321d0b83923050d0d03d/Conference/009-Chrome-Dev-Summit-2014/%7B%7B%20book.host%20%7D%7D/join_translator/README.md) |

## 解说词中文版：

虽然还是很奇怪 但相比于去年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的这个问题时 你其实更容易

诊断出问题所在

所以 非常感谢你的聆听

希望这是一些对你有用的东西

谢谢！

\[掌声]
