js的預編譯
1. 如何確保javaScript的執行順序
1.1
按HTML文檔流順序執行JavaScript代碼
首先，讀者應該清楚，HTML文檔在瀏覽器中的解析過程是這樣的：瀏覽器是按著文檔流從上到下逐步解析頁面結構和信息的。JavaScript代碼作為嵌入的腳本應該也算做HTML文檔的組成部分，所以JavaScript代碼在裝載時的執行順序也是根據腳本標簽<script>的出現順序來確定的。例如，瀏覽下面文檔頁面，你會看到代碼是從上到下逐步被解析的。
復制代碼
代碼如下:
<script>
alert("頂部腳本");
</script>
<html><head>
<script>
alert("頭部腳本");
</script>
<title></title>
</head>
<body>
<script>
alert("頁面腳本");
</script>
</body></html>
<script>
alert("底部腳本");
</script>
如果通過腳本標簽<script>的src屬性導入外部JavaScript文件腳本，那麼它也將按照其語句出現的順序來執行，而且執行過程是文檔裝載的一部分。不會因為是外部JavaScript文件而延期執行。例如，把上面文檔中的頭部和主體區域的腳本移到外部JavaScript文件中，然後通過src屬性導入。繼續預覽頁面文檔，你會看到相同的執行順序。
復制代碼
代碼如下:
<script>
alert("頂部腳本");
</script>
<html>
<head>
<script src="http://www.jb51.net/head.js"></script>
<title></title>
</head>
<body>
<script src="http://www.jb51.net/body.js"></script>
</body>
</html>
<script>
alert("底部腳本");
</script>
1.2 預編譯與執行順序的關系
在Javascript中，function才是Javascript的第一型。當我們寫下一段函數時，其實不過是建立了一個function類型的實體。
就像我們可以寫成這樣的形式一樣：
復制代碼
代碼如下:
functionHello()
{
alert("Hello");
}
Hello();
varHello = function()
{
alert("Hello");
}
Hello();
其實都是一樣的。 但是當我們對其中的函數進行修改時，會發現很奇怪的問題。
復制代碼
代碼如下:
<scripttype="text/javascript">
functionHello() {
alert("Hello");
}
Hello();
functionHello() {
alert("Hello World");
}
Hello();
</script>
我們會看到這樣的結果：連續輸出了兩次Hello
World。
而非我們想像中的Hello和Hello World。
這是因為Javascript並非完全的按順序解釋執行，而是在解釋之前會對Javascript進行一次「預編譯」，在預編譯的過程中，會把定義式的函數優先執行，也會把所有var變數創建，默認值為undefined，以提高程序的執行效率。
也就是說上面的一段代碼其實被JS引擎預編譯為這樣的形式：
復制代碼
代碼如下:
<scripttype="text/javascript">
varHello = function() {
alert("Hello");
}
Hello = function() {
alert("Hello World");
}
Hello();
Hello();
</script>
我們可以通過上面的代碼很清晰地看到，其實函數也是數據，也是變數，我們也可以對「函數「進行賦值（重賦值）。
當然，我們為了防止這樣的情況，也可以這樣：
復制代碼
代碼如下:
<scripttype="text/javascript">
functionHello() {
alert("Hello");
}
Hello();
</script>
<scripttype="text/javascript">
functionHello() {
alert("Hello World");
}
Hello();
</script>
這樣，程序被分成了兩段，JS引擎也就不會把他們放到一起了。
當JavaScript引擎解析腳本時，它會在預編譯期對所有聲明的變數和函數進行處理。
做如下處理：
1.
在執行前會進行類似「預編譯」的操作：首先會創建一個當前執行環境下的活動對象，並將那些用var申明的變數設置為活動對象的屬性，但是此時這些變數的賦值都是undefined，並將那些以function定義的函數也添加為活動對象的屬性，而且它們的值正是函數的定義。
2.
在解釋執行階段，遇到變數需要解析時，會首先從當前執行環境的活動對象中查找，如果沒有找到而且該執行環境的擁有者有prototype屬性時則會從prototype鏈中查找，否則將會按照作用域鏈查找。遇到var
a = ...這樣的語句時會給相應的變數進行賦值（注意：變數的賦值是在解釋執行階段完成的，如果在這之前使用變數，它的值會是undefined）
所以，就會出現當JavaScript解釋器執行下面腳本時不會報錯：
復制代碼
代碼如下:
alert(a); //
返回值undefined
var a =1;
alert(a); //
返回值1
由於變數聲明是在預編譯期被處理的，所以在執行期間對於所有代碼來說，都是可見的。但是，你也會看到，執行上面代碼，提示的值是undefined，而不是1。這是因為，變數初始化過程發生在執行期，而不是預編譯期。在執行期，JavaScript解釋器是按著代碼先後順序進行解析的，如果在前面代碼行中沒有為變數賦值，則JavaScript解釋器會使用默認值undefined。由於在第二行中為變數a賦值了，所以在第三行代碼中會提示變數a的值為1，而不是undefined。
同理，下面示例在函數聲明前調用函數也是合法的，並能夠被正確解析，所以返回值為1。
復制代碼
代碼如下:
f(); //
調用函數，返回值1
function f(){
alert(1);
}
但是，如果按下面方式定義函數，則JavaScript解釋器會提示語法錯誤。
復制代碼
代碼如下:
f(); //
調用函數，返回語法錯誤
var f = function(){
alert(1);
}
這是因為，上面示例中定義的函數僅作為值賦值給變數f，所以在預編譯期，JavaScript解釋器只能夠為聲明變數f進行處理，而對於變數f的值，只能等到執行期時按順序進行賦值，自然就會出現語法錯誤，提示找不到對象f。
再見一些例子：
復制代碼
代碼如下:
<script type="text/javascript">
/*在預編譯過程中func是window環境下的活動對象中的一個屬性，值是一個函數，覆蓋了undefined值*/
alert(func); //function func(){alert("hello!")}
var func = "this is a variable"
function func(){
alert("hello!")
}
/*在執行過程中遇到了var重新賦值為"this is a variable"*/
alert(func); //this is a variable
</script>
復制代碼
代碼如下:
<script type="text/javascript">
var name = "feng"; function func()
{
/*首先，在func環境內先把name賦值為undefined，然後在執行過程中先尋找func環境下的活動對象的name屬性，此時之前已經預編譯值為undefined，所以輸出是undefined，而不是feng*/
alert(name); //undefined var name = "JSF";
alert(name); //JSF
}
func();
alert(name);
//feng
</script>
雖然變數和函數聲明可以在文檔任意位置，但是良好的習慣應該是在所有JavaScript代碼之前聲明全局變數和函數，並對變數進行初始化賦值。在函數內部也是先聲明變數，然後再引用。
1.3 按塊執行JavaScript代碼
所謂代碼塊就是使用<script>標簽分隔的代碼段。例如，下面兩個<script>標簽分別代表兩個JavaScript代碼塊。
復制代碼
代碼如下:
<script>
// JavaScript代碼塊1
var a =1;
</script>
<script>
// JavaScript代碼塊2
function f(){
alert(1);
}
</script>
JavaScript解釋器在執行腳本時，是按塊來執行的。通俗地說，就是瀏覽器在解析HTML文檔流時，如果遇到一個<script>標簽，則JavaScript解釋器會等到這個代碼塊都載入完後，先對代碼塊進行預編譯，然後再執行。執行完畢後，瀏覽器會繼續解析下面的HTML文檔流，同時JavaScript解釋器也准備好處理下一個代碼塊。
由於JavaScript是按塊執行的，所以如果在一個JavaScript塊中調用後面塊中聲明的變數或函數就會提示語法錯誤。例如，當JavaScript解釋器執行下面代碼時就會提示語法錯誤，顯示變數a未定義，對象f找不到。
復制代碼
代碼如下:
<script>
// JavaScript代碼塊1
alert(a);
f();
</script>
<script>
// JavaScript代碼塊2
var a =1;
function f(){
alert(1);
}
</script>
雖然說，JavaScript是按塊執行的，但是不同塊都屬於同一個全局作用域，也就是說，塊之間的變數和函數是可以共享的。
1.4 藉助事件機制改變JavaScript執行順序
由於JavaScript是按塊處理代碼，同時又遵循HTML文檔流的解析順序，所以在上面示例中會看到這樣的語法錯誤。但是當文檔流載入完畢，如果再次訪問就不會出現這樣的錯誤。例如，把訪問第2塊代碼中的變數和函數的代碼放在頁面初始化事件函數中，就不會出現語法錯誤了。
復制代碼
代碼如下:
<script>
// JavaScript代碼塊1
window.onload = function(){ // 頁面初始化事件處理函數
alert(a);
f();
}
</script>
<script>
// JavaScript代碼塊2
var a =1;
function f(){
alert(1);
}
</script>
為了安全起見，我們一般在頁面初始化完畢之後才允許JavaScript代碼執行，這樣可以避免網速對JavaScript執行的影響，同時也避開了HTML文檔流對於JavaScript執行的限制。
注意
如果在一個頁面中存在多個windows.onload事件處理函數，則只有最後一個才是有效的，為了解決這個問題，可以把所有腳本或調用函數都放在同一個onload事件處理函數中，例如：
復制代碼
代碼如下:
window.onload = function(){
f1();
f2();
f3();
}
而且通過這種方式可以改變函數的執行順序，方法是：簡單地調整onload事件處理函數中調用函數的排列順序。
除了頁面初始化事件外，我們還可以通過各種交互事件來改變JavaScript代碼的執行順序，如滑鼠事件、鍵盤事件及時鍾觸發器等方法，詳細講解請參閱第14章的內容。
1.5 JavaScript輸出腳本的執行順序
在JavaScript開發中，經常會使用document對象的write()方法輸出JavaScript腳本。那麼這些動態輸出的腳本是如何執行的呢？例如：
復制代碼
代碼如下:
document.write('<script
type="text/javascript">');
document.write('f();');
document.write('function f(){');
document.write('alert(1);');
document.write('}');
document.write('</script>');
運行上面代碼，我們會發現：document.write()方法先把輸出的腳本字元串寫入到腳本所在的文檔位置，瀏覽器在解析完document.write()所在文檔內容後，繼續解析document.write()輸出的內容，然後才按順序解析後面的HTML文檔。也就是說，JavaScript腳本輸出的代碼字元串會在輸出後馬上被執行。
請注意，使用document.write()方法輸出的JavaScript腳本字元串必須放在同時被輸出的<script>標簽中，否則JavaScript解釋器因為不能夠識別這些合法的JavaScript代碼，而作為普通的字元串顯示在頁面文檔中。例如，下面的代碼就會把JavaScript代碼顯示出來，而不是執行它。
復制代碼
代碼如下:
document.write('f();');
document.write('function f(){');
document.write('alert(1);');
document.write(');');
但是，通過document.write()方法輸出腳本並執行也存在一定的風險，因為不同JavaScript引擎對其執行順序不同，同時不同瀏覽器在解析時也會出現Bug。
Ø 問題一，找不到通過document.write()方法導入的外部JavaScript文件中聲明的變數或函數。例如，看下面示例代碼。
復制代碼
代碼如下:
document.write('<script
type="text/javascript" src="http://www.jb51.net/test.js">
</script>');
document.write('<script type="text/javascript">');
document.write('alert(n);'); // IE提示找不到變數n
document.write('</script>');
alert(n+1); // 所有瀏覽器都會提示找不到變數n
外部JavaScript文件（test.js）的代碼如下：
復制代碼
代碼如下:
var n =
1;
分別在不同瀏覽器中進行測試，會發現提示語法錯誤，找不到變數n。也就是說，如果在JavaScript代碼塊中訪問本代碼塊中使用document.write()方法輸出的腳本中導入的外部JavaScript文件所包含的變數，會顯示語法錯誤。同時，如果在IE瀏覽器中，不僅在腳本中，而且在輸出的腳本中也會提示找不到輸出的導入外部JavaScript文件的變數（表述有點長和繞，不懂的讀者可以嘗試運行上面代碼即可明白）。
Ø 問題二，不同JavaScript引擎對輸出的外部導入腳本的執行順序略有不同。例如，看下面示例代碼。
復制代碼
代碼如下:
<script type="text/javascript">
document.write('<script type="text/javascript"
src="http://shaozhuqing.com/test1.js">
</script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert(n+2);');
document.write('</script>');
</script>
<script type="text/javascript">
alert(n+3);
</script>
外部JavaScript文件（test1.js）的代碼如下所示。
復制代碼
代碼如下:
var n = 1;
alert(n);
在IE瀏覽器中的執行順序如圖1-6所示。
圖1-6 IE 7瀏覽器的執行順序和提示的語法錯誤
在符合DOM標準的瀏覽器中的執行順序與IE瀏覽器不同，且沒有語法錯誤，如圖1-7所示的是在Firefox 3.0瀏覽器中的執行順序。
圖1-7 Firefox 3瀏覽器的執行順序和提示的語法錯誤
解決不同瀏覽器存在的不同執行順序，以及可能存在Bug。我們可以把凡是使用輸出腳本導入的外部文件，都放在獨立的代碼塊中，這樣根據上面介紹的JavaScript代碼塊執行順序，就可以避免這個問題。例如，針對上面示例，可以這樣設計：
復制代碼
代碼如下:
<script type="text/javascript">
document.write('<script type="text/javascript"
src="http://www.jb51.net/test1.js"></script>');
</script>
<script type="text/javascript">
document.write('<script type="text/javascript">');
document.write('alert(2);') ; // 提示2
document.write('alert(n+2);'); // 提示3
document.write('</script>');
alert(n+3); // 提示4
</script>
<script type="text/javascript">
alert(n+4); // 提示5
</script>
這樣在不同瀏覽器中都能夠按順序執行上面代碼，且輸出順序都是1、2、3、4和5。存在問題的原因是：輸出導入的腳本與當前JavaScript代碼塊之間的矛盾。如果單獨輸出就不會發生沖突了。
2. 試述javascript和java在性能上的差異
java是面對對象的編程，javascript是一種可以嵌入Web頁面中的基於對象和事件驅動的解釋性語言，用來向頁面添加交互效果，使頁面動態化。
java是需要進行預編譯的，javascript不需要預編譯，在程序的運行過程中逐行進行解釋,由瀏覽器解釋執行。
java定義變數需要定義數據類型，而js中沒有數據類型，以賦值為准。
3. js有什麼特點
1、js是一種州核解釋性腳本語言（代碼不進行預編譯）
2、跨平台特性，在絕大多數瀏覽器的支持下，可以在多種平台下運行（如Windows、Linux、Mac、Android、iOS等）。
3、弱類型腳本語言
對使用的數據類型未做出嚴格的要求,可以進行類型轉換，簡單又靈活。
4、單線程，事件驅動
JavaScript對用戶的響應，是以事件驅動的方式進行的。在網頁（Web Page）中執行了塵仿某種操作所產生的動作，被稱為「事件派跡纖」（Event）。例如按下滑鼠、移動窗口、選擇菜單等都可以被視為事件。當事件發生後，可能會引起相應的事件響應，執行某些對應的腳本，這種機制被稱為「事件驅動」。
5、面向對象
一種基於對象的腳本語言，這意味著JavaScript能運用其已經創建的對象。因此，許多功能可以來自於腳本環境中對象的方法與腳本的相互作用。
6、安全性
JavaScript是一種安全性語言，它不允許訪問本地的硬碟，並不能將數據存入到伺服器上，不允許對網路文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
4. Javascript能編譯嗎
javascript是腳本語言，不需要編譯的
JavaScript是一種屬於網路的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
是一種解釋性腳本語言（代碼不進行預編譯）。
主要用來向HTML（標准通用標記語言下的一個應用）頁面添加交互行為。
可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。
跨平台特性，在絕大多數瀏覽器的支持下，可以在多種平台下運行（如Windows、Linux、Mac、Android、iOS等）。
Javascript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變數提供存放信息的地方，表達式則可以完成較復雜的信息處理。
5. js是什麼
js是javascript ，JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。
它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
JavaScript是一種屬於網路的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。
JavaScript腳本功能：
通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
1、是一種解釋性腳本語言（代碼不進行預編譯）。
2、主要用來向HTML（標准通用標記語言下的一個應用）頁面添加交互行為。
3、可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。
4、跨平台特性，在絕大多數瀏覽器的支持下，可以在多種平台下運行（如Windows、Linux、Mac、Android、iOS等）。
6. JavaScript是什麼
JavaScript（簡稱js），是一種基於對象和事件驅動並具有相對安全性的客戶端腳本語言。同時也是一種廣泛用於客戶端Web開發的腳本語言，常用來給HTML網頁添加動態功能，比如響應用戶的各種操作。它最初由網景公司（Netscape）的Brendan Eich設計，是一種動態、弱類型、基於原型的語言，內置支持類。
因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。
在網頁裡面，js主要有兩種實現方式，一是直接在網頁中使用<script> 和 </script>，在標簽中間寫入js語言，<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。二是把腳本保存到外部文件中，外部 JavaScript 文件的文件擴展名是 .js。然後使用<script src="myScript.js"></script>引入外部文件，src屬性中設置js路徑。
js的主要特點是：
一、js是一種解釋性腳本語言（代碼不進行預編譯）；
二、主要用來向HTML頁面添加交互行為；
三、可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。
js的主要功能有：
（1） 嵌入動態文本於HTML頁面
（2） 對瀏覽器事件作出響應
（3） 讀寫HTML元素
（4） 在數據被提交到伺服器之前驗證數據
（5） 檢測訪客的瀏覽器信息
（6） 控制cookies，包括創建和修改等
7. 如何優雅的用js動態添加html代碼
一、使用javascript 模板引擎
用javascript預編譯模早遲唯版，就是動態修改模板文件使之成為一個可用的靜態HTML文件。 我平時會使用artTemplate，性能很好而且易上手。
編寫模板
使用一個type="text/html"的script標簽存陸培放模板：
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
渲染模板
var data = {
title: '標簽',
list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
二、使用CoffeeScript
CoffeeScript支持類似於Python的跨行字元串，這樣很輕易的就能保持HTML結構的可讀性，而不需要使用「+」或者採用拼數組的形式。
str="""
<div class="dialog">
<div class="title">
<img src="close.gif" alt="關閉" />關閉
</div>
<div class="content">
<img src="delete.jpg" alt="" />
</div>
<div class="bottom">
<input id="Button2" type="button" value="確定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
"""旦拿
8. js執行順序
你現在是先定義了函數a，然後定義了函數b，然後再去執行函數a
即使你把代碼改成這樣依舊能夠正常運行
a();
functiona(){
b();
}
functionb(){
console.log(111)
}
因為JS運行環境會把定義的代碼（變數/函數）提升到作用域的最前面
9. js現在可以直接編譯嗎
JavaScript是腳本語言，依靠瀏覽器等解析，不需要像Java後台語言預編譯。
10. js中為什麼把函數放在if中列印出的是未定義，按預編譯的:步驟來說難道不應該是函數本身嗎
按照ES的標准，函數聲明不能聲明在不確定能否執行的分支代碼中，具體孫喊歲運行效果不同的則睜瀏覽器可能有所不同，但肯定不會是滲昌你想要的結果。