网络性能优化措施归结为三大方面:减少请求数、减小请求资源体积、提升网络传输速率。
网络传输性能优化
浏览器缓存
使用 http2
资源打包压缩
js 压缩
html 压缩
css 压缩
开启 gzip
图片资源优化
不要在 html 里缩放图像
使用雪碧图(css sprite)
使用字体图标(iconfont)
使用 webp
图片懒加载和预加载
使用 cdn
使用预加载
页面渲染性能优化
重排与重绘
其他优化
pc 端
移动端
前后端同构
关于前端工程化
工程化即系统化、模块化、规范化的一个过程。
工程化要解决的是如何提高整个系统生产效率。如何提高编码、测试、维护阶段的生产效率
1. 合理的开发流程及开发规范,包括代码规范、模块化组件化规范(分治)等(提高生产力)
2. 一套自动化代码质量检测方案(提高系统可靠性)
3. 一套自动化及高度适应性的项目 发布/部署 方案(提高系统的伸缩性及灵活性)
4. 极致的性能优化,包括减少冗余的接口请求及资源请求、提高缓存命中率等,简言之就是站点的打开及运行速度(更好的用户体验)
提高生产力的http2.0
新增了几个关键特性:
多路复用:多个http请求共用一个tcp链接
HEAD压缩
服务端推送