sialvsic的Tech空间

# 浏览器性能

# 渲染流程

JavaScript -> style -> layout -> paint -> composite

  • js ： js通常去处理影响视觉变化的改变的部分 (css 动画，变形)
  • style： 根据css的规则去哪个节点渲染什么样的样式
  • layout：计算元素节点的布局
  • paint：重绘是填充像素的过程
  • composite: 组合，将不同的layout画到页面上

Step by Step:

  • Send the request get back the html and css and js
  • parse the dom -> dom tree
  • combine the dom and css -> recalculate the style -> render tree
  • calculate the layout( reflow ) -> calculate where to show
  • vector to raster -> picture to pixles -> rasterizer call method to fill the pixels to the layout
  • composite layers -> draw to screen

# 如何定位性能问题

使用chrome的time-tool工具，https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool

示例：http://output.jsbin.com/nanana/2/quiet#

# 如何解决性能问题

策略：从pipeline的入口开始，Js -> style -> layout -> paint -> composite

# js

浏览器中运行的代码，并不一定是我们自己写的代码，因为浏览器可能会先编译一下，使用的是just in time 即 JIT（即时编译器） 针对动画优化js 根据Rail的原则，每一个过程都有一小段的时间来执行js代码，不会影响到用户体验。如何确保js 不会妨碍我们在animation的10ms的上限？

确保js在每一帧开始时近早的执行，这样就有可能多的时间去执行接下来的步骤

requestAnimationFrame这是浏览器的支持动画优化的一个API

function animation(){
  //Do some thing
  requestAnimationFrame(animation)
}

requestAnimationFrame(animation);

使用web worker处理密集计算型的工作

Web worker

# 样式和布局

使用BEM

如何解决Recalculate的问题，通常有两种方式：

  • 减少受影响元素的个数，也就是说在渲染树中有最少的更改
  • 减少选择器的复杂度，也就是使用较少的tag和类名去选择元素

在分析的时候根据我们的pipeline的流程很重要， Js -> style -> layout -> paint -> composite

比如，如下代码：

var width = element1.offset;
element2.offset  = width + xx;

此处的offset会首先触发浏览器的计算(Layout)，直接跳到了第三步，然后我们又设置了样式，又再次设置了样式，所以相当于之前的流程是没有用的，浪费了很多计算，第二次试一次强制同步布局

# paint和合成

解决的方式： 谨慎的加一个图层： 使用css:

will-change: transform

或是

transform: translateZ(0)

# 几个概念

# FPS 每秒的帧数

FPS：frames per second 人类可以接受的显示的是60fps，算起来大概 16.67frame / 1ms。同时浏览器的处理会花费一些时间，所以基本上我们要确保在10-12秒内做出一帧的渲染才能保证没有卡顿的感觉。

# css trigger

对于不同的css属性来说，值得改变对于是否触发layout，Paint，和 composite都是不同的 https://csstriggers.com/

# Rail

网络应用的生命周期的四大领域：

  • r response 响应 100ms
  • a animation 动画 10-12 ms
  • i idel 闲置 50ms
  • l load 加载 1000ms

浏览器加载资源尽可能的在1秒内做出响应，加载一些基础功能的信息，此时处于闲置状态（大概50ms的时间），可以在此时处理一些需要长时间加载的资源。 所有的资源加载完成后，等待用户的输入，必须对用户的输入做出<100ms的响应，同时对于有动画的操作做出16.7frame/1ms的响应

# 如何去提升

  1. 使用Google audit去审计你的页面
  2. 使用audit的report去找到可以提升的点
  3. 每次只改变一点
  4. 每次更改之后在audit一次

# 参考

  1. [浏览器渲染优化]https://classroom.udacity.com/courses/ud860/lessons/4138328558/concepts/last-viewed
  2. 渲染性能 (opens new window)
  3. 网站性能优化 (opens new window)

# 工具

1.lighthousebot https://github.com/GoogleChromeLabs/lighthousebot 2.https://csstriggers.com/

← 图片优化 →

陕ICP备20004732号-3