jQuery .length是否依赖DOM就绪？判断<body>节点时机的疑问

好的，咱们一步步来拆解你的问题，结合你的测试结果给出针对性的方案：

1. $('body').length的判断逻辑：不需要等待</body>闭合 #

浏览器的HTML解析是流式处理的：当解析器读到<body>的开始标签时，就会立刻创建<body>元素并将其加入DOM树，此时$('body').length就会返回1——完全不需要等待</body>闭合标签加载完成。

你的测试结果也验证了这一点：length timestamp远早于ready timestamp，因为jQuery的$(function(){})（即document.ready）是等待整个DOM树完全构建完成（包括所有<body>内的元素都被解析）才触发的，而你的轮询逻辑在<body>刚被创建时就执行了，这完全符合浏览器的工作机制。

2. 不干扰DOM结构的替代方案（解决300ms空白闪烁） #

既然你没有服务端权限，又不想添加额外的DOM元素，这里有几个更优的方案：

方案一：用原生DOM API替代jQuery，更轻量高效 #

jQuery的$('body')本质上是封装了原生的document.body，直接轮询原生属性可以避免jQuery选择器的开销，逻辑更直接：

function loader() {
  if (!document.body) {
    window.requestAnimationFrame(loader);
  } else {
    // 用原生API创建并插入loader
    const loaderEl = document.createElement('div');
    loaderEl.className = 'loader';
    // 插入到body最开头
    document.body.prepend(loaderEl);
  }
}
loader();

这个方案和你原逻辑一致，但性能更好，也不需要依赖jQuery的选择器解析。

方案二：把插入脚本放到<body>的最开头（最推荐） #

如果能调整脚本的位置，把插入loader的脚本直接放在<body>的第一行，那连轮询都不需要——因为浏览器解析到这里时，<body>已经存在：

<html>
<head>
  <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
  <!-- 先加载loader的样式，确保显示时样式已就绪 -->
  <style>
    .loader {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: #ffffff; /* 匹配页面背景，避免闪烁 */
      z-index: 9999;
      /* 加载动画样式 */
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    $('<div class="loader"></div>').prependTo('body');
  </script>
  <!-- 页面其他元素 -->
</body>
</html>

这个方案完全消除了轮询的开销，是最直接高效的方式，只要能调整前端代码的位置就优先用它。

方案三：极端场景下用document.write（不推荐但可用） #

如果必须在<head>里的脚本中插入loader，可以用document.write直接写入到页面流中——在浏览器解析HTML的过程中，document.write会直接把内容插入到当前解析的位置：

// 在<head>的脚本中执行
document.write('<div class="loader"></div>');

⚠️ 注意：这个方法只适合初始加载时使用，一旦文档解析完成后调用document.write会清空整个页面，所以务必确保是在同步加载的脚本中执行。

3. 额外优化：避免loader显示延迟 #

即使你提前插入了loader，如果样式没有提前加载，也可能出现短暂的空白。建议把loader的CSS样式内联在<head>中，确保元素插入时样式已经就绪，这样就能立刻显示，完全消除闪烁。

内容的提问来源于stack exchange，提问作者sangnandar