前端性能优化关键词:Critical rendering path

什么是关键渲染路径

Critical:必需的,关键的
Render:渲染
Path:浏览器现实初始视图(initial view )所必须的一系列过程。初始视图也称为首屏(above the fold),用户不需要滚动就能看到的内容。
所以关键渲染路径的定义就是:浏览器显示网页(首屏)所必须的一系列事件。
回顾浏览器渲染过程
1. 加载HTML
2. 加载资源
3. 解析
4. 渲染
首屏内容的优化对用户体验至关重要,首屏所需的步骤精简,时间加快,其余内容延迟加载或者滚动加载。

常见的优化方法

去掉或者减少阻塞资源
控制首屏所需字节先加载
推迟其余的资源

参考链接:

above the fold 定义
延迟加载图片
都有谁在阻塞渲染
阻塞渲染的CSS
阻塞渲染的JavaScript
网络字体阻塞渲染
优化首屏显示

前端性能优化关键词:Render blocking resources

什么是Render blocking resources?

根据前几篇提到的浏览器渲染过程,有了DOM 和 CSSOM 之后,浏览器才开始渲染。所以挡在渲染前面的资源都叫做阻塞渲染的资源。
这些资源包括:
  • HTML,当然了,没有dom,就没什么可渲染的;
  • CSS,根据浏览器渲染过程看到,没有CSSOM,也不会开始渲染;
  • JavaScript,因为JS有可能改变页面内容和样式,所以浏览器会等待JS加载完成并解析运行后才继续向下解析文档。
从以上可以知道:
  • DOM节点越多,浏览器耗时(下载、解析)越多(优化建议:快看天猫首页源代码——2016年11月16日,首屏以外的DOM节点动态生成);
  • CSS内容越多,文件越多,浏览器下载、解析时间越长(优化建议:看淘宝首页源代码——2016年11月16日,inline关键CSS,其他CSS异步加载);
  • JavaScript的话,只要不是渲染页面必须的,都放到文档底部,就不会阻塞渲染。
另外:图片不会Block render。
参考文档:

前端性能优化关键词:Resource timing

什么是Resource timing?

客户端的延迟一直是网站性能重要的衡量标准。虽然用JS可以大概的测量每个请求的时间,但是不能确定中间每个步骤的数据。为了获取用户体验数据的完整信息,W3C草案增加了ResourceTiming API,可以用JavaScript接口看到每个请求的完整时间信息。接口可以精确测量用户感知到的资源加载时间。具体定义如下图:
resource-timing-overview-1
查看方法,用chrome浏览器控制台命令:
window.performance
其中当前页面加载的详情在:
window.performance.timing
也可以看页面所有资源的加载时间节点:
var resourceList = window.performance.getEntriesByType(“resource”);
看到的结果大概是这样的
Chrome 的 Dev tools 的 network panel 看到的就是这些数据图形化的展示:
通过这些诊断,可以得到很多关于优化的信息,比如常见的关键资源等待加载,First Byte 太迟,同时加载资源太多等等,关于这些问题的原因以及会怎样影响网页性能,以后会作文解说。

参考链接

前端性能优化关键词:VanillaJS

What is vanilla JavaScript?

你可能听说过Angular、React、Backbone、Ember、Knockout、Vue、Ext、jQuery、Meteor、Express、Koa、Total、Socket.io等等等等。但什么是 VanillaJS,又要学一个新框架么?
VanillaJS 只是不用任何框架或库的一种调侃,源自于“plain JavaScript without any additional libraries” 大概是 without any libraries 的简写吧。
还有人建立了模仿一般框架的官网。http://vanilla-js.com/
下载区域可以选择不同的插件,全部选择后源文件大小也是 0.00KB。所有API都和原生JavaScript一样。执行速度也是最快的。而且所有浏览器都原生支持!
有些页面只为实现简单的功能引入了代码库比如jQuery,但是jQuery本身就占了页面所有JS的70~80%,如果页面功能又必须在jQuery加载后才能执行,对页面的性能影响就很可观了。

JS框架的优点

JS框架封装了复杂困难的代码;
JS框架能加快开发速度,更快完成项目;
JS框架让你更专注于产品内容的价值,而不是实现过程;
JS框架让合作更简单,大家都对基础代码有共同的理解;
JS框架还会强迫你练习,多实践不是坏事,顺能生巧嘛。

JS框架的问题

每个项目的开发都会遇到框架文档没有说明的问题,这时候就要深入框架查找原因,这时候就需要深厚的原生JavaScript功力了。
过去5年能被大家注意到的新框架产生了数十个,猜猜5年后会有多少新的框架发布,一旦确定了项目的技术栈,几年后项目怎么办?

学会 Vanilla JavaScript 能让你真正理解JS框架,甚至能为其贡献代码,还能帮你选择合适的框架。

如果你不知道Web基本原则,语言本身的演变和新框架的不断到来,你早晚会撞墙。
知道纯JS将使你成为一个能够(不用疯狂搜索原因)解决复杂问题的关键工程师。
它将增加你的通用能力和生产力,不管在前端还是后端。
它会给你创新的工具,而不只是执行。
它会指导你什么时候使用或者不使用框架。
它将让您更好地了解浏览器和计算机工作原理。

参考文档

前端性能优化关键词:Render tree

什么是渲染树 Render tree

再回顾一下浏览器工作步骤:

  1. 处理HTML便签构建DOM树。
  2. 处理CSS标签构建CSSOM树。
  3. DOM和CSSOM树被组合形成渲染树(渲染树只包含需要显示在页面的节点)。
  4. Layout(reflow)计算每个对象的确切位置和大小。
  5. 最后是绘制(Paint),把最终的渲染树对象渲染成屏幕像素。

渲染树生成的时候简单来说:

1,从DOM树根节点开始,遍历每个可见节点。
2,每个可见节点找到并应用对应的CSSOM规则。
3,返回计算好样式的内容

然后呢?

从渲染树知道了每个元素的位置和尺寸,下面就是Layout(reflow)了。根据设备的 viewport 计算每个元素该怎样展示。Layout 之后就是绘制过程了。

对性能有什么影响

根据内容样式不同,设备不同,每一步花费时间不太一样,但是页面越复杂,样式越多,每个步骤,特别是Layout会花费更多时间。
从上面的步骤看到,一旦DOM或者CSSOM发生改变,这些步骤都要全部重走一遍。如果短时间内频触发,或者页面太复杂导致某个步骤花费时间太多,就会导致页面帧率降低,页面变得卡顿。