游覽器中javascript的執(zhí)行過程(圖文)
（1）網(wǎng)絡(luò)－ 用來完成網(wǎng)絡(luò)調(diào)用，例如http請求，它具有平臺無關(guān)的接口，可以在不同平臺上工作
（2）UI 后端－ 用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統(tǒng)的用戶接口
（3）JS解釋器－ 用來解釋執(zhí)行JS代碼
ps：上圖和知識點(diǎn)主要來自《HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS》 想深入了解的同學(xué)可以重點(diǎn)看下。
2. 大多數(shù)游覽器（比如chrome）讓一個單線程共用于執(zhí)行javascrip和更新用戶界面。這個線程通常被稱為“游覽器UI線程”， 每個時刻只能執(zhí)行其中一種操作，這意味著當(dāng)Javascript代碼正在執(zhí)行時用戶界面無法響應(yīng)輸入，反之亦然。這樣做是因為javascript代碼的作用就是操作DOM更新用戶界面，用同一個線程來做負(fù)責(zé)這兩件事情可以更高效
3. 游覽器UI線程的工作基于一個簡單的隊列系統(tǒng)，任務(wù)會被保存到隊列中直到進(jìn)程空閑。一旦空閑，隊列中的下一個任務(wù)就被重新提取出來并運(yùn)行。這些任務(wù)要么是運(yùn)行javascript代碼，要么執(zhí)行UI更新，包括重繪和重排。
4. 重點(diǎn)再強(qiáng)調(diào)下，javascript是單線程運(yùn)行，千萬別被setTimeout()和setInterVal()這種函數(shù)迷惑而誤以為它是多線程。
ok，基礎(chǔ)點(diǎn)講解完畢，讓我們進(jìn)入正題，來講解在游覽器中javascript的執(zhí)行過程。
一、原理
一般而言，<script>標(biāo)簽每次出現(xiàn)都會霸道地讓頁面等待腳本的解析和執(zhí)行，無論當(dāng)前的Javascript是內(nèi)嵌的還是包含了外鏈文件，頁面的下載和渲染都必須停下來等待腳本執(zhí)行完成。這在頁面的生存周期中是必要的，因為腳本執(zhí)行過程中可能修改頁面內(nèi)容，一個典型的例子就是在頁面中使用document.write()。
當(dāng)javascript代碼是內(nèi)嵌在html里面時，這點(diǎn)還是比較容易理解，但當(dāng)javascript是外鏈文件時稍微有點(diǎn)負(fù)載，因為存在一個加載過程，而且游覽器加載好這個js文件之后往往還對其緩存。
首先，我們用以下這個例子來說明下緩存問題
<html>
<head>
<script type='text/javascript' src='js/f2.js'></script>
</head>
<body>
</body>
</html>
第一次打開頁面時：
第二次打開頁面時：
從上例中可以明顯看出，像chrome之類的高版本游覽器會對js文件進(jìn)行緩存，作用是不言而喻，減少網(wǎng)絡(luò)請求。
其次，第二個問題，當(dāng)一個javascript文件被加載時是否會阻塞其他javascript文件或者其他文件的加載?！陡咝阅躂avascript》一書中對這個問題做了較好的解答：各種游覽器的低版本的處理是當(dāng)一個javascript文件在加載時，會同時阻塞頁面其他文件的加載（包括其他javascript文件），但I(xiàn)E8，F(xiàn)irfox3.5，Safari 4和Chrome 2都允許并行下載javascript文件，但遺憾的是，javascript下載過程仍然會組舍其他資源的下載，比如圖片。盡管javascript腳本的下載過程不會相互影響，但頁面仍然必須等待所有的javascript代碼下載并執(zhí)行完成才能繼續(xù)。
這里說句題外話：游覽器對同一域名下的并發(fā)鏈接數(shù)也是有限制的，其他一些參數(shù)如下：
二、技巧
1. 腳本位置
由于腳本會阻塞頁面其他資源的下載，因此推薦將所有的<script>標(biāo)簽放到<body>標(biāo)簽的底部，已盡量減少對整個頁面下載的影響。
2. 將能合并的js文件合并
3. 無阻塞腳本
現(xiàn)在比較常用的方法就是動態(tài)加載執(zhí)行腳本。你的原理是通過DOM，你幾乎可以用Javascript動態(tài)創(chuàng)建HTML中的所有內(nèi)容，其根本在于，<script>標(biāo)簽與頁面中其他元素并無差異：都能通過DOM引用，都能在文檔中移動，刪除和創(chuàng)建。文件在改該<script>元素被添加到頁面時開始現(xiàn)在，它不會阻止其他文件下載，只在執(zhí)行階段阻塞渲染。特別強(qiáng)調(diào)：《高性能javascript》一文中說“這種技術(shù)的重點(diǎn)在于：無論何時啟動下載，文件的下載和執(zhí)行都不會阻塞頁面其他進(jìn)程”，這并不是說它在執(zhí)行不會阻塞其他javascript代碼，而是要強(qiáng)調(diào)不會阻塞其他資源的下載等其他任務(wù)。
具體的代碼如下：
function loadScript(url){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = url;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
}
4. 神奇的setTimeout（）
這里我不過多的將setTimeout()的原理，有興趣的讀者可以具體去看《高性能javascript》的第六章。我重點(diǎn)強(qiáng)調(diào)下，setTimeout的第二個參數(shù)并不是一個精確的時間，二是必須在javascript線程空閑時才能運(yùn)行。利用這個特性，如下代碼簡單可以實現(xiàn)等待其他js代碼執(zhí)行完畢后再執(zhí)行function里面的代碼。
setTimeout(function(){
// do some before other javascripe codes had processed
}, 25)
但在function里面不要使用document.write()方法，因為執(zhí)行setTimeout里面函數(shù)時往往已經(jīng)到了頁面onload之后，此時再執(zhí)行 document.write 將導(dǎo)致當(dāng)前頁面的內(nèi)容被清空，因為它會自動觸發(fā) document.open 方法。
《高性能Javascript》
HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS
Google Chrome源碼剖析【一】：多線程模型
javascript異步加載詳解
相關(guān)文章
其實空格有兩個，一個ASCII編號是32，另一個是ASCII編號是160.后者是unicode編碼。以前寫一個貼子ie6下準(zhǔn)確判斷空格還以是IE6不能正確判斷空格。2009-11-11
在Web項目的開發(fā)中,js,css文件會隨著項目的開發(fā)變得越來越多,越來越大,這就給給性能方面帶來一些問題;解決該問題的一個好的方法就是合并js,css文件需要了解的朋友可以參考下2012-12-12
Some tips of wmi scripting in jscript (1)
Some tips of wmi scripting in jscript (1)...2007-04-04
JavaScript利用canvas實現(xiàn)炫酷的碎片切圖效果
這篇文章主要和大家分享一個炫酷的碎片式切圖效果，本文主要利用canvas來實現(xiàn)，代碼量不多，但有些地方還是需要花點(diǎn)時間去理解的，感興趣的可以學(xué)習(xí)一下2022-10-10
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
JavaScript中的執(zhí)行環(huán)境和作用域鏈
這篇文章主要介紹了JavaScript中的執(zhí)行環(huán)境和作用域鏈，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
下面小編就為大家?guī)硪黄鶭S封裝animate運(yùn)動框架的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
今天小編就為大家分享一篇layui時間控件選擇時間范圍的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript判斷表單提交時哪個radio按鈕被選中的方法
這篇文章主要介紹了JavaScript判斷表單提交時哪個radio按鈕被選中的方法,實例分析了javascript操作表單radio按鈕的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
在網(wǎng)上看到幾個有意思的Javascript代碼，和大家分享一下。直接將代碼拷貝到IE中即可，注意代碼為一樣。不可分行2010-07-07