前端面试题88（JavaScript懒加载）

懒加载（Lazy Loading）是一种网页优化技术，它延迟了资源的加载时间，直到这些资源真正需要时才进行加载。这种技术常用于图片、视频等媒体内容以及一些较大的JavaScript和CSS文件上，目的是减少初始页面加载时间，提升用户体验，同时还能节省服务器带宽和用户流量。

在JavaScript中实现懒加载，主要可以通过以下几种方式：

1. 图片懒加载

对于图片懒加载，一个常见的做法是当图片元素进入可视区域时才开始加载图片。这可以通过监听滚动事件并计算图片位置来实现。

document.addEventListener('DOMContentLoaded', function() {
    var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));

    function lazyLoad(img) {
        if (img.getBoundingClientRect().top <= window.innerHeight && img.src === '') {
            img.src = img.dataset.src;
            img.classList.remove('lazy');
        }
    }

    function lazyLoadImages() {
        lazyImages.forEach(function(img) {
            lazyLoad(img);
        });

        // 如果所有图片都已加载，移除滚动事件监听器
        if (lazyImages.length === 0) {
            document.removeEventListener('scroll', lazyLoadImages);
            window.removeEventListener('resize', lazyLoadImages);
            window.removeEventListener('orientationchange', lazyLoadImages);
        }
    }

    document.addEventListener('scroll', lazyLoadImages);
    window.addEventListener('resize', lazyLoadImages);
    window.addEventListener('orientationchange', lazyLoadImages);

    // 初始检查可视区域内的图片
    lazyLoadImages();
});

这段代码首先获取所有带有.lazy类的图片元素，然后定义了一个lazyLoad函数来检查图片是否在可视区域内，并加载图片。通过监听滚动、窗口大小调整和设备方向变化事件来触发懒加载检查。

2. 动态导入JavaScript模块

ES6引入了动态导入（import()），允许你在运行时按需加载模块，这也是懒加载的一种形式。

document.getElementById('someButton').addEventListener('click', async function() {
    const module = await import('./myModule.js');
    module.default(); // 假设myModule导出了一个默认函数
});

在这个例子中，当用户点击ID为someButton的按钮时，才会异步加载myModule.js模块，并执行其默认导出的函数。

3. 按需加载React组件

在React应用中，可以使用React.lazy和Suspense来实现组件的懒加载。

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <LazyComponent />
            </Suspense>
        </div>
    );
}

export default App;

这里，LazyComponent是一个懒加载的组件，当这个组件即将被渲染时，React会异步加载对应的模块。Suspense组件用来指定在组件加载过程中显示的占位符（例如“Loading…”）。

懒加载是一种强大的性能优化策略，合理运用可以显著提升Web应用的用户体验。