浏览器渲染原理-浏览器渲染过程-灵析社区

前端码农

一.进程与线程

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

浏览器中的（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并对图层进行绘制的列表


阅读量：2038

点赞量：0

收藏量:0