全部学科

通用技术

redis git docker nginx mysql zookeeper rabbitmq

GO后端

golang gorm gin

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Web前端

TypeScript vue CSS HTML javascript pinia vite

Python全栈

NodeJS全栈

小程序首页

📝 1 篇文章 20 道配套习题

HTML性能优化专题

专题说明

本专题聚焦前端HTML性能优化的核心技术，涵盖代码拆分、资源预加载、关键渲染路径优化、HTTP请求优化、异步资源加载五大模块，帮助开发者系统掌握性能优化方法论。

学习目标

理解代码拆分的原理与实现方式，掌握动态import和React.lazy的使用
掌握preload、prefetch、preconnect、dns-prefetch的区分与应用场景
深入理解浏览器关键渲染路径，优化首屏渲染性能
学会减少HTTP请求的各种技术手段，合理配置缓存策略
掌握async、defer属性及异步加载CSS/JS的最佳实践

学习内容

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

代码拆分：动态import()、React.lazy()、Webpack代码拆分策略
预加载与预连接：preload、prefetch、preconnect、dns-prefetch的使用场景
关键渲染路径：DOM/CSSOM构建、布局与绘制、回流与重绘优化
减少HTTP请求：CSS Sprites、Base64内联、HTTP/2优化、缓存策略
异步加载资源：async/defer、动态脚本、CSS异步加载技巧

学习建议

建议先学习关键渲染路径基础知识，理解浏览器渲染机制
结合Chrome DevTools Performance面板进行实战分析
关注Core Web Vitals指标（LCP、FID、CLS）的优化效果
性能优化需权衡利弊，根据实际场景选择合适策略

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

📝 配套习题（20 题）

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

单选题

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

A

预加载的资源会立即执行

B

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

C

预加载只能用于JavaScript文件

D

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

5

多选题

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

A

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

B

preload的优先级比prefetch高

C

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

D

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

6

判断题

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

A

对

B

错

7

填空题

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

8

单选题

<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

两者功能完全相同

9

单选题

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

A

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

B

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

C

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

D

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

10

多选题

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

A

将关键CSS内联到HTML中

B

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

C

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

D

将所有CSS放在body标签底部

11

判断题

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

A

对

B

错

12

填空题

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

13

多选题

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

A

内联首屏关键CSS

B

延迟加载首屏外的图片

C

使用骨架屏提升感知性能

D

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

14

单选题

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

A

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

B

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

C

回流和重绘的开销相同

D

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

15

单选题

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

A

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

B

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

C

HTTP/2不支持多路复用

D

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

16

多选题

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

A

使用CSS Sprites合并小图标

B

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

C

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

D

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

17

单选题

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

A

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

B

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

C

async和defer都会阻塞HTML解析

D

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

18

填空题

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

19

单选题

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

A

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

B

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

C

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

D

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

20

多选题

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

A

内联关键CSS减少阻塞

B

使用preload预加载关键字体

C

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

D

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

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

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

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

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