前端性能优化的方法

原则：
1、多使用内存、缓存或者其他方法。
2、减少cpu占用，减少网络。

方法：

一、加载页面和静态资源
1、静态资源压缩合并，减少http请求。
（1）减少http请求数量
（2）减少请求资源大小
2、非核心代码异步加载（async、defer区别）。
3、利用浏览器缓存（强缓存和协商缓存）
4、使用cdn让资源加载更快
5、DNS预解析

（1）用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />
（2）在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

在一些高级浏览器中，页面中所有的a标签是默认开启DNS预解析的，所以不用加上面的meta标签a标签也可以做到DNS预解析，但是如果页面协议是https，很多浏览器是默认关闭DNS预解析的，此时要加上这个meta标签

DNS Prefetch 是一种DNS 预解析技术，当浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。 

6、使用ssr后端渲染，数据直接输出到html中（ssr：server site render）
二、页面渲染
1、css、js及放置位置
（1）尽量避免在HTML标签中写style属性
（2）css放前面，js放后面。
（3）避免使用CSS Expression
2、图片
（1）避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
（2）懒加载（图片懒加载，下拉加载更多）

3、dom操作
（1）减少dom查询，对dom查询做缓存。

（2）减少dom操作，多个操作尽量合并在一起执行。

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4、事件
（1）尽早执行操作（如DOMContentLoaded）
（2）事件节流

5、代码细节优化
（1）用hash-table来优化查找
（2）多个变量声明合并
（3）少用全局变量
（4）避免全局查询
（5）避免使用with(with会创建自己的作用域，会增加作用域链长度)
（6）用setTimeout来避免页面失去响应
三、移动端性能优化
1、css
（1）不滥用Float。Float在渲染时计算量比较大，尽量减少使用
（2）不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
（3）避免使用css3渐变阴影效果。
2、css动画
（1）尽量使用css3动画，开启硬件加速。
可以用transform: translateZ(0)来开启硬件加速。
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
3、合理使用requestAnimationFrame动画代替setTimeout
4、适当使用touch事件代替click事件。