Web性能优化

Web性能优化方案有很多，最著名的的当然要属YSlow团队的“Web性能最佳实践和规则”。这里结合近年来前端的发展情况及目前主流技术，对Web性能优化的具体实施做一个简单的梳理和总结。

从大的方面来说，性能优化总体可以分为编程层面的优化和运维层面的优化。前者是开发者在编写代码过程中需要注意的一些事项，后者如今则更多是通过构建工具(这里以webpack为例)和服务器配置来完成。

编程开发层面

• HTML
  • 样式放页头(head内)，JS放页尾(body最后)
• CSS
  • 选择器优化：尽量使用类选择器(class)​
  • 使用CSS替代JS动画
  • 避免CSS表达式
• JavaScript
  • 高频事件防抖/限流
  • 使用事件委托

运维部署层面

• 压缩CSS、JS文件，缩短文件传输时间
  • 有损压缩：uglify (插件UglifyJS2)
  • 无损压缩：GZip (插件compression-webpack-plugin)
• 合并文件，减少HTTP请求
  • 合并CSS、JS：使用webpack打包
  • 合并小图标：使用CSS Sprite(插件spritesmith)
• 合理使用缓存
  • 浏览器缓存：使用外部JavaScript和CSS，并用通过文件hash控制缓存更新 (插件html-webpack-plugin设置hash为true)
  • 使用CDN加速静态资源访问