javascript - 隐藏元素以供稍后显示 - 浏览器如何更新屏幕？

Question

假设我的页面上有一个 HTML 元素，我希望在某个事件发生(例如用户单击按钮)之前保持不可见。我的页面中有以下代码:

$(document).ready(
    function () {
        ('#messageText').hide();
    }
);

上面的代码将在文档就绪时执行，然后隐藏该元素。这将允许我稍后调用 show() 来显示它，而不会让我的代码与 CSS 纠缠在一起。

我的问题是在上述代码触发之前用户会短暂地看到页面上的元素吗？

从我的测试来看，似乎没有，但是连接速度较慢的用户会体验到隐藏内容的闪现吗？另一种方法是，HTML 渲染和文档就绪事件都在浏览器更新屏幕之前在后台发生，并且隐藏元素永远不会在 UI 中实际可见地渲染。它是什么？它在浏览器版本和操作系统之间是否一致？

Answer 1

是的，这是可能的。 $(document).ready() 当 DOM 准备好时触发 - html 渲染，js 加载。您可能会遇到 html 渲染速度比 js 加载速度更快的情况 - 因此您将看到您的元素可见。 附注- 为了避免这种情况，最好按需创建该元素。