在浏览器中输入一个URL，并且按下回车键时，首先会进行DNS解析，然后建立TCP连接，HTTP请求， HTML解析和CSS解析，渲染页面，布局layout渲染，绘制paint到屏幕，最后合成composite页面。
1.DNS解析
用户输入一个URL的时候直接通过域名是无法找到服务器的，我们需要一个DNS服务器做DNS解析，DNS解析后会获取到该域名对应的服务器IP地址。
首先DNS会查找缓存，缓存首先查找浏览器缓存，再查找系统缓存，再查找路由器缓存，然后查找ISP缓存，如果再缓存中查到会直接使用缓存的IP地址连接主机。
如果缓存查找失败，我们需要通过DNS递归解析，解析首先会解析根域名服务器，顶级域名服务器，权威域名服务器。最终会找到IP地址，并通过IP地址连接服务器，并且计算机会缓存服务器发送回来的IP地址信息。
2.TCP连接
虽然发送的是HTTP请求，但是HTTP协议是应用协议，它是建立在TCP传输协议上的，所以我们需要先进行TCP连接。
TCP的连接会进行三次握手，客户端发送SYN包，服务器接收到SYN包会返回一个SYN-ACK包，客户端再次发送ACK包，完成握手过程，这个时候TCP已经建立完成连接，双方就能传输数据了。
3.HTTP请求
一旦TCP建立连接成功，客户端就可以通过这个连接发送HTTP请求，包括请求方法，URL，协议版本，请求体。服务器接收到HTTP请求后，会处理这个请求并且返回一个HTTP响应。HTTP响应包括状态码，响应头，响应内容，我们这里请求的通常是index.html文件。
4.HTML解析和CSS解析
浏览器在获取到index.html后会对文档进行解析，包括HTML解析来构建DOM Tree，在这个过程中它会遇到CSS文件和JS文件。遇到CSS和JS文件会继续向服务器发送HTTP请求，并且下载CSS，JS文件。之后的CSS文件进行解析，解析出对应的CSSOM（CSS Object Model也叫做CSS 对象模型）
5.渲染render、布局layout、绘制paint
DOM Tree和CSSOM可以共同来构建Render Tree。之后会在Render Tree上运行布局layout计算每个结构的几何体，再由浏览器将每个机构绘制成paint到屏幕上的像素点。
6.composite合成
这里有一个优化的手段就是将元素绘制到多个合成图层中，默认情况下，标准流中的内容是被绘制到同一个Layer中的。我们可以通过一些特定的方法来创建新的合成层CompositingLayer,新的图层可以利用GPU来加速绘制。
比如我们通过3D Transforms/Video/canvas/iframe/positionfixed/will-change等，但是分层确实可以提高性能，他的代价是内存。
这样用户最终就看到了我们屏幕上显示的网页，当然还有好多细节包括重绘回流的问题，Javascript的执行过程，JavaScript引擎V8引擎等内容。
@秋风于渭水 确实![[[微笑]]](https://www.xvzhu.cn/usr/themes/freewind/static/img/face/emotions/0.gif)
[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]
[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]
[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]
这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。
[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]
[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]
我热爱 旅游专栏。令人惊艳了解路线。
欣赏你的照片, 我明白, 世界很美。感谢 旅行灵感。
读起来像小说。继续保持 带来的灵感。