标签添加 onload=”function()”，或用 window.onload` 绑定 JS 函数实现基础加载配置
文档类型与视口声明
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
✅ 作用：<!DOCTYPE html>触发标准模式渲染；viewport元标签确保移动端适配，避免初始缩放导致的布局抖动。
❌ 误区：缺失lang属性可能导致屏幕阅读器无法正确识别语言。
字符集强制声明
<meta charset="UTF-8">应置于<head>首位，防止乱码问题，若遗漏可能导致中文字符显示异常。
图片与媒体加载优化
| 技术手段 | 语法示例 | 核心优势 | 适用场景 |
|---|---|---|---|
| 响应式图片 | <img srcset="image-480w.jpg 480w, image-800w.jpg 800w" |
根据设备分辨率自动选择 | 产品展示图、轮播图 |
| 尺寸限定 | <img sizes="(max-width: 600px) 100vw" |
告知浏览器可用空间 | 流式布局容器内的图片 |
| WebP格式 | <picture><source srcset="image.webp" type="image/webp"><img src="image.jpg"></picture> |
比JPEG小30%，支持透明背景 | 现代浏览器优先使用 |
| 原生懒加载 | <img src="placeholder.jpg" loading="lazy" |
滚动至可视区域再加载 | 长列表页、瀑布流布局 |
| 占位符替代 | <img src="data:image/svg+xml;base64,..." width="100" height="100"> |
极低体积，即时显示 | 骨架屏、极简界面 |
⚠️ 注意：loading="lazy"需配合width/height属性使用，否则会引发CLS（累积布局偏移）惩罚。
脚本加载策略
执行时机控制
| 属性 | 行为特点 | 典型应用场景 |
|---|---|---|
async |
异步下载，下载完成立即执行（无序） | 非关键第三方脚本 |
defer |
异步下载，DOMContentLoaded事件后执行（有序） | 依赖DOM结构的脚本 |
type="module" |
ES模块按需加载，严格遵循依赖关系 | 大型SPA应用 |
动态导入示例
<!-传统方式 -->
<script src="analytics.js" defer></script>
<!-模块化方案 -->
<script type="module">
import { initAnalytics } from './analytics.mjs';
initAnalytics();
</script>
💡 优化建议：将统计类脚本改为defer，核心功能脚本放在<body>底部同步执行。
CSS加载最佳实践
关键路径提取
<style>
/ 首屏必需样式 /
body { font-family: Arial; }
header { background: #fff; }
</style>
<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="fallback.css"></noscript>
🔑 原理：内联关键CSS缩短首屏渲染时间，media="print"配合onload实现渐进增强。
字体加载策略
<link rel="preload" href="font.woff2" as="font" crossorigin>
<style>
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; / 后备字体立即显示 /
}
</style>
⏱️ 数据对比：font-display: swap可使文本闪动时间减少约80%。
预加载与预连接
| 预加载类型 | 语法示例 | 应用场景 |
|---|---|---|
rel="preload" |
<link rel="preload" href="critical.css" as="style"> |
关键资源优先级提升 |
rel="prefetch" |
<link rel="prefetch" href="next-page.html" as="document"> |
预测用户下一步操作 |
rel="preconnect" |
<link rel="preconnect" href="https://cdn.example.com"> |
跨域资源提前建连 |
rel="dns-prefetch" |
<link rel="dns-prefetch" href="//example.com"> |
仅解析DNS记录 |
📊 性能收益：合理使用可使关键路径资源加载时间缩短20%-40%。
懒加载扩展应用
视频懒加载
<video controls preload="metadata" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4" loading="lazy">
您的浏览器不支持HTML5视频
</video>
🎥 要点：preload="metadata"仅预载元数据，poster提供预览图。
Intersection Observer API兜底
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
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触发加载
lazyImages.forEach(img => observer.observe(img));
🚨 兼容性：IE不支持该API，需降级到scroll事件监听。
性能监测工具推荐
| 工具名称 | 核心功能 | 特色指标 |
|---|---|---|
| Lighthouse | 综合性能评分 | First Contentful Paint |
| WebPageTest | 全球节点测试 | StartRender时间 |
| Chrome DevTools | 网络请求瀑布图 | Main Thread Tasks |
📈 诊断方向：重点关注LCP（最大内容绘制）、FID（首次输入延迟）、TTI（交互时间）。
相关问答FAQs
Q1: 为什么我的图片设置了loading="lazy"却没有生效？
A: 常见原因包括：①未设置width/height属性导致布局抖动；②浏览器不支持（如Safari需启用实验性功能）；③图片父容器定位为position: absolute阻断了Intersection Observer检测，解决方案：添加明确的宽高属性，或改用JavaScript Polyfill。
Q2: 如何验证懒加载是否真正生效？
A: 可通过两种方式验证：①浏览器开发者工具Network面板观察请求时机；②Chrome DevTools Coverage标签查看实际加载的资源，正常情况应看到非首屏图片在滚动后才发起请求，若发现提前加载，检查是否有其他脚本强制触发了
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/95644.html
