全部学科
Web前端
TypeScript vue CSS HTML javascript pinia vite
通用技术
redis git docker nginx mysql zookeeper rabbitmq
GO后端
golang gorm gin
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
Python全栈
python
NodeJS全栈
nodejs
小程序首页
JS / 模拟试卷

JS浏览器与DOM高级专题测试

20 题 45 分钟 难度：

考察知识点

  • 事件处理与委托：事件委托原理、target与currentTarget区别、事件传播阻止方法、addEventListener配置参数、自定义事件创建
  • BOM与浏览器对象：window对象特性、location/history/navigator/screen对象、Web Storage API、跨窗口通信
  • Web Workers与Service Workers：Worker通信机制、Service Worker生命周期、缓存策略、Background Sync、PWA核心能力
  • 性能优化与内存管理：requestAnimationFrame、requestIdleCallback、内存泄漏防范、重排重绘优化、虚拟列表、Intersection Observer
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
多选题

关于navigator对象，以下说法正确的有？

A

navigator.userAgent可以获取浏览器的用户代理字符串

B

navigator.geolocation提供地理位置API

C

navigator.onLine表示当前网络连接状态

D

navigator.cookieEnabled表示浏览器是否启用cookie

10
判断题

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

A

对

B

错

11
单选题

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

A

Web Worker可以访问DOM和window对象

B

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

C

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

D

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

12
单选题

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

A

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

B

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

C

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

D

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

13
单选题

Service Worker可以拦截和处理网络请求，这主要通过哪个事件实现？

A

install事件

B

activate事件

C

fetch事件

D

message事件

14
多选题

关于Shared Worker的特点，以下说法正确的有？

A

Shared Worker可以被多个同源页面共享使用

B

Shared Worker通过port对象与每个连接的页面通信

C

Shared Worker适合处理需要跨页面共享状态的场景

D

Shared Worker可以像普通Web Worker一样直接通过postMessage通信

15
判断题

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

A

对

B

错

16
单选题

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

A

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

B

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

C

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

D

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

17
单选题

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

A

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

B

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

C

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

D

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

18
多选题

以下哪些API可用于测量JavaScript代码执行性能？

A

performance.now()获取高精度时间戳

B

console.time()和console.timeEnd()测量代码块执行时间

C

PerformanceObserver监听性能条目

D

performance.mark()和performance.measure()创建自定义性能测量

19
判断题

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

A

对

B

错

20
填空题

图片预加载可以通过创建______对象设置其______属性实现。图片加载完成后触发onload事件，可用于后续操作。预加载可以提前缓存图片，改善用户体验。

← 上一个试卷 JS模块化与工程化基础专题测试
下一个试卷 → JS设计模式与架构思想专题测试

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

想参加完整模拟考试？
小程序提供计时考试、自动评分和详细解析

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

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库