摘要：在瀏覽區(qū)中的性能，可以認為是開發(fā)者所面臨的最嚴重的可用性問題。優(yōu)化這個問題的第一步從它的加載和執(zhí)行開始。這意味著在對象的事件觸發(fā)后再下載腳本。屬性指明本元素所含的腳本不會修改，因此代碼能夠安全地執(zhí)行，但是瀏覽器的支持情況不理想。

JavaScript在瀏覽區(qū)中的性能，可以認為是開發(fā)者所面臨的最嚴重的可用性問題。 優(yōu)化這個問題的第一步從它的加載和執(zhí)行開始。

霸道的script標簽
script標簽每次出現(xiàn)都會霸道地讓頁面等待腳本的解析和執(zhí)行，無論當前的JavaScript代碼是內(nèi)嵌還是外聯(lián)，頁面的下載和渲染都必須停下來等待腳本執(zhí)行完畢。這是頁面生存周期的必要環(huán)節(jié)，因為腳本執(zhí)行過程中可能會修改頁面的內(nèi)容。比較典型的是document.write()與innerHTML,在JavaScript腳本解析并執(zhí)行這個過程中，頁面的渲染和用戶交互是完全阻塞的。

腳本位置
一般情況下，我是習(xí)慣用外聯(lián)方式引入js文件，并且通常將他們放在head標簽上，但是現(xiàn)在我必須要改變這種習(xí)慣了。
這種看似正常的代碼組織實際上有非常嚴重的性能問題：加入我在head標簽內(nèi)加載了兩個JavaScript文件，那我的頁面的渲染將等到這兩個文件加載和執(zhí)行完畢才開始，因為瀏覽器在解析body標簽之前，不會渲染任何東西。在它們的加載過程中，將會導(dǎo)致明顯的延遲，通常的表現(xiàn)形式為：空白頁面，內(nèi)容無法瀏覽，無法交互。
以前的瀏覽器加載腳本是一個加載并且執(zhí)行完成之后才會去加載下一個，現(xiàn)在這個問題有了改善，即現(xiàn)在允許并行下載JavaScript腳本了，但是上述問題仍然成立。所以這里我學(xué)習(xí)一下雅虎特別性能小組提出的優(yōu)化JavaScript的首要原則：將腳本放在底部！

組織腳本
1001 > 254
因為每個script標簽初始下載都會阻塞頁面渲染，所以我們需要減少script標簽的數(shù)量來限制HTTP請求數(shù)從而改善性能，最好將多個JavaScript文件合并成一個。

無阻塞腳本
無阻塞腳本的秘訣在于：在頁面加載完之后才加載JavaScript代碼。這意味著在window對象的load事件觸發(fā)后再下載腳本。這樣做的好處是當你下載一個較大的JS文件時，瀏覽器還是會鎖死一段時間，為了避免這種情況，我們需要向頁面逐步加載JavaScript文件。

延遲的腳本

script定義了一個擴展屬性：defer。defer屬性指明本元素所含的腳本不會修改DOM，因此代碼能夠安全地執(zhí)行，但是瀏覽器的支持情況不理想。
除此之外，HTML5引入了async屬性，用于異步加載腳本，asnyc與defer相同點在于都用于異步加載腳本，采用的是并行下載，在下載過程中不會產(chǎn)生阻塞。區(qū)別在于，asnyc是在加載完成后自動執(zhí)行，而defer需要等待加載頁面完成后執(zhí)行，在onload事件處理器執(zhí)行之前被調(diào)用。

動態(tài)腳本元素

用于DOM的存在，我們可以用JavaScript動態(tài)創(chuàng)建HTML里面的元素，當然也包括script元素，這是動態(tài)腳本元素的大前提。
這項技術(shù)的重點在于：我通過在頁面內(nèi)動態(tài)創(chuàng)建一個script元素，并且通過給其src屬性賦值來加載腳本，那么腳本會在頁面內(nèi)script元素被創(chuàng)建后才開始加載，那么無論在何時啟動下載，文件的下載和執(zhí)行過程不會阻塞頁面的其他進程。

新創(chuàng)建的script元素放在哪？
通常來講，把新創(chuàng)建的script標簽添加到head比添加到body中更加保險，因為當body中的內(nèi)容沒有全部加載完成時，IE可能會拋出一個“操作已終止”的錯誤信息。

動態(tài)創(chuàng)建的文件在被下載后怎樣執(zhí)行？
對于Firefox,Opera,Chrome,Safari來說，會在