浅谈web前端性能优化

前端性能优化：

一、尽可能减少前端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%：下载页面相关文件。