上一篇
html如何设置加载
在 ` 标签添加 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标签查看实际加载的资源，正常情况应看到非首屏图片在滚动后才发起请求，若发现提前加载，检查是否有其他脚本强制触发了
