18 从输入URL到页面加载的过程？

1.从浏览器接收url到开启网络请求线程（可展开浏览器的机制及进程与线程的关系）

2.开启网络线程到发出一个完整的http请求（涉及到dns查询，tcp/ip请求，五层因特网协议栈）

3.从服务器接收到请求到对应的后台接收到请求（负载均衡、安全拦截、后台内部处理）

4.解析页面流程+资源外链的下载)

1.从浏览器接收url到开启网络请求线程（可展开浏览器的机制及进程与线程的关系）

1. 多进程的浏览器
2. 多线程的浏览器渲染进程
3. 解析URL
4. 网络请求都是单独的线程
5. 阶段总结

1-1 浏览器是多进程的

进程与线程的关系？

• 进程是cpu资源分配的最小单位
• 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程可以有多个线程）

浏览器包含哪些进程？

1. Browser进程：浏览器的主进程（负责协调、主控）
2. 第三方插件进程
3. GPU进程：用于3D绘制
4. 浏览器渲染进程(页面渲染、脚本执行、事件处理等都在这个进程)

1-2 多线程的浏览器渲染进程

• GUI渲染线程
• JS 引擎线程
• 事件触发线程
• 定时触发器线程
• 异步http请求线程

1-3 解析URL

• protocol 协议头，如http
• host 主机域名或IP地址
• port 端口号
• path 目录路径
• query 查询参数
• fragment 即#后的hash值，一般用来定位到某个位置

1-4 网络请求都是单独的线程

每次网络请求时都需要开辟单独的线程进行，譬如URL解析到http协议，就会新建一个网络线程去处理资源下载。

1-5 阶段总结

即解析url后新建一个网络线程去下载资源。

2.开启网络线程到发出一个完整的http请求（涉及到dns查询，tcp/ip请求，五层因特网协议栈）

1. DNS查询得到IP地址
2. TCP/IP 请求
3. 五层因特网协议栈

2-1 DNS查询得到IP地址

1. 如果有缓存就用缓存，顺序：浏览器缓存 =》本机缓存 =》 host。
2. 本地没有，想dns域名服务器查询。
3. dns解析很耗时，域名过多会导致首屏加载过慢，使用dns-prefetch 优化。

2-2 TCP/IP 请求

http本质就是TCP/IP请求，TCP将http长报文划分为短报文，通过三次握手与服务器端建立连接，进行可靠传输。

1. 三次握手
2. 四次挥手

2-3 五层因特网协议栈

从客户端发出http请求到服务器接收，中间会经过一系列的流程。即：

1. 应用层（dns，http）：DNS解析域名为IP并发送http请求
2. 传输层(tcp/udp)：建立 tcp 连接（三次握手）
3. 网络层（IP，ARP）:IP寻址
4. 数据链路层(PPP)：封装成帧
5. 物理层（利用物理介质传输比特流）：物理传输

3.从服务器接收到请求到对应的后台接收到请求（负载均衡、安全拦截、后台内部处理）

1. 负载均衡（反向代理）
2. 安全拦截（登陆验证等）
3. 后台内部处理（响应处理结果）

4.解析页面流程+资源外链的下载

4-1 解析页面流程

1. 解析HTML,构建DOM 树。
2. 解析 CSS，生成CSS规则树。
3. 合并DOM树和CSS规则，生成render 树。
4. 布局render树（Layout(布局)/reflow（回流），负责各元素尺寸、位置的计算）
5. 绘制render树，绘制页面像素信息。
6. 浏览器将各层信息发送给GPU,GPU将各层合成，显示在屏幕上。

4-2 资源外链的下载

1. CSS样式资源
2. JS脚本资源
3. img图片类资源

1.CSS样式资源

1. css下载时异步，不会阻塞浏览器构建DOM树
2. 但是会阻塞渲染，也就是在构建render树时，会等到css下载解析完毕后才进行。（这点与浏览器的优化有关，防止css规则不断变化，避免了重复的构建）

2.遇到JS脚本资源

1. 阻塞浏览器的解析，需等待脚本下载完成并执行后才会继续解析HTML。
2. defer（延迟执行）与 async（异步执行）

3.img图片资源类下载
直接异步下载，不会阻塞解析，下载完毕后直接用图片替换原有的src的地方。

4-3 loaded 和 DOMContentLoaded

• DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片。
• load事件触发时，页面上所欲的DOM、样式表、脚本、图片都已经加载完成了。