async/defer/preload性能优化

这两个是前端性能优化中非常重要的技术点。以下是详细解释和示例代码,帮助你理解它们的用途和实现方式:

1. 使用 asyncdefer 属性优化 <script> 标签的加载

问题背景
  • 默认情况下,浏览器在解析到 <script> 标签时会暂停 HTML 解析,下载并执行脚本,这会导致页面渲染阻塞,影响加载性能。
  • 使用 asyncdefer 属性可以优化脚本的加载行为,减少对页面渲染的影响。
async 属性
  • 作用:异步加载脚本,脚本下载完成后立即执行,不会阻塞 HTML 解析。

  • 特点

    • 脚本的执行顺序不确定(先下载完的先执行)。
    • 适用于不依赖其他脚本的独立脚本。
  • 示例

    html 复制代码
    <script src="script1.js" async></script>
    <script src="script2.js" async></script>
defer 属性
  • 作用 :延迟加载脚本,脚本会在 HTML 解析完成后、DOMContentLoaded 事件触发前执行。

  • 特点

    • 脚本的执行顺序与它们在文档中的顺序一致。
    • 适用于依赖 DOM 或其他脚本的脚本。
  • 示例

    html 复制代码
    <script src="script1.js" defer></script>
    <script src="script2.js" defer></script>
对比
属性 加载行为 执行时机 适用场景
默认 阻塞 HTML 解析 下载完成后立即执行 无特殊需求
async 异步加载,不阻塞解析 下载完成后立即执行 独立脚本,不依赖其他脚本
defer 异步加载,不阻塞解析 HTML 解析完成后执行 依赖 DOM 或其他脚本的脚本

问题背景
  • 浏览器默认的资源加载优先级可能无法满足某些关键资源的需求,导致页面渲染延迟。
  • 使用 <link rel="preload"> 可以提前加载关键资源,优化页面性能。
  • 作用:告诉浏览器提前加载指定资源,确保资源在需要时已经可用。

  • 特点

    • 不会自动执行或应用资源,只是提前加载。
    • 适用于字体、图片、脚本、样式等关键资源。
  • 示例

    html 复制代码
    <!-- 预加载 CSS 文件 -->
    <link rel="preload" href="styles.css" as="style">
    <!-- 预加载 JavaScript 文件 -->
    <link rel="preload" href="script.js" as="script">
    <!-- 预加载字体文件 -->
    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
    <!-- 预加载图片 -->
    <link rel="preload" href="image.jpg" as="image">
as 属性
  • 用于指定资源的类型,帮助浏览器正确设置优先级和缓存策略。
  • 常见值:stylescriptfontimagedocument 等。
注意事项
  • 预加载的资源应在页面中实际使用,否则会造成资源浪费。
  • 对于跨域资源(如字体),需要添加 crossorigin 属性。

3. 实际应用场景

  • async/defer
    • 第三方分析脚本(如 Google Analytics)通常使用 async
    • 依赖 DOM 的脚本(如初始化组件)通常使用 defer
  • <link rel="preload">
    • 预加载首屏关键 CSS 或字体,减少渲染阻塞。
    • 预加载首屏图片,提升用户体验。

4. 总结

  • asyncdefer:用于优化脚本加载行为,减少页面渲染阻塞。
  • <link rel="preload">:用于提前加载关键资源,确保资源在需要时可用。
  • 这些技术可以显著提升页面加载性能,是现代前端开发中常用的优化手段。

示例代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Optimization Example</title>
  <!-- 预加载关键资源 -->
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="script.js" as="script">
  <!-- 使用 defer 加载依赖 DOM 的脚本 -->
  <script src="script.js" defer></script>
  <!-- 使用 async 加载独立脚本 -->
  <script src="analytics.js" async></script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

通过理解并应用这些技术,你可以显著提升页面的加载速度和用户体验。

相关推荐
LeeAt6 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅7 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
hahala233324 分钟前
ESLint 提交前校验技术方案
前端
夕水1 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了1 小时前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
ac.char1 小时前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin