记录一些关于前端性能优化

标签：三方   controls   区域   完成   flow   闭包   阻塞   位图   方便   

一、页面级优化

　　1，合并压缩css和js文件，减少http请求次数及请求资源的大小，可使用打包工具 webpack。

　　2，css放head里优先渲染，js放body后避免阻塞。

　　3，做效果优先使用CSS，js，第三方插件。

　　4，使用CDN加速。

　　5，使用雪碧图，将使用的图片整合成一张，通过定位选择要展现的图片。

　　6，使用图片懒加载，页面首次加载不请求资源而是放一张占位图，当页面加载完成并在图片在可是区域再加载图片。

　　7，使用字体图标和SVG图标替代传统png图片。

　　8，避免图片src为空，即使为空也会向服务器发送请求。

　　9，前后端数据交互使用JSON，JSON数据偏小处理方便。

　　10，避免使用iframe，页面嵌套页面加载样式比较会消耗性能。

二、 代码级优化

　　1，尽量减少dom操作，修改dom会对页面重新渲染。重排（reflow）重新声称布局，重绘（repaint）重新绘制。

　　2，使用文档片段构建dom结构。

　　3，减少闭包的使用。

记录一些关于前端性能优化

标签：三方   controls   区域   完成   flow   闭包   阻塞   位图   方便   

原文地址：https://www.cnblogs.com/hekuheku/p/12462405.html