博客首页前端开发分类

前端性能优化之RAIL

发布时间:2016-08-16 16:32:37编辑:Mr.Co阅读(543)

前端开发
首先一个需要思考的问题,怎样的网站是顺畅的?我们可能可以给一个大概的感觉,如:秒级响应等。其实,也可以给出一个很讨巧的答案:用户觉得顺畅的网站它就是顺畅的。因为几乎所有网站都希望将用户留在页面上,当然以用户为中心建立性能模型是必要的,下面是 Google 提出的一个以用户为中心的性能模型,里面的数据不是 Google 首创,有一些论文做类似研究(如:100ms 响应用户是一个很合适的时间等)。
前端开发

上图是 RAIL 的具体含义,这里有一些关键性的数据指标:

Respond:0 - 100ms,视窗一般需要在这个时间段响应用户,超过这个时间段,用户就会感觉到延时。

Animation:0~16ms,屏幕每秒刷新60次,16ms 代表的是每一帧的时间。用户是非常关注动画的,当动画失帧很容易引起用户察觉。所以动画一般要控制在60FPS。

Idle:最大化主进程的空闲时间,这样可以及时响应用户输入。

Load:内容需要在1000ms 内加载出来,超过1000ms 会觉得加载缓慢。

应用要达到上面的性能模型需要从哪些方面入手呢?如果我们知道浏览器是如何渲染一个页面的,并且去优化渲染过程中的关键步骤,是不是就能事半功倍呢?

关键渲染路径


上图是浏览器渲染的关键路径,首先,让我们从浏览器解析一个页面开始吧。

转化: 浏览器从磁盘或网络读取 HTML 的原始字节,浏览器会将这段原始文件按照相应编码规范进行解码(现在一般为 utf-8)。

符号化:根据 W3C 标准转化为对应的符号(一般在尖括号内)。

DOM 构建:HTML 解析器会解析其中的 tag 标签,生成 token ,遇到 CSS 或 JS 会发送相应请求。HTML 解析时阻塞主进程的,CSS 一般也是阻塞主进程的(媒体查询时例外),也就是说它们在解析过程中是无法做出响应的。而 JS 手动添加 async 后达到异步加载,根据 token 生成相应 DOM 树。

CSSDOM 构建,添加 CSS 样式生成 CSSDOM 树。

渲染树构建从 DOM 树的根节点开始,遍历每个可见的节点,给每个可见节点找到相应匹配的 CSSOM 规则,并应用这些规则,连带其内容及计算的样式。

样式计算,浏览器会将所有的相对位置转换成绝对位置等一系列的样式计算。

布局,浏览器将元素进行定位、布局。

绘制,绘制元素样式,颜色、背景、大小、边框等。

合成,将各层合成到一起、显示在屏幕上。

如果我们是做一个动画,一般会用 JS 更改相应样式,接着浏览器就会经历 JS 运行、样式计算、布局、绘制、合成等多个重要步骤(后面还会讲到这个步骤实际过程中可以更长或者更短)。那么要做的优化就是在这几个步骤中进行优化并且尽量去掉中间的耗时步骤。


转载请注明出自:http://www.mrco.cn/article/57b2cfa5cf6935bd6dd1c0ab.html

最新评论(0)

    我要评论

    *
    *
    *
    *
    *
    验证码