- defer 属性： 在 部分使用
- async 属性：async 属性也用于异步加载脚本，但它会在脚本下载完成后立即执行，不考虑页面的解析进度。这对某些独立的、不会依赖于其他脚本或 DOM 结构的脚本很有用。
总结
部分： 适合需要立即执行的脚本，但可能阻塞页面渲染。 底部： 适合一般脚本，能提高页面加载性能和用户体验。 使用 defer 或 async： 现代浏览器支持这些属性，可以同时兼顾性能和功能需求。在前端中，defer和lazy是两种不同的资源加载优化方式，主要用于处理脚本（script）和图片（img）的加载时机，核心区别如下：
一、作用对象与场景不同
• defer：仅用于脚本（script标签） 的加载，控制脚本在浏览器中的执行时机。
• lazy：主要用于图片（img标签） 的懒加载（需配合loading="lazy"属性），也可用于脚本（ES模块中import()动态导入时隐含懒加载）。
二、加载与执行机制对比
- defer（脚本专用）
• 加载时机：与HTML解析并行下载脚本，不阻塞DOM构建。
• 执行时机：当DOM解析完成后（DOMContentLoaded事件前），按脚本标签的顺序执行。
• 案例：
- lazy（图片/脚本）
• 图片场景（loading="lazy"）：
◦ 图片初始不加载，当用户滚动到可视区域附近时才开始加载（通过浏览器原生懒加载机制）。
◦ 兼容写法：需搭配loading="lazy"属性，低版本浏览器可回退到普通加载。
• 脚本场景（ES模块动态导入）：
◦ 通过import()动态导入模块时，脚本会被懒加载（异步下载，不阻塞主线程）。 // 点击按钮时才加载模块（懒加载） button.addEventListener('click', async () => { const module = await import('./module.js'); }); 三、对页面性能的影响
• defer的核心价值：
◦ 避免脚本阻塞DOM解析，确保首屏渲染优先完成（适合加载非关键的全局脚本，如统计工具）。
• lazy的核心价值：
◦ 图片懒加载：减少首屏加载的资源量，尤其适合长列表或多图页面（如减少50%以上的首次图片请求）。
◦ 脚本懒加载：按需加载模块，减少首页JS体积（如SPA中路由组件的懒加载）。
四、兼容性与使用建议
• defer：
◦ 兼容性好（IE9+支持），适用于所有需要异步加载但按顺序执行的脚本。
• lazy：
◦ 图片loading="lazy"：Chrome 76+、Firefox 75+等现代浏览器支持，低版本需用JS库（如lazysizes）兼容。
◦ 脚本动态导入（import()）：需babel转译或Webpack打包支持，适合现代前端框架（Vue/React）。
总结：何时选 defer 或 lazy？
• 选defer：
◦ 希望脚本异步加载，但保持执行顺序（如多个相互依赖的JS文件）。
• 选lazy：
◦ 图片：长页面、列表页的图片，避免首屏加载过多资源。
◦ 脚本：模块级的按需加载（如组件、路由的动态导入）。
如果需要具体场景的代码示例，可以告诉我，帮你进一步拆解实现细节！
