Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
YUI3 DOMReady Bug
Search
ningzbruc
January 24, 2013
Technology
1
89
YUI3 DOMReady Bug
There's a bug in yui3 domready event
ningzbruc
January 24, 2013
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
9
去啊无线前端的一天
ningzbruc
1
110
React & Component
ningzbruc
0
9
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
190
KISSY.Base - all about that Base
ningzbruc
0
84
Hammer.js
ningzbruc
1
300
淘宝旅行门票iPad版开发
ningzbruc
0
88
Travel on KISSY mini
ningzbruc
0
120
Events
ningzbruc
2
100
Other Decks in Technology
See All in Technology
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
On Your Data を超えていく!
hirotomotaguchi
2
750
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
1.8k
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.1k
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
130
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
690
開発パフォーマンスを最大化するための開発体制
ham0215
7
950
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
140
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
270
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
4
1.4k
ServiceNow Now Platform 最新版Washington, D.C.リリース
manarobot
0
100
JSON攻略法.pdf
miyakemito
8
5.2k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
63k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
Infographics Made Easy
chrislema
238
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
Thoughts on Productivity
jonyablonski
59
3.9k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Producing Creativity
orderedlist
PRO
338
39k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Transcript
More Than DOMReady —— yui3 domready bug 1
WTF?! • Request was blocked? • IE was even faster
than Chrome?! • All modules were loaded! 2
domready? Y.on('domready', function() { // more code }); 3
DOMReady • DOMContentLoaded • doScroll • document.readyState 4
DOMContentLoaded document.addEventListener('DOMContentLoaded', function() { fireReady(); }, false); 5
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
document.readyState • loading • interactive • complete 7
document.readyState document.onreadystatechange = function() { if (document.readyState == 'complete') {
fireReady(); document.onreadystatechange = null; } }; 8
fallback window.onload = function() { fireReady(); }; 9
fireOnce • DOMContentLoaded • onload • onreadystatechange (each state) 10
fireOnce window.onload = function() { document.addEventListener('DOMContentLoaded', function(e) { // Oops!
}, false); }; 11
States if (Y.Env.DOMReady) { fireReady(); } if (document.readyState == 'complete')
{ fireReady(); } 12
Non-blocking Script Load • unblock DOMContentLoad • block onload •
block complete readyState 13
What’s the difference? 14
Where Tragedy Happens! DOMContentloaded Slow request Blocked! Event loaded IE
- doScroll onload & domready Endless waiting 15
Solution • contentready • fix it in config file 16
Contentready Y.on('contentready', function() { // more code }, '#content'); 17
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
Advice Test More! 19
] { the end. 20