如果我有一个网站元素:
- 重置.css
- 远程引导库
- master.css
- 远程字体很棒的 CSS
- 两种谷歌字体
- JQuery 库
- main.js
考虑最佳加载速度和可能的覆盖。在 <head> 中链接它们的最佳顺序是什么？
我知道稍后添加的内容将覆盖具有相同优先级的先前样式表应用和浏览器从上到下呈现的相同规则，<head>先然后<body>
我还从谷歌了解到现代浏览器中有一种叫做预取的东西。
就我个人而言，我会做 reset.css、font awesome、google font、bootstrap lib、master.css、Jquery lib、main.js。通用规则优先，库优先。但我不知道如何处理字体，因为它们也是样式表。
最佳答案
我想指出，之前答案中建议的顺序与 Google 和 MDN 建议的开发人员最佳实践并不完全同步。
CSS 应该首先加载到头部，然后是字体样式表或 google 字体样式表，这样布局才不会出现断断续续的情况，尤其是在连接速度较慢的情况下。
因此，Bootstrap css 可以加载到 head 中，而 Bootstrap js 应该在 jQuery 之后加载。
JS、jQuery 及其依赖项可以移到页面底部以促进更快的页面加载，因为 JS 代码会影响网页的内容和布局，浏览器会延迟呈现脚本标记后面的任何内容，直到该脚本已被下载、解析和执行。
因为 bootstrap js 依赖于 jQuery。因此，应该首先加载 jQuery，然后加载 boootstrap js 和主 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>
关于javascript - 链接字体、CSS 和脚本的顺序是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46214880/