关于前端性能优化——大总结

从五个方面来分析前端性能优化，为面试而打造。

优化HTML

1. 避免图片和 iFrame等src属性为空。src属性为空，会重新加载当前页面，影响速度和效率
2. 尽量避免在HTML标签中写 Style属性
3. 把CSS放在页面头部，把JavaScript代码放在页面底部，这样避免阻塞页面渲染而使页面出现长时间的空白

优化CSS

1. 避免使用CSS表达式、高级选择器、通配选择器，尽量使用id、class选择器设置样式，避免使用style属性设置行内样式
2. 压缩、合并CSS
3. 当需要设置的样式很多时，设置 className而不是直接操作 Style
4. 正确使用display属性，display属性会影响页面的渲染
5. 不滥用float
6. 不声明过多的font-size
7. 当值为0时不需要单位
8. 尽量使用CSS3动画

优化JavaScript

1. 少用全局变量，缓存DOM节点查找的结果，减少I/O读取操作
2. 用 innerHTML代替DOM操作，减少DOM操作次数，
   优化 JavaScript性能，用 setTimeout避免页面失去响应
3. 避免使用with（with会创建自己的作用域，增加作用域链的长度）
4. 多个变量声明合并
5. 合理使用 requestAnimationFrame动画代替 setTimeOut
6. 使用 touchstart、 touchend代替 click
7. 适当使用 canvas动画
8. 尽量避免在高频事件（如 TouchMove、 Scroll事件）中修改视图，这会导致多次渲染

利用缓存优化服务器端

1. 缓存Ajax，使用CDN，添加 Expires头，在服务器端配置Etag
2. 使用CDN托管文件，让用户更快速地访问
3. 可以使用多个域名来缓存静态文件，延长静态资源缓存时间，合理设置资源的过期时间
4. 开启服务器端的Gzip压缩，对文本资源非常有效
5. 减少cookie头信息的大小，头信息越大，资源传输速度越慢

请求数量

优化图片加载

1. 图片懒加载。可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载。
2. 如果为幻灯片、相册文件等，可以使用图片预加载技术，对于当前展示图片的前一张图片和后一张图片优先下载。
3. 如果图片为CSS图片，可以使用精灵图合并，减少HTTP请求
4. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验。
5. 如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。
6. 为图片标明高度和宽度