1.CRP--关键渲染路径优化
减少关键资源(包括HTML、CSS、Javascript)的数量,这些资源指能够阻止网页首次渲染的资源;
减少关键路径的长度,可减少获取所有关键资源所需的往返次数和时间;
减少关键字节,这些字节等于所有关键资源文件大小,文件总和越大,首次渲染就会花更多时间。
2.DOM优化
删除不必要的内容,代码、注释、空格,利用GZIP压缩文件,结合HTTP缓存文件,尽量做到最小化文件。
3.CSSOM优化
CSS加载不会阻塞DOM解析,但渲染树依赖于DOM树和CSSOM树,导致CSS加载会阻塞DOM渲染,可通过减少关键CSS元素数量、尽量避免使用CSS表达式、压缩CSS来优化,同时应尽可能不适用@import,因为CSS最好放在头部,而@import则相当于在底部使用link标签。
4.Javascript优化
浏览器遇到script标记时会组织解析器继续操作,直到CSSOM构建完成,Javascript才开始运行并继续完成DOM构建,Javascript应当放在底部。
在script标记添加async属性后,浏览器会继续解析DOM,同时脚本也不会被CSSOM阻塞,也不会阻止CRP。
尽量减少访问DOM,Javascript访问DOM速度是很慢的。
尽可能多的使用异步操作。
5.其他方式
(1)使用精灵图;
(2)压缩图片;
(3)图片懒加载;
(4)JavaScript尽量减少使用eval,性能消耗大;
(5)Javascript尽量减少使用闭包,甚至有可能出现内存泄漏;
(6)尽量使用CSS3代替Javascript动画,CSS3的动画和变形都开启了硬件加速,比Javascript性能好;
(7)合理使用浏览器304对不常用数据进行缓存等等。
——内容收集整理于网络