优化网页加载速度方法

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。// 部分脚本会阻塞页面的加载
DOM树构建完成。//DOMContentLoaded 事件
加载图片等外部文件。
页面加载完毕。//load 事件

浏览器下载HTML文件并开始解析DOM。
遇到样式表文件link[rel=stylesheet]时，将其加入资源文件下载队列，继续解析DOM。
遇到脚本文件时，暂停DOM解析并立即下载脚本文件。
下载结束后立即执行脚本，在脚本中可访问当前<script>以上的DOM。
脚本执行结束，继续解析DOM。
整个DOM解析完成，触发DOMContentLoaded事件。

资源文件下载队列。样式表、图片等资源文件的下载不会暂停DOM解析。浏览器会并行地下载这些文件，但通常会限制并发下载数，一般为3-5个。可以在开发者工具的Network标签页中看到。

执行脚本文件前，浏览器可能会等待该<script>之前的样式下载完成并渲染结束。

将小图标合并成sprite图或者iconfont字体文件 : 合并图标，减少网络请求
用base64减少不必要的网络请求
图片延迟加载
JS/CSS按需打包
延迟加载ga统计
等等...

JS/CSS/HTML压缩
gzip压缩
JS/CSS按需加载
图片压缩，jpg优化
webp优化 & srcset优化
等等...