本篇文章主要介绍了" theWalker"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
这篇文章主要关注的是资源加载之后的性能，因为大多数用户关注的不是应用如何加载而是具体的使用。所以要快速响应用户，尤其是无线端，我们有必要了解浏览器渲染性能。RA...
这篇文章主要关注的是资源加载之后的性能，因为大多数用户关注的不是应用如何加载而是具体的使用。所以要快速响应用户，尤其是无线端，我们有必要了解浏览器渲染性能。
RAIL 性能模型
首先一个需要思考的问题，怎样的网站是顺畅的？我们可能可以给一个大概的感觉，如：秒级响应等。其实，也可以给出一个很讨巧的答案：用户觉得顺畅的网站它就是顺畅的。因为几乎所有网站都希望将用户留在页面上，当然以用户为中心建立性能模型是必要的。下面是 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 规则，并应用这些规则，连带其内容及计算的样式。
- 样式计算，浏览器会将所有的相对位置转换成绝对位置等一系列的样式计算。
- 布局，浏览器将元素进行定位、布局。
- 绘制，绘制元素样式，颜色、背景、大小、边框等。
- 合成，将各层合成到一起、显示在屏幕上。
