瀏覽器功能
瀏覽器的如何打開一個網頁？
1.發起請求
2.下載HTML，解析HTML
3.下載CSS，解析CSS
4.渲染界面。把不同的內容結合起來，展示在屏幕上稱作渲染；通常瀏覽器的渲染主要指的是HTML和CSS兩種內容的結合。
5.下載JS，解析JS，執行JS
6.等…
瀏覽器的功能模塊
功能模塊：即具有不同功能的模塊。
1.用戶界面：瀏覽器界面不僅僅只有一個網頁窗口，這些都與用戶界面的功能。
2.渲染引擎：解析HTML、CSS並渲染到網頁窗口的功能模塊。
3.JS引擎：解析JS，執行JS的功能模塊。不同瀏覽器因爲用的JS引擎並不一樣，所以使用效果也會有差別。
4.功能模塊，一般處於不同的線程，線程是進程x還小一級的單位。一般來說線程後面沒有更小的單位了。所以這也解釋了一句話 “JS是單線程的” 。
5.在寫JS的過程中，以往我們通常都使用DOM來修改頁面元素，但是由於DOM涉及到線程通信，JS引擎通過線程通信來傳遞信息給渲染引擎再次渲染頁面，比較耗費時間效率低。這就是 DOM操作慢 的原因。
JS引擎
各主流瀏覽器的JS引擎
1.Chrome使用V8引擎，C++編寫。C++語言性能極強，這也是V8引擎極快的原因之一。
2.網景使用的是SpiderMonkey，C++編寫，Firfox也仍在使用這個引擎。
3.Safari使用的是JavaScriptCore。
4.IE使用的JScript9，後更名爲Chakra（查克拉）。
5.Edge期初使用的仍是Chakra，後改用V8引擎。這一決定也許會讓Edge重新制霸市場。
6.Node.js使用的是V8引擎。
JS引擎的主要功能
1.編譯：將JS代碼翻譯成機器可執行的字節碼或機器碼。
2.優化：JS引擎會自動修改代碼，讓JS代碼更高效。因此，JS的優化方法看各JS引擎的優化思路纔是最正確的學習方法。
3.執行：執行優化後的字節碼或機器碼。
4.垃圾回收：將使用過後的JS所佔用的內存回收，節省資源，方便再次使用。
JS代碼的執行
JS代碼的運行環境 runtime env
在JS代碼中，我們通常會使用到很多方法：window/document/setTimeout等，這些都不是JS自身具備的功能，而是瀏覽器爲JS提前準備好的API。我們將類似的這些功能稱作運行環境 runtime env。
有了這些runtime env後，當JS一進入頁面即開始執行JS。
JS的執行與內存
JS在哪裏執行？
所有程序都是在內存中執行，當然JS也是在內存中執行。
內存中情況
從這個內存存儲情況圖中可以看出，在每一個標籤頁的線程中，除了瀏覽器提供的功能模塊，還開闢了：代碼區（JS代碼）、不知道什麼區（這個區用來存儲JS代碼聲明的變量）、Stack區（棧）和Heap區（堆）。
其實這個內存存儲情況圖並不完整，還有很多區域省略了，如：調用棧、任務隊列等。
每種瀏覽器的非配規則並不一樣。但我們主要研究的都是Stack區（棧）和Heap區（堆）。
Stack&Heap
上圖紅色的區域便是Stack區和Heap區。這兩個區域都是用於存儲數據的，但是並不存儲變量名。
Stack&Heap的特點
Stack區特點：所有數據都按順序存放。所以Stack區的數據存儲後比較難進行增刪，因此Stack區存儲的數據一般是具體的數據（可以用64位2進製表示清楚，如：Number，String，Boolean）或是一個指向Heap區的地址。
Heap區的特點：所有數據隨機存放。所以Heap區的數據比較適合增刪改，適合存儲對象類型的數據。
JS代碼演示：Stack&Heap
聲明變量
var a = 1
var b = a
var person = {name:'frank',child:{name:'jack'}}
var person1 = person
變量篡改
var person = {name:'frank'}
var person2 = person // person2和person是同一個地址，指向同一個Heap中的一個對象，person2修改了對象，自然導致person輸出結果改變。
person2.name = 'ryan'
console.log(person.name) // 'ryan'
JS的世界
JS的前置技能
1.最高級的對象window
2.console，掛載到window上
3.document，掛載到window上
4.對象Obeject，掛載到window上
5.數組Array，掛載到window上
6.函數Function，掛載到window上
7.因爲window是JS世界中最高級的存在，所以所有掛載到window上的內容都能直接使用。如：直接console而不需要window.console。
Window在內存世界
變量與對象
- window變量和window對象並不是同一個東西
- window變量（不知道什麼區）是一個容器，存放着window對象（Heap）的地址
- window對象是存儲在Heap中的數據
- 變量只是一個代號，只不過這裏使用window變量指向window對象。代碼var x = window這樣就能用- x變量來指向window對象，但是這種做法反人類。
- 同理：console與console對象，Object與Object對象也是兩個東西。