从输入URL到页面加载完中间发生了什么? 您所在的位置:网站首页 dom加载过程 从输入URL到页面加载完中间发生了什么?

从输入URL到页面加载完中间发生了什么?

2023-05-07 22:49| 来源: 网络整理| 查看: 265

想理解加载过程,首先需要理解回流和重绘 回流

回流发生在浏览器渲染页面的过程里,由DOM树和样式计算出布局树的过程就叫做回流,这个步骤需要计算出每个元素的大小和位置(忽略display:none的元素)

重绘

我们将布局树和样式转换为屏幕上的实际像素,这个阶段就叫做重绘节点。所以,回流必定导致重绘,重绘却不一定回流,且回流的代价比重绘高。

何时发生回流和重绘

 浏览器窗口尺寸变化(因为回流是根据视口的大小来计算元素的大小和位置的)

 页面一开始渲染的时候

 添加或者删除dom

 修改元素位置或者尺寸

HTTP

输入域名先去检查本地的hosts文件,看看是否有域名映射关系

如果没有,要通过DNS解析找的这个域名对应的服务器地址ip

通过TCP请求连接服务

通过WEB服务器apache返回数据,浏览器根据返回数据,HTML内容构建DOM树,CSS内容构建样式表

将 DOM树 和 CSSOM 结合,变成了render树

页面上通过重绘和回流的过程,渲染到页面

连接结束

HTTPS

输入域名先去检查本地的hosts文件,看看是否有域名映射关系

如果没有,要通过DNS解析找的这个域名对应的服务器地址ip

通过TCP请求连接服务

TLS 协商

通过WEB服务器apache返回数据,浏览器根据返回数据,HTML内容构建DOM树,CSS内容构建样式表

将 DOM树 和 CSSOM 结合,变成了render树

页面上通过重绘和回流的过程,渲染到页面

连接结束

总结

http和https区别在于增加了SSL/TLS协议,这是我的理解,还在学习理解过程中,望海涵!

1.png



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有