Web性能优化随笔

发表于 2016-07-31 分类于 Web Changyan：本文字数： 1.6k 阅读时长 ≈ 1 分钟

谈到web性能优化，一般我们可以把它分为两个部分来讲，页面加载（Page Speed）和页面渲染（Page Performance）。

页面加载

总之就是，尽量减少每一个资源的体积

合并CSS、Javascript和小图片

尽量减少同一域下的HTTP请求数

Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理，这样就会减小通过网络传输的数据量，提高浏览的速度。所以Gzip对文本资源非常有效。

一些公用的静态资源（比如jquery、angular、bootstrap等）。使用这些公用的静态资源一方面可以增加页面文件并发下载量，另一方面还能和其他网站共享这些缓存。

尽可能延长静态资源的缓存时间，不但能使频繁访问网站的用户更快的访问，还能减轻服务器压力。至于静态资源的更新，则可以结合修改文件名和+版本号的方式来确保资源更新时，用户会加载到新的内容。

应为javascript在加载的时候会出现阻塞，所以为避免出现阻塞页面渲染，让页面页面出现长时间空白，尽量将Javascript文件放在页面底部。

CRP

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

转化：浏览器从磁盘或网络读取 HTML 的原始字节，浏览器会将这段原始文件按照相应编码规范进行解码（现在一般为 utf-8）。
符号化：根据 W3C 标准转化为对应的符号（一般在尖括号内）。
DOM 构建：HTML 解析器会解析其中的 tag 标签，生成 token ，遇到 CSS 或 JS 会发送相应请求。HTML 解析时阻塞主进程的，CSS 一般也是阻塞主进程的（媒体查询时例外），也就是说它们在解析过程中是无法做出响应的。而 JS 手动添加 async 后达到异步加载，根据 token 生成相应 DOM 树。
CSSDOM 构建：添加 CSS 样式生成 CSSDOM 树。
渲染树构建：从 DOM 树的根节点开始，遍历每个可见的节点，给每个可见节点找到相应匹配的 CSSOM 规则，并应用这些规则，连带其内容及计算的样式。
样式计算：浏览器会将所有的相对位置转换成绝对位置等一系列的样式计算。
布局：浏览器将元素进行定位、布局。
绘制：绘制元素样式，颜色、背景、大小、边框等。
合成：将各层合成到一起、显示在屏幕上。

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

[更多详细关于页面渲染的内容，请查看][Performance]
[Performance]:https://segmentfault.com/a/1190000005754881