当我们在输入网址后按回车键浏览器会加载出我们想要的页面,但很多小伙伴们都不是很清楚从输入URL按回车键到页面呈现到底发生了什么,正好最近有复习这方面知识,便总结下,可以参考
首先按下回车键后,浏览器会根据你输入的域名发送到DNS服务器上,
DNS服务器将进行动态域名解析,解析成对应的IP地址
然后 浏览器将于远程服务器通过TCP三次握手协商来建立一个TCP/IP连
接
一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送http请求,
远程服务器找到资源并使用http响应返回该资源,浏览器接收服务器的响
应结果,进行页面渲染
解析渲染步骤如下:
1.解析html
2.构建DOM树
3.DOM树与CSS样式进行附着构建呈现树
4.布局
5.绘制
在页面绘制时会出现重排和重绘的概念
重排(回流):DOM的变化影响了元素的几何属性,浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,并重新构造这部分渲染树
重排很影响性能,尽量避免
重绘:在一个元素的外观被改变,但没有改变布局的情况
重排一定会引起重绘,但重绘不一定引起重排
重排发生的几种常见情况:
1.添加或删除可见的DOM元素
2.元素位置改变
3.元素尺寸改变
4.页面渲染初始化
5.浏览器窗口尺寸改变