全部学科

通用技术

redis git docker nginx mysql zookeeper rabbitmq

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Web前端

TypeScript vue CSS HTML javascript pinia vite

Python全栈

NodeJS全栈

GO后端

golang gorm gin

小程序首页

📝 1 篇文章 20 道配套习题

JS浏览器与DOM高级

专题说明

本专题系统讲解JavaScript浏览器环境的高级特性，涵盖事件处理与委托、BOM浏览器对象模型、Web Workers与Service Workers、性能优化与内存管理等进阶知识。

学习目标

掌握事件委托原理及其性能优化优势
理解事件对象属性：target、currentTarget的区别
掌握事件传播机制：捕获、目标、冒泡三阶段
理解BOM核心对象：window、location、history、navigator的使用
掌握Web Storage API：localStorage与sessionStorage的区别
理解Web Worker的基本特性与通信机制
掌握Service Worker的生命周期与缓存策略
理解V8垃圾回收的分代回收策略
掌握requestAnimationFrame与requestIdleCallback的使用
学会识别与避免内存泄漏

学习内容

本专题涵盖以下核心知识点：

事件处理与委托：事件委托原理、target与currentTarget、stopPropagation与stopImmediatePropagation、passive选项、自定义事件
BOM与浏览器对象：window对象、location对象、history对象、navigator对象、screen对象、postMessage跨窗口通信
Web Workers与Service Workers：Worker通信机制、Service Worker生命周期、缓存策略、Background Sync API、Cache API
性能优化与内存管理：requestAnimationFrame、requestIdleCallback、防抖与节流、内存泄漏识别、V8垃圾回收、重排重绘优化、虚拟列表

学习建议

先理解事件委托原理，掌握target与currentTarget的区别
重点学习BOM核心对象，理解location与history的区别
深入理解Service Worker生命周期，掌握不同缓存策略的适用场景
掌握requestAnimationFrame的使用，理解其与setTimeout的差异
理解V8分代垃圾回收策略，学会识别常见内存泄漏场景
结合实践，将性能优化技术应用到实际项目中

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1

单选题

关于事件委托（Event Delegation）的实现原理，以下说法正确的是？

A

事件委托利用事件捕获机制，在父元素上处理子元素的事件

B

事件委托利用事件冒泡机制，在父元素上统一处理子元素的事件

C

事件委托只能用于click事件，不能用于其他类型的事件

D

事件委托会阻止事件继续冒泡到更上层的元素

2

单选题

在事件处理函数中，event.target和event.currentTarget的区别是？

A

target始终等于currentTarget

B

target是绑定事件的元素，currentTarget是触发事件的元素

C

target是触发事件的元素，currentTarget是绑定事件的元素

D

target和currentTarget只在事件委托场景下才有区别

3

单选题

关于event.stopPropagation()和event.stopImmediatePropagation()的区别，以下说法正确的是？

A

两者功能完全相同，可以互换使用

B

stopPropagation只阻止冒泡，stopImmediatePropagation还会阻止当前元素上其他事件处理函数的执行

C

stopPropagation阻止当前元素上的所有事件处理函数，stopImmediatePropagation只阻止冒泡

D

两者都会阻止事件的默认行为

4

多选题

关于addEventListener方法的第三个参数useCapture，以下说法正确的有？

A

useCapture为true时，事件在捕获阶段触发

B

useCapture为false（默认）时，事件在冒泡阶段触发

C

useCapture可以是对象形式，包含capture、once、passive等属性

D

同一个元素的同一事件可以同时绑定捕获阶段和冒泡阶段的处理函数

5

判断题

addEventListener的passive选项设置为true时，表示监听函数不会调用preventDefault()阻止默认行为，浏览器可以不用等待监听函数执行完成就立即开始默认行为，从而提升滚动性能。

A

对

B

错

6

判断题

可以通过new CustomEvent()创建自定义事件，使用dispatchEvent()方法触发，并通过addEventListener监听，实现组件间的通信机制。

A

对

B

错

7

填空题

使用removeEventListener移除事件监听时，必须传入与addEventListener相同的________、________和useCapture参数。如果监听时使用了匿名函数，则无法移除该监听器。

8

单选题

关于location对象的属性和方法，以下说法正确的是？

A

location.href和location.replace()都会在浏览器历史记录中留下记录

B

location.reload(true)会强制从服务器重新加载页面

C

location.hash的改变不会触发页面重新加载

D

location.pathname返回完整的URL字符串

9

单选题

关于history对象的方法，以下说法正确的是？

A

history.go()只能传入正整数前进或负整数后退

B

history.pushState()会触发popstate事件

C

history.replaceState()会修改当前历史记录条目但不触发popstate事件

D

history.length总是等于浏览器历史记录的总条数

10

判断题

sessionStorage存储的数据在页面会话结束时清除（关闭标签页或窗口），而localStorage存储的数据没有过期时间，除非手动清除。

A

对

B

错

11

判断题

screen对象提供显示器屏幕的信息，如screen.width和screen.height返回屏幕的分辨率，screen.availWidth和screen.availHeight返回可用的屏幕尺寸（排除系统界面占用的部分）。

A

对

B

错

12

填空题

window.postMessage()方法可以实现跨窗口通信，即使窗口属于不同______。接收方通过监听_______事件来获取数据，event.origin和event.source可用于验证消息来源。

13

单选题

关于Web Worker的基本特性，以下说法正确的是？

A

Web Worker可以访问DOM和window对象

B

Web Worker和主线程之间通过postMessage方法通信

C

Web Worker可以直接使用localStorage存储数据

D

Web Worker只能处理计算任务，不能发起网络请求

14

单选题

关于Service Worker的生命周期，以下说法正确的是？

A

Service Worker安装完成后立即进入激活状态

B

Service Worker一旦激活就会持续运行，直到手动卸载

C

Service Worker在install和activate阶段可以执行缓存预加载等初始化操作

D

Service Worker可以在任何网站上注册使用

15

单选题

以下哪种Service Worker缓存策略最适合对时效性要求不高但需要快速响应的场景？

A

Network Only - 只从网络获取

B

Cache Only - 只从缓存获取

C

Cache First, Network Fallback - 优先缓存，缓存失败再请求网络

D

Network First, Cache Fallback - 优先网络，网络失败再使用缓存

16

判断题

Web Worker可以使用importScripts()方法加载外部JavaScript脚本，这些脚本会在Worker上下文中同步执行，可以访问Worker的作用域。

A

对

B

错

17

单选题

关于requestAnimationFrame（rAF）的优势，以下说法正确的是？

A

rAF的回调函数执行频率固定为60fps

B

rAF会在浏览器下一次重绘之前调用回调函数

C

rAF的回调函数即使页面不可见也会持续执行

D

rAF返回的ID只能用于取消单个回调

18

单选题

以下哪种情况最可能导致JavaScript内存泄漏？

A

在函数内创建的局部变量在函数执行完毕后无法访问

B

闭包引用了外部函数的变量，导致这些变量无法被释放

C

定时器或事件监听器在被移除的DOM元素上仍然存在

D

使用const声明的变量阻止了垃圾回收

19

判断题

防抖（debounce）是在事件触发后等待一段时间再执行，如果在这段时间内再次触发则重新计时；节流（throttle）是每隔固定时间执行一次，不管事件触发频率多高。

A

对

B

错

20

填空题

单页应用（SPA）常使用hash路由，通过监听__________事件来响应URL变化。当用户点击链接改变______部分时，触发该事件，应用可以更新视图而不刷新页面。

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验