JS 是目前世界上使用最多的腳本語言。網(wǎng)頁通常由三部分構(gòu)成，HTML、CSS、JS，其中 HTML 提供內(nèi)容、CSS 美化頁面，JS 控制行為（邏輯）。

JS 的組成：

通常 JavaScript 和 ECMAScript 會被當(dāng)成一回事，但實(shí)際上 JS 的含義要比后者更多一些。

在瀏覽器內(nèi)，JS 主要由三部分組成：ECMAScript、DOM、BOM，語法等核心內(nèi)容由 ECMAScript 定義，操作 html 文檔的 api 由文檔對象模型（DOM）提供，操作瀏覽器的 api 由瀏覽器對象模型（BOM）提供。

ECMAScript：

ECMAScript 與 Web 瀏覽器沒有直接的依賴關(guān)系。ECMAScript 只定義這門語言的基礎(chǔ)概念，Web 瀏覽器只是 ECMAScript 的宿主環(huán)境之一，其它宿主環(huán)境還有 Node.js（服務(wù)端 JS）、Adobe Flash 等。

宿主環(huán)境不僅提供 ECMAScript 的實(shí)現(xiàn)，同時(shí)也提供相關(guān)擴(kuò)展以便語言與環(huán)境交互，例如 DOM、BOM 就是瀏覽器這個(gè)環(huán)境提供的擴(kuò)展。

既然 ECMAScript 不依賴于環(huán)境，那它都規(guī)定了些什么呢？大致有以下內(nèi)容：

1、語法

2、類型

3、語句

4、關(guān)鍵字

5、保留字

6、操作符

7、對象

ECMAScript 就是對這些方面的描述，JS 實(shí)現(xiàn)了 ECMAScript，Adobe ActionScript 同樣也實(shí)現(xiàn)了 ECMAScript，它們只是 ECMAScript 在不同宿主環(huán)境下的實(shí)現(xiàn)。

ECMAScript 的版本：

ECMAScript 的版本通常被簡稱為 ESx，表示第 x 版，下面簡單介紹下各個(gè)版本：

ES1：與 Netscape 的 JS1.1 基本相同，只是去掉了所有針對瀏覽器的部分并作了一些小改動。

ES2：進(jìn)一步規(guī)范化，主要是為了與 ISO/IEC-16262 規(guī)范保持嚴(yán)格一致。

ES3：算是第一次真正的修改，修改內(nèi)容涉及字符串處理、錯(cuò)誤類型、數(shù)值運(yùn)算。新增內(nèi)容有正則表達(dá)式、異常處理語句 try-catch，從各方面來看，ES3 標(biāo)志著 ECMAScript 成為了一門真正的編程語言。

ES4：對 ECMAScript 進(jìn)行了一次全面的修訂，包含了強(qiáng)類型變量、新語句、新數(shù)據(jù)結(jié)構(gòu)、真正的類、經(jīng)典繼承等。但由于修改幅度過大并不受瀏覽器廠商支持，這時(shí)另一個(gè)小組提出了一個(gè)名為 ES3.1 的替代性方案，該小組認(rèn)為 ES4 對這門語言帶來的跨越太大了，因此建議只進(jìn)行小幅修改，使其便于在現(xiàn)有的 JS 引擎基礎(chǔ)上實(shí)現(xiàn)，最終 ES3.1 獲得的支持超過了 ES4，ES4 在正式發(fā)布前被廢棄，而 ES3.1 成為了 ES5。

ES5：于 2009 年 12 月 3 日正式發(fā)布。ES5 力求規(guī)范 ES3 中的歧義并增添了一些新功能，包括原生 JSON 對象、原型鏈、高級屬性定義，還增加了嚴(yán)格模式。

ES6：準(zhǔn)確的說應(yīng)該稱為 ES2015，此后的 ECMAScript 版本都將以發(fā)布年份命名，但通常來說，習(xí)慣上直接以 ES6 指代此后所有版本，偶爾也會有 ES7/8/9 之類的稱呼（都差不多啦，從 2015 往后數(shù)就可以了），ES6 進(jìn)一步規(guī)范了這門語言，增加了 let、const、箭頭函數(shù)、類定義、繼承、Promise、generator、async 函數(shù)等內(nèi)容。

DOM：

DOM 是針對標(biāo)記語言的 API，開發(fā)者可借助 DOM 提供的 API 動態(tài)的操作文檔，DOM 與平臺、語言無關(guān)，很多語言都實(shí)現(xiàn)了 DOM，現(xiàn)在的前端業(yè)界流行不直接操作 DOM，所以下面的內(nèi)容就省略一些，沒什么用。

DOM 級別：

1、DOM 1 級由兩部分組成：DOM Core、HTML-DOM，DOM Core 是基本標(biāo)準(zhǔn)，HTML-DOM 是專門針對 HTML 文檔的擴(kuò)展，添加了針對 HTML 的對象、方法。

2、DOM 2 級在 DOM 1 級的基礎(chǔ)上增加了鼠標(biāo)、用戶界面事件等細(xì)分模塊，并增加了對 CSS 的支持。

3、DOM 3 級再次擴(kuò)展，統(tǒng)一了文檔加載和保存的方法、新增了驗(yàn)證文檔的方法、支持了 XML 1.0 規(guī)范。

其它 DOM 標(biāo)準(zhǔn)

除了 DOM Core、HTML-DOM，還有其它語言只針對自己定義的 DOM 標(biāo)準(zhǔn)，都是基于 XML 標(biāo)準(zhǔn)新增了與該語言相關(guān)的方法，代表的有 SVG（可伸縮矢量圖）、MathML（數(shù)學(xué)標(biāo)記語言）、SMIL（同步多媒體集成語言）等。

BOM：

BOM 是用來訪問、操作瀏覽器的 API，內(nèi)容大致包括：

1、彈出、移動、關(guān)閉、縮放瀏覽器窗口。

2、包含瀏覽器詳細(xì)信息的 navigator 對象。

3、包含當(dāng)前頁面詳細(xì)信息的 location 對象。

4、包含用戶當(dāng)前顯示器分辨率信息的 screen 對象。

5、對 cookie 的支持。

6、瀏覽器自定義對象，如 XMLHttpRequest、ActiveXObject 等。

了解瀏覽器：

下面是瀏覽器組成的示意圖：

簡單介紹下圖中各部分的作用：

User interface：瀏覽器的用戶界面，負(fù)責(zé)與用戶交互，包括地址欄，前進(jìn)/后退按鈕，書簽?zāi)夸浀取?/p>

Browser engine：瀏覽器引擎，負(fù)責(zé)查詢、操作渲染引擎的接口。

Rendering engine：渲染引擎，負(fù)責(zé)展示請求獲取的內(nèi)容，比如請求獲取的是 html 文件，便負(fù)責(zé)解析該 html 文件。

Networking：網(wǎng)絡(luò)模塊，負(fù)責(zé)請求、接收資源等，完成網(wǎng)絡(luò)調(diào)用，例如 http 請求。

JavaScript Interpreter：JavaScript 解釋器，用來解釋執(zhí)行 js 代碼。

UI Backend：UI 后端，用來繪制選擇框等基本組件，具有不特定于某個(gè)平臺的通用接口，底層使用操作系統(tǒng)提供的接口。

Data Persistence：數(shù)據(jù)持久化模塊，負(fù)責(zé)提供存儲服務(wù)，瀏覽器需要在硬盤中保存的各種數(shù)據(jù)都由它來完成，相當(dāng)于瀏覽器的本地?cái)?shù)據(jù)庫。

大致工作流程：

1、首先，networking 發(fā)送請求（假設(shè)請求 HTML 文件），接收到服務(wù)器發(fā)來的文件后交給渲染引擎處理。

2、渲染引擎解析 HTML，當(dāng)遇到 script 標(biāo)簽時(shí)，將 script 標(biāo)簽中的內(nèi)容交給 JS 解釋器執(zhí)行

3、JS 解釋器執(zhí)行代碼，把執(zhí)行結(jié)果返回給渲染引擎。

4、渲染引擎將畫面渲染完畢，通過瀏覽器引擎將畫面顯示在瀏覽器的用戶界面上。

這只是舉例簡單概括下，實(shí)際流程更復(fù)雜一些，有個(gè)專家寫了篇詳細(xì)的解釋瀏覽器的文章，這是中文版的鏈接：

How browsers work--Behind the scenes of modern web browsers：https://www.2cto.com/kf/201202/118111.html