怎么优先加载js

要优先加载JS，可以使用以下几种方法：将关键的JS代码内联、使用defer或async属性、将JS文件放在HTML的头部。其中，将关键的JS代码内联是最常用的方法，因为这可以确保这些代码在页面加载时立即执行。具体方法如下：

将关键的JS代码内联：将那些在页面初始加载时就需要执行的JavaScript代码直接放在HTML文件的<head>部分内。这种方法可以确保这些代码在页面加载时立即执行。然而，这种方法也会增加HTML文件的大小，因此应谨慎使用。
使用defer或async属性：在<script>标签中使用defer或async属性。这两者都可以在不阻塞HTML解析的情况下加载JS文件，其中defer会在HTML解析完成后执行，而async则会在JS文件加载完成后立即执行。
将JS文件放在HTML的头部：通过将JS文件放置在HTML文件的<head>部分，可以确保这些文件在页面加载时优先执行。这种方法适用于那些必须在页面初始加载时就执行的JS代码。

一、将关键的JS代码内联

在某些情况下，页面加载时需要立即执行一些JavaScript代码。例如，页面交互或动画效果的初始化代码。将这些代码内联到HTML文件的<head>部分可以确保它们在页面加载时立即执行。然而，这种方法会增加HTML文件的大小，因此应谨慎使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 关键JS代码内联
        function initialize() {
            console.log('Page loaded');
        }
        document.addEventListener('DOMContentLoaded', initialize);
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

二、使用defer或async属性

defer和async属性允许JavaScript文件在不阻塞HTML解析的情况下加载。两者的区别在于，defer会在HTML解析完成后按顺序执行脚本，而async会在脚本加载完成后立即执行。

使用defer属性

defer属性可以确保JavaScript文件在HTML解析完成后按顺序执行。这对于依赖于DOM元素的脚本非常有用，因为它们需要在DOM完全加载后执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script1.js" defer></script>
    <script src="script2.js" defer></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

使用async属性

async属性允许JavaScript文件在加载完成后立即执行，而不等待HTML解析完成。这对于不依赖于DOM元素的脚本非常有用，例如，跟踪代码或广告脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="analytics.js" async></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

三、将JS文件放在HTML的头部

将JavaScript文件放置在HTML文件的<head>部分，可以确保这些文件在页面加载时优先执行。这种方法适用于那些必须在页面初始加载时就执行的JS代码。然而，这种方法可能会阻塞HTML解析，因此应谨慎使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="important.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

四、优化加载顺序的实际案例

实际项目中，合理优化JavaScript的加载顺序是非常重要的。以下是一个优化加载顺序的实际案例，它结合了多种方法来确保页面加载时的性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Optimized Page</title>
    <!-- 关键JS代码内联 -->
    <script>
        function criticalFunction() {
            console.log('Critical function executed');
        }
        criticalFunction();
    </script>
    <!-- 使用defer属性加载依赖于DOM的脚本 -->
    <script src="dom-dependent.js" defer></script>
    <!-- 使用async属性加载不依赖于DOM的脚本 -->
    <script src="analytics.js" async></script>
</head>
<body>
    <!-- 页面内容 -->
    <h1>Hello World</h1>
</body>
</html>

在这个案例中，我们将关键的JavaScript代码内联到HTML文件中，以确保它们在页面加载时立即执行。同时，我们使用defer属性加载依赖于DOM的脚本，使用async属性加载不依赖于DOM的脚本。这种方法可以确保页面加载时的性能最佳。

五、使用现代前端工具和技术

现代前端工具和技术可以显著优化JavaScript的加载顺序。例如，Webpack和Parcel等工具可以将JavaScript代码拆分为多个文件，并自动优化加载顺序。同时，React、Vue等前端框架也提供了优化加载顺序的内置功能。

使用Webpack优化加载顺序

Webpack是一个流行的JavaScript模块打包工具，它可以将JavaScript代码拆分为多个文件，并自动优化加载顺序。例如，可以使用splitChunks插件将共享代码拆分为独立的文件，并使用preload插件预加载关键资源。

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'head',
        }),
        new PreloadWebpackPlugin({
            rel: 'preload',
            as: 'script',
            include: 'allAssets',
        }),
    ],
};

使用React优化加载顺序

React是一个流行的前端框架，它提供了优化加载顺序的内置功能。例如，可以使用React.lazy和Suspense来按需加载组件，并使用Loadable Components等库来预加载关键资源。

import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
    return (
        <div>
            <h1>Hello World</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <LazyComponent />
            </Suspense>
        </div>
    );
}

六、监控和优化加载性能

在实际项目中，定期监控和优化加载性能是非常重要的。可以使用Google Lighthouse、WebPageTest等工具来分析页面加载性能，并根据分析结果进行优化。例如，可以优化图像大小、使用CDN加速资源加载、减少HTTP请求数量等。

使用Google Lighthouse分析加载性能

Google Lighthouse是一个流行的页面性能分析工具，它可以分析页面的加载性能，并提供详细的优化建议。例如，可以使用Lighthouse分析页面的初始加载时间、资源加载顺序、关键资源的大小等。

# 使用Lighthouse分析加载性能 lighthouse https://example.com --output html --output-path report.html

使用WebPageTest分析加载性能

WebPageTest是另一个流行的页面性能分析工具，它可以分析页面的加载性能，并提供详细的优化建议。例如，可以使用WebPageTest分析页面的初始加载时间、资源加载顺序、关键资源的大小等。

# 使用WebPageTest分析加载性能 webpagetest test https://example.com --output report.json

七、总结与最佳实践

优先加载JavaScript是优化页面加载性能的重要手段。在实际项目中，可以结合多种方法来确保JavaScript在页面加载时优先执行。以下是一些最佳实践：

将关键的JS代码内联：将那些在页面初始加载时就需要执行的JavaScript代码直接放在HTML文件的<head>部分内。
使用defer或async属性：在<script>标签中使用defer或async属性，以确保JavaScript文件在不阻塞HTML解析的情况下加载。
将JS文件放在HTML的头部：通过将JavaScript文件放置在HTML文件的<head>部分，可以确保这些文件在页面加载时优先执行。
使用现代前端工具和技术：例如，Webpack和Parcel等工具可以将JavaScript代码拆分为多个文件，并自动优化加载顺序。
定期监控和优化加载性能：使用Google Lighthouse、WebPageTest等工具分析页面加载性能，并根据分析结果进行优化。

通过结合这些方法，可以显著优化页面的加载性能，从而提升用户体验。