Web前端入门必知——浏览器基础知识

　　浏览器的主要功能：

　　是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置。

　　浏览器的主要组件包括：

　　1. 用户界面 —— 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

　　2. 浏览器引擎 —— 用来查询及操作渲染引擎的接口。

　　3. 渲染引擎 —— 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

　　4. 网络 —— 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

　　5. UI后端 —— 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

　　6. JS解释器 —— 用来解释执行JS代码。

　　7. 数据存储 —— 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

　　老问题，大家面试的时候应该都被问过这种问题，网上的答案千篇一律，我们来更深入的了解一下。

　　用户输入url，例如其中http为协议，为网络地址，及指出需要的资源在哪台计算机上。一般网络地址可以为域名或IP地址，此处为域名。使用域名是为了方便记忆，一串数字哦我们很容易会记错，但是为了让计算机理解这个地址还需要把它解析为IP地址。

　　如果访问过该url，会先进入浏览器缓存中查询是否有要请求的文件（浏览器缓存是在本地保存资源副本）。

　　当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求，而不会再去源服务器重新下载。如果缓存查找失败，就会进入网络请求过程了。

　　在network中会标注该请求是在服务器中请求的还是浏览器缓存中的。

　　一条域名的DNS记录会在本地有两种缓存：浏览器缓存和操作系统(OS)缓存。

　　1.2.1 浏览器缓存 – 浏览器会缓存DNS记录一段时间。一般是2分钟到30分钟不等。查找浏览器缓存时会按顺序查找: Service Worker-->Memory Cache-->Disk Cache-->Push Cache。

　　Service Worker：

　　是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

　　Memory Cache：

　　内存中的缓存，主要包含的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快，内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

　　Disk Cache：

　　存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

　　在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache。

　　Push Cache：

　　Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

　　1.2.2系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用获得系统缓存中的记录（windows里是gethostbyname）。

　　1.2.3 路由器缓存** – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。

　　1.2.4 ISP DNS 缓存** – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。

　　1.2.5 递归搜索** – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

　　如果没有访问过该url，就会进行DNS域名解析了。

　　IP地址和域名一样都是用来做网络标识的，域名和 IP 地址是一一对应的映射关系。

　　DNS：Domain Name System域名系统（基于RFC规范解释），是万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。

　　DNS解析过程：

　　1.3.1 用户主机上运行着DNS的客户端，就是我们的PC机或者手机客户端运行着DNS客户端。

　　1.3.2 浏览器将接收到的url中抽取出域名字段，就是访问的主机名，比如并将这个主机名传送给DNS应用的客户端.

　　1.3.3 DNS客户机端向DNS服务器端发送一份查询报文，报文中包含着要访问的主机名字段（中间包括一些列缓存查询以及分布式DNS集群的工作）。

　　1.3.4 该DNS客户机最终会收到一份回答报文，其中包含有该主机名对应的IP地址。

　　1.3.5 一旦该浏览器收到来自DNS的IP地址，就可以向该IP地址定位的HTTP服务器发起TCP连接。

　　可能域名下有多个端口号，对应着不同的网络功能，所以在DNS解析之后，浏览器还会获取端口号。

　　TCP连接，就是耳熟能详的三次握手好朋友，四次挥手是路人。

　　TCP连接过程：

　　1.5.1 服务端通过socket，bind和listen准备好接受外来的连接，此时服务端状态为Listen。

　　1.5.2 客户端通过调用connect来发起主动连接，导致客户端TCP发送一个SYN（同步）字节，告诉服务器客户将在（待建立的）连接中发送的数据的初始序列号，客户端状态为SYN_SENT。

　　1.5.3 服务器确认（ACK）客户的SYN，并自己也发送一个SYN，它包含服务器将在同一连接中发送数据的初始序列号。

　　1.5.4 客户端确认服务的ACK和SYN，向服务器发送ACK，客户端状态ESTABLISHED。

　　1.5.5 服务器接收ACK,服务器状态ESABLISHED。

　　既然我们握手成功了，连接到了Web服务器，浏览器会根据解析到的IP地址和端口号发起HTTP请求。

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

　　1.6.2 服务器接收到浏览器传输的数据后，开始解析接收到的数据，服务器解析请求里面的内容时知道客户端浏览器要访问的是应用里面的哪这个Web资源，然后服务器就去读取这个Web资源里面的内容，将读到的内容再以Stream(流)的形式传输给浏览器。

　　TCP连接中止过程：

　　1.7.1 某端首先调用close，成为主动关闭端，向另一端发送FIN分节，表示数据发送完毕，此时主动关闭端状态FIN_WAIT_1；

　　1.7.2 接收到FIN的是被动关闭端，FIN由TCP确认，先向主动关闭端发送ACK，作为一个文件结束符传递给接收端应用进程（放在已排队等候该应用进程接收到的任何其他数据之后），因为FIN的接收意味着接收端应用进程在相应连接无额外数据可接收，接收端状态CLOSE_WAIT；主动关闭端接收到ACK状态变为FIN_WAIT_2；

　　1.7.3 一段时间后，接收端接收到这个文件结束符的应用进程调用close关闭套接字，向主动关闭端发送FIN，接收端状态为LAST_ACK；

　　1.7.4 主动关闭端确认FIN，状态变为TIME_WAIT，并向接收端发送ACK，接收端接收到ACK关闭TCP，而主动关闭端一段时间后也关闭TCP；

　　当浏览器获得一个html文件时，会自上而下的加载，并在加载过程中进行解析渲染。

　　解析：

　　1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

　　2. 将CSS解析成 CSS Rule Tree 。

　　3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

　　4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。

　　再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点

　　渲染：

　　1. 接收服务器返回html文件。

　　2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件，浏览器又发出CSS文件的请求，服务器返回这个CSS文件。