时间戳

首页 > 解决方案 > 链接字体、css和JavaScript文件的最佳顺序是什么

javascript - 链接字体、css和JavaScript文件的最佳顺序是什么

问题描述

我已经建立了一个我目前托管的静态网站

我在下面的 html 代码中给出了当前链接 css、JavaScript 和所有其他文件的顺序

如果有人能确认我是否将它们都放在最理想的地方，我将不胜感激。考虑最佳加载速度和可能的覆盖。不只是关于安置，也欢迎任何提高整体表现的建议。

如您所见，我的 html 中总共发生了 9 个链接，让我简要介绍一下它们

Head - 1) Google Font 2) My Main CSS File 3) Font Awesome Css 文件 4) Jquery Library 5) 模态窗口的 JS 文件 6) 导航栏的 JS 文件

正文 - 您在底部看到的那 3 个也与导航栏有关

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Website Name</title>

  <link href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/modal.js"></script>
  <script src="js/responsive-nav.js"></script>
</head>

<body>

< -- Content -->

<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
</body>

</html>

标签： javascriptjqueryhtmlcss

解决方案

CSS 和 JavaScript 文件完全独立运行；首先加载 CSS 文件或 JavaScript 文件在性能方面绝对没有任何区别。

尽管如此，还是有几点值得注意：

  • 外部 CSS 文件（如 Google 的 Fonts 和 Font Awesome）应在您自己的 CSS 文件之前加载，因为加载 CSS 文件的顺序会影响它们的特异性。你会想用你自己的 CSS 覆盖框架字体——而不是相反。

  • 依赖于其他文件的JavaScript 文件必须在其依赖项之后加载。我假设您的一些插件依赖于 jQuery，因此您需要在这些插件之前加载 jQuery。

  • 将<script>标签放在元素的底部会<body>提高显示速度（与在 中引用它们相反<head>），因为脚本解释会减慢显示速度。

所以，简而言之，我会推荐以下内容：

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <!-- Content -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/modal.js"></script>
  <script src="js/responsive-nav.js"></script>
  <script src="js/fastclick.js"></script>
  <script src="js/scroll.js"></script>
  <script src="js/fixed-responsive-nav.js"></script>
</body>

推荐阅读