一、浏览器输入一个URL并enter时，发生了什么？
用户在浏览器输入一个URL，并按下enter键时，里面包含了非常多的技术细节。
第一，DNS解析：
用户输入的URL通常会是一个域名地址，直接通过域名是无法找到服务器的，因为服务器的本质上是一台拥有IP地址的主机。
需要通过DNS服务器来解析域名，并获取IP地址。
DNS会查找缓存，缓存的查找包括浏览器缓存、操作系统缓存、路由器缓存、ISP缓存，如果缓存中可以找到就可以直接使用对应IP。
如果缓存没有找到，就需要通过DNS递归解析，解析过程包括根域名服务器、顶级域名服务器、权威域名服务器。
最终找到IP地址，就通过IP地址连接服务器，并将IP地址缓存起来。
第二，TCP连接：
虽然我们发送的是HTTP请求，但HTTP协议属于应用层，是建立在TCP传输层协议之上的。
TCP的连接会经过三次握手，客户端发送SYN包，服务器接收后返回一个SYN-ACK包，客户端再次发送一个ACK包，完成握手过程。
TCP连接已建立，双方可以开始传输数据。
第三，HTTP请求：
一旦TCP建立连接成功，客户端就可以通过这个连接发送HTTP请求，包括请求方法、URI、协议版本、请求头、请求体。
服务器收到HTTP请求后，会处理这个请求，并返回一个HTTP响应。
HTTP响应包括状态码、响应头、响应内容
第四，HTML解析和CSS解析：
浏览器获取到html文件后就开始对文档进行解析，用来构建DOM Tree，在这个过程中还会遇到CSS文件和JS文件。
遇到CSS和JS的引用会继续向服务器发送HTTP请求，下载CSS、JS文件。
之后对CSS文件解析，解析出对应的CSSOM（CSS Object Model）。
第五，渲染render、布局layout、绘制paint：
DOM Tree和CSSOM可以共同构建Render Tree。
之后在Render Tree上运行布局layout计算每个结构的几何体。
再由浏览器将每个结构绘制到屏幕的像素点。
第六，composite合成：
这里还有一个优化手段，就是将元素绘制到多个合成图层中。
默认情况下，标准流中的内容是被绘制到同一个图层（Layer）中的。
可通过一些方法来创建新合成层，新图层可利用GPU加速绘制。比如3D Transforms/video/canvas/iframe/will-change/position fixed等。
分层虽然可以优化一些性能，但也是以内存管理为代价，所以还需谨慎。
这样用户最终就看到了浏览器中显示的网页，这个过程中还包含更多细节，比如重绘、回流的问题，JavaScript的执行过程、JS引擎的相关知识。
接下俩再对上面每一步展开说说:
DNS（Domain Name System）服务器解析过程：
缓存查找过程：
1.浏览器缓存：首先浏览器会检查它缓存中是否有这个域名的记录，之前访问过的网址解析结果可能会被缓存在浏览器中。
2.操作系统缓存，浏览器缓存中没有就在操作系统中寻找。
3.操作系统中也没有就会去本地网络的路由器寻找
4.路由器中也没有就去ISP（Internet service provider）寻找，它是你的互联网服务的提供商。
DNS递归解析过程：
如果在缓存的查找过程中都没有查到，那么DNS查询就变成了一个递归查询过程，涉及到多个DNS服务器。
首先DNS的查询请求会被发送到根域名服务器，根域名服务器是最高级别的DNS服务器，负责重定向到其所管理的顶级域名服务器。
顶级域名服务器（TLD）：根服务器会告诉你ISP的DNS服务器去查询哪个顶级域名服务器，顶级域名服务器掌握所有例如.com域名及其对应服务器的信息。
权威域名服务器：一旦你的DNS查询到了正确的顶级域名服务器，它会进一步定向到负责example.com的权威服务器，权威服务器中有该域名对应的具体IP地址。
最终IP地址会发送到你的电脑，并且在浏览器、操作系统、路由器、ISP的DNS缓存中留存。
TCP（Transmission Control Protocol，传输控制协议），用于建立两个端点之间的可靠会话。
三次握手：
1.客户端发送一个SYN（Synchronize）包到服务器以初始化一个连接。（随机序列号）
2.服务器收到SYN包后，返回一个SYN-ACK（Synchronize-Acknowledgment）包作为响应。（也生成一个随机序列号，并将客户端的序列号+1返回，表示确认收到）
3.客户端收到服务器的SYN-ACK包后，发送一个ACK（Acknowledgment）包作为回应。这个ACK包将服务器的序列号+1，并可能包含客户端准备发送的数据开始部分，
比如HTTP请求行 GET/HTTP/1.1 和 请求头，这被称为TCP快速打开。
HTTP（Hypertext Transfer Protocol，超文本传输协议）
TCP连接建立后，客户端就通过这个通道发送一个HTTP请求到服务器，这个请求包含了方法（GET、POST等）、URI（统一资源标识符）和协议版本，以及可能包含的请求头和请求体。
服务器收到HTTP请求后，处理并返回一个HTTP响应。响应通常包括状态码、响应头、响应内容。
TCP为HTTP提供了一个可靠的通道，确保数据正确、完整的从服务器传输到客户端。
在HTML和CSS解析这一步我们先来简单介绍一下浏览器内核：
- Webkit -> Blink: Google Chrome, Edge Blink是Webkit的分支，谷歌开发
- Webkit：Safari、移动端端浏览器（Android、IOS）由苹果主导的开源内核
- Gecko：Mozilla Firefox
- Trident：IE （微软已放弃）
- Presto：Opera 后来跟谷歌一样改用Blink
我们常说的浏览器内核指的是浏览器的排版引擎：
排版引擎（layout engine）也成为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或者样板引擎。网页下载之后是通过它来解析的。
简单流程图：
详细点的流程图：
默认返回index.html文件，所以解析HTML是所有步骤的开始。
解析HTML构建DOM树，遇到link元素引入CSS文件，浏览器就会下载对应文件，下载CSS文件不会影响DOM解析。下载完后解析CSS，生成CSS规则树也可成为CSSOM。
有了DOM树和CSSOM树后，就将两个结合来构建Render Tree。
注意，link元素不阻塞DOM树的构建，但阻塞Render树的构建。Render树和DOM树不是一一对应关系，如果display为none，就不会出现在Render树。
然后，在渲染树（Render Tree）上运行布局（Layout）以计算每个节点的几何体。
渲染树会展示有哪些节点以及它的样式，但不表示每个节点的尺寸、位置信息。布局就是确定呈现树中所有节点的尺寸和位置信息。
最后，浏览器将布局阶段计算出来的每个frame转为屏幕上的像素点。（绘制，Paint）
注意：布局树是渲染树的子集，不包含渲染树中元素的颜色、背景、阴影等信息。
这里引出知识点：回流（reflow）、重绘（repaint）
回流也称重排，对节点大小、位置的修改需要重新计算。
DOM结构发生改变、改变了宽/高、padding、font-size等、窗口resize、调用getComputedStyle方法获取尺寸、位置 都会引起回流。
第一次渲染内容叫绘制，之后重新渲染叫重绘。
比如修改背景色、文字颜色、边框颜色、透明度等。
回流一定会引起重绘，所以回流非常消耗性能。在开发中要尽量避免回流。
比如：
修改样式时尽量一次性修改；
避免频繁操作DOM，可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成，再进行一次性操作。现代框架常见操作，比如Vue就是这样做的。
避免通过getComputedStyle获取尺寸、位置等信息，因为浏览器需要计算。
对某些元素使用position的absolute或者fixed，脱离标准文档流，不会对其他元素造成影响。
额外：创建新的合成层（compositingLayer）
因为每个合成层都是单独渲染的
列举一些常见的属性，可创建新的合成层：
* 3D transforms
* video、canvas、iframe
* opacity 动画转换时
* position:fixed
* will-change：一个实验性属性，提前告诉浏览器元素可能发生哪些变化
* animation或transition设置了opacity、transform
分层可以利用GPU来获取到一些性能提升，但它以内存管理为代价，所以不能作为web性能优化策略的一部分过度使用。
