HTML5 页面性能调整大全：图片懒加载、资源预加载、渲染阻塞方法

页面慢一秒，使用者少一半。这不是危言耸听，是数据的残酷。

HTML5 给了我们一整套武器库——从语义化标签到 Web Storage，从 Canvas 到 Service Worker。但工具再多，用不对就是在浪费性能。这篇文章把三个最主要的调整方向讲透：图片懒加载、资源预加载、渲染阻塞每一条都是能直接落地的实战方案。

一、图片懒加载：非首屏资源的最优解

图片通常占页面带宽的 % 以上。把它们全堆在首屏加载，等于让使用者为根本看不到的内容买单。

方案一的观点是，loading="lazy" —— 最简单。优先用

html

浏览器会自动延迟加载视口外的图片，滚动到附近时才触发请求。支持 Chrome、Firefox、Edge，Safari 也已跟进。

兼容性检测

javascript
const isLazySupported = 'loading' in HTMLImageElement.prototype;

不支持的浏览器需要降级到方案二或三。

方案二这方面，Intersection Observer API —— 性能最优

比 scroll 事件监听高效得多。异步触发，不阻塞主线程：

javascript
const images = document.querySelectorAll;const observer = new IntersectionObserver => {
entries.forEach(entry => {
if {
const img = entry.target;话说回来，img.src = img.dataset.src;
img.removeAttribute;observer.unobserve;}
})，},{ rootMargin: '200px' });// 距视口 200px 时就开始加载
images.forEach);

相比 scroll 事件 + getBoundingClientRect 的方案，IO 不会因高频触发而拖垮性能。

再看方案三，scroll 事件 + 节流 —— 兼容性兜底

javascript
function lazyLoad {
const images = document.querySelectorAll;images.forEach(img => {
const rect = img.getBoundingClientRect;if {
img.src = img.dataset.src;img.removeAttribute;}
})，}
// 必须加节流，否则 scroll 事件每秒触发上百次
let ticking = false;window.addEventListener => {
if {
requestAnimationFrame => { lazyLoad;ticking = false;})，ticking = true;}})，

三种方案对比:

>极高当前页面必须的资源最高字体,首屏图片,关键JS/CSS>prefetch未来页面可能用的资源最低下一页,使用者常访问的路由>preconnect提前建立服务器连接中CDN,第三方API,Web字体

>CSS放head。JS放body底部经典且有效内联首屏关键CSS外部CSS用 preload媒体查询不阻塞media属性指定的CSS只在匹配时才阻塞

>减少重排重绘 动画性能生死线 频繁读写 offsetTop getBoundingClientRect会强制同步重排 是性能杀手.