【小记】浏览器完整的渲染过程

1. 输入url，发送请求

2. 加载整个html文件

3. 解析html，并构建DOM树

• js是单线程的，浏览器是多线程的：有的负责加载资源，有的线程负责执行脚本，有的负责渲染页面

• 浏览器按照从上向下的原则解析整个html标签

• 解析遇到link，script、img标签时，浏览器会向服务器发送请求资源

  script的执行会阻塞html解析，其他下载线程以及渲染线程

4. 解析css，构建CSS树

• css的加载和解析不会阻塞html的解析，但会阻塞渲染的
• img的加载不会阻塞html的解析，但img加载后并不会渲染，而是会等到渲染树生成后，才和渲染树一起渲染出来。未下载完的图片需要下载完才渲染。

5. 将两者结合，生成渲染树

6. Layout（重排）

计算出每个节点的位置和形状（很耗性能）

7. painting（重排）

浏览器绘制元素的样式、颜色、背景等（很耗性能）

8. 渲染到页面上

前端加载优化

1. 使用外联的css和js，让浏览器缓存，减少http请求。
2. 按需加载：webpack打包思路就是从程序逻辑入手：入口文件=》分析代码=》找出依赖=》打包，这样代码中不引用的模块就不可能被打进包里，有效减少体积。
3. 压缩html，css，js：减少资源大小
4. 图标采用base64：减少http请求
5. 图标采用雪碧图（svg，font-icon）：减少http请求，减少资源大小