★ FEATURED ARTICLE 1. 从一个页面卡到没法用的真实场景说起前端性能优化这个话题讲的人多真正能讲清楚为什么慢的人少。我见过太多项目代码写得挺漂亮组件拆分也合理但一到真实设备上就露馅——首屏白屏三四秒滚动列表掉帧点个按钮要等半秒才有反应。你去问开发者得到的回答往往是数据量大接口慢设备差但真拿性能面板一跑问题根本不在这些地方。异步加载和性能优化本质上解决的是一个矛盾浏览器的主线程只有一条而你要做的事情太多。解析HTML、执行JS、计算样式、布局、绘制、处理用户输入全挤在同一个线程里排队。只要有一个环节耗时过长后面的全部堵死。用户感受到的就是卡。这篇内容适合谁看如果你写过前端知道async和defer的区别但说不清楚它们和DOMContentLoaded的触发顺序关系如果你用过懒加载但只是复制了别人的IntersectionObserver代码没想过为什么这么写如果你做过性能优化但优化完不知道到底提升了多少——那这篇就是写给你的。我会从浏览器加载资源的底层机制讲起把异步加载的几种方案拆开对比再落到实际项目里怎么选、怎么测、怎么避免优化了个寂寞。关键词里的异步加载和性能优化不是两个独立的话题它们是一体两面。异步加载是手段性能优化是目的而连接这两者的桥梁是对浏览器渲染流程的理解。不理解渲染流程你的异步加载可能只是把阻塞从A点搬到了B点总量一点没少。2. 浏览器到底是怎么卡住的主线程阻塞的底层逻辑2.1 关键渲染路径上的五个关卡要理解异步加载为什么有用先得知道浏览器从拿到HTML到画出第一个像素中间经历了什么。这条路径业内叫关键渲染路径大致分五步构建DOM树解析HTML标签遇到script会暂停解析除非有async或defer因为JS可能修改DOM。构建CSSOM树解析CSSCSS会阻塞渲染但不阻塞DOM解析。合成渲染树DOM和CSSOM合并只保留可见节点。布局计算每个节点的位置和尺寸。绘制把像素画到屏幕上。这五步里JS执行和CSS解析是最容易造成阻塞的两个环节。一个500KB的JS文件在低端手机上解析加执行可能要1.5秒以上这1.5秒里页面就是白屏。而CSS虽然不阻塞DOM解析但它阻塞渲染——浏览器必须等CSSOM构建完才能合成渲染树所以一个慢加载的CSS文件同样会让用户盯着白屏。注意很多人以为CSS不阻塞就无所谓实际上link relstylesheet放在head里如果加载慢首屏渲染会被硬生生推迟。这就是为什么关键CSS要内联。2.2 同步脚本的多米诺骨牌效应看一段最常见的代码head script srcanalytics.js/script script srcvendor.js/script script srcapp.js/script /head body div idroot/div /body浏览器解析到第一个script时会做三件事停止解析HTML、下载脚本、执行脚本。执行完才继续往下解析。如果analytics.js的服务器响应慢后面两个脚本连下载都开始不了。这就是串行阻塞——三个脚本的下载时间不是相加就是好的实际因为网络往返往往比相加还长。更隐蔽的问题是这三个脚本执行时div idroot还没被解析出来所以app.js里如果直接document.getElementById(root)会拿到null。这就是为什么老代码里到处是window.onload或者把脚本放/body前面。2.3 主线程被占满时用户输入会怎样假设你的JS正在执行一个耗时800ms的计算这时候用户点击了一个按钮。浏览器的主线程忙着算点击事件只能进队列等着。等计算结束事件才被处理。用户感知到的就是点了没反应然后可能再点几下于是队列里堆了更多点击事件处理完一个又触发新的渲染恶性循环。这就是长任务的危害。业内一般把超过50ms的任务定义为长任务因为50ms是用户能感知到即时响应的阈值。一个长任务如果达到200ms用户就会觉得卡顿明显。异步加载的核心价值就是把非关键的长任务从关键路径上挪走让主线程尽早空出来响应用户。但挪走的方式有很多种选错了等于白挪。3. async、defer、动态插入三种异步加载方案的真实差异3.1 一张表看清async和defer的本质区别很多人背过async是下载完立即执行defer是等DOM解析完再执行但具体到执行顺序和适用场景就模糊了。我用一张表把关键差异列清楚特性普通scriptasyncdefer是否阻塞HTML解析是否否执行时机下载完立即执行下载完立即执行DOM解析完成后、DOMContentLoaded前多个脚本执行顺序按文档顺序不确定谁先下载完谁先执行按文档顺序是否保证DOM就绪否否是适用场景极少独立第三方脚本有依赖关系的业务脚本关键点在于执行顺序。async脚本之间没有顺序保证因为每个脚本的下载速度不同。你把vendor.js和app.js都标成async如果app.js先下载完它会在vendor.js之前执行直接报错。所以async只适合那些完全独立、不依赖其他脚本、也不被其他脚本依赖的场景比如统计代码、广告脚本。defer则保证了顺序而且执行时DOM已经解析完毕你可以放心操作DOM。现代前端项目里业务入口脚本基本都应该用defer。3.2 动态插入script被低估的精细控制手段除了HTML属性还可以用JS动态创建script标签function loadScript(src) { return new Promise((resolve, reject) { const script document.createElement(script); script.src src; script.onload resolve; script.onerror reject; document.head.appendChild(script); }); } // 按需加载 button.addEventListener(click, async () { await loadScript(/js/heavy-editor.js); initEditor(); });动态插入的script默认是async行为但你可以手动设置script.async false来让它按插入顺序执行。这种方式的最大价值是按需加载——用户不点那个按钮那个几百KB的编辑器代码就永远不下载。我实测过一个富文本编辑器场景把编辑器代码从主包拆出来动态加载后首屏JS体积从1.2MB降到380KB低端机上首屏时间从4.2秒降到1.8秒。这个收益比任何微调都大。3.3 为什么把脚本放body底部不再是首选早期优化建议是把所有script放/body前这样HTML先解析完脚本最后执行。这个做法确实能避免阻塞解析但有个问题脚本的下载被推迟到了HTML解析之后。也就是说浏览器要先花时间解析完整个HTML才开始下载JS白白浪费了并行下载的机会。而defer脚本在HTML解析的同时就开始下载只是执行推迟到解析完成。所以defer比放底部更优——下载和执行都安排在了最合理的时间点。实操心得现代项目里head中放defer脚本配合link relpreload预加载关键资源是首屏优化的标准组合。我经手的项目里光是把入口脚本从底部移到head加defer配合preload首屏就能快200-400ms。4. 懒加载不只是图片资源分层的完整策略4.1 图片懒加载的三种实现与性能对比图片懒加载是最常见的异步加载场景。主流有三种实现方案一scroll事件 getBoundingClientRectwindow.addEventListener(scroll, () { images.forEach(img { const rect img.getBoundingClientRect(); if (rect.top window.innerHeight) { img.src img.dataset.src; } }); });这个方案的问题是scroll事件触发极其频繁每次都要遍历所有图片并计算位置主线程压力大。必须配合节流但节流又会带来延迟。方案二IntersectionObserverconst observer new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { const img entry.target; img.src img.dataset.src; observer.unobserve(img); } }); }, { rootMargin: 200px }); images.forEach(img observer.observe(img));IntersectionObserver由浏览器底层实现不占用主线程做位置计算性能远优于scroll方案。rootMargin: 200px表示提前200px就开始加载避免用户滚动到才加载导致的空白。方案三原生loadinglazyimg srcphoto.jpg loadinglazy alt...一行属性搞定浏览器原生支持。但要注意原生懒加载的触发时机由浏览器决定你无法控制预加载距离而且部分旧版本浏览器不支持。我的建议是新项目优先用原生需要精细控制时用IntersectionObserver。4.2 组件级懒加载React.lazy和动态import框架层面的懒加载核心是把代码分割成多个chunk路由切换时才加载对应chunk。const HeavyChart React.lazy(() import(./HeavyChart)); function Dashboard() { return ( Suspense fallback{Spinner /} HeavyChart / /Suspense ); }这里有个容易踩的坑Suspense的fallback如果是个复杂的loading组件它自己的渲染也会消耗时间。我见过fallback里放了一个带动画的SVG结果loading动画本身卡顿。fallback要尽量简单一个纯CSS的骨架屏就够了。另一个坑是过度分割。把每个小组件都拆成独立chunk会导致请求数暴增HTTP/1.1下反而更慢。合理的做法是按路由和明显的功能模块分割单个chunk不要小于30KB太小了请求开销占比高也不要大于300KB太大了加载慢。4.3 数据懒加载与虚拟列表列表数据量大时一次性渲染几千个DOM节点布局和绘制会直接卡死。虚拟列表的思路是只渲染可视区域内的节点。function VirtualList({ items, itemHeight, visibleCount }) { const [scrollTop, setScrollTop] useState(0); const startIndex Math.floor(scrollTop / itemHeight); const endIndex Math.min(startIndex visibleCount, items.length); const visibleItems items.slice(startIndex, endIndex); return ( div style{{ height: 500px, overflow: auto }} onScroll{e setScrollTop(e.target.scrollTop)} div style{{ height: items.length * itemHeight, position: relative }} {visibleItems.map((item, i) ( div key{startIndex i} style{{ position: absolute, top: (startIndex i) * itemHeight, height: itemHeight }} {item.content} /div ))} /div /div ); }虚拟列表的关键参数是itemHeight如果每项高度不固定实现会复杂很多需要动态测量。我建议尽量让列表项高度固定这样能用最简单的算法性能也最好。实操心得虚拟列表配合requestAnimationFrame节流scroll事件能进一步减少重渲染次数。我实测过1万条数据的列表不做虚拟化时滚动帧率只有12fps做了之后稳定在58fps以上。5. 性能优化的度量不测量就等于瞎优化5.1 三个必须关注的指标优化之前先建立基线否则你不知道优化有没有效果。前端性能有三个核心指标LCP最大内容绘制首屏最大元素出现的时间反映加载性能。目标小于2.5秒。FID首次输入延迟用户第一次交互到响应的延迟反映交互性能。目标小于100ms。CLS累积布局偏移页面加载过程中元素移动的程度反映视觉稳定性。目标小于0.1。这三个指标在Chrome DevTools的Lighthouse面板里都能跑出来。但Lighthouse是实验室数据真实用户数据要用PerformanceObserver采集new PerformanceObserver((list) { const entries list.getEntries(); const lastEntry entries[entries.length - 1]; console.log(LCP:, lastEntry.startTime); }).observe({ type: largest-contentful-paint, buffered: true });5.2 用Performance面板定位长任务打开DevTools的Performance面板录制一段操作你会看到主线程的时间轴。红色的长任务块就是罪魁祸首。点开长任务能看到具体是哪个函数耗时最长。我排查过一个案例页面滚动时卡顿Performance面板显示每次滚动都有一个120ms的长任务。点进去发现是一个scroll监听里做了JSON.parse解析大对象。把解析结果缓存起来后长任务消失滚动恢复流畅。这个排查过程的关键是不要猜要看火焰图。很多人优化靠直觉觉得这里可能慢改完发现没效果。火焰图会直接告诉你时间花在哪。5.3 优化前后的对比方法优化完怎么证明有效我的做法是固定测试环境同一台设备、同一网络条件、清空缓存。用Lighthouse跑5次取中位数避免单次波动。记录关键指标LCP、TBT、总JS体积。优化后再跑5次对比。指标优化前优化后提升LCP3.8s1.9s50%TBT820ms210ms74%首屏JS1.2MB380KB68%这张表是我一个真实项目的优化记录。可以看到代码分割带来的JS体积下降是TBT改善的主因而LCP的改善主要来自关键资源预加载。6. 那些年我踩过的异步加载坑6.1 defer脚本里的DOMContentLoaded陷阱defer脚本在DOMContentLoaded之前执行但如果你在defer脚本里又动态插入了一个普通script那个script的执行时机就不确定了。我遇到过一个问题defer入口脚本里动态加载了一个polyfill结果polyfill还没执行入口脚本的后续代码就跑了直接报错。解决办法是用Promise串行化依赖// 入口脚本 (async function() { await loadScript(/js/polyfill.js); await loadScript(/js/main.js); init(); })();6.2 懒加载图片的CLS问题图片懒加载最容易被忽视的副作用是布局偏移。图片没加载时高度是0加载后突然撑开把下面的内容顶下去CLS直接爆表。解决办法是给图片容器设置固定的宽高比.img-wrapper { aspect-ratio: 16 / 9; background: #f0f0f0; } .img-wrapper img { width: 100%; height: 100%; object-fit: cover; }这样图片加载前后容器高度不变CLS为0。aspect-ratio现在兼容性已经很好了放心用。6.3 预加载用过头反而变慢link relpreload能提前加载关键资源但preload的资源会占用带宽。如果你preload了太多东西真正关键的资源反而被挤了。我见过一个项目preload了8个字体文件结果首屏JS的下载被拖慢LCP反而变差。我的原则是preload只用于首屏渲染必需的、且发现时机较晚的资源比如关键字体、首屏大图、入口CSS。一般不超过3个。6.4 第三方脚本的失控第三方脚本统计、客服、广告是性能杀手因为它们不受你控制而且经常用同步加载。我的处理方式是所有第三方脚本一律async或动态加载。给第三方脚本设置加载超时超时就放弃。用requestIdleCallback在浏览器空闲时加载非关键第三方脚本。requestIdleCallback(() { loadScript(https://third-party.com/analytics.js); });requestIdleCallback会在浏览器空闲时执行不抢占关键任务的资源。但要注意Safari对它的支持较晚需要polyfill。7. 从加载到渲染一个完整的优化链路复盘把前面讲的东西串起来一个典型的首屏优化链路是这样的第一步资源分层。把资源分成三类关键资源首屏CSS、入口JS、首屏字体、次要资源非首屏组件、非关键图片、第三方资源统计、客服。关键资源用preload提前加载次要资源懒加载第三方资源空闲时加载。第二步脚本异步化。入口脚本用defer独立第三方脚本用async按需功能用动态import。确保主线程尽早空出来。第三步图片和列表懒加载。图片用loadinglazy或IntersectionObserver长列表用虚拟滚动。注意设置占位避免CLS。第四步度量验证。用Lighthouse和PerformanceObserver采集数据对比优化前后的LCP、TBT、CLS。第五步持续监控。上线后用真实用户监控RUM持续采集指标发现回归及时处理。这套链路我在多个项目里跑过效果稳定。但有一点要提醒不要一次性全上。每做一个改动就测一次否则出了问题你不知道是哪个改动导致的。性能优化是个精细活急不得。最后分享一个我个人的习惯每次优化前先在代码里加一行console.time(xxx)优化后对比。虽然土但直观。等确认有效果了再换成正式的Performance API采集。这个习惯帮我避免了很多次以为优化了其实没有的尴尬。
阅读完成 · 觉得有帮助？
