作为网盾的开发人员，接触最多必然是浏览器，但浏览器相关的机制你真的了解吗？

代码是怎样在浏览器中运行的？怎么实现布局的渲染？浏览器的事件触发是什么？今天我们将深入探讨一下相关知识。

...

一、浏览器输入的URL和显示页面有什么关系？

在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位器），它是WWW的统一资源定位标志，就是指网络地址。

1.浏览器输入URL

用户输入URL，像wangdun.cn，其实回车你会发现网页将它签名的协议省略掉了，留下的只是网址，但这一个简单的地址就可以在你的计算机上显示出你需要的资源。一般网络地址可以分为域名或IP地址，这里说的是域名。域名的使用更方便记忆，相反IP地址一串数字很容易记错，但是对于计算机来说我们看到的域名在它眼里就是解析的IP地址。

...

2.浏览器的缓存

一般网页的访问都会经过URL，回车之后会在浏览器的缓存中查看是否存在相同的请求文件记录（相当于是保存在本地的副本资源）。

...

浏览器发现已有请求的资源，会发起拦截请求，返回本地缓存的资源，并自动结束请求，不会再去源网盾服务器下载。当然了，缓存失败，会重新进入网络请求过程。

专业的技术开发人员，可以在网页文件的netwrok中看到浏览器缓存的信息。

一条域名的DNS记录会在本地以两种方式缓存：浏览器缓存和操作系统（OS）缓存。

2.1 浏览器缓存：

浏览器会缓存DNS一段时间。2-30分钟不等，查找浏览器缓存的顺序为：Service Worker --> Memory Cache --> Disk Cache --> Push Cache。

Service Worker ：

运行在浏览器后的独立线程（可以算半个大佬），可以实现缓存的功能。使用Service Worker ,传输协议必须是HTTPS。因为Service Worker 中涉及到请求拦截，需要该协议来保证它的安全。当然了，它的缓存与其他浏览器内的缓存机制存在一定的差异，支持自己控制，怎样缓存、读取方式，缓存时间性。

Memory Cache：

存在与内存中的缓存，包括了当前页面已获取的资源，如已下载的样式、脚本、图片等。读取速度比磁盘快，虽然读取高效，但是持续性较短，会随着进程的释放而释放。一旦我们关闭Tab页面，内存中的缓存也就被释放了。

...

Disk Cache ：

比Memory Cache的存储时效长，存在硬盘中，读取速度慢，但都可以存在盘中。

它的覆盖面最广，可以根据HTTP Herder中的字段判断需要缓存的内容、无效的资源、过期的请求等。跨站点使用，一旦硬盘缓存了相同地址的资源，不会再次请求Disk Cache缓存了大部分数据。

Push Cache：

又称推送缓存，是HTTP/2中的内容，除非以上三种缓存出现故障才会用它，相当于是一个备用的。存在与会话（session）中，会话一结束就会自动停止，缓存时间较短，像在Chrome中只有4分钟左右，严格执行HTTP中的一系列缓存指令。

2.2 系统缓存：

需要的记录在浏览器缓存中没有找到的话，会自动调用系统缓存中的记录（gethostbyname）。

2.3 路由器缓存：

路由器会收到前面的相关查询请求，一般有自己独立的DNS缓存机制。

2.4 ISP DNS 缓存：

检查ISP缓存中的DNS服务器，一般这里会有相应的缓存记录。

2.5 递归搜索：

ISP的网盾DNS服务器从根域名服务器开始搜索，采用的递归搜索方式，一般DNS服务器的缓存中会有.cn域名服务器中的域名，分配顶级服务器匹配就不需要了。

3.DNS域名解析：

没有用过URL，就需要DNS域名解析了。

IP地址和域名像一个网络中的标识，属于一种一一对应的映射关系。

DNS：域名系统（英文：Domain Name System，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。

域名解析过程：

用户运行着DNS客户端，主机PC端或者手机客户端； 浏览器接收到URL中的域名字段、访问的主机名，如www.wangdun.cn，传送给DNS的客户端； DNS服务器收到一份查询报文，报文中有主机名字段； DNS客户机收到回答报文，包含主机名对应的IP地址； 浏览器收到DNS回应的IP地址，会立即定位并发起TCP连接。

4.获取端口号：

域名可能对应多个端口号，有不一样的网络功能，DNS解析后，浏览器会获取端口号。

5.创建TCP连接：

TCP连接，三次握手好朋友，四次挥挥陌生人。

6.HTTP请求：

既然愿意跟我握手，就代表我可以跟Web服务器沟通，会根据解析的IP地址和端口号发起HTTP请求。

6.1 服务器收到http协议，在发送请求的过程中，浏览器会向Web服务器以Stream(流)的形式传输数据，告诉Web服务器要访问服务器里面的哪个Web应用下的Web资源。

6.2 浏览器将数据发送给服务器后，就会对数据进行一个解析，可以根据服务器解析请求里的内容判断客户端需要的Web资源，服务器会根据这个相应请求获取内容，读到的内容会以Stream(流)的形式传输给浏览器。

7.关闭TCP

传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793 定义。

TCP连接中断过程：

先调用close，关闭后向另一端发送FIN分节，这就代表数据发送成功，会自动关闭FIN_WAIT_1； FIN属于被动关闭端，由TCP确认，先向主动关闭端发送ACK，作为一个文件结束符传递给接收端应用进程（放在已排队等候该应用进程接收到的任何其他数据之后），由于FIN的接收意味着接收端应用进程在相应连接无额外数据可接收，接收端状态CLOSE_WAIT；主动关闭端接收到ACK状态变为FIN_WAIT_2； 等待一段时间后，会有一个文件结束符的应用进程发送给接收端，与此同时会调用close，关闭端主动发送FIN，接收端状态为LAST_ACK； 关闭端主动FIN，TIME_WAIT为最新状态，接收端会收到ACK命令关闭TCP。

8.浏览器渲染

浏览器获得HTML文件，会自动加载，在加载过程中解析渲染。

浏览器会自动解析HTML成一个DOM树，这个过程属于一个深度遍历的过程；下一个兄弟节点的构建前提是当前节点的所有子节点构建完成； CSS解析成 CSS Rule Tree ； 根据DOM树和CSSOM来创建Rendering Tree； 有了Render Tree，浏览器就掌握了网页中农的节点、各个节点的CSS定义以及他们的从属关系； 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。