首屏加载性能优化的核心是减少初始资源体积和请求数，通过懒加载图片（loading="lazy"）、intersectionobserver 降级、路由按需加载（import()）及非核心脚本延后加载实现。
首屏加载性能优化的核心是减少初始资源体积和请求数，懒加载正是围绕“只加载用户当下能看到的内容”来实现的。它不改变页面结构，而是通过延迟非视口资源的加载，让首屏更快渲染、更早可交互。
图片用 loading="lazy" 属性最省事
现代浏览器（Chrome 77+、Firefox 75+、Edge 79+）原生支持 loading="lazy"，只需在非首屏 <img> 标签上添加该属性，浏览器会自动在图片即将进入视口时才发起请求。
- 首屏关键图（如 banner、logo）保持直接写
src，确保优先加载 - 长列表、图文混排中的图片统一加
loading="lazy"和decoding="async"（异步解码，避免阻塞渲染） - 兼容旧浏览器（如 IE 或老版本 Safari）时，需搭配
IntersectionObserver降级处理
用 IntersectionObserver 替代 scroll 监听
滚动监听（window.addEventListener('scroll', ...)）容易触发频繁重排、卡顿；IntersectionObserver 是浏览器原生 API，异步执行、不阻塞主线程，性能更好，也更精准。
- 把真实图片地址存在
data-src，src先设为空或占位图 - 创建观察器时可配置
rootMargin: '100px'，让图片提前 100px 开始加载，避免快速滚动时白屏 - 加载完成后调用
observer.unobserve(img)，防止重复触发
路由和组件按需加载
单页应用中，大量 JS 代码一次性下载是首屏慢的主因之一。通过动态导入（import()），可把不同路由或功能模块拆成独立 chunk，访问时才加载。
- Vue Router 中：
component: () => import('./views/Profile.vue') - React Router 中：配合
React.lazy()和<suspense></suspense> - Webpack 或 Vite 会自动识别
import()并做代码分割，无需额外配置
非核心脚本延后加载
统计、分享、客服等第三方脚本不影响首屏渲染，可推迟到页面空闲或用户交互后加载。
- 用
setTimeout(() => import('./analytics.js'), 3000)延后 3 秒再加载 - 监听首次点击或滚动后触发加载，比如用户点开“评论区”再加载评论组件
- 对模态框、折叠面板等交互区域，首次展开时才加载对应逻辑，而非页面一打开就绑定
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
