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

HTML性能优化专题测试

30 题 90 分钟 难度：

考察知识点

本试卷考察以下核心知识点：

知识领域题数重点内容
代码拆分6题动态import、Webpack SplitChunks、路由懒加载
优化关键渲染路径7题DOM/CSSOM构建、布局、绘制、合成流程优化
使用预加载和预连接5题preload、prefetch、preconnect、dns-prefetch
减少HTTP请求5题资源合并、雪碧图、内联资源、缓存策略
异步加载资源6题async/defer属性、动态脚本加载、懒加载
1
单选题

关于代码拆分（Code Splitting）的核心目的，以下说法正确的是？

A

将所有代码打包成一个文件，减少HTTP请求

B

将代码按路由或功能模块拆分，实现按需加载，减少初始加载体积

C

将CSS和JavaScript合并到同一文件中

D

将代码压缩成更小的体积

2
多选题

以下哪些是实现代码拆分的常用方法？（多选）

A

使用动态import()语法

B

使用Webpack的SplitChunksPlugin插件

C

使用React.lazy()和Suspense组件

D

使用HTML的<script defer>属性

3
判断题

动态import()语法返回一个Promise对象，因此可以使用async/await语法进行调用。

A

对

B

错

4
填空题

在React中，使用____________函数可以实现组件的懒加载，它需要配合________组件一起使用，在组件加载过程中可以显示fallback内容。

5
多选题

在使用代码拆分时，以下哪些策略可以优化用户体验？（多选）

A

使用Webpack魔法注释/* webpackPrefetch: true */预加载

B

将所有拆分块在首屏一次性加载

C

根据路由预判进行preload预加载

D

使用importmap管理模块依赖关系

6
单选题

在Webpack中使用/* webpackChunkName: "my-chunk" */魔法注释的作用是？

A

将该模块打包到名为my-chunk的chunk中，便于调试和预加载控制

B

压缩该模块的代码体积

C

将该模块转换为ES模块

D

禁用该模块的tree-shaking

7
单选题

关于<link rel="preload">的作用，以下说法正确的是？

A

预加载的资源会立即执行

B

预加载只是提前下载资源，不会执行，使用时直接从缓存读取

C

预加载只能用于JavaScript文件

D

预加载会阻塞页面的首次渲染

8
多选题

以下关于preload和prefetch的区别，说法正确的是？（多选）

A

preload用于当前页面必需的资源，prefetch用于未来页面可能需要的资源

B

preload的优先级比prefetch高

C

preload在页面加载完成后才开始加载

D

prefetch会在浏览器空闲时以最低优先级加载

9
判断题

<link rel="preconnect">的作用是提前与目标服务器建立TCP连接、TLS握手和DNS解析，从而减少后续请求的延迟。

A

对

B

错

10
填空题

使用preload加载字体文件时，必须添加___________属性，否则浏览器会发起新的请求而不是使用预加载的资源。预加载字体时的正确写法是<link rel="preload" href="font.woff2" as="font" type="font/woff2" ___________>。

11
单选题

<link rel="dns-prefetch">与<link rel="preconnect">的主要区别是？

A

dns-prefetch只做DNS解析，preconnect会完成DNS、TCP和TLS

B

dns-prefetch用于HTTPS，preconnect用于HTTP

C

dns-prefetch优先级更高

D

两者功能完全相同

12
单选题

浏览器关键渲染路径的正确顺序是？

A

布局 → 绘制 → 构建DOM树 → 构建CSSOM树 → 合成

B

构建DOM树 → 构建CSSOM树 → 布局 → 绘制 → 合成

C

构建CSSOM树 → 构建DOM树 → 绘制 → 布局 → 合成

D

构建DOM树 → 布局 → 构建CSSOM树 → 绘制 → 合成

13
多选题

以下哪些是优化关键渲染路径的有效方法？（多选）

A

将关键CSS内联到HTML中

B

使用async或defer属性异步加载非关键JavaScript

C

压缩并最小化关键资源的体积

D

将所有CSS放在body标签底部

14
判断题

当浏览器遇到<script>标签时，会暂停DOM构建，等待JavaScript下载并执行完成后才继续解析HTML。

A

对

B

错

15
填空题

script标签的______属性表示脚本会延迟到HTML解析完成后、DOMContentLoaded事件触发前执行，并且保持执行顺序；而______属性表示脚本下载完成后立即执行，不保证执行顺序，适合独立的第三方脚本。

16
多选题

为了优化首次内容绘制(FCP)时间，以下哪些做法是正确的？（多选）

A

内联首屏关键CSS

B

延迟加载首屏外的图片

C

使用骨架屏提升感知性能

D

将所有JavaScript放在head中同步加载

17
单选题

关于回流(Reflow)和重绘(Repaint)，以下说法正确的是？

A

回流一定触发重绘，重绘不一定触发回流

B

重绘一定触发回流，回流不一定触发重绘

C

回流和重绘的开销相同

D

修改元素颜色只会触发回流

18
填空题

使用_____________________API可以将DOM更新操作合并到浏览器的下一帧渲染中，避免在帧间隔中多次触发回流。使用________________技术可以批量读取和写入DOM属性，减少回流次数。

19
单选题

在HTTP/2协议下，以下关于减少HTTP请求的说法哪个是正确的？

A

HTTP/2多路复用使得合并文件完全失去了意义

B

HTTP/2下合并小文件仍然有优化价值，但合并策略需要调整

C

HTTP/2不支持多路复用

D

HTTP/2下应该将所有资源打包成一个文件

20
多选题

以下哪些是减少HTTP请求的有效方法？（多选）

A

使用CSS Sprites合并小图标

B

将小图片转换为Base64内联到CSS中

C

使用字体图标或SVG图标替代图片

D

将所有JavaScript合并成一个大文件

21
判断题

使用<img loading="lazy">属性可以让浏览器自动延迟加载视口外的图片，减少初始页面的HTTP请求数量。

A

对

B

错

22
填空题

将小图片转换为______编码内联到CSS中可以减少HTTP请求，但通常建议只对小于______的图片使用此方法，否则会增大CSS文件体积，反而影响性能。

23
单选题

以下哪个HTTP响应头设置可以显著减少重复请求？

A

Cache-Control: no-cache

B

Cache-Control: max-age=31536000

C

Pragma: no-cache

D

Expires: 0

24
单选题

关于<script async>和<script defer>的区别，以下说法正确的是？

A

async脚本按声明顺序执行，defer脚本下载完立即执行

B

defer脚本按声明顺序执行，async脚本下载完立即执行

C

async和defer都会阻塞HTML解析

D

async和defer都会在DOMContentLoaded之前执行完成

25
多选题

以下哪些方式可以实现JavaScript的异步加载？（多选）

A

使用document.createElement('script')动态创建script标签

B

使用<script async>属性

C

使用<script defer>属性

D

使用<script blocking>属性

26
判断题

CSS文件默认情况下不会阻塞DOM树的构建，但会阻塞渲染树的构建，因此建议将CSS放在head标签中。

A

对

B

错

27
填空题

使用ES2020引入的________函数可以实现模块的动态加载，它返回一个_______对象，加载成功后可以通过then方法获取模块的导出内容。

28
多选题

以下哪些方法可以实现CSS的异步加载？（多选）

A

使用link标签的media="print"属性配合onload切换

B

使用link标签的rel="preload"配合as="style"

C

使用@import在CSS文件中导入

D

使用link标签的rel="alternate stylesheet"

29
单选题

使用动态import()进行代码拆分时，以下哪个说法是错误的？

A

动态import()返回Promise，可以使用async/await

B

Webpack会自动将动态import的模块拆分成单独的chunk

C

动态import()可以在条件语句中使用实现按需加载

D

动态import()的模块会在页面加载时立即执行

30
多选题

在HTTP/2环境下优化首屏渲染性能，以下哪些做法仍然有效？（多选）

A

内联关键CSS减少阻塞

B

使用preload预加载关键字体

C

合理拆分代码实现按需加载

D

将所有资源合并成单个文件

← 上一个试卷 HTML属性专题测试
下一个试卷 → HTML标签专题测试

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

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

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

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