javascript - 在向用户显示 DOM 之前对其进行操作？

Question

我对 javascript 不太熟悉，有没有办法在页面显示给用户之前操​​作 DOM？

我正在使用 GWT，它使您可以通过 javascript 创建页面元素。这很方便，但似乎所有 javascript 代码都是在页面首次显示给用户之后执行的。这会产生将页面显示为空白屏幕的效果，然后所有 UI 元素都会弹出到屏幕上。页面切换时效果非常明显。

如果我使用 php 或 jsp，看起来页面 ui 元素已经预渲染，并且浏览器在显示之前不会显示空白屏幕。

那么 JavaScript 中是否有任何钩子(Hook)可以让我们在浏览器清除最后显示的页面的内容之前操作 DOM？

-------------------------------- 编辑 -------------- --------------------------

@Cipi:我不确定这是否有效，但我可以尝试。我认为这会是同样的问题吗？我仍然看到它是这样发生的:

1. 用户已在我的某一页面上。
2. 用户点击链接。
3. 浏览器开始获取新网址的内容，但内容只是一个空的 html 文件，其中只有一个 javascript 链接。
4. 页面下载完成后，浏览器呈现 html(这只是一个白屏)。
5. 现在 JavaScript 开始执行以响应 onLoad() 事件(？)，构建 UI。
6. 几毫秒后，DOM 就完成了操作，并最终呈现给用户。

所以我认为您的解决方案将在第 #5 步进行，但到那时浏览器已经在第 #4 步呈现初始页面的内容？

@Crozin:我现在正在研究 DOMContentLoaded，似乎特定于基于 gecko 的浏览器，但有针对 ie 等的解决方案。是的，我基本上想在浏览器渲染任何内容之前操纵 dom屏幕上出现新页面，希望可以做到这一点。

谢谢

Answer 1

是的，有两种方法:

1. 使用DOMContentLoaded事件

2. 在以下代码中:

   ....
   <p id="abc">abc</p>
   <script type="text/javascript"> CODE HERE </script>
   <p id="def">def</p>
   

   id 为 abc 的元素可用，但 id 为 def 的元素不可用。