怎么让js跟css同时加载

要让JavaScript和CSS同时加载，可以通过以下几种方法：使用异步加载、使用预加载、优化文件大小、使用内容分发网络（CDN）。其中，使用异步加载是一种非常有效的方法，可以显著提高页面的加载速度和用户体验。异步加载意味着浏览器在加载页面时，不需要等待JavaScript文件的加载完成，而是可以同时加载其他资源，如CSS文件。

一、异步加载

1.1 使用`async`和`defer`属性

在HTML中，我们可以通过在<script>标签上添加async或defer属性来实现异步加载。async属性会让JavaScript文件在下载完成后立即执行，而defer属性则会让JavaScript文件在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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="script.js" async></script>
    <!-- or -->
    <script src="script.js" defer></script>
</body>
</html>

1.2 动态加载脚本

动态加载脚本也是一种常见的异步加载方法。可以通过JavaScript代码动态创建<script>标签，并将其添加到DOM中。这种方法可以在需要时才加载特定的JavaScript文件，而不是在页面加载时立即加载所有的JavaScript文件。

function loadScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    script.onload = function() {
        if (callback) callback();
    };
    document.head.appendChild(script);
}
loadScript("script.js", function() {
    console.log("Script loaded!");
});

二、使用预加载

2.1 使用`<link rel="preload">`

预加载是一种告诉浏览器尽早加载资源的方法。可以通过在HTML的<head>部分使用<link rel="preload">标签来预加载CSS和JavaScript文件。这样，当浏览器解析到这些标签时，会立即开始加载这些资源，而不是等到需要时才加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preload" href="styles.css" as="style">
    <link rel="preload" href="script.js" as="script">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

三、优化文件大小

3.1 压缩和缩小文件

压缩和缩小CSS和JavaScript文件可以显著减少文件大小，从而加快加载速度。可以使用各种工具，如UglifyJS、Terser、CSSNano等来压缩和缩小文件。

# 使用UglifyJS压缩JavaScript文件 uglifyjs script.js -o script.min.js 使用CSSNano压缩CSS文件 cssnano styles.css styles.min.css

3.2 合并文件

将多个CSS和JavaScript文件合并成一个文件也可以减少HTTP请求的数量，从而提高加载速度。可以使用各种构建工具，如Webpack、Gulp等来合并文件。

# 使用Webpack合并文件 webpack --config webpack.config.js

四、使用内容分发网络（CDN）

4.1 使用CDN加速

内容分发网络（CDN）是一种通过在全球范围内分布服务器来加速内容交付的方法。可以将CSS和JavaScript文件托管在CDN上，从而利用CDN的全球分布优势，提高加载速度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.example.com/styles.css">
</head>
<body>
    <script src="https://cdn.example.com/script.js"></script>
</body>
</html>

4.2 使用HTTP/2

HTTP/2是一种新型的HTTP协议，可以在一个TCP连接上并行传输多个文件，从而提高加载速度。使用CDN时，通常可以自动启用HTTP/2。

# 确保服务器支持HTTP/2 通常不需要额外的配置，只需启用CDN

五、监控和优化加载性能

5.1 使用性能监控工具

使用性能监控工具，如Google Lighthouse、WebPageTest等，可以帮助你分析页面加载性能，并提供优化建议。

# 使用Google Lighthouse分析页面性能 lighthouse https://example.com

5.2 持续优化

加载性能优化是一个持续的过程。需要定期监控和分析页面加载性能，并根据分析结果进行优化。可以使用各种工具和方法，如代码拆分、延迟加载、服务端渲染等来持续优化加载性能。

六、使用现代工具和框架

6.1 使用现代JavaScript框架

现代JavaScript框架，如React、Vue、Angular等，通常内置了性能优化功能，可以自动实现异步加载和资源预加载等。

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
  <div>
    <h1>Hello, world!</h1>
  </div>
);
ReactDOM.render(<App />, document.getElementById('root'));

6.2 使用构建工具

构建工具，如Webpack、Parcel、Rollup等，可以帮助你自动实现文件压缩、合并、异步加载等性能优化。

# 使用Webpack配置异步加载 webpack --config webpack.config.js

综上所述，通过使用异步加载、预加载、优化文件大小、使用CDN、监控和优化加载性能，以及使用现代工具和框架，可以有效地实现JavaScript和CSS的同时加载，从而提高页面加载速度和用户体验。