浏览器工作原理

浏览器的工作原理

———— url到网页加载完成的过程

在浏览器地址栏输入url并回车后，浏览器进行DNS查找:

将域名转化为真实的ip地址

根据IP找服务器

② 浏览器跟服务器建立连接: TCP握手机制

现在大部分的服务器连接都基于https协议的，那么会多一步TLS握手，建立加密的隧道，保证数据不被监听和篡改。

③ 浏览器发起请求(http/https)获取服务器响应

受TCP连接的限制，最先获取的是前14kb的数据(对网站来说就是html)，再慢慢增加传输速度。

④ 浏览器渲染网页: (五步) 关键渲染路径

(一) 解析html, 构建DOM树DOM树是html文档在浏览器中的对象表示，可用javascript来操作。

解析是顺序执行的，并且只有一个主线程解析。

默认碰到script标签是要暂停主线程，等执行完里面代码再继续解析html的。

但对于图片 或 css文件 或设置了async / defer的js文件，则不会影响主线程，而是会异步地加载。

另外，浏览器有个预扫描线程，会异步下载字体，css和js，这个过程是异步的，不会影响主线程。

(二) 构建CSSOM树

CSSOM (CSS Object Model)是CSS在浏览器中的对象表示。

(三) 形成渲染树

浏览器从根节点开始，把CSSOM中的样式合并到DOM中的每个节点上，形成渲染树 (Render Tree)。

(四) 布局

浏览器会根据样式计算每个可见节点(宽高和位置等)，对所有节点进行布局和规划。

对于图片这类节点，如果没有指定宽高，浏览器会忽略它的大小，等图片加载完成之后，浏览器会重新计算受影响的节点的大小和位置，这个过程叫回流 (Reflow)。

(五) 绘制: 在第一次布局后就执行

如果发生了回流，浏览器还会发生重绘。

在绘制期间，也可能会发生组合。(渲染期间产生新图层，如出现下面图列举中其一的情况)

最后，加载并执行异步的js。

二、总结

（主体-浏览器， 客体-服务器）

DNS查找 - URL 域名 IP 服务器

建立连接 - TCP握手  TLS握手

发起请求获取服务器响应 - 14kb

渲染网页: 关键渲染路径（3颗树 布局 绘制）

添加：

 URL一般指统一资源定位系统。 统一资源定位系统（uniform resource locator;URL）是因特网的万维网服务程序上用于指定信息位置的表示方法。作为万维网的地址。

2.

DNS Internet 上的计算机都通过IP地址进行通讯，但是我们在访问网站时，通常不会通过IP地址（255.255.255.255）的方式，而是输入域名（如 baidu.com），然后由DNS查询服务器的IP地址，因此域名系统 (DNS) 是的工作原理和通讯录相似，DNS 服务器将域名转换为IP地址。人们通过例如 baidu.com 或 163.com 等域名访问网站内容。

3.

TCP协议就是进程间数据通讯传输协议。

Tcp三次握手

TCP特点：tcp有三次握手机制、数据传输安全，数据丢失有重传机制、发送和接收数据后端到端的确认和点到点的传输。tcp三次握手机制：以A,B代表两台服务器，第一次握手：A向B发送一个连接请求，B收到请求后第一次握手结束；第二次握手：B收到A的请求后进行一个+1处理，然后发给A，A收到后完成第二次握手；第三次握手：A收到B的加密包后在进行一个+1处理后在发给B，B收到后完成三次握手；三次握手完成后就建立一个安全通道，然后就可以进行数据传输。

例:你周天要去找你朋友玩，你需要提前给你朋友打电话说你要去找他玩，电话接通后你朋友听到你说你要去找他玩后这算第一次握手；你朋友问你那天过来,你听到后这就是第二次握手；然后你回答周天过去，你朋友收到后完成第三次；如果只有2次握手会造成资源的浪费，如没有第三次你朋友就不知道你那天去找他玩，换成服务器来说它就会一直在等你的答复，这样会造成资源浪费。

4.

dom树的构建

DOM 的全称是：文档对象模型(Document Object Model)，在 HTML 解析时，解析器会把解析完的 HTML转化成 DOM 对象，再进一步构建 DOM 树

cssom树的构建

当 CSS 下载完，CSS 解析器就开始对 CSS 进行解析，把 CSS 解析成 CSS 对象，然后把这些 CSS 对象组装成一颗 CSSOM 树

5.