前端性能优化

资源的加载方式

懒加载

• 适用场景：页面很长，图片很多
• 原理： 可视区内部的图片正常加载，可视区外的图片src设置为预览图，将图片的src放在img标签的data-src属性中，如

<img data-src='img/pic.png' src="img/demo.png"/>

实现方式：
1. 手动实现
2. lazyload.js

预加载

• 适用场景： 单屏应用，如H5活动，H5游戏
• 实现方式：
  
  1. 隐藏的img标签
  2. new Image
  3. ajax
  4. preload.js

回流和重绘（reflow repoint）

• 
  
• 回流： 当render tree中部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，布局和几何属性改变
• 重绘：当render tree中一些元素需要更新属性，而这些属性只是影响元素的外观，风格，不影响布局，比如修改背景色。
  

优化点： 将频繁重绘的元素单独为一个图层，那么该元素重绘回流只会在该图层中，不过图层合并计算较耗性能，所有在必要时才去新建图层。

引起回流属性

盒子模型相关属性

width  
height  
padding
margin
display
border-width
border
min-height

定位属性及浮动

top
bottom
left
right
position
float
clear

改变节点内部文字结构或属性

text-align
font-size
font-weight
overflow
overflow-y
font-family
line-height
vertical-align
white-space

引起重绘属性

color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline
outline-color
outline-style
outline-width
box-shadow

图层

chrome自动创建图层条件

1. 3D或透视变化css属性（perspective transform）
2. video标签
3. webGL和canvas
4. 混合插件（如： flash）
5. opacity
6. 拥有加速css过滤器的元素
7. 元素子元素拥有独立图层的元素

手动创建图层

1. transform: translateZ(0)
2. will-change: transform

设置img无效 div可以

优化建议：

1. 使用translate替代top
2. 使用功能opacity替代visibility
3. 通过class改变样式
4. DOM离线，display：none操作，之后显示
5. 不要讲DOM属性作为循环变量
6. 不要使用table
7. 对动画元素，如git，新建图层
8. 控制动画速度
9. 启用GPU加速

浏览器本地缓存方案

localStorage

优化：弱网环境从localStorage中读取数据，比如百度首页大量的数据缓存

SessionStorage

优化: 刷新保存状态

IndexedDB

优化： 创建网站离线版本

cookie

优化： 将静态资源（图片，js，css）和HTML文件分开上线，防止静态资源自动携带cookie，浪费流量

Worker

优化： 将耗时的同步运算放在独立的线程中

// main.js
var worker = new Worker('./worker.js')
worker.postMessage(2000000000)
worker.onmessage = (msg) => { console.log(msg.data)}
console.log('开始计算')

// worker.js
onmessage = (msg) => {
  for (var i = 0; i < msg.data; i++) {}
  postMessage('计算成功')
}

serviceWorker

优化： 将页面缓存在serviceWorker，断网读取