优化网页的三部曲，你知道吗？

一，关头本钱字节数

字节数也就是我平日说的增加本钱文件（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的实施。

下面针对机能优化的三步给出了照顾的措置经营，这其实不是全数，此后大年夜大年夜家在思虑前端机能优化师可以从这三个基准偏向解缆。