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

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

javascript jquery html css

链接字体、css和JavaScript文件的最佳顺序是什么,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经建立了一个静态网站，我目前主持我已经在下面的html代码中给出了链接css、JavaScript和所有其他文件的当前顺序如果有人能确认我是否把它们都放在最理想的地方，我将不胜感激。考虑最佳的加载速度和可能的过载。不仅是关于安置，还欢迎提出任何改善整体绩效的建议正如您所看到的，在我的html中总共有9个链接，请让我简要总结一下头- 1）谷歌字体 2）我的主CSS文件 3）字体和Css文件 4） Jquery库 5）模式窗口的JS文件 6）导航栏的JS文件身体- 您在底部看

我已经建立了一个静态网站，我目前主持

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

如果有人能确认我是否把它们都放在最理想的地方，我将不胜感激。考虑最佳的加载速度和可能的过载。不仅是关于安置，还欢迎提出任何改善整体绩效的建议

正如您所看到的，在我的html中总共有9个链接，请让我简要总结一下

头- 1）谷歌字体 2）我的主CSS文件 3）字体和Css文件 4） Jquery库 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>


网站名称
<--内容-->

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

不过，有几点值得注意：

外部CSS文件，如Google字体和Font Awesome，应该在加载自己的CSS文件之前加载，因为加载CSS文件的顺序会影响它们的效果。您将希望用自己的CSS覆盖框架字体，而不是相反
依赖于其他文件的JavaScript文件必须在其依赖项之后加载。我假设您的几个插件依赖于jQuery，所以您希望在加载这些插件之前加载jQuery
将
标记放置在
元素的底部可以提高显示速度（而不是在
中引用它们），因为脚本解释会降低显示速度

因此，简言之，我建议如下：

<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>

这里有几点：

由于位置原因，
在
之前加载
*.js是同步和顺序加载的
*.css是异步加载的
仅按放置顺序保持最佳加载速度是不够的

总而言之：

*.css应位于
较大的*.js应位于
小的*.js应该在

只要它不影响某些变量的定义顺序

这个问题更适合@Phil，谢谢你的提醒。我甚至不知道那个网站。谢谢你的回答。我只是有一个疑问。在jquery库链接后的body部分中有5个js文件，如果我将它们合并到一个文件中并链接它会怎么样？那会有什么不同吗。我在某个地方读到过这样的信息：与您所询问的许多小js文件相比，使用单个长js文件更好。如果您已经实现了HTTP/2，那么拥有多个文件会稍微快一点。如果您仍然是HTTP/1（如果不确定，那么您是），那么拥有一个大文件会稍微快一点。但差别很小,；除了多路复用之外，还有数百种其他因素会对性能产生更大的影响，您应该到其他地方去改进性能：）