YUI3 DOMReady Bug

There's a bug in yui3 domready event

Transcript

1. More Than DOMReady —— yui3 domready bug 1
2. WTF?! • Request was blocked? • IE was even faster than Chrome?! • All modules were loaded! 2
3. domready? Y.on('domready', function() { // more code }); 3
4. DOMReady • DOMContentLoaded • doScroll • document.readyState 4
5. DOMContentLoaded document.addEventListener('DOMContentLoaded', function() { fireReady(); }, false); 5
6. doScroll if (self === self.top) { window.domreadyPoll = setInterval(function() { try { document.documentElement.doScroll('left'); clearInterval(window.domreadyPoll); window.domreadyPoll = null; fireReady(); } catch (domNotReady) {} }, 10); } 6
7. document.readyState • loading • interactive • complete 7
8. document.readyState document.onreadystatechange = function() { if (document.readyState == 'complete') { fireReady(); document.onreadystatechange = null; } }; 8
9. fallback window.onload = function() { fireReady(); }; 9
10. fireOnce • DOMContentLoaded • onload • onreadystatechange (each state) 10
11. fireOnce window.onload = function() { document.addEventListener('DOMContentLoaded', function(e) { // Oops! }, false); }; 11
12. States if (Y.Env.DOMReady) { fireReady(); } if (document.readyState == 'complete') { fireReady(); } 12
13. Non-blocking Script Load • unblock DOMContentLoad • block onload • block complete readyState 13
14. What’s the difference? 14
15. Where Tragedy Happens! DOMContentloaded Slow request Blocked! Event loaded IE - doScroll onload & domready Endless waiting 15
16. Solution • contentready • fix it in config file 16
17. Contentready Y.on('contentready', function() { // more code }, '#content'); 17
18. Fix it YUI.GlobalConfig = { modules: { // modules config } }; (function () { var GLOBAL_ENV = YUI.Env; if (!GLOBAL_ENV._ready) { GLOBAL_ENV._ready = function() { GLOBAL_ENV.DOMReady = true; GLOBAL_ENV.remove(YUI.config.doc, 'DOMContentLoaded', GLOBAL_ENV._ready); }; GLOBAL_ENV.add(YUI.config.doc, 'DOMContentLoaded', GLOBAL_ENV._ready); } })(); 18
19. Advice Test More! 19
20. ] { the end. 20