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
46
去啊无线前端的一天
ningzbruc
1
150
React & Component
ningzbruc
0
31
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
250
KISSY.Base - all about that Base
ningzbruc
0
110
Hammer.js
ningzbruc
1
330
淘宝旅行门票iPad版开发
ningzbruc
0
120
Travel on KISSY mini
ningzbruc
0
180
Events
ningzbruc
2
120
Other Decks in Technology
See All in Technology
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
220
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
9
73k
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
170
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
360
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
890
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
100
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
820
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Producing Creativity
orderedlist
PRO
347
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Thoughts on Productivity
jonyablonski
70
4.8k
How GitHub (no longer) Works
holman
315
140k
For a Future-Friendly Web
brad_frost
180
9.9k
RailsConf 2023
tenderlove
30
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Unsuck your backbone
ammeep
671
58k
Writing Fast Ruby
sferik
628
62k
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