将 css 类添加到 DOM 主体的安全且最快的方法答案

【问题标题】：Safe AND quickest way to add a css class to the body of the DOM将 css 类添加到 DOM 主体的安全且最快的方法
【发布时间】：2020-07-02 18:06:55
【问题描述】：

我希望向 DOM 的 body 元素添加一个类。对于如此简单的事情，并且 body 元素本身加载速度很快（至少，我认为它会比埋在 DOM 中的元素加载得更快），我真的必须等待 jQuery Ready 事件来做这样的事情吗？简单的任务？我希望在将样式添加到正文时避免“闪烁”效果，因为我将附加到此类的不同 CSS 样式在添加时生效。

我可以这样做：

  jQuery(window.document).ready(function () {
    jQuery("body").addClass("home");
  });

但有没有更快、更安全的方法？我不在乎它是 jQuery 还是原生 JavaScript

【问题讨论】：

我不确定你所说的“安全”是什么意思——这似乎非常安全和快速（多快取决于内容的数量）。为了避免闪烁效果，我通常做的是通过 CSS 隐藏正文并在所有脚本运行后通过 jQuery 显示它。它确实会不时出现问题，例如，一个元素的大小是基于另一个元素的大小，但这些脚本只需要在显示正文的行之后。
最安全和最快的方法是进入 HTML 并将类添加到 <body> 元素
当然最快最安全的方法就是把它放在body标签中 ?!
@Alnitak true，但我使用的是 ASP.NET 母版页，我只希望在呈现主页时添加此类。

标签： javascript jquery

【解决方案1】：

document.body.className += ' home';

Performance comparision：className vs classList vs addClass：

更新（基于 PSL 的评论）

或者对于较新的document.body.classList.add("home");

确保您在 <body> 下执行此操作，如果从 <head> 脚本应用，它将不起作用

【讨论】：

或更新的document.body.classList.add("home");
确保它在<body>里面
@PSL：你真的尝试比较那些吗？该测试（分配处理程序与执行 jQuery sn-p）完全没有意义，它证明什么。
为什么不document.body.className += ' home';？关于额外的加号，我是否遗漏了什么？
@Pete：不，但我投票决定这样离开是为了强调空间的需要。但这只是我的观点。您还建议了太多空间。

【解决方案2】：

在body标签之后，你可以创建一个脚本标签：

<body>
<script>
    $('body').addClass('home')
</script>
<!-- HTML content bellow -->
</body>

唯一的条件是jQuery加载在head中。

【讨论】：