从五个方面来分析前端性能优化，为面试而打造。
优化HTML
- 避免图片和 iFrame等src属性为空。src属性为空，会重新加载当前页面，影响速度和效率
- 尽量避免在HTML标签中写 Style属性
- 把CSS放在页面头部，把JavaScript代码放在页面底部，这样避免阻塞页面渲染而使页面出现长时间的空白
优化CSS
- 避免使用CSS表达式、高级选择器、通配选择器，尽量使用id、class选择器设置样式，避免使用style属性设置行内样式
- 压缩、合并CSS
- 当需要设置的样式很多时，设置 className而不是直接操作 Style
- 正确使用display属性，display属性会影响页面的渲染
- 不滥用float
- 不声明过多的font-size
- 当值为0时不需要单位
- 尽量使用CSS3动画
优化JavaScript
- 少用全局变量，缓存DOM节点查找的结果，减少I/O读取操作
- 用 innerHTML代替DOM操作，减少DOM操作次数，
优化 JavaScript性能，用 setTimeout避免页面失去响应 - 避免使用with（with会创建自己的作用域，增加作用域链的长度）
- 多个变量声明合并
- 合理使用 requestAnimationFrame动画代替 setTimeOut
- 使用 touchstart、 touchend代替 click
- 适当使用 canvas动画
- 尽量避免在高频事件（如 TouchMove、 Scroll事件）中修改视图，这会导致多次渲染
利用缓存优化服务器端
- 缓存Ajax，使用CDN，添加 Expires头，在服务器端配置Etag
- 使用CDN托管文件，让用户更快速地访问
- 可以使用多个域名来缓存静态文件，延长静态资源缓存时间，合理设置资源的过期时间
- 开启服务器端的Gzip压缩，对文本资源非常有效
- 减少cookie头信息的大小，头信息越大，资源传输速度越慢
请求数量
优化图片加载
- 图片懒加载。可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载。
- 如果为幻灯片、相册文件等，可以使用图片预加载技术，对于当前展示图片的前一张图片和后一张图片优先下载。
- 如果图片为CSS图片，可以使用精灵图合并，减少HTTP请求
- 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验。
- 如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。
- 为图片标明高度和宽度
