js基础之从输入url到浏览器显示页面发生了什么

一、输入网址

二、浏览器查找域名的IP地址（DNS解析域名）

三、建立TCP连接（三次握手）

通俗化之后就是：
客户端：老弟我要跟你链接
服务端：好的，同意了
客户端：好嘞

四、浏览器向WEB服务器发起Http请求

五、服务器端处理

六、关闭TCP链接

上图可以通俗化：
客户端：老弟，我这边没数据要传了，咱们关闭链接吧
服务端：好的，接收到了，我看看我这边还有没有要传的
服务端：我这边也没有了，关闭吧
客户端：好嘞

七、游览器解析资源

对于获取到的HTML、CSS、JS、图片等等资源。
浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树，
然后通过DOM树和CSS规则树生成渲染树。
渲染树与DOM树不同，渲染树中并没有head、display为none等不必显示的节点。
在解析CSS的同时，可以继续加载解析HTML，
但在解析执行JS脚本时，会停止解析后续HTML，这就会出现阻塞问题。

八、游览器布局渲染

根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。
HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。
这时就要提到两个重要概念：repaint和reflow。

重绘

repaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

回流

reflow：味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。

链接: https://www.cnblogs.com/yuanzhiguo/p/8119470.html.