在头脑中声明事物的最佳顺序是什么？答案

【问题标题】：What is the best order to declare things in the head?在头脑中声明事物的最佳顺序是什么？
【发布时间】：2019-02-06 06:51:44
【问题描述】：

在 HTML 文档中，安排各种 CDN 和引用时的最佳做法是什么？

在我正在构建的网站中，我引用了 jQuery、css、font awesome、滚动显示以及包含页眉和页脚的外部 HTML 文件。

促使我提出这个问题的原因是在我正在创建的这个网页上，“关于我们”标题在滚动显示发生之前闪烁，我想知道这是否是我在头。

http://mi-linux.wlv.ac.uk/~1403809/AcademyWebsite/aboutUs.html

<!doctype html>
<html lang="en">

<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="js/script.js"></script>

<link rel="icon" href="images/whiteFww1.png">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script src="https://unpkg.com/scrollreveal"></script>


<script>
    $(function() {
        $("#header1").load("header1.html");
        $("#footer").load("footer.html");
    });
</script>

【问题讨论】：

闪烁与订单脚本加载无关。这是因为您正在发出 AJAX 请求来检索该 HTML。这意味着您需要等待：1) 加载 jQuery 2) 准备好 DOM 3) 完成 AJAX 请求 4) 将 HTML 注入页面。这就是为什么客户端包含通常是一个坏主意的原因。如果您想在页面中包含常见内容，请在服务器端执行。然后，您将完全没有客户端上的这些开销。
您实际上是在加载页眉和页脚两次。
@RoryMcCrossan CDN 的客户端包含示例吗？
@LucaKiebel 请解释一下
是的，它们确实存在，但与您加载header1.html 和footer.html 的问题无关。客户端包括我的意思是将 HTML 注入页面。不包括其他 JS 脚本。我建议您 Google 'server side include [your server language here]' 以便更好地了解您需要做什么

标签： jquery html head scrollreveal.js

【解决方案1】：

关于闪烁，这是由于您正在进行的 Ajax .load 调用。但就如何订购脚本而言，通常您希望先运行本地脚本，如果本地无法加载，CDN 通常会保留作为备份。

您的主脚本应该在您的正文中，这是因为您的主脚本中的功能通常依赖于 DOM。（这应该有助于解决闪烁问题）

Jquery 应该始终位于元标记之后，但在任何需要访问 Jquery 的脚本之前。

希望有帮助！

【讨论】：