JavaScript BOM、事件循环

目录

BOM（浏览器对象模型）

一、window 对象

1. 窗口控制

2. 定时器

二、location 对象

三、navigator 对象

四、history 对象

五、screen 对象

六、本地存储

1. localStorage

2. sessionStorage

七、BOM 应用场景

八、总结

JavaScript 执行机制与事件循环

一、JavaScript 执行上下文（Execution Context）

二、事件循环（Event Loop）机制

三、代码执行顺序示例

四、异步操作分类

1. 宏任务（Macrotasks）

2. 微任务（Microtasks）

五、Node.js 与浏览器的事件循环差异

六、关键总结

BOM（浏览器对象模型）

BOM（Browser Object Model）是浏览器提供的用于与浏览器窗口及环境交互的对象模型。与 DOM（文档对象模型）不同，BOM 的核心对象是 window，它允许开发者控制浏览器的行为（如导航、历史记录、屏幕信息等）。

一、window 对象

window 是 BOM 的顶层对象，代表浏览器窗口，也是 JavaScript 的全局对象。

1. 窗口控制

方法/属性说明示例
window.innerWidth视口宽度（不包含滚动条）console.log(window.innerWidth)
window.innerHeight视口高度（不包含滚动条）console.log(window.innerHeight)
window.open(url, name)打开新窗口window.open('https://example.com')
window.close()关闭当前窗口（需用户操作触发）window.close()
window.resizeTo(w, h)调整窗口大小window.resizeTo(800, 600)

2. 定时器

方法说明示例
setTimeout(func, delay)延迟执行函数setTimeout(() => alert('Hi'), 1000)
setInterval(func, delay)周期性执行函数setInterval(updateClock, 1000)
clearTimeout(id)清除延迟任务clearTimeout(timerId)
clearInterval(id)清除周期任务clearInterval(intervalId)

二、location 对象

location 包含当前页面的 URL 信息，并允许操作导航。

1. 常用属性

属性说明示例值
location.href完整 URL"https://example.com/path?q=1"
location.protocol协议（http:、https:）"https:"
location.host主机名和端口"example.com:8080"
location.pathnameURL 路径"/path"
location.search查询参数（? 后的内容）"?q=1"
location.hash哈希值（# 后的内容）"#section"

2. 常用方法

方法说明示例
location.assign(url)加载新页面location.assign('new-page.html')
location.reload()重新加载当前页面location.reload(true)（强制刷新）
location.replace(url)替换当前页面（无历史记录）location.replace('login.html')

三、navigator 对象

navigator 提供浏览器和操作系统的信息。

属性/方法说明示例
navigator.userAgent浏览器用户代理字符串"Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."
navigator.platform操作系统平台"Win32"、"MacIntel"
navigator.language浏览器首选语言"zh-CN"
navigator.geolocation地理位置 API（需用户授权）navigator.geolocation.getCurrentPosition(...)
navigator.clipboard剪贴板操作（读写文本/图片）navigator.clipboard.writeText('Hello')

四、history 对象

history 用于操作浏览器会话历史记录。

方法/属性说明示例
history.length历史记录条目数console.log(history.length)
history.back()返回上一页（等同用户点击后退）history.back()
history.forward()前进到下一页history.forward()
history.go(n)跳转到历史记录中的第 n 页history.go(-2)（后退两页）
history.pushState()添加历史记录（不刷新页面）history.pushState({}, '', '/new')
history.replaceState()替换当前历史记录（不刷新页面）history.replaceState({}, '', '/updated')

五、screen 对象

screen 提供用户屏幕的信息。

属性说明示例
screen.width屏幕宽度（像素）1920
screen.height屏幕高度（像素）1080
screen.availWidth可用宽度（排除任务栏等）1900
screen.availHeight可用高度1040
screen.colorDepth颜色深度（位）24

六、本地存储

浏览器提供的本地存储 API（属于 BOM 的一部分）。

1. localStorage

  • 持久化存储：数据长期保留（除非手动清除）。

  • 作用域：同源窗口共享。

  • 方法：

    localStorage.setItem('key', 'value'); // 存储数据
const value = localStorage.getItem('key'); // 读取数据
localStorage.removeItem('key'); // 删除数据
localStorage.clear(); // 清空所有数据

2. sessionStorage

  • 会话级存储：数据在标签页关闭后清除。

  • 作用域：仅当前标签页有效。

  • 方法：同 localStorage。

七、BOM 应用场景

  1. 页面跳转与刷新：

    // 跳转到新页面
location.href = 'https://example.com';
// 刷新当前页面
location.reload();

  2. 浏览器信息检测：

    // 判断是否为移动端
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

  3. 历史记录管理：

    // 单页应用（SPA）路由控制
history.pushState({ page: 1 }, 'Page 1', '/page1');

  4. 屏幕适配：

    // 根据屏幕宽度调整布局
if (window.innerWidth < 768) {document.body.classList.add('mobile-mode');
}

八、总结

对象核心功能典型用途
window窗口控制、定时器、全局对象调整窗口大小、定时任务
locationURL 操作与页面导航页面跳转、获取 URL 参数
navigator浏览器/设备信息设备检测、地理位置获取
history历史记录管理单页应用路由控制
screen屏幕信息获取响应式布局适配
localStorage本地持久化存储用户偏好设置、缓存数据

  

JavaScript 执行机制与事件循环

JavaScript 是单线程语言，但其通过 事件循环（Event Loop） 和 任务队列（Task Queue） 实现了非阻塞异步执行。

一、JavaScript 执行上下文（Execution Context）

  1. 执行栈（Call Stack）

    • 作用：存储函数调用信息（先进后出）。

    • 示例：

      function a() { b(); }
function b() { console.log('Hello'); }
a(); // 执行栈顺序：a → b → console.log

  2. 同步任务与异步任务

    • 同步任务：立即执行，阻塞后续代码。

    • 异步任务：由浏览器/Node.js 的 Web API 处理（如 setTimeout、fetch），完成后回调推入任务队列。

二、事件循环（Event Loop）机制

1. 事件循环流程

  • 步骤：

    1. 执行同步代码，填充执行栈。

    2. 遇到异步任务，交给 Web API 处理。

    3. 执行栈清空后，事件循环检查任务队列。

    4. 将队列中的回调推入执行栈执行。

    5. 重复循环。

  • 可视化流程：

    同步代码 → 执行栈 → Web API → 任务队列 → 事件循环 → 执行栈

2. 任务队列类型

队列类型任务类型优先级
微任务队列（Microtask Queue）Promise.then、MutationObserver、queueMicrotask高
宏任务队列（Macrotask Queue）setTimeout、setInterval、I/O、UI 渲染低

  • 执行顺序：

    1. 执行栈清空后，先清空所有微任务。

    2. 执行一个宏任务。

    3. 重复上述过程。

三、代码执行顺序示例

console.log('Start');setTimeout(() => console.log('Timeout'), 0);Promise.resolve().then(() => console.log('Promise 1')).then(() => console.log('Promise 2'));console.log('End');

输出顺序：

Start → End → Promise 1 → Promise 2 → Timeout

执行步骤：

  1. 同步代码依次执行，输出 Start 和 End。

  2. setTimeout 回调进入宏任务队列。

  3. Promise.then 回调进入微任务队列。

  4. 同步代码执行完毕，执行所有微任务（Promise 1、Promise 2）。

  5. 执行下一个宏任务（Timeout）。

四、异步操作分类

1. 宏任务（Macrotasks）

  • 常见类型：

    • setTimeout / setInterval

    • I/O 操作（文件读写、网络请求）

    • UI 渲染（浏览器）

    • requestAnimationFrame（浏览器）

  • 特点：每次事件循环处理一个宏任务。

2. 微任务（Microtasks）

  • 常见类型：

    • Promise.then / catch / finally

    • MutationObserver（浏览器）

    • queueMicrotask

  • 特点：在当前宏任务结束后、下一个宏任务开始前执行所有微任务。

五、Node.js 与浏览器的事件循环差异

环境事件循环阶段微任务执行时机
浏览器简化模型：宏任务 → 微任务 → 渲染 → 宏任务...每个宏任务后清空微任务队列
Node.js分阶段（Timers → Pending → Idle/Prepare → Poll → Check → Close），每阶段执行对应宏任务每个阶段结束后清空微任务队列

六、关键总结

  1. 单线程非阻塞：通过事件循环和任务队列实现异步。

  2. 任务优先级：微任务 > 宏任务。

  3. 避免阻塞：长时间同步代码会阻塞事件循环（如大量计算）。

  4. 应用场景：

    • 宏任务：延迟任务、I/O 操作。

    • 微任务：高优先级回调（如 Promise）。

示例：优化长时间任务

// 将耗时任务拆分为多个微任务
function processChunk(data) {queueMicrotask(() => {// 处理数据块if (data.length > 0) {processChunk(data.slice(100));}});
}
processChunk(largeData);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/900122.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

k8s运维面试总结(持续更新)

k8s运维面试总结(持续更新)

一、你使用的promethues监控pod的哪些指标&#xff1f; CPU使用率 内存使用率 网络吞吐量 磁盘I/O 资源限制和配额&#xff1a;Prometheus可以监控Pod的资源请求和限制&#xff0c;确保它们符合预设的配额&#xff0c;防止资源过度使用。具体指标如container_spec_cpu_quota用于…
阅读更多...
ubuntu20.04升级成ubuntu22.04

ubuntu20.04升级成ubuntu22.04

命令行 sudo do-release-upgrade 我是按提示输入y确认操作&#xff0c;也可以遇到配置文件冲突时建议选择N保留当前配置
阅读更多...
Cortex-M​ 函数调用的入栈与出栈操作

Cortex-M​ 函数调用的入栈与出栈操作

在 ARM Cortex-M 系列单片机中，普通C函数调用的入栈（压栈）和出栈操作通常由编译器编译后生成的代码管理，而硬件仅负责部分关键操作。以下是详细分析： 1. 函数调用与返回的核心机制 (1) 硬件自动完成的部分 返回地址的保存： 当通过 BL（Branch with Link）或 BLX 指令调用…
阅读更多...
DeepSeek能否用于对话系统（Chatbot）？技术解析与应用实例！

DeepSeek能否用于对话系统（Chatbot）？技术解析与应用实例！

引言&#xff1a;Chatbot 的进化与挑战 你有没有发现&#xff0c;现在的AI聊天机器人越来越聪明了&#xff1f;无论是客服助手、智能语音设备&#xff0c;还是社交媒体上的自动回复&#xff0c;Chatbot&#xff08;对话系统&#xff09;已经渗透到我们生活的方方面面。但问题是…
阅读更多...
多表查询的多与一

多表查询的多与一

1.查寻表需要的条件 1.1.首先我们要了解查询表有哪些 1.1.1.多对一 多对一就是一个年表拥有例外一个表的多条数据 一个表对应立一个表的多条数据&#xff0c;另一个表对应这个表的多条数据 这个点被称为多对一 1.1.2.多对多 多对多简单来说就是需要一个中间商 中间商就…
阅读更多...
配置文件、Spring日志

配置文件、Spring日志

SpringBoot配置⽂件 SpringBoot⽀持并定义了配置⽂件的格式, 也在另⼀个层⾯达到了规范其他框架集成到SpringBoot的 ⽬的. 很多项⽬或者框架的配置信息也放在配置⽂件 中, ⽐如: 项⽬的启动端⼝ 数据库的连接信息(包含⽤⼾名和密码的设置) 第三⽅系统的调⽤密钥等信息 ⽤…
阅读更多...
嵌入式——Linux系统的使用以及编程练习

嵌入式——Linux系统的使用以及编程练习

目录 一、Linux的进程、线程概念 &#xff08;一&#xff09;命令控制进程 1、命令查看各进程的编号pid 2、命令终止一个进程pid 二、初识Linux系统的虚拟机内存管理 &#xff08;一&#xff09;虚拟机内存管理 &#xff08;二&#xff09;与STM32内存管理对比 三、Lin…
阅读更多...
Springcache+xxljob实现定时刷新缓存

Springcache+xxljob实现定时刷新缓存

目录 SpringCache详解 SpringCache概述 核心原理 接口抽象与多态 AOP动态代理 核心注解以及使用 公共属性 cacheNames KeyGenerator&#xff1a;key生成器 key condition&#xff1a;缓存的条件&#xff0c;对入参进行判断 注解 xxl-job详解 SpringcacheRedis实现…
阅读更多...
前端Uniapp接入UviewPlus详细教程！！！

前端Uniapp接入UviewPlus详细教程！！！

相信大家在引入UviewPlusUI时遇到很头疼的问题&#xff0c;那就是明明自己是按照官网教程一步一步的走&#xff0c;为什么到处都是bug呢&#xff1f;今天我一定要把这个让人头疼的问题解决了&#xff01; 1.查看插件市场 重点&#xff1a; 我们打开Dcloud插件市场搜素uviewPl…
阅读更多...
vector的介绍与代码演示

vector的介绍与代码演示

由于以后我们写OJ题时会经常使用到vector&#xff0c;所以我们必不可缺的是熟悉它的各个接口。来为我们未来作铺垫。 首先&#xff0c;我们了解一下&#xff1a; https://cplusplus.com/reference/vector/ vector的概念&#xff1a; 1. vector是表示可变大小数组的序列容器…
阅读更多...
ZLMediaKit 源码分析——[5] ZLToolKit 中EventPoller之延时任务处理

ZLMediaKit 源码分析——[5] ZLToolKit 中EventPoller之延时任务处理

系列文章目录 第一篇 基于SRS 的 WebRTC 环境搭建 第二篇 基于SRS 实现RTSP接入与WebRTC播放 第三篇 centos下基于ZLMediaKit 的WebRTC 环境搭建 第四篇 WebRTC学习一&#xff1a;获取音频和视频设备 第五篇 WebRTC学习二&#xff1a;WebRTC音视频数据采集 第六篇 WebRTC学习三…
阅读更多...
【零基础入门unity游戏开发——2D篇】SortingGroup（排序分组）组件

【零基础入门unity游戏开发——2D篇】SortingGroup（排序分组）组件

考虑到每个人基础可能不一样&#xff0c;且并不是所有人都有同时做2D、3D开发的需求&#xff0c;所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】&#xff1a;主要讲解C#的基础语法&#xff0c;包括变量、数据类型、运算符、…
阅读更多...
26信号和槽_自定义信号(1)

26信号和槽_自定义信号(1)

Qt 中也允许自定义信号 ①自定义槽函数,非常关键.开发中大部分情况都是需要自定义槽函数的. 槽函数&#xff0c;就是用户触发某个操作之后,要进行的业务逻辑. ②自定义信号,比较少见.实际开发中很少会需要自定义信号. 信号就对应到用户的某个操作~ 在 GUI,用户能够进行哪些操作…
阅读更多...
今天来介绍一下一个简单,灵活的JavaScrip图标工具Chart.js

今天来介绍一下一个简单,灵活的JavaScrip图标工具Chart.js

Chart.js 柱形图 先看效果&#xff1a; 代码部分&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <script src"https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7…
阅读更多...
Mysql 中的 binlog、redolog、undolog

Mysql 中的 binlog、redolog、undolog

Binlog MySQL中的Binlog&#xff08;Binary Log&#xff09; 是 MySQL 用来记录数据库所有数据更改操作的日志文件。它是 MySQL 数据库的核心组件之一&#xff0c;广泛应用于 数据复制、数据恢复 和 故障恢复 等操作中。 Binlog的主要作用&#xff1a; 数据复制&#xff08;…
阅读更多...
object中的方法，和String类常用api

object中的方法，和String类常用api

Java Object 类和 String 类常用 API 一、Object 类核心方法 Object 类是 Java 中所有类的超类&#xff0c;提供了以下重要方法&#xff1a; 1. 基本方法 方法描述重写建议public boolean equals(Object obj)对象相等性比较必须重写&#xff08;同时重写hashCode&#xff0…
阅读更多...
Haskell语言的云安全

Haskell语言的云安全

Haskell语言的云安全探索 引言 在信息技术迅猛发展的今天&#xff0c;云计算已经成为了企业和个人用户不可或缺的重要组成部分。然而&#xff0c;随着云计算的普及&#xff0c;相关的安全问题也日益突显。云安全不仅涉及数据的安全性、隐私保护&#xff0c;更涵盖了访问控制、…
阅读更多...
01背包问题的空间优化与边界处题目解析

01背包问题的空间优化与边界处题目解析

01背包问题的空间优化与边界处题目解析 01背包问题是经典的动态规划问题&#xff0c;旨在选择若干物品装入背包&#xff0c;使得总价值最大且不超过背包容量。每个物品只能选或不选&#xff08;0或1&#xff09;&#xff0c;不可分割。 选和不选是01背包问题最大的特征 例题…
阅读更多...
vue3+ts+element-plus 开发一个页面模块的详细过程

vue3+ts+element-plus 开发一个页面模块的详细过程

目录、文件名均使用kebab-case&#xff08;短横线分隔式&#xff09;命名规范 子组件目录&#xff1a;./progress-ctrl/comps 1、新建页面文件 progress-ctrl.vue <script setup lang"ts" name"progress-ctrl"></script><template>&l…
阅读更多...
Ubuntu上离线安装ELK（Elasticsearch、Logstash、Kibana）

Ubuntu上离线安装ELK（Elasticsearch、Logstash、Kibana）

在 Ubuntu 上离线安装 ELK（Elasticsearch、Logstash、Kibana）的完整步骤如下： 一.安装验证 二.安装步骤 1. 在联网机器上准备离线包 (1) 安装依赖工具 #联网机器 sudo apt update sudo apt install apt-rdepends wget(2) 下载 ELK 的 .deb 安装包 #创建目录将安装包下载…
阅读更多...
最新文章

Copyright @ 2022~2023