浏览器渲染原理-浏览器渲染过程

一.进程与线程

• 进程是操作系统资源分配的基本单位，进程中包含线程。
• 线程是由进程所管理的。为了提升浏览器的稳定性和安全性，浏览器采用了多进程模型。

浏览器中的（5个）进程

• 浏览器进程：负责界面显示、用户交互、子进程管理，提供存储等。
• 渲染进程：每个也卡都有单独的渲染进程，核心用于渲染页面。
• 网络进程：主要处理网络资源加载(HTML、CSS、JS等)
• GPU进程：3d绘制,提高性能
• 插件进程： chrome中安装的一些插件

二.从输入URL到浏览器显示页面发生了什么?

用户输入的是关键字还是URL？ 如果是关键字则使用默认搜索引擎生产URL

1.浏览器进程的相互调用

• 在浏览器进程中输入url地址开始导航。并准备渲染进程
• 在网络进程中发送请求，将响应后的结果交给渲染进程处理
• 解析页面，加载页面中所需资源
• 渲染完毕，展示结果

我们开始细化每一步流程，并且从流程中提取我们可以优化的点。

2.URL请求过程

• 浏览器查找当前URL是否存在缓存，如果有缓存、并且缓存未过期，直接从缓存中返回。
• 查看域名是否已经被解析过了，没有解析过进行DNS解析将域名解析成IP地址，并增加端口号
• 如果请求是HTTPS，进行SSL协商
• 利用IP地址进行寻址，请求排队。同一个域名下请求数量不能多余6个。
• 排队后服务器创建TCP链接 （三次握手）
• 利用TCP协议将大文件拆分成数据包进行传输(有序传输)，可靠的传输给服务器（丢包重传），服务器收到后按照序号重排数据包 （增加TCP头部，IP头部）
• 发送HTTP请求（请求行，请求头，请求体）
• HTTP 1.1中支持keep-alive属性,TCP链接不会立即关闭，后续请求可以省去建立链接时间。
• 服务器响应结果（响应行，响应头，响应体）
• 返回状态码为301、302时，浏览器会进行重定向操作。（重新进行导航）
• 返回304则查找缓存。（服务端可以设置强制缓存）

通过network Timing 观察请求发出的流程：

• Queuing: 请求发送前会根据优先级进行排队，同时每个域名最多处理6个TCP链接，超过的也会进行排队，并且分配磁盘空间时也会消耗一定时间。
• Stalled :请求发出前的等待时间（处理代理，链接复用）
• DNS lookup :查找DNS的时间
• initial Connection :建立TCP链接时间
• SSL: SSL握手时间（SSL协商）
• Request Sent :请求发送时间（可忽略）
• Waiting(TTFB) :等待响应的时间，等待返回首个字符的时间
• Content Dowloaded :用于下载响应的时间

蓝色：DOMContentLoaded:DOM构建完成的时间

红色：Load:浏览器所有资源加载完毕

本质上，浏览器是方便一般互联网用户通过界面解析和发送HTTP协议的软件

3.HTTP发展历程

• HTTP/0.9 在传输过程中没有请求头和请求体，服务器响应没有返回头信息，内容采用ASCII字符流来进行传输 HTML
• HTTP/1.0 增加了请求头和响应头，实现多类型数据传输
• HTTP/1.1 默认开启持久链接，在一个TCP链接上可以传输多个HTTP请求 ， 采用管线化的方式（每个域名最多维护6个TCP持久链接）解决队头阻塞问题 （服务端需要按顺序依次处理请求）。完美支持数据分块传输（chunk transfer），并引入客户端cookie机制、安全机制等。
• HTTP/2.0 解决网络带宽使用率低 （TCP慢启动，多个TCP竞争带宽，队头阻塞）采用多路复用机制（一个域名使用一个TCP长链接，通过二进制分帧层来实现）。头部压缩（HPACK）、及服务端推送
• HTTP/3.0 解决TCP队头阻塞问题， 采用QUIC协议。QUIC协议是基于UDP的 （目前：支持和部署是最大的问题）
• HTTP明文传输,在传输过程中会经历路由器、运营商等环节，数据有可能被窃取或篡改 （安全问题）

对比HTTP/1.1 和 HTTP/2 的差异

4.渲染流程

• 1.浏览器无法直接使用HTML，需要将HTML转化成DOM树。（document）
• 2.浏览器无法解析纯文本的CSS样式，需要对CSS进行解析,解析成styleSheets。CSSOM（document.styleSeets）
• 3.计算出DOM树中每个节点的具体样式（Attachment）
• 4.创建渲染（布局）树，将DOM树中可见节点，添加到布局树中。并计算节点渲染到页面的坐标位置。（layout）
• 5.通过布局树，进行分层 （根据定位属性、透明属性、transform属性、clip属性等）生产图层树
• 6.将不同图层进行绘制，转交给合成线程处理。最终生产页面，并显示到浏览器上 (Painting,Display)

查看layer并对图层进行绘制的列表