Summary of the implementation of DOMReady events in some mainstream JS frameworks_jquery

It turns out that the more commonly used one is the onload event of window, and the actual effect of this event is: it is triggered after the page parsing/DOM tree establishment is completed, and the download of all resources such as pictures, scripts, style sheets and even iframes is completed. This is a bit "too late" for many practical applications and affects the user experience. In order to solve this problem, a DOMContentLoaded method was added to ff. Compared with onload, this method is triggered earlier. It is triggered after the DOM content of the page is loaded without waiting for other resources to be loaded. The Webkit engine also introduced this event starting from version 525 (Webkit nightly 1/2008:525), and Opera also includes this method. So far, mainstream IE still has no intention to add it. Although it is not available under IE, there is always a solution. The following is a comparison of the compatibility version implementation plans of several major mainstream frameworks for this event. The frameworks involved include:
Prototype
jQeury
moontools
dojo
yui
ext
1. Prototype
Implementation code

The implementation idea is as follows:
If it is webkit, poll the readyState attribute of the document. If the value of this attribute is loaded or complete, the DOMContentLoaded event will be triggered. To be on the safe side, register the event on window.onload.
If it is FF, register the DOMContentLoaded event directly.
If it is IE, use document.write to add a script element to the page, and set the defer attribute. Finally, the completion of loading of the script is regarded as a DOMContentLoaded event to trigger.
There are two main problems with this implementation: First, the method of writing script through document.write and setting defer will wait until the content in the iframe is loaded before triggering when the page contains an iframe. This is different from onload. There is not much difference; secondly, Webkit introduced the DOMContentLoaded method in versions above 525, so there is no need to implement polling in these versions and can be optimized.
2. jQuery

The implementation idea is as follows:
Treat Webkit and Firefox equally, and both directly register the DOMContentLoaded event. However, since Webkit was only introduced in version 525 or above, there are potential compatibility risks.
For IE, first register the onreadystatechange event of the document. After testing, this method is equivalent to window.onload. It will still wait until all resources are downloaded before triggering.
After that, if it is determined that it is IE and the page is not in an iframe, the doScroll method of documentElement will be continuously called through setTiemout until the call is successful and DOMContentLoaded will be triggered
jQuery uses a new solution for IE. Method, which originates from http://javascript.nwbox.com/IEContentLoaded/. Its principle is that under IE, some methods of the DOM can only be called after the DOM parsing is completed. doScroll is such a method. In turn, when doScroll can be called, it is when the DOM parsing is completed, which is the same as in the prototype. Compared with document.write, this solution can solve the problem of failure when the page has an iframe. In addition, jQuery seems to be worried that this method will fail when the page is in an iframe, so it makes a judgment in the implementation code. If it is in an iframe, it is implemented through the onreadystatechange of the document, otherwise it is implemented through doScroll. However, after testing, doScroll is still effective even in an iframe.
3. Moontools

The implementation idea is as follows:
If it is IE, use the doScroll method to implement it.
If it is a version of Webkit less than 525, it is implemented by polling document.readyState.
Others (FF/Webkit high version/Opera) directly register the DOMContentLoaded event
Moontools' implementation solution prototype and jQeury are integrated, and the version judgment of webkit makes the solution more robust. In terms of the implementation of doScroll, compared with jQuery, a new div element is created here and destroyed after use. However, jQuery directly uses doScroll of documentElement to detect, which is simpler and more efficient.
4. Dojo

实现思路如下：
如果是Opera或FF3以上版本则直接注册DOMContentLoaded<事件，为保险起见，同时也注册了window.onload事件。
对于webkit则通过轮询document.readyState来实现。
如果是Air则只注册widnow.onload事件。
如果是IE则通过往页面写带defer属性的script并注册其onreadystatechange事件来实现。
Dojo在IE下的实现方案同样无法解决iframe的问题，而由于在FF2 下会有一个非常奇怪的Bug，因此默认只在FF3以上版本上使用DOMContentLoaded事件，同时又给了一个配置 -dojo.config.enableMozDomContentLoaded，如果在FF下将该配置设置为true则依然会使用 DOMContentLoaded来实现，这一点充分考虑到了灵活性。对于webkit的实现，与prototype一样有优化的空间。
五、YUI

实现思路与Moontools一样
六、EXT