javascript - Sitecore 页面编辑器在将 div 添加到 DOM 之前运行脚本

Question

昨天我问了this SO question关于我在尝试通过页面编辑器添加渲染后未显示渲染的问题，即使通过内容编辑器上的演示详细信息添加时渲染效果非常好。渲染中包含一个 JavaScript 函数，这似乎是罪魁祸首，特别是因为如果将其删除，渲染将完美地工作。

@MarekMusielak 给了我一个很好的答案，但有以下几点要说:

The issue is that when you add a component through Page Editor, the script is fired before the div element is added to DOM. Don't ask me why...

我一直试图找出为什么会发生这种情况，但我似乎在网上找不到任何有关此问题的信息，而且我的同事也不知道为什么会发生这种情况。这真的开始让我烦恼了。

为什么页面编辑器在 <div> 之前触发脚本已添加到 DOM 中？

Answer 1

我绝不认为自己是现代浏览器中 DOM 的专家，但我确实发现了这一点 - 并且它可能值得一试。

Colin Ihrig writes :

As previously stated, tags cause the browser to block the rest of the page while the script is processed. This can lead to problems if the script references DOM elements which haven’t finished loading yet. In this scenario, the DOM-related code is typically placed in an event handler such as window load or DOMContentLoaded. Another option is to postpone execution until the document has been parsed using the “defer” attribute.

他的整篇文章非常详尽。我会尝试用“defer”和“async”搞乱一下，看看它是否对您所经历的有任何影响。