[web前端性能优化]性能优化只有三步，你了解吗

关于前端的性能优化，每次提到这个词你们都有不少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的执行

总结

上面针对性能优化的三步给出了相应的解决方案，这并非所有，之后你们在思考前端性能优化师能够从这三个基准方向出发