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>

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

相关推荐
paopaokaka_luck19 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js