前端性能优化小结

优化

优化的目的是提升用户体验，减少网页加载时间。我们可以依据雅虎军规来对项目进行优化。

• 关于DOM
  1. 减少DOM元素的数量，不要嵌套太深，正常页面的DOM元素数量一般不应该超过1000。
  2. 尽量少用iframe。
  3. 避免空的src和href。
  4. 用智能的事件处理器（事件委托）。
  5. DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
  6. 不要一条条地改变样式，而要通过改变class，一次性地改变样式。
  7. 尽量使用离线DOM，而不是真实的网页DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。
  8. 使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染
• 关于css
  1. 避免使用CSS表达式
  2. 选择<link>舍弃@import
  3. 避免使用滤镜
• 关于请求
  1. 尽量减少HTTP请求数。
  2. 使用缓存技术。
  3. 使用CDN（内容分发网络），网站上静态资源即css、js全都使用cdn分发，图片亦然。
  4. 给Cookie减肥
  5. 避免重定向
  6. 权衡DNS查找次数，减少主机名可以节省DNS查找时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。
• 关于文件
  1. 对文件压缩混淆。
  2. 把脚本放在底部，把样式表放在顶部。
  3. 把JavaScript和CSS放到外面，不要写在页面内。
  4. 按需加载。
  5. 合并文件。
• 关于图片
  1. 使用雪碧图。（小图标）
  2. 避免图片src属性为空。
  3. 不要在HTML中缩放图片。
  4. 更好的图片格式。
  5. 使用base64编码代替图片，css、svg、canvas或iconfont代替图片。

经验

平时项目中，我们可以根据上述经验来对项目进行优化。剩下的可以不断优化自己的代码。

参考

• 网页性能管理详解
• CDN与DNS知识汇总
• 前端性能优化指南