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。