总结:浏览器解析html与执行JS之生命周期详解

2024-01-02 06:30:42

一·浏览器解析html的生命周期:

1.请求HTML文档:

当用户输入URL或者点击链接时,浏览器向服务器发起HTTP(或HTTPS)请求以获取HTML文档数据。

2·接收响应:

服务器将HTML内容返回给浏览器,浏览器开始接收数据流。

3·构建DOM树:

浏览器接收到HTML内容后,开始解析这些文本并将其转换成DOM(Document Object Model)树结构。在这个过程中,浏览器会从上到下逐行读取HTML代码,并创建相应的DOM节点。

4·加载外部资源:

(1)在解析HTML的同时,浏览器遇到< script>、<link>(样式表)、<img>、<video>、<audio>等标签时,会根据需要异步下载CSS、JavaScript和其他媒体文件。
(2)如果遇到没有async或defer属性的<script>标签,浏览器会暂停DOM构建来执行脚本,等待脚本执行完成后再继续构建DOM。

5·DOMContentLoaded事件:

当初始HTML文档被完全加载和解析,DOM树构建完成后,浏览器会触发DOMContentLoaded事件。这意味着DOM已经准备好,但不保证所有外部资源如图片、样式表等已加载完毕。

6·样式计算与布局:

浏览器接着进行样式计算(包括CSSOM树构建),确定每个DOM元素的具体样式,并基于计算出的样式进行布局操作(也称为回流或重排layout/reflow)。

7·绘制与渲染:

最后,浏览器将布局后的各个部分按照正确顺序绘制到屏幕上,这一过程可能涉及多个步骤,包括合成层处理、绘制以及GPU加速渲染等。

8·后续交互与事件循环:

页面加载完毕后,浏览器进入事件循环阶段,监听用户的交互以及其他异步事件,例如网络请求完成、定时器到期等,并根据事件做出相应更新。

9·资源加载完成与load事件:

所有资源(包括样式表、图片、字体等)全部加载完成后,浏览器会触发window对象上的load事件,标志着整个页面的加载过程结束。

10·卸载与垃圾回收:

当用户离开当前页面时,浏览器会停止渲染当前页面,并开始卸载相关的资源和执行必要的清理工作,如垃圾回收机制回收不再使用的内存对象。

注意:在整个html生命周期中,浏览器会持续监控网络状态、内存使用情况以及用户交互,以便及时响应和更新页面内容。

二·浏览器执行JS的生命周期:

1.下载和解析HTML:

浏览器接收到HTML文档后,开始解析HTML标记并构建DOM(Document Object Model)树。

2.处理脚本标签:

  • 在构建DOM的过程中,浏览器遇到<script>标签时会进行以下操作:
    如果没有async或defer属性,浏览器会暂停DOM构建,下载并执行脚本。脚本执行完成后,继续构建DOM。
  • 如果有defer属性,浏览器会继续构建DOM,同时下载脚本。DOMContentLoaded事件触发之前,按照脚本在文档中的顺序执行这些脚本。
  • 如果有async属性,浏览器会在可用时异步下载脚本,并在下载完成后尽快执行脚本,这可能在DOMContentLoaded事件触发之前或之后。

3.DOMContentLoaded事件:

当初始HTML文档被完全加载和解析,DOM树构建完成时,浏览器会触发DOMContentLoaded事件。这个事件标志着DOM结构已经准备就绪,但不包括样式表、图像和其他外部资源。

4.加载外部资源:

在DOMContentLoaded事件之后,浏览器继续加载页面中的其他外部资源,如样式表、图片、字体等。

5.load事件:

当整个页面的所有内容(包括图像、样式表等所有外部资源)都已加载完毕,浏览器会触发window的load事件。这是页面完全加载的标志。

6.执行事件处理程序和用户交互:

在DOMContentLoaded和load事件之后,JavaScript代码可以注册事件处理程序来响应用户的交互,如点击按钮、滚动页面等。

7.卸载页面:

当用户离开当前页面(通过点击链接、输入新URL或者关闭窗口等方式)时,浏览器会触发beforeunload和unload事件,允许JavaScript执行清理工作,如取消网络请求、保存状态等。

注意:在整个生命周期中,JavaScript代码可以在不同的阶段执行相应的任务,如初始化页面元素、注册事件监听器、处理用户交互、以及在页面卸载前进行必要的清理工作。

三·相关参考文献:

1.JS高级:浏览器运行前端项目的原理及流程

https://blog.csdn.net/Yuanyuan__/article/details/128428923

2.js浏览器页面生命周期,以及各个阶段js调用示例:

https://blog.csdn.net/chehec2010/article/details/119990799

文章来源:https://blog.csdn.net/weixin_48033662/article/details/135331263
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。