HTML性能优化专题测试
考察知识点
本试卷考察以下核心知识点：
| 知识领域 | 题数 | 重点内容 |
|---|---|---|
| 代码拆分 | 6题 | 动态import、Webpack SplitChunks、路由懒加载 |
| 优化关键渲染路径 | 7题 | DOM/CSSOM构建、布局、绘制、合成流程优化 |
| 使用预加载和预连接 | 5题 | preload、prefetch、preconnect、dns-prefetch |
| 减少HTTP请求 | 5题 | 资源合并、雪碧图、内联资源、缓存策略 |
| 异步加载资源 | 6题 | async/defer属性、动态脚本加载、懒加载 |
<link rel="preconnect">的作用是提前与目标服务器建立TCP连接、TLS握手和DNS解析，从而减少后续请求的延迟。
CSS文件默认情况下不会阻塞DOM树的构建，但会阻塞渲染树的构建，因此建议将CSS放在head标签中。
动态import()语法返回一个Promise对象，因此可以使用async/await语法进行调用。
使用<img loading="lazy">属性可以让浏览器自动延迟加载视口外的图片，减少初始页面的HTTP请求数量。
当浏览器遇到<script>标签时，会暂停DOM构建，等待JavaScript下载并执行完成后才继续解析HTML。
在HTTP/2协议下，以下关于减少HTTP请求的说法哪个是正确的？
关于代码拆分（Code Splitting）的核心目的，以下说法正确的是？
关于<script async>和<script defer>的区别，以下说法正确的是？
在Webpack中使用/* webpackChunkName: "my-chunk" */魔法注释的作用是？
使用动态import()进行代码拆分时，以下哪个说法是错误的？
<link rel="dns-prefetch">与<link rel="preconnect">的主要区别是？
浏览器关键渲染路径的正确顺序是？
以下哪个HTTP响应头设置可以显著减少重复请求？
关于回流(Reflow)和重绘(Repaint)，以下说法正确的是？
关于<link rel="preload">的作用，以下说法正确的是？
为了优化首次内容绘制(FCP)时间，以下哪些做法是正确的？（多选）
在使用代码拆分时，以下哪些策略可以优化用户体验？（多选）
以下哪些方法可以实现CSS的异步加载？（多选）
以下哪些方式可以实现JavaScript的异步加载？（多选）
以下哪些是减少HTTP请求的有效方法？（多选）
在HTTP/2环境下优化首屏渲染性能，以下哪些做法仍然有效？（多选）
以下哪些是实现代码拆分的常用方法？（多选）
以下哪些是优化关键渲染路径的有效方法？（多选）
以下关于preload和prefetch的区别，说法正确的是？（多选）
script标签的____________属性表示脚本会延迟到HTML解析完成后、DOMContentLoaded事件触发前执行，并且保持执行顺序；而____________属性表示脚本下载完成后立即执行，不保证执行顺序，适合独立的第三方脚本。
将小图片转换为____________编码内联到CSS中可以减少HTTP请求，但通常建议只对小于____________的图片使用此方法，否则会增大CSS文件体积，反而影响性能。
使用ES2020引入的____________函数可以实现模块的动态加载，它返回一个____________对象，加载成功后可以通过then方法获取模块的导出内容。
使用____________API可以将DOM更新操作合并到浏览器的下一帧渲染中，避免在帧间隔中多次触发回流。使用____________技术可以批量读取和写入DOM属性，减少回流次数。
使用preload加载字体文件时，必须添加____________属性，否则浏览器会发起新的请求而不是使用预加载的资源。预加载字体时的正确写法是<link rel="preload" href="font.woff2" as="font" type="font/woff2" ____________>。
在React中，使用____________函数可以实现组件的懒加载，它需要配合____________组件一起使用，在组件加载过程中可以显示fallback内容。
