IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 学习笔记:JavaScript运行时页面构建过程 -> 正文阅读

[JavaScript知识库]学习笔记:JavaScript运行时页面构建过程

Web应用的生命周期概览

以下是Web应用的生命周期的大致流程:

  1. 生命周期开始:用户通过网址打开并访问网页
  2. 浏览器(客户端)生成请求并发送至服务器
  3. 服务器依据请求获取某些资源并返回响应给客户端
  4. 页面构建:浏览器收到服务器发来的资源(html文件、css文件、js文件、图片、数据等…),开始处理并渲染这些资源
  5. 事件处理:生成了一个事件队列,一次只处理队列中的一个事件
  6. 用户动作:与页面交互(点击、键盘输入等… ),生成的事件进入事件队列等待执行
  7. 生命周期结束:用户关闭web页面

在生命周期进行的过程中,除了生命周期的开始与结束,其他步骤都会在用户与页面的交互中重复执行,其中需要重点关注的两个阶段是:页面构建以及事件处理

页面构建阶段

页面构建阶段主要的目标是建立web应用的UI,其主要包括两个步骤:

  1. 解析HTML代码并构建文档对象(DOM)

    步骤1会在浏览器处理HTML节点的过程中执行,该过程的两个重要内容:HTML解析DOM构建

  2. 执行JavaScript代码

    步骤2会在HTML解析到脚本节点(包含或引用JavaScript代码的节点)时执行,该步骤会暂时打断步骤1的执行

在页面的构建阶段中,以上两个步骤会交替执行多次,接下来是进一步的介绍:

HTML解析和DOM构建

DOM是根据HTML来创建的,两者紧密联系,但需要强调的是:DOM并不等同于HTML

可以把HTML代码看作是浏览器构建DOM的参考图,在依据这个参考图构建DOM的过程中,浏览器会默默的修复参考图中的一些问题,所以有时候会出现实际浏览器生成的DOM结构与HTML代码并不是完全一样的情况

举个例子,下面是一段结构奇怪的html代码:

<html>
  <head>
    <p>hello~</p>
  </head>
  <body>
    <p>
      hi~
      <div>ooh~</div>
    </p>
  </body>
</html>

上面的代码尝试把<p>放入<head>中,把<div>包含在<p>中,然而代码实际在浏览器中渲染出的结构是这样的:

在这里插入图片描述

通过对比可以看出,所构建出的实际DOM结构与HTML代码并完全不一样,这里就体现出了上面提到的DOM修复HTML代码的功能,浏览器把HTML代码中逻辑不正确的地方渲染成了符合语法逻辑的DOM结构。当然,这就造成了页面出现了与代码不一致的效果,所以在编写代码时要避免这种奇怪的代码结构,以防出现一些意料之外的效果

在这里插入图片描述

执行JavaScript代码

每当解析到脚本元素时,浏览器就会停止从HTML构建DOM,并开始执行JavaScript代码,着重关注以下两点:

  • DOM节点的操作
  • 注册事件监听器

浏览器暴露给JavaScript引擎的主要是全局的window对象,其中最重要的属性就是document对象,它代表了当前页面的DOM

在执行JavaScript代码时,会涉及到对已经构建好的DOM节点的操作(插入、修改、删除DOM节点等…),要操作DOM节点,前提就是该DOM节点已经被浏览器构建好了,不可能去操作还没有存在的节点,这就是为什么要把<script>标签放在整个代码底部或者在JavaScript代码中window.onload()下执行的原因,为的就是在DOM节点已经构建好后再对DOM节点进行操作

JavaScript代码执行过程中还涉及到了注册事件监听器的操作,这关系到下个步骤的事件处理阶段

在当前脚本文件执行结束后会继续构建DOM,直到浏览器处理完所有的HTML元素,整个页面构建阶段才算完成,接下来会进入事件处理阶段

插播一个小知识:script标签的三种运行机制

<!-- 默认机制 遇到该标签会立即停止HTML构建DOM -->
<script src="xxx.js"></script>
<!-- 延迟脚本执行 直到HTML完成构建DOM后再执行脚本 -->
<script src="xxx.js" defer></script>
<!-- 尽快执行脚本 加载脚本时不会阻塞HTML构建DOM 执行时依然会阻塞HTML构建DOM -->
<script src="xxx.js" async></script>

事件处理阶段

浏览器执行的模式为单线程模式:同一时刻只能执行一个代码片段

浏览器处理事件的方式:事件队列

下面是简单的事件处理的逻辑流程图:(流程图的右半部分是一个事件循环模型)

在这里插入图片描述

这里需要明确的一个观点是事件是异步的,产生事件并加入到事件队列这个过程对于事件循环是分开的,即上图的左半边和右半边是两个独立的过程

上述的事件处理的逻辑会一直持续,直到用户关闭了web应用,整个事件处理阶段才会结束

参考:《JavaScript忍者秘籍》

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-04 19:23:37  更:2021-07-04 19:23:42 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 13:12:21-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码