链接字体，CSS和脚本的顺序是什么
[英]What is the order of linking font, CSS and scripts
问题描述
If I have a website project with: 
如果我有一个网站项目：
- reset.css reset.css
- remote bootstrap lib 远程bootstrap lib
- master.css master.css
- remote font awesome CSS 远程字体真棒CSS
- two google fonts 两个谷歌字体
- JQuery lib JQuery lib
- main.js main.js
Consider the best loading speed and possible override. 考虑最佳加载速度和可能的覆盖。 What would be the best order to link them in <head> 在<head>链接它们的最佳顺序是什么？
I know what is added later will override the same rule with same priority previous style sheets applied and browser rendering from top to bottom, <head> first then <body> 我知道以后添加的内容会覆盖相同优先级的相同规则，前一个样式表应用，浏览器渲染从上到下， <head>首先是<body>
I also learned from google that there is something called prefetch in the modern browsers. 我还从谷歌那里了解到现代浏览器中有一些叫做预取的东西。
Personally, I would do reset.css, font awesome, google font, bootstrap lib, master.css, Jquery lib, main.js. 就个人而言，我会做reset.css，字体真棒，谷歌字体，bootstrap lib，master.css，Jquery lib，main.js. Universal rules first, lib first. 首先是通用规则，首先是lib。 But I don't know exactly how to deal with font since they are stylesheet as well. 但我不知道如何处理字体，因为它们也是样式表。
3 个解决方案
解决方案1
4 2017-09-14 09:13:31
It is important to load jQuery before Bootstrap and all custom CSS after bootstrap. 在Bootstrap之前加载jQuery以及在引导之后加载所有自定义CSS非常重要。 It is better to load the google font stylesheet in the beginning. 最好在开头加载谷歌字体样式表。
The order should be libraries first followed by custom scripts and styles. 顺序应该是库首先跟随自定义脚本和样式。 Since bootstrap depends on jQuery, jQuery should be loaded before loading the Bootstap's JavaScript file. 由于bootstrap依赖于jQuery，因此在加载Bootstap的JavaScript文件之前应该加载jQuery。
- google font 谷歌字体
- fontawesome fontawesome
- JQuery lib JQuery lib
- remote bootstrap lib 远程bootstrap lib
- reset.css reset.css
- master.css master.css
- main.js main.js
Loading the JavaScript files at the end of the body (just before </body> ) will improve site loading speed when compared to having JavaScript files between the head tags. 与在head标记之间使用JavaScript文件相比，在正文末尾加载JavaScript文件（就在</body>之前）将提高网站加载速度。
解决方案2
3 已采纳 2017-09-14 10:27:26
I would like to point out that the orders suggested in previous answers are not fully in sync with the developers' best practices as suggested by Google and MDN. 我想指出，之前答案中建议的订单与Google和MDN建议的开发人员最佳做法并不完全一致。
CSS should be loaded first in the head followed by font stylesheets or google font stylesheets so that the layout doesn't appear broken for a while especially on slow connections. 首先应该在头部加载CSS，然后是字体样式表或谷歌字体样式表，这样布局就不会出现断裂，特别是在慢速连接上。
So, Bootstrap css can be loaded into head while Bootstrap js should be loaded later after jQuery. 因此，Bootstrap css可以加载到头部，而Bootstrap js应该在jQuery之后加载。
JS, jQuery and its dependencies can be moved to the bottom of the page to promote faster page loading because JS code can affect the content and layout of a web page, browsers delay rendering any content that follows a script tag until that script has been downloaded, parsed and executed. JS，jQuery及其依赖项可以移动到页面底部以促进更快的页面加载，因为JS代码可以影响网页的内容和布局，浏览器会延迟呈现跟随脚本标记的任何内容，直到该脚本被下载为止，解析和执行。
And as bootstrap js has jQuery as a dependency. 而作为bootstrap js有jQuery作为依赖。 So, jQuery should be loaded first followed by boootstrap js and main js file. 因此，应首先加载jQuery，然后加载boootstrap js和main js文件。
So, the correct order in accordance with best developer practices: 因此，根据最佳开发人员实践的正确顺序：
<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>
解决方案3
1 2017-09-14 09:58:53
Since you question is in terms of performance. 既然你的问题是在性能方面。 below are some of my views 以下是我的一些看法
1. load google fonts aysnc you can load the font asynchronous, so then it will not block the rendering of the page. 1.加载谷歌字体aysnc你可以异步加载字体，这样就不会阻止页面的渲染。 you can use the javascript font loader, https://github.com/typekit/webfontloader 你可以使用javascript字体加载器， https：//github.com/typekit/webfontloader
2. load css first the below method may be the best way to go 2.首先加载css以下方法可能是最好的方法
- fontawesome fontawesome
- JQuery lib JQuery lib
- remove bootstrap lib 删除bootstrap lib
- reset.css reset.css
- master.css master.css
i also suggest you merge reset.css and master.css since i believe sending a separate request for reset.css is useless and merging those small codeset with master.css will be a better approach. 我还建议您合并reset.css和master.css，因为我相信发送一个单独的reset.css请求是没用的，并将这些小代码集与master.css合并将是一个更好的方法。
3. load JS finally load the master.js file, its better you load this file in bottom of the body tag, since then it will improve page load performance effecting the critical rendering path. 3.加载JS最后加载master.js文件，最好在body标签的底部加载这个文件，从那时起它将提高影响关键渲染路径的页面加载性能。
note: please read about critical rending path, which may explain in-depth about page-load performance. 注意：请阅读关键的rending路径，这可以深入解释页面加载性能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.