前端性能优化:
一、尽可能减少前端http请求。
1、合并优化脚本文件和css文件。
2、同种类型的背景图片尽量放在一起,用css控制显示。
二、使用浏览器缓存。
如果能强制浏览器缓存在本地,将会降低页面产生的流量。
三、页面压缩。
压缩gzip,html,js,css,图片等。
四、html代码结构优化*
1、正确布置页面脚本。
1>、尽可能使用外部脚本和配置文件。
2>、js文件放到文档末尾。
3>、脚本放在文档前面,文档内容可能会被阻塞。放在末尾会出现就是未加载完用户就会触发行为。
2、减少dom结构的层级。
3、减少cookie的大小。
4、尽量用div取代table。
table会影响页面展示速度,应为只有table完全加载才会展示在页面上。
五、组件分为多个域,提高页面组件并行下载能力。
六、图片,脚本,数据预加载。
移动端的性能优化:
属于前端性能优化范畴,但移动性能优化在PC端同样适用。
1、使用css动画。应为css加载速度优于js。
2、适当使用touch事件代替click事件。
3、合理使用css3样式,减少使用css3渐变阴影等效果。
4、用transform开启硬件加速。
5、不滥用float,web字体。
------------------华丽的分割线------------------------------
最近看了些性能优化的知识,补充在上面
前端性能测试里的二八原则,即前端优化占八成,后端优化占两成。
客户端响应时间:
10%-20%:发送http请求,从服务端获取html文档。
90%-80%:下载页面相关文件。
来源:https://www.cnblogs.com/Grace-zyy/p/6963874.html