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