Javascript 如<；头>；阻止HTML呈现，CSS不也是这样吗？

由于JavaScript会阻止HTML呈现，在关闭body标记之前，最好将JavaScript保持在底部，CSS不是也是这样吗

---

我知道我们不能把外部CSS留在外面

为什么将Javascript保持在底层是一个好的做法

---

我想说的是，最好的做法是将CSS和Javascript放在单独的文件中，并使用

部分将它们包含在HTML文档中。

CSS的阻塞方式与Javascript不同

引用

对于样式表，在下载所有样式表之前，将阻止渐进式渲染。这就是为什么最好将样式表移动到文档头，这样就可以先下载样式表，而不会阻止渲染。使用脚本时，将阻止脚本下所有内容的渐进式渲染。将脚本在页面中移动到尽可能低的位置意味着脚本上方有更多的内容可以更快地呈现

---

此外，当CSS被添加到头部时，它首先被解析，结果是HTML即使在下载时也被样式化。这避免了在HTML的大页面底部放置样式标记时出现未设置样式的内容闪烁。

否，css在浏览器读取css后立即应用于DOM元素

对于javascript，您可以保持脚本处于读取状态，因为您使它在所有html加载之后运行，例如：

window.onload = function (){

//here we start
}

---

CSS不仅不会像Javascript那样阻止，而且如果你把CSS放在

之外的任何地方，一些浏览器也会做一些奇怪的事情，比如忽略它，或者不完全地应用它。HTML5实际上禁止

出现在

之外（除了“作用域”功能，目前还没有人实现该功能）。

CSS样式表是使用

元素加载的，该元素只有在文档头中时才有效。至于CSS阻止HTML呈现，情况并非如此，因为一旦加载浏览器，就会像其他

元素一样应用CSS。JS阻止HTML，因为浏览器假定JS想要控制并在完全加载DOM之前实际执行某些操作，基本上JS是执行的，然后不受影响

试想一下，如果CSS与JS加载相同，则不会对任何元素进行样式设置，因为它将引用尚未加载的元素，因此它将在加载后应用，并且不会阻止加载。

JS

由于JS可以更改您的网页（修改DOM），浏览器会等待所有外部JS被下载（并行）、解释和执行，然后再继续执行

因此，最好将所有外部JS放在

的底部。通过这种方式，你的HTML被解析和呈现，你的用户感觉到有什么事情正在发生

CSS

另一方面，CSS不能更改DOM，不能对页面进行任何“重大”更改，这就是为什么浏览器不会像JS一样阻止下载、解析其余HTML和渐进式呈现。看起来它确实会阻止渲染，但最好将其放在顶部，避免长时间渲染。不过，它不会阻止下载

现在，似乎随着移动设备的兴起，把CSS放在头上，把JS放在底部是不够的。。。您将希望将ATF（折叠上方）CSS内联，并将其他巨大的最小化CSS与JS一起放在底部/延迟和异步

---

看看这个：

因为JavaScript阻止了额外的加载——请看：这是一个三年前发布的源代码。与此同时，情况发生了很大变化。尤其是在javascript引擎中。不过，头部的

仍然会阻塞解析器。它必须，它不知道你没有使用

文档。在那里写
。（Firefox和Chrome，iirc，现在在脚本之前进行推测性加载，但这只是部分修复。）+1它现在是一个有5年历史的链接。这种关于“JS在底部”的教条似乎只有2007年的一篇雅虎博客文章才得以证实。是否有现代参考资料？这是一个很好的做法，但不会阻止
在头部阻止后续加载和解析，因为浏览器不知道您没有使用
文档。编写
。你可以用
来保证不做任何有副作用的事情，但我在这方面遇到了一些问题，比如一系列的脚本加载被无序执行（例如，jQuery ui小部件在jQuery本身之前就被解析了——坏消息接踵而至）。在我的应用程序中，我通常不在html文件上编写任何javascript，只在js文件上编写。使用一些控件，如$（function（）{}）或上面的示例，在dom问题出现之前，我从未有过这种加载。