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
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
230
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
microCMSではじめるAIライティング
himaratsu
0
150
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
Data Engineering Study#30 LT資料
tetsuroito
1
180
shake-upを科学する
rsakata
7
1k
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
190
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Bash Introduction
62gerente
613
210k
How GitHub (no longer) Works
holman
314
140k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Fireside Chat
paigeccino
37
3.5k
Music & Morning Musume
bryan
46
6.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Thoughts on Productivity
jonyablonski
69
4.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
4 Signs Your Business is Dying
shpigford
184
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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