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
100
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
40
去啊无线前端的一天
ningzbruc
1
150
React & Component
ningzbruc
0
29
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
250
KISSY.Base - all about that Base
ningzbruc
0
100
Hammer.js
ningzbruc
1
320
淘宝旅行门票iPad版开发
ningzbruc
0
120
Travel on KISSY mini
ningzbruc
0
170
Events
ningzbruc
2
120
Other Decks in Technology
See All in Technology
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.4k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Operating Operator
shhnjk
1
590
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
360
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
710
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Balancing Empowerment & Direction
lara
1
430
The World Runs on Bad Software
bkeepers
PRO
69
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Scaling GitHub
holman
460
140k
RailsConf 2023
tenderlove
30
1.1k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
189
11k
Why Our Code Smells
bkeepers
PRO
336
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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