在JS之前加载CSS文件
[英]Load css file before js
问题描述
我有一个内部风格，然后是一个外部风格。 我注意到直到外部CSS没有加载，页面才空白。 所以我将其更改为以下代码。 现在，在js之后发出了外部CSS请求。
为什么要同时进行以上操作，以及如何在JS之前发出CSS请求？ 它有什么优势吗（以下代码中的js之前的css）。
<body>
<style>
body {
background: #333;
}
</style>
<script>
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="build/main.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
</script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
6 个解决方案
解决方案1
0 2017-03-26 18:33:58
在加载身体时调用的函数中使用setTimeout。
<body onload="loadPage()">
JS
function loadPage() {
//code to load css
setTimeout(function() {
//code to load js
}, 1);
}
我认为那行得通。 希望能帮助到你。
解决方案2
0 2017-03-26 18:43:32
首先加载样式很重要，因为这是页面的外观。 这是用户看到的第一件事。
您也可以使用javascript更改CSS和DOM。 因此，最好先加载CSS。
解决方案3
0 2017-03-26 18:53:29
发生这种情况是因为页面是从上到下呈现的。 因此，我想浏览器将为您呈现内联样式，然后执行内联脚本，该脚本会将链接附加到样式上。 然后它继续执行外部脚本。 之后，它将加载您新添加的样式表。
所以，我太天真地问，但是为什么不把样式表链接放到头部呢？
解决方案4
0 2017-03-26 18:59:48
当然，您应该像平常人一样放CSS文件:)。 但是，如果您真的想要实现它，它将变得像下面的代码一样难看：
<script>
var head = document.getElementsByTagName('head')[0],
link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'style.css');
var sheet = "sheet", cssRules = "cssRules";
if (!('sheet' in link)) {
sheet = "styleSheet";
cssRules = "rules";
}
var waitForCSS = setInterval(function() {
if (link[sheet]) {
// now you can load your javascript files here like I did with CSS
// or just use any js code you want.
clearInterval(waitForCSS);
}
}, 10);
head.appendChild(link);
</script>
解决方案5
0 2017-03-26 19:00:19
做到这一点的方法是
<head> <link type="text/css" rel="stylesheet" href="build/main.css"> <style> body { background: #333; } </style> </head> <body> <!-- Rest of your code in body //--> <!--Body is going to end after the below //--> <script> window.addEventListener("DOMContentLoaded",function(){ var sc=document.createElement('script'); sc.src="build/polyfills.js"; document.head.appendChild(sc); }); </script> </body>
网页是从上到下解析的。
因此，请尝试将style放在head标签中，然后将scripts放置在body标签末尾之前
在脚本中
在加载Dom内容时，向窗口添加一个事件监听器，制作一个脚本标签，附加src并将其附加到Head。
解决方案6
0 已采纳 2017-04-27 02:37:40
添加预加载大都可以解决问题
<link rel="preload" href="build/main.css" as="style">
现在，浏览器发出了对CSS的请求。 然后调用js。 然后将CSS标签添加到头部。 最后，尝试重新制作获取CSS的调用，但是由于调用正在进行或完成，因此只会加载它。 如果CSS需要花费时间，则存在FOUC问题。
在下载“大图片列表”之前，加载页面的所有CSS和JS
[英]Load the all css & js for the page before downloading the “big list of images”
在主体中的脚本执行之前加载外部js文件（无jQuery）
[英]load an external js file before script in body executes (without jQuery)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.