最近因為接了學校的某個案子
陰錯陽差的發現這個問題, 了解後應該又了解了不少(經驗值 Level Up!)
趁還記得趕快來記錄一下!!
在網頁當中, 會時常載入外部Javascript的Library使用
以jQuery為例
會像這樣的寫法載入
但後方HTML的有需要用到jQuery作初始化呈現時
卻有可能出現問題導致無法正常顯示
錯誤可能會類似Uncaught TypeError: Object false has no method 'val'這種訊息
裡面的val()就是屬於jQuery的method
原因已經呼之欲出, 在於使用到jQuery中method時, 但Library此時還沒載入完成
然後就發生悲劇了...
上網找了一下資料, 才發現掛載的順序, 也是有一番學問的
程式撰寫的先後, 是會影響順序這點是無庸質疑
但..重點在於他是屬於非同步的方式
意思就在於允許多線程處理同時進行
這種方式可讓網頁的處理時間降低, 減少使用者等待的時間
所以再發現問題後, 改以使用同步的方式
意即, 處理完這項工作, 才能處理下一項
而這同步處理可以使用DOM Document.write來達成
至於更多詳細的內容, 其實網路上已有相當多的例子
可以參考本篇的參考資料
但在Google Analytics官網上, 也提到盡量避免使用Document.write(參考)
因此除非逼不得已, 可是不要輕易的使用啊!!
這可是會讓網頁速度拖慢許多的
之後有時間的話, 再來記錄以我碰到的問題為何發現到這個差異性吧!
參考資料:
[1] JavaScript加载执行顺序, WWW.OPENSOCE.COM
http://www.opensoce.com/?p=1025
[2] 微妙的javascript執行順序, 非恩的小世界
http://pheion.idv.tw/blog/article-275
[3] Document.write 塞入script 會如何？, 熱血漢誌 - Question about myself.
http://clonn.blogspot.com/2011/09/documentwrite-script.html
[4] Load jQuery Only If Not Present, CSS-TRICKS
http://css-tricks.com/snippets/jquery/load-jquery-only-if-not-present/
