在移动设备中，哪一个更快:包括一个额外的CSS文件或在JavaScript中创建一个样式元素

In mobile devices, which is faster: including an extra CSS file OR creating a style element in JavaScript?

本文关键字：JavaScript 文件 创建 样式 元素 一个 CSS 移动 哪一个 包括一      更新时间：2023-09-26

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

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

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

选项1

(更多"Network Heavy")在单独的内联标签中包含CSS，例如:

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

或

选项2

(更多的"JavaScript执行繁重"，因为它需要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操作，这在移动设备浏览器中可能代价高昂。

那么哪个更好呢?

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

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

你最好先瞄准其他性能优化。像最小化CSS和javascript, CSS精灵等。使用一个工具，如slow来帮助显示可以在哪里进行性能优化。

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

来自Performance POV的回答:

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


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

(注意: html 5现在支持

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

可以并行加载其余的标记)

一旦css第一次被获取，那么它是既不下载也不执行 (vs javascript)。这对回头客来说是一种乐趣。

解决方案


使用外部css并将其保持在语义的顶部(在<head>部分，最好)。使用外部js并保持它在页面的底部(</body>标签附近)

背景:


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

  • 把样式表放在顶部
  • 将脚本放在底部

CSS文件在下载和处理后肯定会呈现得更快，因为浏览器对此进行了优化。通过JS应用意味着您需要等待文档加载，然后寻找元素，应用样式，然后让浏览器发挥它的魔力。

根据我的经验，添加一个CSS文件的任何动态行为远远超过任何"速度"下降由于可维护性(多么容易改变一些东西)，因为你实际上可以重新设计你的页面而不编辑代码部分，这可能会破坏的东西(例如，如果你改变JS生成的样式和忘记一个引号，你破坏了页面，并失去了所有的JS页面)。

通过JS进行样式化可以用于非动态行为的唯一情况是，当它的所有内容只有几行时，即使这样，我也很谨慎。

相关文章：