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

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

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

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

組織腳本
1001 > 254
因?yàn)槊總€(gè)script標(biāo)簽初始下載都會(huì)阻塞頁面渲染，所以我們需要減少script標(biāo)簽的數(shù)量來限制HTTP請(qǐng)求數(shù)從而改善性能，最好將多個(gè)JavaScript文件合并成一個(gè)。

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

延遲的腳本

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

動(dòng)態(tài)腳本元素

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

新創(chuàng)建的script元素放在哪？
通常來講，把新創(chuàng)建的script標(biāo)簽添加到head比添加到body中更加保險(xiǎn)，因?yàn)楫?dāng)body中的內(nèi)容沒有全部加載完成時(shí)，IE可能會(huì)拋出一個(gè)“操作已終止”的錯(cuò)誤信息。

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