关于前端的性能优化，每次提到这个词大家都有很多idea。现在静下来思考下我们用到的各种手段最终可以归纳为三步
一，关键资源字节数
字节数也就是我通常说的减少资源文件（js,css,image,video...）的大小
1，压缩
前端使用uglify混淆压缩
后端开启gzip
对图片进行压缩，使用压缩比例更高的格式（webP）
2，缓存
强缓存（http状态码：200），不用请求服务器直接使用本地缓存
协商缓存（http状态码：304），使用时先请求服务器若被告知缓存没过期则使用本地缓存，不用下载资源
使用localstorage对数据进行存储
3，针对首屏优化
对非关键资源延迟加载、异步加载，减少首屏资源大小
二，关键资源连接数
1，合并请求
使用http2.0的多路复用合并请求
配置combo，在无法使用http2.0的情况下作为一种合并资源请求的手段
2，减少图片请求数
使用spite图
使用svg-symbol
3，针对一些场景采用css、js内联的方式
4，使用强缓存减少了一次服务器请求
5，非关键资源延迟、异步加载，减少了首屏资源连接数
三，关键渲染路径
网上有张关于页面渲染路径的图，这里我就不放了，大家有兴趣自己百度下
1，bigpipe分块输出
这里主要是因为要完成一整个页面的输出后端需要处理很多个任务，我们可以将这些多个任务进行分块，谁先完成谁就先输出，最终通过JS回填的方式输出DOM节点。这种方式主要解决了直出页面阻塞的问题
2，bigrender分块渲染
常规的手段就是采用前端模板渲染页面，针对首屏时间主要减少了首次构建DOM树时的节点数
3，针对reflow，repaint，composit路径处理
4，涉及到动画时关于layer的概念render layer、graphics layer
5，css放在头部、js放底部避免阻塞DOM树的构建，
关于css、js的位置对于页面渲染的影响大家可以关注下相关的文章。
核心：css资源不会阻塞DOM树的构建但会阻塞DOM的渲染，JS会阻塞DOM树的构建，CSS会阻塞JS的执行
总结
上面针对性能优化的三步给出了相应的解决方案，这并不是全部，以后大家在思考前端性能优化师可以从这三个基准方向出发
来源链接：https://juejin.im/post/5a1b9cc051882560e35659e6
著作权归作者所有。如有侵权请联系小编删除。
网友评论