从输入url到页面加载的全过程

从输入url到页面加载的过程

  1. 浏览器查看缓存(浏览器缓存、系统缓存、路由缓存),如果缓存中有,直接在屏幕上展示页面内容。
  2. 如果缓存中没有,浏览器向DNS服务器请求解析url中的域名对应的ip地址。
  3. 解析出ip地址后,根据ip地址和默认端口80和服务器建立TCP连接(如果有HTTPS,多一层TLS握手)。
  4. 浏览器向服务器发出读取文件的HTTP请求
  5. 服务器对浏览器请求做出响应,并把对应的html文本发送给浏览器
  6. 释放tcp链接
  7. 浏览器将HTML文本内容展示在屏幕上。

浏览器渲染的详细过程

  1. 解析文本
  2. 构建DOM树和CSSOM树
  3. 生成渲染树:从DOM树的根节点开始,遍历每个可见节点,对于每个可见节点,找到CSSOM树中对应的规则并应用,根据每个可见节点及其对应样式,组合生成渲染树。
  4. 根据生成的渲染树,进行回流,得到节点的集合信息。
  5. 根据渲染树及其回流得到的集合信息,得到节点的绝对像素,绘制页面像素信息。
  6. 浏览器将各层的信息发送给GPU(图形处理器),GPU将各层合成并显示在屏幕上。
  7. 加载js脚本,加载完成解析js脚本。

回流

当渲染树中的一部分或全部元素的尺寸、布局、隐藏等改变时,浏览器重新渲染部分DOM或全部DOM的过程

重绘

当页面元素样式改变不影响元素在文档流中的位置时,如color、visibility等,浏览器只会将新的样式赋予元素并进行重新绘制的操作。

你可能感兴趣的:(浏览器,前端)