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加速静态资源访问

你可能感兴趣的:(Web性能优化)