提高页面性能的方法

一、原则
（1）多使用内存、缓存或者其余方法。
（2）减小cpu占用，减小网络。

提高页面性能的方法有哪些？

1、加载页面和静态资源
一、静态资源压缩合并，减小http请求。
（1）减小http请求数量
（2）减小请求资源大小
二、非核心代码异步加载。
三、静态资源缓存：经过连接名称控制缓存，只有内容改变的时候，连接名称才会改变。
四、利用浏览器缓存
五、使用cdn让资源加载更快
六、预解析dns
七、使用ssr后端渲染，数据直接输出到html中（ssr：server site render）
2、页面渲染
一、css、js及放置位置
（1）尽可能避免在HTML标签中写style属性
（2）css放前面，js放后面。
（3）避免使用CSS Expression
二、图片
（1）避免图片和iFrame等的空Src。空Src会从新加载当前页面，影响速度和效率
（2）懒加载（图片懒加载，下拉加载更多）

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

（2）减小dom操做，多个操做尽可能合并在一块儿执行。

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

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