面试题：Qwik中延迟加载的基本原理及简单实践

延迟加载核心原理

在Qwik框架中，延迟加载的核心原理基于其对组件渲染时机的精细控制。Qwik采用了一种称为“岛屿架构”的模式，允许将应用程序分割成可独立加载和激活的小块（“岛屿”）。延迟加载使得组件在需要时（例如，当组件进入视口，或者用户与相关部分交互时）才进行加载和渲染，而不是在页面初始加载时就全部加载。这有助于提升初始页面加载速度，减少不必要的资源消耗，尤其是对于大型应用程序，用户可能不会立即与所有组件交互的场景。

实现延迟加载图片的方法及步骤

使用 loading="lazy" 属性：
- 步骤：在HTML的 <img> 标签中，直接添加 loading="lazy" 属性。例如：

<img src="your-image-url.jpg" alt="描述图片内容" loading="lazy" />

- **原理**：现代浏览器原生支持这种方式，当浏览器解析到该 `<img>` 标签时，会在图片即将进入视口（通常是距离视口一定距离时，具体距离由浏览器决定）时才发起图片的加载请求，从而实现延迟加载效果。这种方法简单直接，不需要额外的JavaScript代码，在Qwik项目中可以直接使用，充分利用浏览器的原生能力。

2. 结合Qwik的特性使用JavaScript逻辑： - 步骤： - 引入必要模块：在你的Qwik组件文件（例如 .qwik.tsx）中，首先导入必要的Qwik模块。

import { component$, useVisibleTask$ } from '@builder.io/qwik';

    - **定义状态变量**：使用 `useVisibleTask$` 来管理图片是否可见状态，并定义一个变量来存储图片是否已加载的状态。

export const MyImageComponent = component$(() => {
    const isVisible = useVisibleTask$<boolean>(false);
    const isLoaded = useVisibleTask$<boolean>(false);

    - **创建加载图片逻辑**：使用 `useVisibleTask$` 的副作用功能，当图片进入视口时触发加载逻辑。

useVisibleTask$(async () => {
    if (!isLoaded.value) {
        const img = new Image();
        img.src = 'your-image-url.jpg';
        img.onload = () => {
            isLoaded.value = true;
        };
        await new Promise((resolve) => {
            img.onload = resolve;
            img.onerror = resolve;
        });
    }
}, [isVisible]);

    - **渲染部分**：在返回的JSX中，根据 `isLoaded` 状态来决定是否渲染 `<img>` 标签。

return (
    <>
        {isLoaded.value && <img src="your-image-url.jpg" alt="描述图片内容" />}
    </>
);
});

- **原理**：`useVisibleTask$` 提供了一种响应式机制，当组件进入视口（`isVisible` 变为 `true`）时，触发图片加载逻辑。通过创建 `Image` 对象并监听其 `onload` 事件，来判断图片是否加载完成，从而控制 `<img>` 标签的渲染，实现延迟加载图片的效果。这种方式结合了Qwik的响应式编程模型，更加灵活，可以根据具体业务需求进行定制。

星途面试题库

面试题：Qwik中延迟加载的基本原理及简单实践

知识考点

面试题答案

延迟加载核心原理

实现延迟加载图片的方法及步骤