web 前端性能优化

一、 网络层面优化

1 减少http请求，合并资源（js、css、图片）
2 减少资源体积，压缩资源（js、css、图片）
3 大量数据加载或大量图片加载时使用懒加载或预加载优化 （使用字体图标或者SVG图标来代替传统png图）
4 使用按需加载，加快首屏渲染速度
5 利用http缓存机制，对资源进行缓存
6 网站用到很多域名时，可使用DNS预解析，提前解析域名
7 使用CDN给网站静态资源加速（CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存）

二、js层面的优化

1 尽量减少DOM操作，DOM操作尽量做到批量更新，减少页面回流和重绘
2 避免内存泄漏，及时清理已经没用的定时器、挂载的事件和其他引用 （尽量减少闭包的使用）
3 合理使用事件委托，减少循环给DOM元素绑定事件处理函数，避免给大量子元素添加相同事件
4 使用变量缓存多次使用的资源，避免每次使用都去获取或计算
5 频繁执行的函数使用节流或防抖进行优化
6 有大量数据需运算时，开启Web Worker多线程进行计算可避免js主线程阻塞
7 js文件引入放置在HTML body尾部，因为js的加载、执行会阻塞页面渲染

三、css 层面优化

1 避免使用通配符（*）
2 避免选择器层级太多，提高解析匹配速度
3 对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
4 提取公用样式增强可复用性
5 css文件引入放置在HTML head头部，因为css的加载、解析并不会阻塞DOM解析，提前加载可以更快合成Render树
6 css选择器解析规则所示从右往左解析的。减少元素标签作为对后一个选择对象
7 css导入的时候尽量减少@import导入式，因为@import是同步操作，只有把对应的样式导入后，才会继续向下加兹安，而link是异步的操作