2026年HTMLCSSJS前端工程师前端性能优化专项训练卷

2026年HTMLCSSJS前端工程师前端性能优化专项训练卷考试时间：______分钟总分：______分姓名：______一、选择题1.以下哪个指标主要衡量页面加载过程中的视觉稳定性？A.FirstContentfulPaint(FCP)B.LargestContentfulPaint(LCP)C.CumulativeLayoutShift(CLS)D.TimetoInteractive(TTI)2.在前端性能优化中，"减少请求"的主要目的是？A.降低服务器的CPU负载B.减少用户设备的网络带宽消耗C.提升浏览器主线程的利用率D.增加缓存命中率3.以下哪种HTTP缓存机制允许浏览器在未命中强缓存的情况下，向服务器发起请求，但请求头中会带上之前协商缓存的响应头？A.强缓存B.协商缓存C.代理缓存D.内存缓存4.CSS选择器`div#app.class1`的性能排序（从高到低）最可能是？A.`#app>div.class1`B.`div#app.class1`C.`.class1#appdiv`D.`div.class1#app`5.当主线程执行一个耗时操作时，为了不阻塞页面渲染，可以使用什么机制？A.WebWorkersB.ServiceWorkersC.Promise.allD.EventLoop6.以下关于图片优化的说法，错误的是？A.对于色彩丰富、细节复杂的图片，使用WebP格式通常比JPEG效果更好。B.懒加载（LazyLoading）可以延迟非关键图片的加载，提升首屏加载速度。C.响应式图片（srcset）允许浏览器根据屏幕尺寸选择合适大小的图片资源。D.使用CSSSprite可以减少HTTP请求，但会增加图片的复杂度。7.`will-change:transform;`属性的主要作用是？A.确保元素在动画过程中不会触发重绘B.明确告知浏览器该元素可能会有复杂的变换，提前做好优化准备C.让元素在动画过程中暂时不可见D.增加元素的CPU占用，使其动画更流畅8.在JavaScript代码分割（CodeSplitting）中，使用`React.lazy()`和`Suspense`的主要目的是？A.减少主包体积，实现组件按需加载B.提升函数的执行效率C.增加浏览器缓存的大小D.防止内存泄漏9.ServiceWorker的主要优势不包括？A.实现离线缓存B.优化网络请求C.修改页面DOM结构D.提升页面渲染速度10.WebVitalsAPI中，`TTFB`指的是什么？A.TimetoFirstByteB.TimetoFirstPaintC.TimetoInteractiveD.TotalBlockingTime11.以下哪个不是Webpack的代码拆分（CodeSplitting）插件？A.`SplitChunksPlugin`B.`MiniCssExtractPlugin`C.`OptimizeCSSAssetsPlugin`D.`SplitChunksPlugin`12.以下关于浏览器渲染流水线的说法，错误的是？A.Reflow指的是DOM树或CSSOM树的改变导致的页面布局变化。B.Repaint指的是页面的视觉外观发生变化，但布局不变。C.CSS的`transform`和`opacity`属性变化只会触发Reflow。D.合成（Compositing）是将页面分成多个层，并行绘制的优化过程。13.在排查JavaScript内存泄漏时，以下哪种情况最可能发生内存泄漏？A.在全局作用域中定义了一个变量B.使用了`let`或`const`声明循环变量C.在闭包中引用了外部作用域的变量，且该闭包被长期持有D.及时调用了`DOM`元素对应的`removeEventListener`14.以下哪个工具主要用于分析Web应用的内存使用情况和查找内存泄漏？A.ChromeDevToolsNetwork面板B.ChromeDevToolsPerformance面板C.ChromeDevToolsMemory面板D.ChromeDevToolsLighthouse15.对于一个需要频繁触发的滚动事件处理函数，为了提升性能，通常会使用？A.`setTimeout`B.`setInterval`C.防抖（Debounce）D.节流（Throttle）二、多选题1.以下哪些属于WebVitals指标？A.FirstInputDelay(FID)B.LargestContentfulPaint(LCP)C.CumulativeLayoutShift(CLS)D.TimetoLoad(TT)E.TimetoInteractive(TTI)2.以下哪些优化措施有助于提升LCP（LargestContentfulPaint）？A.优化首屏关键图片的大小和格式B.使用懒加载延迟非关键资源的加载C.减少主线程执行JS的时间D.使用ServiceWorker进行关键资源的缓存E.优化CSS选择器，减少重绘和回流3.以下哪些属于HTTP缓存策略的一部分？A.设置`Cache-Control`头B.设置`Expires`头C.使用ETag进行协商缓存D.利用CDN进行缓存E.在HTML中使用`<linkrel="preload">`4.以下哪些情况可能导致浏览器进行Reflow？A.修改元素的宽高B.修改元素的边距（margin）C.修改元素的字体大小（font-size）D.修改元素的背景颜色（background-color）E.添加或删除DOM元素5.ServiceWorker的主要应用场景包括？A.实现离线网页应用（PWA）B.缓存静态资源，提升加载速度C.优化网络请求，如实现请求拦截和重试D.实现实时推送消息（PushNotifications）E.替换主线程执行所有JS代码6.以下哪些是提升JavaScript执行性能的方法？A.使用`WebWorkers`处理耗时任务B.避免在循环中进行高开销操作C.使用`TreeShaking`移除未使用的代码D.尽量使用`let`和`const`代替`var`E.频繁调用`DOM`操作7.以下哪些属于前端性能监控的重要性？A.提升用户体验，降低跳出率B.及时发现并解决线上性能问题C.优化资源利用率，降低服务器成本D.辅助进行A/B测试E.提升网站SEO排名8.以下哪些是图片优化的有效手段？A.使用适合场景的图片格式（如WebP,AVIF）B.对图片进行压缩，在保证质量的前提下减小体积C.使用CSSSprite合并小图标图片D.实现图片懒加载E.使用响应式图片`srcset`和`sizes`属性9.以下哪些说法有助于减少重绘（Repaint）？A.将频繁变动的样式放在单独的CSS类中，通过JS切换类名B.避免使用会触发重绘的CSS属性（如`color`,`background-color`）进行动画C.使用`transform`和`opacity`属性进行动画，因为它们可以由合成器处理D.在`canvas`或`SVG`元素上绘制E.减少DOM操作频率10.以下哪些是前端性能优化的基本原则？A.最小化资源（减少数量、大小）B.延迟加载非关键资源C.优化资源加载顺序D.减少不必要的DOM操作E.提升JavaScript执行效率三、简答题1.请简述HTTP缓存的工作原理，包括强缓存和协商缓存的区别。2.什么是重绘（Repaint）和重排（Reflow）？它们分别有哪些常见的触发场景？3.请解释什么是“按需加载”和“代码拆分”，它们在前端性能优化中分别起到什么作用？4.ServiceWorker是如何工作的？它主要解决了哪些前端性能和体验方面的问题？5.什么是WebVitals？请列举其中的三个核心指标并简述其含义。四、分析题1.假设你正在排查一个Web应用的性能问题，用户反馈加载速度很慢，首屏内容出现多次闪烁和布局抖动。请分析可能的原因，并说明你会使用哪些工具和方法来定位问题。2.给定以下代码片段（假设使用React框架）：```javascriptfunctionUserProfile(){const[data,setData]=useState(null);useEffect(()=>{asyncfunctionfetchData(){constres=awaitfetch('/api/user/data');constjson=awaitres.json();setData(json);}fetchData();},[]);return(<div>{data?(<div><h1>{}</h1><p>{data.description}</p></div>):(<p>Loading...</p>)}</div>);}```请分析这段代码在性能方面可能存在的问题，并提出至少三种优化建议。五、实践题1.假设你正在开发一个使用Webpack打包的React应用。请描述你会如何配置Webpack的`SplitChunksPlugin`来实现JavaScript的代码分割，并简述其配置的关键参数及其作用。2.请简述使用ServiceWorker实现静态资源（如HTML、CSS、JS、图片）缓存的步骤，并说明如何设置缓存策略（如白名单、黑名单、CacheFirst,NetworkFirst,Stale-While-Revalidate）。试卷答案一、选择题1.C解析思路：CLS衡量页面加载期间的布局变化次数和幅度，直接关联视觉稳定性。FCP是内容首次可见的时间，LCP是largestcontentfulpaint，主要关联内容的可见性，TTI是用户可以开始交互的时间。2.B解析思路：减少请求直接减少了用户在加载页面过程中需要传输的数据量，节省了用户的流量费用，降低了带宽消耗。3.B解析思路：协商缓存是在强缓存失效后，浏览器根据之前存储的响应头信息（如ETag,Last-Modified）向服务器发起请求，服务器根据这些信息判断是否可以直接返回缓存内容，而不是强制下载。强缓存则直接使用本地缓存。4.A解析思路：ID选择器（#app）是最快，因为它直接映射到DOM中的唯一元素。之后是标签选择器（div），然后是类选择器（.class1），类选择器需要遍历更多元素。组合选择器会按顺序执行，整体性能受后面选择器的影响。5.A解析思路：WebWorkers允许在后台线程执行JavaScript代码，避免阻塞主线程。ServiceWorkers主要用于网络请求拦截和缓存。Promise.all用于并发操作管理。EventLoop是JavaScript的执行机制，不是解决方案。6.D解析思路：CSSSprite通过合并多个小图片到一个大图片中，减少HTTP请求次数。但这会增加单个图片文件的大小，如果合并的图片过多或差异不大，可能导致加载时间变长，并非绝对优化。7.B解析思路：`will-change`是一个提示，告知浏览器该元素可能会有复杂的视觉变化（如transform,opacity），浏览器可以提前做好优化准备（如创建合成层），但并不保证一定会触发优化或产生预期效果。8.A解析思路：`React.lazy`和`Suspense`配合使用，可以将组件及其依赖的代码分割成单独的chunk，在需要渲染该组件时才加载这个chunk，从而实现组件级别的按需加载，减少初始负载。9.C解析思路：ServiceWorker运行在浏览器环境，主要权限是拦截和处理网络请求、管理缓存，它不能直接修改页面的DOM结构。修改DOM需要通过JavaScript在主线程执行。10.A解析思路：TTFB（TimetoFirstByte）是指从发出HTTP请求到服务器首次响应字节（HTTP头部信息）所需的时间，主要反映服务器处理请求和返回响应的速度。11.B解析思路：`MiniCssExtractPlugin`用于提取Webpack打包后的CSS到单独的文件。`OptimizeCSSAssetsPlugin`用于优化CSS文件大小。`SplitChunksPlugin`是Webpack内置的代码分割插件。`SplitChunksPlugin`本身是一个代码分割插件。12.C解析思路：`transform`和`opacity`属性的变化可以由浏览器的合成器（Compositor）处理，不触发主线程的Reflow，但可能会触发Repaint（如果合成器需要重新绘制该层）或创建合成层。13.C解析思路：闭包会捕获外部作用域的变量，如果这个闭包被长期保留在内存中（例如作为某个长期存在的对象的属性），而被捕获的变量没有被释放，就可能导致内存泄漏。14.C解析思路：ChromeDevTools的Memory面板提供了详细的内存快照、堆分析、内存分配视图等功能，是排查JavaScript内存泄漏和内存使用问题的核心工具。Network面板用于分析网络请求。Performance面板用于分析运行时性能（CPU、帧率、事件）。15.D解析思路：节流（Throttle）是指在指定时间内，无论事件触发多少次，只执行一次事件处理函数，可以限制函数的调用频率，减少计算量。防抖（Debounce）是指在事件触发后，延迟一段时间执行函数，如果在这段时间内事件再次触发，则重新计时，适用于处理快速连续的事件（如滚动）。二、多选题1.A,B,C解析思路：WebVitals定义了三个核心指标：LCP（LargestContentfulPaint）、FID（FirstInputDelay）、CLS（CumulativeLayoutShift）。TTI（TimetoInteractive）虽然也是性能指标，但不在WebVitals核心指标列表中。2.A,B,C,D,E解析思路：提升LCP需要关注首屏最大内容的加载和渲染。优化图片大小和格式（A）、使用懒加载（B）、缓存关键资源（D）、减少重绘回流（E）都能加速首屏渲染。优化JS执行时间（C）也能间接提升LCP，因为JS阻塞可能导致图片加载渲染延迟。3.A,B,C,D,E解析思路：HTTP缓存策略涵盖了多种机制。强制型缓存（强缓存，A,B）和协商型缓存（C）是HTTP缓存的基本类型。CDN（D）通过分布式节点加速内容分发，可以看作是缓存的一种形式或辅助手段。预加载（E）是优化加载顺序和资源获取的技术，也间接关联缓存行为（如预加载资源后可能被缓存）。4.A,B,C,E解析思路：Reflow是DOM结构或样式变化导致页面布局需要重新计算。修改宽高（A）、边距（B）、字体大小（C）都会改变元素尺寸或位置，触发Reflow。添加或删除DOM元素（E）会改变DOM树结构，浏览器需要重新计算剩余元素的布局，也会触发Reflow。修改背景颜色（D）通常只触发Repaint。5.A,B,C,D解析思路：ServiceWorker的主要应用场景包括离线支持（A）、缓存资源（B）、优化网络请求（C）、推送消息（D）。它不能完全替代主线程，也不能直接提升页面渲染速度（渲染速度主要受JS执行、DOM操作、GPU加速影响）。6.A,B,C,D解析思路：提升JS性能的方法包括使用WebWorkers（A）将耗时任务移到后台线程，避免阻塞主线程；优化代码逻辑，避免在循环中进行高开销操作（B）；使用TreeShaking（C）移除未使用的代码，减小包体积；使用let/const（D）有助于优化变量的查找。频繁调用DOM操作（E）会降低性能，是应避免的行为。7.A,B,C,D,E解析思路：前端性能监控的重要性体现在多个方面：提升用户体验（A），慢加载导致用户流失；及时发现并解决线上问题（B），避免负面影响；优化资源利用，降低成本（C）；辅助A/B测试（D），评估优化效果；提升SEO排名（E），搜索引擎会考虑网站速度。8.A,B,C,D,E解析思路：图片优化手段多样：选择合适的格式（A）；压缩（B）；CSSSprite（C）；懒加载（D）；响应式图片（E）。这些都是常见的有效优化方法。9.A,B,C,E解析思路：减少重绘的方法：将变动样式放在单独类中切换（A）；避免使用color,background-color等属性做动画（B）；使用transform,opacity做动画（C）；减少DOM操作（E）。在canvas/SVG上绘制（D）本身不会触发DOM重绘，但canvas绘制有自身的性能考量。10.A,B,C,D,E解析思路：前端性能优化原则：最小化资源（A）；延迟加载（B）；优化加载顺序（C）；减少DOM操作（D）；提升JS执行效率（E）。这些都是公认的基本原则。三、简答题1.HTTP缓存工作原理：HTTP缓存分为强缓存和协商缓存。强缓存直接使用本地缓存，无需请求服务器。其判断依据是HTTP响应头中的`Cache-Control`（优先级最高）、`Expires`（已不常用）、`Pragma`等字段。如果强缓存未命中，或者缓存过期，浏览器会发起请求到服务器，此时使用协商缓存。协商缓存的判断依据是`ETag`（实体标签）和`Last-Modified`（最后修改时间）字段。服务器根据这些字段与本地资源的对应值判断是否可以继续使用本地缓存（304NotModified），否则返回新的资源。2.Reflow（重绘）：指页面布局或元素的几何属性（如位置、大小、边框、边距等）发生变化，导致浏览器需要重新计算元素位置和绘制页面。触发场景包括：修改元素的尺寸（width,height）、位置（margin,padding,border）、字体大小、颜色、布局属性（display）、添加/删除DOM元素等。Reflow通常是必要的，但频繁的Reflow会消耗大量CPU资源。Repaint（重绘）：指页面元素的外观发生变化，但其布局位置未变（如背景颜色、边框颜色、文字颜色、背景图片等）。浏览器只需要重新绘制该元素的外观即可，不需要重新计算布局。触发场景包括：修改元素的背景颜色、边框颜色、文字颜色、背景图片、visibility等。虽然比Reflow消耗资源少，但频繁的重绘仍然会影响性能。3.按需加载：指根据实际需要才去加载某个资源或执行某段代码。例如，当用户滚动到某个区域时才加载该区域的内容，或者当用户点击某个按钮时才加载并显示某个组件。按需加载的主要作用是减少初始加载时的网络请求和数据量，加快首屏加载速度，提升应用响应性。代码拆分：指将一个大的JavaScript文件拆分成多个小的代码块（chunk），然后在需要的时候再加载这些代码块。在前端性能优化中，代码拆分的主要作用是实现JavaScript的按需加载，将代码块与路由或组件关联，只有访问特定路由或组件时才加载对应的代码块，从而减少初始负载。4.ServiceWorker工作原理：ServiceWorker是一个在浏览器后台独立于Web页面的JavaScript脚本，它可以拦截和处理网络请求、管理缓存、推送消息等。它通过注册（注册时创建实例并监听事件）和监听`install`,`activate`,`fetch`等事件来工作。在`install`阶段缓存资源，在`activate`阶段清理旧缓存，在`fetch`事件中拦截网络请求，可以选择使用缓存响应、请求服务器或两者结合。它运行在ServiceWorker线程中，与主线程隔离。ServiceWorker解决的问题：离线体验（A）、缓存资源提升速度（B）、优化网络请求（C）、推送消息（D）。它通过缓存机制减少了网络延迟，通过请求拦截实现了更智能的网络策略，通过后台运行实现了离线支持。5.WebVitals：WebVitals是由Google提出的一组衡量Web页面性能的指标，旨在量化用户体验的关键方面。它包含三个核心指标：*LargestContentfulPaint(LCP)：衡量页面加载过程中的最大内容元素（通常是图像或文本块）何时可见。反映页面加载速度和用户感知的等待时间。*FirstInputDelay(FID)：衡量用户首次与页面进行交互（如点击、滚动、提交）时，从交互时间点到浏览器响应时间点的延迟。反映页面的交互响应性。*CumulativeLayoutShift(CLS)：衡量页面加载期间，由于元素大小变化导致视口内容发生意外的布局偏移的累积程度。反映页面的视觉稳定性。四、分析题1.可能原因及定位方法：*原因分析：*LCP加载慢：首屏最大内容（可能是图片或大文本块）资源过大或加载延迟。*JavaScript阻塞主线程：首屏加载了大量JS，且JS执行时间过长（长时间任务），阻塞了DOM的解析和渲染。*重绘/回流频繁：首屏或附近区域存在大量动态样式变化或DOM操作，导致浏览器频繁重绘或回流，引起闪烁和抖动。*缓存未有效利用：强缓存或协商缓存配置不当，导致资源反复下载。*字体加载问题：字体文件过大或加载慢，导致文本渲染延迟。*第三方脚本影响：首屏加载了影响性能的第三方脚本。*定位方法：*ChromeDevToolsNetwork面板：检查首屏关键资源的加载时间（时长、大小），识别缓慢资源（如大图片、JS文件）。查看缓存状态。*ChromeDevToolsPerformance面板：录制加载过程，分析主线程CPU使用率，查找长时间运行的JavaScript任务（LongTasks），这些任务可能导致页面冻结和布局抖动。观察渲染过程，识别重绘/回流。*ChromeDevToolsMemory面板：检查内存使用情况，排查内存泄漏或内存浪费。*Lighthouse：运行audits，获取LCP,FID,CLS等指标的具体数值和优化建议。*检查源码和配置：查看关键资源的大小、加载方式（是否懒加载、预加载），检查Webpack/Babel等构建工具的配置，检查CSS和JS代码。*逐步排查：可以尝试禁用JavaScript加载，查看是否是JS问题；尝试使用Lighthouse的无障碍模式，禁用网络连接，查看资源是否能从缓存加载。2.代码分析及优化建议：*问题分析：*问题1：`fetch`调用放在`useEffect`中，且`[]`为空依赖数组，这意味着这个`fetch`只会在组件首次挂载时执行一次。如果组件频繁挂载（例如路由切换、列表滚动触发重渲染），会不断重新发起相同的请求，即使数据已经加载。*问题2：`fetch`是同步执行的（在`async`函数内部），虽然使用了`await`，但JS引擎会等待`fetch`完成才继续执行后续代码。如果`fetch`请求耗时较长，会阻塞组件的渲染，导致用户看到加载提示的时间可能比实际数据准备时间更长。*问题3：缓存策略未考虑，每次都会请求服务器，没有利用浏览器缓存或应用级缓存。*优化建议：*建议1：将`fetch`逻辑放入异步组件函数或使用自定义钩子中，并利用React的`memo`或`useMemo`/`useCallback`配合空依赖数组缓存结果，避免在组件每次渲染时都执行。或者，如果数据是列表分页加载，应使用`useEffect`配合路由参数或状态作为依赖，只在数据变化或页码变化时请求。*建议2：将耗时的网络请求（如API调用）抽离到异步函数中，并考虑使用`ReactQuery`或`SWR`等状态管理库，它们内置了缓存、自动重试、请求合并等机制，能更好地处理网络请求和状态管理，减少不必要的请求和JS阻塞。即使不使用这些库，也应明确处理加载状态和错误状态，避免在JS执行完成前渲染空内容或阻塞。*建议3：对API返回的数据进行本地缓存（例如使用`localStorage`,`sessionStorage`,`useState`配合`useMemo`），设置合理的过期时间。对于静态资源（HTML,CSS,JS），确保服务器配置了有效的强缓存（`Cache-Control`头）。*建议4：如果数据不是实时变化的，可以考虑在服务器端设置缓存，减少后端压力。五、实践题1.Webpack配置代码分割：*配置描述：使用Webpack内置的`SplitChunksPlugin`进行代码分割。通过配置`chunks`参数为`all`或指定`test`正则表达式来分割模块。关键参数包括：*`name`:分割后chunk的名称，可以是`async`（异步加载，默认）、`initial`（入口chunk）或包含hash的名称。*`chunks`:指定分割哪些chunk，`all`（分割所有模块）、`async`（只分割非入口的异步模块）、`initial`（只分割入口的模块）。*`minSize`:分割的最小大小，低于此大小的模块不会被分割。*`maxSize`:分割后chunk的最大大小，如果超过此大小会再进行分割。*`minChunks`:至少有多少个模块共享这个chunk，才会进行分割。*`cacheGroups`:（高级）定义更细粒度的分割规则，例如可以单独配置公共模块（vendors）、业务模块、异步模块等的不同分割策略。*示例配置片段：```javascript//webpack.config.jsmodule.exports={optimization:{splitChunks:{chunks:'all',//分割所有模块，包括异步和非异步name:'chunk-[name]-[hash]',//chunk名称包含名称和hashminSize:20000,//最小分割大小为20KBmaxSize:250000,//最大chunk大小为250KBminChunks:2,//至少2个模块共享cacheGroups:{vendors:{test:/[\\/]node_modules[\\/]/,//分割node_modules中的第三方库name:'vendors',//命名chunks:'all',//分割所有第三方库},default:{//默认分割规则，分割业务代码name:'chunk-[name]-[hash]',//命名chunks:'all',//分割所有业务代码}}}}};```2.ServiceWorker实现静态资源缓存步骤及策略：*实现步骤：1.注册ServiceWorker：在主线程的JavaScript代码中注册ServiceWorker。通常放在应用入口文件（如`index.js`）或特定页面的脚本中。```javascriptif('serviceWorker'innavigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/service-worker.js').then(registration=>{console.log('ServiceWorkerregisteredwithscope:',registration.scope);}).catch(error=>{console.log('ServiceWorkerregistrationfailed:',error);});});}```2.创建ServiceWorker脚本：创建一个名为`service-worker.js`的文件（或其他自定义名称），该文件位于网站根目录或指定路径下。3.监听安装事件：在`service-worker.js`中监听`install`事件。在`install`事件处理函数中，使用`caches.open()`打开一个缓存，并将应用所需的静态资源（HTML,CSS,JS,图片等）通过`cache.put()`添加到缓存中。```javascript//service-worker.jsletcacheName='my-cache-v1';self.addEventListener('install',event=>{event.waitUntil(caches.open(cacheName).then(cache=>{//添加需要缓存的资源returncache.addAll(['/','/index.html','/styles/main.css','/scripts/main.js','/images/logo.png','/fonts/myfont.woff']);}));});```4.监听激活事件：监听`activate`事件，用于清理旧缓存。可以在`activate`事件中获取当前注册的ServiceWorker的`claims`数组，然后使用`caches.keys()`获取所有缓存名称，删除不在`claims`中的旧缓存。```javascriptself.addEventListener('activate',event=>{constcacheWhitelist=[cacheName];event.waitUntil(caches.keys().then(cacheNames=>{returnPromise.all(cacheNames.map(cacheName=>{if(cacheWhitelist.indexOf(cacheName)===-1){returncaches.delete(cacheName);}}));}));});```5.拦截网络请