Web前端性能优化 - 让你的页面飞起来

资源合并与压缩

• 减少http请求数量
• 减少请求资源大小

浏览器一个请求从发送到返回都经历了什么？

、

html压缩

css压缩 js压缩（混乱）

文件合并

图片优化

图片压缩

Image inline

针对小图片我们可以使用Image inline的方法
将图片的内容内嵌到html当中
减少你的网站的HTTP请求数量

css和js的装载与执行

• 词法分析
• 并发加载
• 并发上限
• css head中阻塞页面的渲染
• css阻塞js的执行
• css不阻塞外部脚本的加载（预资源加载器，但是会阻塞执行的过程）
• 直接引入的js阻塞页面的渲染
• js不阻塞资源的加载（预加载）
• js顺序执行，阻塞后续js逻辑的执行

懒加载

预加载

1. 隐藏image加载
2. 使用Image对象加载
3. XMLHttpRequest (存在跨域问题，不过可以更加精准的控制预加载的过程)
4. PreloadJS

重绘与回流

频繁触发重绘与回流，会导致UI频繁渲染，最终导致js变慢
回流必将引起重绘
而重绘不一定会引起回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
当页面布局和几何属性改变时就需要回流

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

触发页面重布局的属性

• 盒子模型相关属性会触发重布局
• 定位属性及浮动也会触发重布局
• 改变节点内部文字结构也会触发重布局

只触发重绘的属性

新建DOM的过程

1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果（Recalculate style--样式重计算）
3. 为每个节点生成图形和位置（Layout--回流和重布局）
4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）

Chrome创建图层的条件

• 3D或透视变换（perspective transform）CSS属性，比如transform:translateZ(0);
• 使用加速视频解码的<video>节点
• 拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
• 混合插件（如Flash）
• 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
• 拥有加速CSS过滤器的元素
• 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
• 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
• <video>,<canvas>,will change:transform,overflow-scrolling:touch

  调试方法

• 通过chrome控制台的layers查看页面图层
• 通过chrome控制台的Rendering来实时查看重绘的元素
• Performance很有用

优化技巧

1. 用translate替代top/left改变,原因:http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
2. 用opacity替代visibility(会触发重绘)
   • opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
     • visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
     • display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
3. 不要一条一条地修改 DOM 的样式(尽管有缓存机制)，预先定义好 class，然后修改 DOM 的 className
4. 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次（不会重发任何Reflow），然后再把它显示出来
5. 不要把 DOM 结点的属性值(ex. offsetHeight,offsetWidth,当我们获取这种属性一定会触发回流的过程，因为他要去获取最新的某个DOM元素的位置,强制刷新回流队列缓存)放在一个循环里当成循环里的变量，在循环外面声明一个变量来中转
6. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
7. 动画实现的速度的选择（css的性能会影响js变慢，UI线程和JS线程是相互阻塞的），选择合适的动画的间隔时间
8. 对于动画新建图层(当我们使用自定义的DOM做动画时，这时chrome不会自动创建图层)
9. 启用 GPU 硬件加速，比如加上transform：translateZ(0); transform：translate3d(0,0,0);可以看下这个https://www.cnblogs.com/PeunZhang/p/3510083.html 问题就是防止过多的图层，因为图层合并也会消耗性能

一般来说，我们要在是否创建图层之间权衡是否创建，因为合并图层也是有成本（比较消耗性能）的，依据是否有所优化而定

浏览器存储

Cookie

如果您在cookie中设置了HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击，具体一点的介绍请google进行搜索
问题：cookie中在相关域名下都会携带，cdn的流量损耗
解决方法： cdn的域名和主站域名分开

LocalStorage and SessionStorage

IndexedDB

PWA与Service Worker

缓存

• httpheader
• max-age 最大缓存时间，优先级高
• s-maxage public缓存时间，比如CDN，304。优先级比s-maxage高

Expires

Last-Modified/If-Modified-Since

Etag/If-None-Match

优化策略

• 构建层模板编译
• 数据无关的prerender方式（公共数据），直接生成相关的html页面
• 服务端渲染