网页加载速度优化方案

一、网页加载流程

1. 解析 HTML 结构
2. 加载样式表和外部脚本
3. 解析并执行脚本代码（部分脚本会阻塞页面加载）
4. DOM 树构建完成（DOMContentLoaded 事件）
5. 加载图片等外部文件
6. 页面加载完毕（load 事件）

二、方式

减少请求数量

1. 使用雪碧图（CSS Sprite）或者 Iconfont 字体文件
2. 使用 base64 编码小图片减少网络请求
3. 图片懒加载
4. js 和 css 代码按需打包
5. 合理使用预加载，同步加载，延迟加载和异步加载

减小请求大小

1. js / css / html 压缩
2. gzip 压缩
3. js / css 按需加载
4. 图片压缩
5. 使用 WebP 优化图像
6. 使用 srcset 优化