0

由于 JavaScript 阻止了 HTML 渲染，并且在关闭 body 标签之前将 JavaScript 保持在底部是一种很好的做法，CSS 也不是这样吗？

我知道我们不能将外部 CSS 放在外面。

4

6 回答 6

6

CSS 不会像 JavaScript 那样阻塞

引用雅虎开发者网络博客

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

此外，当 CSS 被添加到头部时，它首先被解析，并导致 HTML 被样式化，即使它被下载。这样可以避免在 HTML 大页面底部放置样式标签时发生的 Flash Of Unstyled Content。

于 2010-10-26T17:24:14.890 回答
2

CSS 不仅不会像 Javascript 那样阻塞，而且如果你将 CSS 放在除 之外的任何地方，一些浏览器也会做一些奇怪的事情<head>，比如忽略它，或者不完整地应用它。HTML5 实际上禁止<style>出现在外部<head>（AFAIK 尚未实施的“范围”功能除外）。

于 2010-10-26T17:27:34.620 回答
1

CSS 样式表是使用<link>元素加载的，这个元素只有在文档的头部才有效。至于 CSS 阻止 HTML 渲染，情况并非如此，因为 CSS 是在浏览器加载后应用的，就像其他<link>元素一样。JS 阻止 HTML，因为浏览器假定 JS 想要控制并在完全加载 DOM 之前实际做一些事情，基本上 JS 被执行然后不理会。

想想看，如果 CSS 和 JS 一样被加载，没有元素会被设置样式，因为它会引用尚未加载的元素，因此它会在之后应用并且不会阻塞加载。

于 2010-10-26T17:27:56.170 回答
0

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

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

window.onload = function (){

//here we start
}
于 2010-10-26T17:24:50.970 回答
0

JS

由于 JS 可以更改您的网页（修改 DOM），浏览器会等待所有外部 JS 被下载（并行）、解释和执行，然后再继续执行后面的其余 HTML<script src="..." > 因此，将所有外部 JS 放在的底部<body>。通过这种方式，您的 HTML 被解析和呈现，您的用户感觉正在发生某些事情......

CSS

另一方面，CSS 不能更改 DOM，不能在页面上进行任何“重大”更改，这就是为什么浏览器不会像 JS 那样阻止下载、解析 HTML 的其余部分以及渐进式渲染的原因。看起来确实会阻塞渲染，但还是最好放在最上面，避免长​​的FOUC。不过，它不会阻止下载

现在，似乎随着移动设备的兴​​起，将您的 CSS 放在您HEAD的底部并将 JS 放在底部是不够的......您将希望将 ATF（首屏）CSS 内联，并将其余的巨大的最小化 CSS 与你的 JS - 在底部/延迟和异步

看看这个：http ://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

于 2014-09-01T09:14:56.933 回答
-2

为什么将 Javascript 保持在底部是一个好习惯？

我会说最好将 CSS 和 Javascript 放在单独的文件中，并使用该<head>部分将它们包含在您的 HTML 文档中。

于 2010-10-26T17:23:53.593 回答