如果渲染，JavaScript HTMLElement.offsetHeight 不测量？答案

【问题标题】：JavaScript HTMLElement.offsetHeight is not measured IF rendered?如果渲染，JavaScript HTMLElement.offsetHeight 不测量？
【发布时间】：2018-04-06 19:53:33
【问题描述】：

并没有真正的官方 JavaScript 文档，但让我们来看看：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

关于 HTMLElement.offsetHeight 他们说：

通常，元素的 offsetHeight 是以像素为单位的元素 CSS 高度的度量，包括边框、填充和元素的水平滚动条（如果存在，如果呈现）。

我知道 offsetHeight 的值在不同的浏览器中可能会有所不同，但这不是我的意思。我的观点是：

如果渲染

我做了一些测试，但我认为这是错误的和不正确的。在我看来，它必须是：“如果解析”而不是“如果呈现”。在互联网上，我看到很多人混淆了这些术语，而我认为它们是两个不同的东西。

渲染 = 在浏览器中显示内容
解析 = 构建 DOM 树

看这个测试：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
    <div id="result"></div>

    <div id="container">
        One line of html code<br />
        One line of html code<br />
        One line of html code<br />
        One line of html code<br />
        One line of html code<br />
        One line of html code<br />
        One line of html code<br />
        One line of html code<br />
        One line of html code<br />
        One line of html code<br />
    </div>

    <script>
        // What is the offsetHeight of the html element "container" at this point?
        var elmContainer = document.getElementById( 'container' );
        var elmResult = document.getElementById( 'result' );
        elmResult.innerHTML = 'Container offsetHeight is ' + elmContainer.offsetHeight + ' px';

        // Synchronous delay of 5 seconds
        var timeWhile = new Date().getTime(); 
        while( new Date().getTime() - timeWhile < 5000 );
    </script>
</body>
</html>

在 Chrome 中 5 秒后显示：
Container offsetHeight is 180 px
后面是 html 代码行

5 秒后在 firefox 中：
容器 offsetHeight 为 200 px
后面是 html 代码行

文档说它只会在渲染时测量高度。但是当开始执行 5 秒的 javascript 延迟时，浏览器还没有在屏幕上显示任何内容。所以 HTMLElement 还没有被渲染！解析相同的 html 已经完成，因为“解析 html”和“执行 javascript”具有同步行为。

因此，如果我不得不相信文档，我希望 offsetHeight 为空或为零。我犯了一些错误还是文档确实不正确？

附言可能是“如果存在，如果渲染”仅指水平滚动条，但我做了一些其他测试，如果有滚动条，它将在浏览器在屏幕上显示任何内容之前（渲染之前）计算出来。因此，在这种情况下，我们将有与上述相同的故事。

附言也许它看起来像一个不重要的细节，但我在互联网上的任何地方都可以使用 offsetHeight 来测量屏幕上显示的元素的高度。所以我想我可以用它来跟踪浏览器的渲染过程。但是当元素还在渲染时，offsetHeight 的值已经是我完成渲染后的值了。

【问题讨论】：

"If present if rendering" 是指滚动条。
@James：您可能没有阅读我的第一个“附注”，因为如果他们谈论滚动条，那是相同的行为。如果它是关于滚动条的，那么同样的故事。只需添加：样式=“背景：黄色；宽度：50px；高度：50px；空白：nowrap；溢出-x：滚动；”到容器 div，它会输出包括滚动条在内的高度，而此时浏览器中还没有任何东西可看（所以还没有完成渲染）。
我做了，我只是在确认我对 Mozilla 文档的看法。

标签： javascript html rendering offsetheight

【解决方案1】：

在阅读了更多关于它的内容之后，我想我现在可以回答我自己的问题了。

Mozilla 在正确使用术语/定义方面并不一致。

我做了一个方案让它更清楚，让：

渲染 -> 渲染树 -> 未完成渲染 -> 在用户屏幕上显示 -> 完成渲染解析 HTML -> DOM 树 -> 完成解析

见：https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/，他们在说：

HTML 中的样式信息和视觉指令将用于创建另一棵树：渲染树。渲染树包含具有颜色和尺寸等视觉属性的矩形。矩形按正确的顺序显示在屏幕上。

因此，当某些已解析的 html 在“渲染树”中时，高度是已知的。这并不意味着它已经显示在屏幕上。

所以对于“IF RENDERED”……Mozilla 的文档说错了。这意味着他们对“完成渲染”的定义是它在“渲染树”中（并且不需要已经在屏幕上）。他们可以这样定义它，但是他们必须在这方面保持一致。事实并非如此。在其他地方，当内容显示在屏幕上时，他们经常谈论“如果呈现”之类的事情。

【讨论】：