位置：首页-资讯-后端开发

Astro简介：智能的JavaScript延迟加载

2024-12-01 01:37

短信预约 -IT技能 免费直播动态提醒

审校 | 孙淑娟

Astro是当前JavaScript热潮中的一种新方法：从响应式前端获得更多性能。它是由创建Snowpack构建工具的同一团队开发的。

已经有一些尝试通过避免昂贵的预取和引导来提高性能，这些操作已经影响了类似于React的框架。

Astro采用了一种有趣而新颖的方法。它是一个构建系统，可以让用户使用任何想要的框架（React、Svelte、Vue等），然后找到最适合使用JavaScript延迟加载的地方。可以将其视为捆绑时应用于应用程序的一种智能代码拆分。

因此，用户可以使用熟悉的框架，但也可以获得潜在的巨大性能优势。

孤岛架构

Astro提出的Web架构有时被称为孤岛架构。其核心思想是这些孤岛是交互式、依赖于JavaScript的组件，被纯HTML/CSS标记包围。

通过以这种方式分割应用程序，可以将所有HTML直接发送到浏览器，因此用户可以与之交互，而依赖于JavaScript的部分只能在需要时加载。甚至可以告诉Astro推迟JavaScript，直到组件对用户可见为止。

采用Astro

可以通过使用在线沙盒来熟悉Astro。点击这个链接（https://astro.build/play）打开它。

这个链接将显示名称为Page.astro的简单页面，并带有时间戳。需要注意页面（清单1）是如何分成两个部分的。第一部分由第一个点划线(---)表示，包含将在构建时而不是运行时在服务器上执行的代码。第二部分由第二个点划线表示，包含要在运行时交付的标记。

清单1.简单的Astro沙箱

---
import {format} from 'date-fns';
 // Welcome to Astro!
 // Write JavaScript & TypeScript here, in the "component script."
 // This will run during the build, but never in the final output.
 // Use these variables in the HTML template below.
 //
 // Full Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

 const builtAt: Date = new Date();
 const builtAtFormatted = format(builtAt, 'MMMM dd, yyyy -- H:mm:ss.SSS');
---
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Astro Playground</title>
    <style>
      header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 15vh;
        font-family: Arial;
      }
      .note {
        margin: 0;
        padding: 1rem;
        border-radius: 8px;
        background: #E4E5E6;
        border: 1px solid #BBB;
      }
    </style>
  </head>
  <body>
    <header>
      <img width="60" height="80" class="lazy" data-src="https://bestofjs.org/logos/astro.svg" alt="Astro logo">
      <h1>Hello, Astro!</h1>
      <p class="note">
        <strong>RENDERED AT:</strong>
>
        {builtAtFormatted}
      </p>
    </header>
  </body>
</html>

需要注意｛builtAtFormatter｝如何用于在标记中引用构建时变量。

在Astro中添加组件

现在添加一个组件。单击顶部文件栏中的加号图标，如图1所示。

图1.添加组件

用户的新组件将收到一个默认名称(Component1.astro)和内容，如清单2所示。

清单 2. Component1.astro

---
const name = "Component"
---
<h1>Hello {name}</h1>

这里又有一个简单的变量赋值和显示，可以利用主页中的组件。

返回到Page.astro。需要注意的是，系统已将导入插入到JavaScript段中：

import Component from '@/Component.astro';

可以通过将插入标记来使用这一组件。执行这个操作，将在预览窗口中看到子组件的输出。

在Astro中使用框架

Astro的超级能力是它对各种其他框架的支持。它通过在构建过程中使用渲染引擎来实现这一点，并将它们编译成组件“孤岛”实现这一点。以下了解下这是如何工作的。

如果打开这个链接，将看到一个运行Svelte组件的Astro应用程序（https://stackblitz.com/edit/github-5jbyfh?file=astro.config.mjs中的示例演示了几个显示引擎）。

在上面链接的Svelte演示中，首先要注意的是astro.config.mjs文件。该文件的内容类似于清单3。

清单3.启用Svelte渲染器

export default  ({
  // Enable the Svelte renderer to support Svelte components.
  renderers: ['@astrojs/renderer-svelte'],
  });

清单3展示了如何启用Svelte，因此引擎将理解Svelte组件。现在可以将Svelte文件直接导入Astro文件。例如，将这一行添加到/pages/index.astro：

import Counter from '../components/Counter.svelte

现在可以在Astro中使用Svelte中的Counter，如清单4所示。

清单4.在Astro中使用Svelte组件

<Counter client:visible>
   <h1>Hello, Svelte!</h1>
   </Counter>

尽管这是Svelte的典型用法，但需要注意Counter上有一个特定于Astro的属性：client:visible。这意味着组件不会被加载到客户端，除非它在页面上可见。因此，它以最少的努力实现了一些细粒度的延迟加载。

Astro支持Svelte、React、Vue、Solid、Preact和Lit。使用它们的过程就像使用Svelte一样。事实上，可以启用多个显示引擎并在Astro应用程序中并排使用它们。

除了集成之外，Astro还提供了几个主题和启动器。

使用Astro微调部分水合作用

人们已经看到了client:visible指令的作用。还有其他可用的。在每种情况下，该指令首先告诉Astro在客户端上呈现组件及其附带的JavaScript，而不是执行服务器显示并发送HTML。然后，它会告诉Astro如何为组件进行水合。

Astro客户端指令

Astro的客户端指令控制页面上组件的水合方式。

<MyComponent client:load/>：在页面加载时水合组件。  
<MyComponent client:idle/>：一旦主线程空闲（使用requestIdleCallback()），就会水合组件。  
<MyComponent client:visible/>：元素进入视口后立即水合组件（使用Intersection Observer）。适用于页面下方的内容。
<MyComponent client:media={QUERY}/>：一旦浏览器匹配给定的媒体查询（使用matchMedia），就会水合组件。对于侧边栏切换或仅应在移动或桌面设备上显示的其他元素很有用。  
<MyComponent client:only={string}/>：在页面加载时水合组件，仅在客户端上呈现。将组件的框架作为字符串（例如，“svelte”）。

构建时方法

由于Astro本质上是一个构建工具，它可以完全控制最终发送到用户浏览器的内容。这意味着除了使用延迟加载的JavaScrip做一些事情之外，Astro还可以处理它如何交付其他资产，例如CSS。

此外，Astro的目标是将尽可能多的JavaScript提取为直接的HTML，这意味着更少的网络数据、更少的浏览器流失和更快的交互时间。

总体而言，尽管Astro更适合静态网站，但它是一种有前途的创新方法，也是一个非常活跃的项目，在GitHub上有将近16000颗星。

原文Intro to Astro: Clever lazy loading for JavaScript，作者：Matthew Tyson

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript Astro 前端

来源：51CTO 内容投诉

Astro简介：智能的JavaScript延迟加载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

猜你喜欢

Astro简介：智能的JavaScript延迟加载

Astro本质上是一个构建系统，采用一种更具发展前途的新方法来处理前端JavaScript。它与React、Svelte、Vue和其他流行的框架一起工作。

JavaScript Astro 前端2024-12-01

Hibernate集合类型的延迟加载特性介绍

本篇内容主要讲解“Hibernate集合类型的延迟加载特性介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Hibernate集合类型的延迟加载特性介绍”吧!Hibernate集合类型的延迟加载

2023-06-17

懒加载与延迟加载在PHP接口性能优化中的实践（PHP接口性能优化中懒加载与延迟加载的运用）

懒加载和延迟加载是PHP接口性能优化的有效技术。懒加载在需要时才加载资源，而延迟加载在页面加载后延迟加载非关键功能。在PHP中，可以使用lazy_load扩展实现图像懒加载。对于非关键脚本和样式表，可以使用JavaScript的defer和media="print"属性实现延迟加载。这些技术可以减少初始页面加载时间、提升响应速度和降低内存消耗，但可能会增加延迟加载后的延迟时间，并且不适用于所有资源。最佳实践包括仅对非关键资源使用懒加载和延迟加载、避免对关键内容使用延迟加载、使用适当的加载策略，并监控影响并

2024-04-02

一文读懂JavaScript 中的延迟加载属性模式

2024-04-02

计算机网络中网站性能延迟加载图像的示例分析

这篇文章给大家分享的是有关计算机网络中网站性能延迟加载图像的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。由于图片是web上最流行的内容类型之一，因此网站的页面加载时间很容易成为一个问题。即使经过适当的优

2023-06-09

编程热搜

Python 学习之路 - Python
一、安装Python34Windows在Python官网（https://www.python.org/downloads/）下载安装包并安装。Python的默认安装路径是：C:\Python34配置环境变量：【右键计算机】--》【属性】-
chatgpt的中文全称是什么
chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型，它能够通过学习和理解人类的语言来进行对话，还能根据聊天的上下文进行互动，并协助人类完成一系列
C/C++中extern函数使用详解
C/C++可变参数的使用
可变参数的使用方法远远不止以下几种，不过在C,C++中使用可变参数时要小心，在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少，否则会产生访问越界，运气不好的话还会导致程序崩溃
css样式文件该放在哪里
php中数组下标必须是连续的吗
Python 3 教程
Python 3 教程 Python 的 3.0 版本，常被称为 Python 3000，或简称 Py3k。相对于 Python 的早期版本，这是一个较大的升级。为了不带入过多的累赘，Python 3.0 在设计的时候没有考虑向下兼容。 Python
Python pip包管理
一、前言在Python中，安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具： easy_install 和 pip ，目前官方推荐使用 pip。
ubuntu如何重新编译内核
改善Java代码之慎用java动态编译