javascript - 在移动设备中，哪个更快 : including an extra CSS file OR creating a style element in JavaScript?

Question

如果我有一个包含一些 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 注入(inject) 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 操作，这在移动设备浏览器中可能代价高昂。

那么哪个更好呢？

Answer 1

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

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

您最好先针对其他性能优化。像 Minify CSS 和 javascripts，CSS sprites 等。使用 yslow 等工具以帮助展示可以在何处进行性能优化。

而且大多数浏览器可以向同一主机发出至少 4 个并发请求，以便 CSS 和 Javascript，HTML 可以同时下载。 See here