资源加载性能优化

Tue, 04 Mar 2025 09:31:00 +0000

考察点分析

本题主要考核候选人对以下维度的理解：

浏览器资源加载机制：区分preload/prefetch/dns-prefetch的工作原理与应用场景
HTTP协议演进认知：解析HTTP/2 Server Push的RTT优化原理
性能优化实践能力：使用现代API实现懒加载的技术选型与实现细节

具体技术评估点：

资源提示的优先级控制（preload立即加载 vs prefetch空闲加载）
DNS预解析与TCP连接建立的时序关系
Server Push的主动推送机制与传统请求响应模型的差异
IntersectionObserver替代传统滚动监听方案的优势
懒加载实现中的临界条件处理（占位符、加载失败等情况）

技术解析

关键知识点

HTTP/2 Server Push > 资源提示优先级 > IntersectionObserver API

原理剖析

资源提示对比：

preload：强制浏览器立即请求指定资源（优先级：High），适用于当前导航立刻需要的资源（如首屏字体/关键CSS）
prefetch：低优先级预加载未来页面可能使用的资源（如下一页的图片），浏览器空闲时执行
dns-prefetch：提前解析跨域DNS，缩短后续请求的DNS查询时间（约20-120ms）

HTTP/2 Server Push：通过服务端主动推送关联资源，减少客户端解析HTML后再次请求资源的RTT（Round Trip Time）。例如请求index.html时主动推送style.css，消除CSS文件请求的1个RTT（传统HTTP/1.1需要：HTML请求→HTML响应→CSS请求→CSS响应）。

IntersectionObserver：通过异步观察目标元素与视窗交叉状态，避免传统滚动监听的高频计算。当图片进入视口时替换data-src为真实src，实现按需加载。

常见误区

误用preload加载非关键资源，导致关键资源被延迟
认为dns-prefetch能加速同域资源（实际同域DNS已缓存）
未配置Server Push缓存策略导致重复推送
懒加载未设置阈值（threshold）导致图片加载过早

问题解答

资源提示场景：

preload：首屏关键字体、折叠上方CSS/JS
prefetch：用户鼠标悬停时预取下一页商品数据
dns-prefetch：电商平台预解析第三方支付域名DNS

HTTP/2 Server Push：服务端在响应主资源时主动推送子资源，消除客户端"发现-请求"的等待时间。例如推送首屏CSS文件可减少至少1次RTT，但需配合缓存策略避免过度推送。

IntersectionObserver懒加载：

 // 观察所有带data-src的图片
const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) { 
 const img = entry.target
 img.src = img.dataset.src
 observer.unobserve(img) // 加载后解除观察
 }
 })
}, {
 rootMargin: '200px', // 提前200px触发加载
 threshold: 0.01
})

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img))

解决方案

编码优化点

加载失败处理：添加onerror事件切换备用源
占位策略：使用低质量图片占位（LQIP）提升体验
兼容方案：添加IntersectionObserver polyfill或降级为滚动监听

扩展性建议

大流量场景：结合CDN预解析（如<link rel="preconnect">）
低端设备：降低观察阈值，采用渐进加载策略
SEO优化：添加<noscript>标签保证爬虫可抓取

深度追问

如何验证Server Push实际效果？

资源提示 on ZiYang FrontEnd Interview

资源加载性能优化

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

编码优化点 link

扩展性建议 link

深度追问 link