携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情 >>
资源篇
- cache-control 请求头合理利用本地缓存
- gzip压缩
- html、css、js混淆与压缩
- webpack split-chunk 合理利用浏览器机制并行加载
- 图片资源压缩,在不需要透明背景时使用jpg而不是png，利用在线压缩网站对原图再次进行压缩，如tinyPNG
- css 雪碧图(精灵图)将网站上用到的一些图片整合到一张单独的图片中，从而减少网站HTTP请求数量。原理为：设定整张雪碧图可示区域，将想要显示的图标定位到该处（左上角）；缺点：整合图片比较大时，一次加载比较慢。不支持响应式缩放或者说对大幅度缩放不支持。
- webpack配置小于xx大小的图片在构建时以base64内联的形式处理，减少http请求，缺点是因为是base64所以浏览器无法缓存当前图片，当图片过大，比如大于1M时，base64的长度会显著增加，影响性能
- 图标能用icon就不用图片，能用svg就不用图片，因为svg的大小相对更小，而且svg是矢量图形
浏览器渲染篇
一般的，浏览器渲染是从上至下，从左至右，依次解析执行，根据这个特性，我们在资源引入上可以进行处理
-
合理利用prefetch和preload
-
样式文件写在body内容之上，因为浏览器会根据样式触发回流和重绘
-
js文件加载与执行解析不同步，写在body以下不会影响js文件加载
-
同域名的资源文件请求有上限，并行加载时需考虑多cdn源
-
外部link标签引入的css会引起页面的阻塞，css加载会阻塞之后js代码的执行。css加载不会阻塞DOM的解析，
-
同样的js的加载也会阻塞css的解析执行
-
阻塞不影响针对外部资源的请求的执行，因为浏览器机制就是先把要用到的资源请求回来，至于说回来怎么执行，由浏览器内部按规则进行调度
-
对资源进行懒加载，提升性能，比如大数量表格的处理，就是判断可视区域，进行虚拟滚动，动态加载所需展示的内容
-
图片资源也可以进行懒加载，可以通过设置占位符或默认占位图的形式，判断图片是否快要进入可视区再动态进行加载，以提高首屏渲染速度
