浏览器 - 从输入URL到页面加载的过程

主干过程：

1. 从浏览器接受URL到发送网络请求线程（多进程的浏览器、多线程的浏览器内核、解析URL、网络请求单独线程等）
2. 开启网络线程到发出一个完整的http请求（DNS解析为IP、TCP/IP请求、五层协议）
3. 从服务器接受到请求到对应后台接受到请求（负载均衡、后台处理）
4. 后台和前台的http交互（跨域、HTTP报文结构、cookie及优化、gzip压缩、长连接与短连接、http2.0、https）
5. 缓存问题（强缓存与弱缓存、缓存头部、头部的区别）
6. 解析页面流程（HTML解析、DOM树构建、CSS生成规则、渲染树构建、渲染、简单层与复合层等）
7. CSS可视化格式模型（包含块Containing Block、控制框Controlling Box、BFC、IFC等）
8. JS引擎解析过程（JS解释阶段、JS预处理阶段、JS执行阶段、回收机制）

1、首先需要了解浏览器的进程和线程概念，在基础知识中已做基本了解。对URL进行解析，URL一般包括：

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

      网络请求需要开辟单独的线程，从URL解析到http协议，会建立一个网络线程处理资源的下载。浏览器会根据解析得到协议，请求资源。

2、开启网络线程到发出一个完整的http请求，包括：DNS查询，TCP/IP请求构建，五层因特网协议栈等

域名解析大致流程：

• 如果浏览器有缓存，直接使用浏览器缓存，否则使用本机系统缓存，再没有的话就是用host；

• 如果本地没有，就向dns域名服务器查询（中间可能会经过路由，也有缓存等），查询到对应的IP；

DNS解析是很耗时的，因此如果解析域名过多，会让首屏加载变得过慢，可以考虑dns-prefetch优化。dns-prefetch是一种DNS 预解析技术，当浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。DNS预解析是与页面加载是并行处理的，且不用影响到页面加载的性能。

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

• 三次握手经历：问-答&问-答；
• 四次挥手经历：主动关（可接受）-被动收-被动关-主动收；

五层因特网协议栈：客户端从应用层发送http请求，到传输层通过三次握手建立tcp/ip连接，再到网络层的ip寻址，再到数据链路层的封装成帧，最后到物理层的利用物理介质传输。

• 应用层(dns,http) DNS解析成IP并发送http请求；
• 传输层(tcp,udp) 建立tcp连接（三次握手）；
• 网络层(IP,ARP) IP寻址；
• 数据链路层(PPP) 封装成帧；
• 物理层(利用物理介质传输比特流) 物理传输（然后传输的时候通过双绞线，电磁波等各种介质）；

完整的OSI七层框架，多了会话层、表示层。表示层：主要处理两个通信系统中交换信息的表示方式，包括数据格式交换，数据加密与解密，数据压缩与终端类型转换等；会话层：它具体管理不同用户和进程之间的对话，如控制登陆和注销过程。

3、从服务器接受到请求到对应后台接受到请求

• 负载均衡：用户发起的请求都指向调度服务器（反向代理服务器，譬如安装了nginx控制负载均衡），然后调度服务器根据实际的调度算法，分配不同的请求给对应集群中的服务器执行，然后调度器等待实际服务器的HTTP响应，并将它反馈给用户；

• 容器接受到请求（如tomcat容器），对应容器中的后台程序接收到请求（如java程序），后台统一处理完后响应响应结果；

！！！一般有的后端是有统一的验证的，如安全拦截，跨域验证；如果这一步不符合规则，就直接返回了相应的http报文（如拒绝请求等）；当验证通过后，才会进入实际的后台代码，此时是程序接收到请求，然后执行（如查询数据库，大量计算等）；等程序执行完毕后，就会返回一个http响应包（一般这一步也会经过多层封装）；然后将这个包从后端发送到前端，完成交互；

4、后台和前台的http交互：前后端交互时，http报文作为信息的载体

http报文结构：报文一般包括了通用头部，请求/响应头部，请求/响应体。

通用头部：

Request Url: 请求的web服务器地址
Request Method: 请求方式（Get、POST、OPTIONS、PUT、HEAD、DELETE、CONNECT、TRACE）
Status Code: 请求的返回状态码，如200代表成功
Remote Address: 请求的远程服务器地址（会转为IP）

常用请求头部：

Accept: 接收类型，表示浏览器支持的MIME类型（对标服务端返回的Content-Type）
Accept-Encoding：浏览器支持的压缩类型,如gzip等,超出类型不能接收
Content-Type：客户端发送出去实体内容的类型
Cache-Control: 指定请求和响应遵循的缓存机制，如no-cache
If-Modified-Since：对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内，http1.0中
Expires：缓存控制，在这个时间内不会请求，直接使用缓存，http1.0，而且是服务端时间
Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存，http1.1中
If-None-Match：对应服务端的ETag，用来匹配文件内容是否改变（非常精确），http1.1中
Cookie: 有cookie并且同域访问时会自动带上
Connection: 当浏览器与服务器通信时对于长连接如何进行处理,如keep-alive
Host：请求的服务器URL
Origin：最初的请求是从哪里发起的（只会精确到端口）,Origin比Referer更尊重隐私
Referer：该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段)
User-Agent：用户客户端的一些必要信息，如UA头部等

常用响应头部：

Access-Control-Allow-Headers: 服务器端允许的请求Headers
Access-Control-Allow-Methods: 服务器端允许的请求方法
Access-Control-Allow-Origin: 服务器端允许的请求Origin头部（譬如为*）
Content-Type：服务端返回的实体内容的类型
Date：数据从服务器发送的时间
Cache-Control：告诉浏览器或其他客户，什么环境可以安全的缓存文档
Last-Modified：请求资源的最后修改时间
Expires：应该在什么时候认为文档已经过期,从而不再缓存它
Max-age：客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效
ETag：请求变量的实体标签的当前值
Set-Cookie：设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端
Keep-Alive：如果客户端有keep-alive，服务端也会有响应（如timeout=38）
Server：服务器的一些相关信息

长连接与短连接

tcp/ip层面的定义：

长连接：一个tcp/ip连接上可以连续发送多个数据包，在tcp连接保持期间，如果没有数据包发送，需要双方发检测包以维持此连接，一般需要自己做在线维持；
短连接：通信双方有数据交互时，就建立一个tcp连接，数据发送完成后，则断开此tcp连接；

在http层面：

http1.0中，默认使用的是短连接，浏览器每进行一次http操作就建立一次连接，任务结束就中断连接，譬如每一个静态资源请求时都是一个单独的连接；
http1.1起，默认使用长连接，使用长连接会有这一行Connection: keep-alive，在长连接的情况下，当一个网页打开完成后，客户端和服务端之间用于传输http的tcp连接不会关闭，如果客户端再次访问这个服务器的页面，会继续使用这一条已经建立的连接；

注意： keep-alive不会永远保持，它有一个持续时间，一般在服务器中配置（如apache），另外长连接需要客户端和服务器都支持时才有效。

http 2.0

http2.0与http1.1的显著不同点：

• http1.1中，每请求一个资源，都需要开启一个tcp/ip连接，所以每一个资源对应一个tcp/ip请求，由于tcp/ip本身有并发数限制，所以资源一多速度显著慢;

• http2.0中，一个tcp/ip请求可以请求多个资源，也就是说，只要一次tcp/ip请求，就可以请求若干个资源，分割成更小的帧请求，速度明显提升;

http2.0的一些特性：多路复用（即一个tcp/ip连接可以请求多个资源）、首部压缩（http头部压缩，减少体积）、二进制分帧、服务器端推送（服务端可以对客户端的一个请求发出多个响应，可以主动通知客户端）、请求优先级（如果流被赋予了优先级，它就会基于这个优先级来处理，由服务器决定需要多少资源来处理该请求）。

http3

https

https在请求前会建立ssl链接，确保接下来的通信都是加密的，无法被轻易截取分析。

对称加密&非对称加密：将公钥采用对称加密进行加密，解密后通过非对称加密进行传输？

参考：https://juejin.cn/post/6844903574535667719