浏览器从输入url到页面渲染的详细过程

目录

一、网页的渲染过程

二、页面合成图层

三、JavaScript运行原理

​

---

​

一、网页的渲染过程

1、浏览器输入一个url（域名）的过程

①输入域名 （检查语法错误，看缓存）

②看ip缓存，没有缓存就经过DNS解析转化为ip地址（如：192.168.11.97）

③三次握手，然后根据IP地址找到服务器（电脑主机）

④服务主机将资源返回给浏览器，浏览器再对资源进行解析

请求详情在这里如下，这里主要说渲染过程

（1）首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，
将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字
符，则对非法字符进行转义后再进行下一过程。
​
（2）浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新
的请求。
​
（3）下一步我们首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果
有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域
名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地
址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用
户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。
​
（4）当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源
端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给
数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，我们本机的 MAC 地址作为源 MAC 地址，目的 MAC 地
址需要分情况处理，通过将 IP 地址与我们本机的子网掩码相与，我们可以判断我们是否与请求主机在同一个子网里，如果
在同一个子网里，我们可以使用 APR 协议获取到目的主机的 MAC 地址，如果我们不在一个子网里，那么我们的请求应该
转发给我们的网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应
该为网关的地址。
​
（5）下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接
收到请求后向客户端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的
确认应答后，进入连接建立的状态，同时向服务器也发送一个 ACK 确认报文段，服务器端接收到确认后，也进入连接建立
状态，此时双方的连接就建立起来了。
​
（6）如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版
本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证
书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后
发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解
密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加
密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。
​
（7）当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行
解析，开始页面的渲染过程。

2、浏览器的渲染过程

• css和html解析

  ①拿到html文件之后，从上到下解析html，生成html结构的DOM树

  ②遇到link标签后，下载ccs文件（不会阻塞向下解析html）,解析css生成css规则树,称为CSSOM（Css Object Model）

  ③当有了DOM树和CSSOM树后,就将两个结合起来构建渲染树（Render Tree） css中有display：none的元素不会出现在渲染树中

  ④布局（layout）：布局是计算并确定呈现树中所有节点的宽高和位置信息，

  ⑤绘制（painting）：将每个节点绘制到屏幕上，浏览器将布局阶段计算的每个frame转化为屏幕上实际的像素点。

• script元素的解析

  ①在解析html的过程中，遇到script元素后，下载script脚本文件，并会阻塞DOM树的生成

  ②停止DOM树的构建，下载js代码并执行js脚本

  ③等到js脚本执行完毕后，继续解析HTML结构，继续构建DOM树

• 解析script元素阻塞DOM树构建的原因：

  • js可以操作DOM，等到构建好DOM树并且渲染好了再执行js代码，如果js代码里面有操作DOM的代码，那么就会造成回流和重绘，影响页面的性能
  • 所以再遇到script元素时，优先下载和执行js代码，再构建继续DOM树

• script解析机制问题

  现实开发中，脚本比html更重，处理时间长 如果造成页面阻塞，在下载并执行完js脚本之前，用户什么都看不到

• defer和async

  为了解决以上问题，script提供了defer和async这两个属性

  • defer属性

    • 脚本由浏览器来下载，并且不会阻塞DOM树的生成
    • 如果脚本提前被下载完，它会等待DOM树的构建，
    • 在DOMContentLoaded事件触发(dom树构建完成)之前执行defer代码（防止js代码中有操作DOM的代码，引发回流、重绘）(所以在defer代码里面可以操作DOM)
    • defer的js脚本会上到下顺序执行

  • async属性

    • 不会阻塞DOM树
    • 完全独立，下载完就执行，不能保证顺序，自己下载完就执行，不会等其他async代码
    • 不能保证在DOMContentLoaded事件的前面触发，所以应慎重操作DOM

2、回流

• 第一次确定节点的位置信息叫做布局，当节点位置发生改变之后再重新计算节点位置信息叫做回流（重排reflow）

• 回流会引起重绘

• 引起回流的情况:

  • DOM结构发生改变
  • 布局改变
  • 浏览器窗口改变
  • 调用了getComputedStyle方法获取尺寸位置信息

3、重绘

• 回流一定引起重绘

• 第一次渲染叫做绘制，之后的重新渲染叫做重绘

• 引起重绘的情况：

  • 修改背景颜色、文字颜色等样式等不影响其他元素的情况

3、注意

回流是一件很消耗浏览器性能的事情，尽量避免回流：

• 修改样式尽量选择一次性修改
• 避免频繁操作DOM
• 避免通过getcomputedStyle获取尺寸和位置等信息
• 可以对某些元素使用postion的fixed使它脱标(会引起回流，但是对其他元素没有影响，开销较小)

​

---

​

二、页面合成图层

1、特殊解析：composite合成

这是一种浏览器的优化手段

• 绘制过程中，标准流的内容会被绘制在同一图层内

• 而一些特殊的属性，会创建一个新的合成层，每个合成层都是单独渲染的（浏览器检查上选择更多按键选择layer可以查看）

  • 3D tansform
  • video、canvas、iframe
  • opacity+动画
  • position：fixed
  • animation或者transform设置了opacity、tansform
  • will-change：表示告诉浏览器将要做什么

⚠注意：分层确实能提高性能，但是每创建一个分层，浏览器就会消耗内存来管理分层，因此不能过度使用

​

---

​

三、JavaScript运行原理

1、浏览器内核

• webCore：解析、布局、渲染
• JavaScriptCore：解析执行js代码

2、V8引擎

源代码 ——解析成语法树 ——转化成字节码——二进制代码

• Parse

  将源代码解析为语法树

• Ignition

  这是一个解释器，将语法树转化成字节码

  • 函数值只用一次，就经过Ignition解释执行为字节码

• TurboFan

  这是一个编译器，可以将字节码编译成cpu能直接执行的机器码

  • 一个函数被多次调用，会被标记为热点函数，经过TurboFan转化为机器码，提高代码的执行性能
  • 如果函数在执行过程中类型发生改变，优化的机器码不能处理，也会转成字节码.

• 总体编译过程（编译原理）

  ①词法分析（识别关键字、字母、数字等单词）

  ②语法分析（单词组成语法树）

  ③语义分析（检查语义）

  ④中间代码生成（字节码在这生成）

  ⑤代码优化（优化代码、节省空间、时间、如删除空格等）

  ⑥目标代码生成（转化为绝对机器指令）