?μ?è§???¨??ˉ?￠????JavaScriptè????????è???????§è???

??¨????????-????????????????o????è??è?????(defer)???????-￥è?????(async)?????§è???????o????μ?è§???¨??ˉ????????μ????μ?è§???¨bug??￥???????????????è??é??é￠????è??é?¤?o?defer???async??1??§?????¨???è????????Ajaxè??????3¨??￥?1???ˉ??¤?§??????¨????????o???é?????è??????????1?3????????????￥??????è????¤?§???1?3?é??è??è????°è????????è???????±???é?μé?￠è§￡????????2???????????¨????????ˉ??¨??????????μ?è§???¨??-???è????¤?§??????ˉ????????o???è??????????§è???????oè????ˉ??????????·???????????¤????????????￥??￠è?¨??????é??è????¨???è??????????ˉ???Ajax?3¨??￥???è???????¨è???o???1é?￠?????1??§???

??￡???????¤????

???????????¨??????2.3è????-???loadScript?????°??￥?·??????¨???è???????????????????¨è???ˉ???????2.4è????-???loadXhrScript?????°??￥?????°Ajaxè??????3¨??￥????????????è????¤??a?????°é???????¨util.js??-???

??|?¤???????????????¨???CHROME???????????o47.0.2526.80???firefox???????????o43.0.4???opera????????o30.0.1835.125???

1.1??¨???è??????????§è???????oé??é￠?

????????¨????μ?è§???¨??ˉ?￠????JavaScriptè????????è???????§è????￠????1?defer???async??1??§?????-2.3è??DEMO?????o??????????￠?????????a?¤?é?¨js?????????

dynamic1.js

test += "?????ˉhead?¤?é?¨??¨???è?????n";

dynamic2.js

test += "?????ˉbody?¤?é?¨??¨???è?????n";

dynamic3.js

test += "?????ˉ?o?é?¨?¤?é?¨??¨???è?????n";

1.1.1 DEMO1?????¨???è??????????§è???????o?????￠

HTML?????￡?????o???

??¨??￡?????-????????????????°?3??a??¨???è????????????????￥??°HTML???????-???-?????????é??è??????-￡????¤?é?¨è???????????é?¨è??????????§è????￥è??è???ˉ?è???????????????????????????μ?è§???¨??-?????§è???????????

?3¨???firefox???opera??-??§è??????????ˉè???????????

??????é?￠???????-???-???????????ˉ??￥?????o?????¨???????μ?è§???¨??-?????¨???è??????????§è???????o?·????è????ˉ?ˉ?è???¤§???????????￥?????¤??1??ˉ??ˉ??￥????????????

[1]??¨???è?????????????ˉ??￥èμ·??°???é??????????-è?????????????¨?????3???è???????¨????????ˉè????a???è???????¨??′?????????è???¤??????-??°??????????-￡???è?????é????§è??????ˉ??1????????1?????3????èˉ?è???¤????è????°DOMContentLoaded?1????

[2]??¨???è???????§è???????????é?o?o???ˉ????3????èˉ???????è???????1??¨è???ˉ?????????￥????????-???????ˉ?????????-è??è???o?èˉ|??????è§￡é??

???è????aDEMO??-è????ˉ??￥?????o?????¨???è??????????§è???????o??·???è???¤§??????????????§???è???????¨DEMO1??-?????¨???è?????é????¨DOMContentLoaded?o?????1??????§è??????????′?1??1?????????3?????¨???è??????°±??????é?????DOMContentLoaded?????????é??è??DEOM2??￥????????????

1.1.2 DEMO2?????¨???è??????ˉ1DOMContentLoaded???é?????

?????????DEMO1??-??????27è?????????????1??o???

???????????¨????μ?è§???¨??ˉ?￠????JavaScriptè????????è???????§è????￠????1???￡?????§è??é?o?o??????-???delayfile.php????°?3.js???è????????è??5?§?é?????????????￥é??????|??????ˉdefer???è??è???????????è?o?-￡????¤?é?¨è????????è???o??¤?é?????é?′???deferè?????è????ˉ?????¨?-￡????¤?é?¨è??????1??????§è?????????????ˉ??¨???è???????′?????ˉè????·?o????????????????????????1????????￡?????¨?μ?è§???¨??-?????§è??é?o?o????

?3¨???firefox???opera??-??§è??????????ˉè???????????

??ˉ??￥?????°?????¨?????a?-￡???è????????è?????é?′è??é????????????????¨???è??????????§è????????????????????è?o??¨IEè????ˉCHROME???firefox???opera??-????????¨DOMContentLoaded?1??????§è?????????-¤????????ˉ??￥????-￥??¤??-?????¨???è??????????§è???????o??ˉ?????????????????¨???????μ?è§???¨?????§è???????o?1?é???-???¨?·??????????????????￥????o?èˉ￥??ˉ??¨??￡??????è?????????1????????1?????o??¨???-?2????JavaScript??￡?????§è??????????a???é?′?????????????μ?è§???¨?ˉ1è????a???é?′????????????????????????

????-¤?????¨???è???????ˉ??|???é?????DOMContentLoaded?1???ˉ????????????????????o??¨???è???????ˉè????¨DOMContentLoadedè§|????1????????1???ˉè????¨è§|????1??????§è?????è???????±?o?IE<=8?????ˉ???????-￡???DOMContentLoaded?o???????jQuery??¨IE<=8??-?1???ˉ?¨??????¤??-èˉ￥?o?????????????(???????ˉ???????é?¨è?2è§￡DOMContentLoaded?o????)??????????¨??o|????1?????ˉ1?????????è?°??￡????????§è????????é???????±??????

1.1.3 DEMO3?????¨???è????????defer

????????￥é?????deferè???????ˉ??????????ˉ1???????????§è???????o????????3é?μé?￠è§￡??????????1???????DOMContentLoadedè§|????1???????è???1??????§è??????o???????????o?è???1?é?′??¨??§è???????o????1?????-???¨????1???3è??????????ˉ??¨???é?????éa???-?????°?????¨???è???????ˉè???????¨deferè??????1???????è???1??????§è??????????′???????????-deferè??????????§è???????????????????￥????μ?è§???¨??ˉ?￠????JavaScriptè????????è???????§è????￠????1?defer???async??1??§?????-2.3è?????DEMO??-???deferè?????????????1HTML??￡????|???????

?3¨???firefox???opera??-??§è??????????ˉè???????????

???????￠?????o??????adefer???è?????????????￥??????????????a?μ?è§???¨??-?????§è???????????

??????éa?????????ˉ??￥?????o?????¨???è??????????§è???????o???deferè??????1??2??????′??￥?????3?3????è?¨é?￠??????èμ·??￥??¨CHROME???firefox??-??????è??è??????????ˉ??¨??¨???è??????1??????§è???????¨????????ˉ??????-Javascript?ˉ?(2.????-￥???è??è?????)???????????-?????°è??a??ScriptDOM???defer??????é????ˉ??￥??§è???????¨???????μ?è§???¨??-????????????????o§???????????·????????¨Firfox???Chrome??-???ScriptDOM??????????o§?ˉ?defer??????è????¨IE??-?????μ????????????a???????????è???§????????o§?o?èˉ￥??ˉ????-???¨??????????????aé??è|??°?deferè?????????????a???è?????è?????é?￡?1???¨???è??????????§è???°±???????o?deferè??????o????

???????????￥??????????????¨???è??????????§è??é??é￠????

[1]é|?????????¨???è???????????è???¤???¨???????¨??o|???èμ·??°???è??è???????§è??????????¨????????±?o???¨???è??????????§è???????o??????????????§???è???§????è???????¨??????????1???ˉ??a??￥??????

[2]???????????¨???è??????????§è??é?o?o??????????????????§?·???????é?o?o????è????ˉ??¨???è??????????ˉ?ˉ?è???¤§???é??é￠??1???????????????????è§￡??3??1????°±??ˉ?????¨???è°??????°?????????è???????????è?????????????¨?????aè????????è????????????????¨????·????????????aè????????

[3]??¨???è??????2???????????????§è???????o??????é??è??DOM???appendChild???insertBefore?-???1?3??°?script????′??·??????°DOM??-???????°±?????????è??JSè????????è??????????§è???o?èˉ￥??ˉ??¨???è???????????????????a?????o??????????μ?è§???¨?ˉ1è????a?????o????¤?????·?????ˉ?è???¤§????ˉ??|???¨IE??-????o?èˉ￥??ˉé??????°??????§è??????-???￥????1??°±??ˉ??¨???è????????????°?????ˉ?????????o??§è????￡???

[4]??¨???è???????ˉè???????¨DOMContentLoadedè§|????1???????è???1??????§è?????????-¤????3????????????ˉ??|???é?????DOMContentLoaded???è????¨???è???????μ????????¨???è?????é?????é?????window.onload????????ˉ?1?????-???¨??¨???è???????¨window.onloadè§|????1??????§è????????è????????é?????window.onload

2.1Ajax?3¨??￥è??????????§è???????oé??é￠?

Ajaxè??????3¨??￥?????ˉ?????¤?§??¨???????????-￥???è?????????-￥???è?????????-￥???è??????????μ?ˉ?è???????????è???????????è???????§è?????é????????é?￠??￡????????§è???????′??°?3¨??￥?????￡???è￠????è???????§è??????ˉ?????????????è|?è?¨è?o????-￥?¨???????????????μ???

2.1.1 DEMO4???Ajax?3¨??￥è??????????§è??é??é￠??????￠

??????????·????3??a?¤?é?¨?????????

ajax1.js

test += "?????ˉhead?¤?é?¨AJAXè?????n";

ajax2.js

test += "?????ˉbody?¤?é?¨AJAXè?????n";

ajax3.js

test += "?????ˉ?o?é?¨?¤?é?¨AJAXè?????n";

HTML?????￡?????o???