0

如果我有一个包含一些 JavaScript 的 HTML 页面，例如：

<script type="text/javascript" src="http://example.com/code.js" async></script>

我想添加一些 CSS，以下 2 个选项中哪一个更快，性能方面？

选项1

（更多“网络重磅”）将 CSS 包含在单独的内联标记中，例如：

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css">

或者

选项 2

（更多“JavaScript Execution Heavy”，因为它需要 DOM 操作）从包含的 JavaScript 文件内部将 CSS 注入 DOM，例如（取自：https://stackoverflow.com/a/707580/1785003] 1）：

var css = document.createElement("style");
var css = "text/css";
css.innerHTML = "strong { color: red }";
document.body.appendChild(css);

第二个选项从页面中删除网络请求，但需要 DOM 操作，这在移动设备浏览器中可能成本很高。

那么哪个更好呢？

4

3 回答 3

1

我认为移动设备和普通浏览器在加载和缓存页面的方式上没有太大区别，所以我会一视同仁。

在你的 JavaScript 中使用 CSS 将成为维护的噩梦。可能不值得任何微小的（如果有的话）优化收益。正如 Pekka 在初始加载后指出的那样，它将被缓存。

您最好先针对其他性能优化。像 Minify CSS 和 javascripts、CSS sprites 等。使用诸如yslow之类的工具来帮助显示可以在哪里进行性能优化。

此外，大多数浏览器可以向同一主机发出至少 4 个并发请求，以便可以同时下载 CSS 和 Javascript 、 HTML。看这里

于 2013-03-14T09:48:49.067 回答
1

从性能 POV 回答：

使用CSS是一个更好的选择。

原因
性能不仅仅以网络带宽消耗来衡量。JS 会阻止页面的呈现，直到它们完全下载。

（注： html 5 现在支持

<script type="text/javascript" src="http://example.com/code.js" async></script>

这可以释放并行加载其余标记。）

第一次获取 css 后，它既不会被下载也不会被执行（与 javascript 相比）。这对回头客来说是一种享受。

解决方案
使用外部 css 并将其保持在语义的顶部（<head>最好在部分中）。使用外部js并保持在页面底部（</body>标签附近）

背景：
曾与雅虎合作过！并坚持他们的最佳前端实践。

  • 将样式表放在顶部
  • 将脚本放在底部
于 2013-03-14T09:56:50.877 回答
0

CSS 文件一旦被下载和处理，它的渲染速度肯定会更快，因为浏览器已经为此进行了优化。通过 JS 应用意味着您需要等待文档加载，然后查找元素、应用样式，然后让浏览器发挥作用。

根据我的经验，添加一个 CSS 文件来解决动态行为远远超过了由于可维护性（更改某些内容是多么容易）而导致的任何“速度”下降，并且因为您实际上可以在不编辑代码部分的情况下重新设置页面样式，这可以破坏事物（例如，如果您更改了生成样式的 JS 并忘记了引用，那么您破坏了页面，并丢失了该页面的所有 JS）。

对于非动态行为，通过 JS 进行样式设置的唯一情况是它总共只有几行，即使这样我也很谨慎。

于 2013-03-14T09:46:52.813 回答