链接字体、CSS和脚本的顺序是什么答案

【问题标题】：What is the order of linking font, CSS and scripts链接字体、CSS和脚本的顺序是什么
【发布时间】：2017-09-14 09:05:43
【问题描述】：

如果我有一个网站项目：

reset.css
远程引导库
master.css
远程字体真棒 CSS
两种谷歌字体
jQuery 库
main.js

考虑最佳加载速度和可能的覆盖。将它们链接到<head>

的最佳顺序是什么

我知道稍后添加的内容将覆盖相同的规则，并应用相同的优先级先前的样式表并从上到下进行浏览器呈现，首先<head> 然后<body>

我还从 google 了解到，现代浏览器中有一种叫做 prefetch 的东西。

就个人而言，我会做 reset.css、font awesome、google font、bootstrap lib、master.css、Jquery lib、main.js。通用规则优先，lib 优先。但我不知道如何处理字体，因为它们也是样式表。

【问题讨论】：

我认为大概的规则：我用的越多，后面的顺序就应该在。
请查看我的回答，了解最佳开发人员实践和速度优化。

标签： javascript jquery css html

【解决方案1】：

我想指出，之前答案中建议的顺序与 Google 和 MDN 建议的开发人员的最佳实践并不完全同步。

应首先在头部加载 CSS，然后是字体样式表或 google 字体样式表，这样布局在一段时间内不会出现损坏，尤其是在连接速度较慢的情况下。

所以，Bootstrap css 可以加载到 head 中，而 Bootstrap js 应该在 jQuery 之后加载。

JS、jQuery 及其依赖项可以移动到页面底部以提高页面加载速度，因为 JS 代码会影响网页的内容和布局，浏览器会延迟渲染脚本标记之后的任何内容，直到该脚本已下载、解析并执行。

并且由于 bootstrap js 具有 jQuery 作为依赖项。所以，应该先加载 jQuery，然后加载 bootstrap js 和 main js 文件。

因此，按照最佳开发人员实践的正确顺序：

<head>

 1. Bootstrap CSS    
 2. Reset CSS
 3. Master CSS
 4. Google Font CSS
 5. Font Awesome CSS

</head>
<body>

Your content goes here    

<!-- add js files to the bottom of the page-->

 6. jQuery 
 7. Bootstrap js
 8. Main js

</body>

【讨论】：

我不太明白为什么加载字体样式表会导致布局出现损坏。如果我先加载 CSS，加载字体后浏览器是否必须重新开始？
样式布局所需的 CSS 应优先于仅负责字体或字体图标的字体 CSS。如果在加载其他低优先级文件后加载所需的 CSS 文件，则可能会在连接速度较慢时遇到布局损坏。为了支持我的回答和我的优先顺序，我会敦促你去getmdl.io 这是谷歌的一个项目并检查它的源代码以显示优先顺序。此检查还将证明您接受的答案不正确。
随时欢迎您，并请考虑接受此作为正确答案，以防止其他人以错误的方式这样做。
这个答案很好，但可以通过链接到您引用的“开发人员最佳实践”

【解决方案2】：

在 Bootstrap 之前加载 jQuery 并在 bootstrap 之后加载所有自定义 CSS 非常重要。最好在开始时加载 google 字体样式表。

顺序应该是首先是库，然后是自定义脚本和样式。由于 bootstrap 依赖于 jQuery，所以应该在加载 Bootstap 的 JavaScript 文件之前加载 jQuery。

谷歌字体
字体真棒
jQuery 库
远程引导库
reset.css
master.css
main.js

与在头部标签之间放置 JavaScript 文件相比，在正文末尾（就在 </body> 之前）加载 JavaScript 文件将提高网站加载速度。

【讨论】：

谢谢，请问为什么把js放在最后会有助于提高加载速度？
@DonghuiMa 在 SO 上有很多关于这个的讨论，这是一个很好的讨论：stackoverflow.com/questions/3531314/…
@Parthipan Natkunam 最佳开发人员实践建议在加载 js 或 jquery 库之前加载 CSS。

【解决方案3】：

因为你的问题是关于性能的。以下是我的一些看法

1.加载谷歌字体aysnc 您可以异步加载字体，因此它不会阻塞页面的呈现。你可以使用 javascript 字体加载器，https://github.com/typekit/webfontloader

2。先加载css 以下方法可能是最好的方法

字体真棒
jQuery 库
删除引导库
reset.css
master.css

我还建议您合并 reset.css 和 master.css，因为我相信发送单独的 reset.css 请求是没有用的，将这些小代码集与 master.css 合并将是更好的方法。

3.加载JS 最后加载master.js文件，最好将此文件加载到body标签的底部，这样会提高页面加载性能，影响关键渲染路径。

注意：请阅读关键渲染路径，这可能会深入解释页面加载性能。

【讨论】：