JavaScript的組成

JavaScript 由以下三部分組成：

ECMAScript（核心）：JavaScript 語言基礎

DOM（文件物件模型）：規定了訪問HTML和XML的介面

BOM（瀏覽器物件模型）：提供了瀏覽器視窗之間進行互動的物件和方法

JS的基本資料型別和引用資料型別

基本資料型別：undefined、null、boolean、number、string、symbol

引用資料型別：object、array、function

檢測瀏覽器版本版本有哪些方式？

根據 navigator.userAgent // UA.toLowerCase.indexOf(‘chrome’)

根據 window 物件的成員 // ‘ActiveXObject’ in window

介紹JS有哪些內建物件？

資料封裝類物件：Object、Array、Boolean、Number、String

其他物件：Function、Arguments、Math、Date、RegExp、Error

ES6新增物件：Symbol、Map、Set、Promises、Proxy、Reflect

如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

更多網頁前端開發教程，行業資訊，面試技巧，歡迎關注公眾號：網頁前端開發學習

說幾條寫JavaScript的基本規範？

程式碼縮排，建議使用“四個空格”縮排

程式碼段使用花括號{}包裹

語句結束使用分號;

變數和函式在使用前進行宣告

以大寫字母開頭命名建構函式，全大寫命名常量

規範定義JSON物件，補全雙引號

用{}和宣告物件和陣列

如何編寫高效能的JavaScript？

遵循嚴格模式：“use strict”;

將js指令碼放在頁面底部，加快渲染頁面

將js指令碼將指令碼成組打包，減少請求

使用非阻塞方式下載js指令碼

儘量使用區域性變數來儲存全域性變數

儘量減少使用閉包

使用 window 物件屬性方法時，省略 window

儘量減少物件成員巢狀

快取 DOM 節點的訪問

通過避免使用 eval 和 Function 構造器

給 setTimeout 和 setInterval 傳遞函式而不是字串作為引數

儘量使用直接量建立物件和陣列

最小化重繪(repaint)和迴流(reflow)

描述瀏覽器的渲染過程，DOM樹和渲染樹的區別？

瀏覽器的渲染過程：

解析HTML構建 DOM(DOM樹)，並行請求 css/image/js

CSS 檔案下載完成，開始構建 CSSOM(CSS樹)

CSSOM 構建結束後，和 DOM 一起生成 Render Tree(渲染樹)

佈局(Layout)：計算出每個節點在螢幕中的位置

顯示(Painting)：通過顯示卡把頁面畫到螢幕上

DOM樹 和 渲染樹 的區別：

DOM樹與HTML標籤一一對應，包括head和隱藏元素

渲染樹不包括head和隱藏元素，大段文字的每一個行都是獨立節點，每一個節點都有對應的css屬性

更多網頁前端開發教程，行業資訊，面試技巧，歡迎關注公眾號：網頁前端開發學習

重繪和迴流（重排）的區別和關係？

重繪：當渲染樹中的元素外觀（如：顏色）發生改變，不影響佈局時，產生重繪

迴流：當渲染樹中的元素的佈局（如：尺寸、位置、隱藏/狀態狀態）發生改變時，產生重繪迴流

注意：JS獲取Layout屬性值（如：offsetLeft、scrollTop、getComputedStyle等）也會引起迴流。因為瀏覽器需要通過迴流計算最新值

迴流必將引起重繪，而重繪不一定會引起迴流

如何最小化重繪(repaint)和迴流(reflow)？

需要要對元素進行復雜的操作時，可以先隱藏(display:“none”)，操作完成後再顯示

需要建立多個DOM節點時，使用DocumentFragment建立完後一次性的加入document

快取Layout屬性值，如：var left = elem.offsetLeft; 這樣，多次使用 left 只產生一次迴流

儘量避免用table佈局（table元素一旦觸發迴流就會導致table裡所有的其它元素迴流）

避免使用css表示式(expression)，因為每次呼叫都會重新計算值（包括載入頁面）

儘量使用 css 屬性簡寫，如：用 border 代替 border-width, border-style, border-color

批量修改元素樣式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

script 的位置是否會影響首屏顯示時間？

在解析 HTML 生成 DOM 過程中，js 檔案的下載是並行的，不需要 DOM 處理到 script 節點。因此，script的位置不影響首屏顯示的開始時間。

瀏覽器解析 HTML 是自上而下的線性過程，script作為 HTML 的一部分同樣遵循這個原則

因此，script 會延遲 DomContentLoad，只顯示其上部分首屏內容，從而影響首屏顯示的完成時間

解釋JavaScript中的作用域與變數宣告提升？

JavaScript作用域：

在Java、C等語言中，作用域為for語句、if語句或{}內的一塊區域，稱為作用域；

而在 JavaScript 中，作用域為function{}內的區域，稱為函式作用域。

JavaScript變數宣告提升：

在JavaScript中，函式宣告與變數宣告經常被JavaScript引擎隱式地提升到當前作用域的頂部。

宣告語句中的賦值部分並不會被提升，只有名稱被提升

函式宣告的優先順序高於變數，如果變數名跟函式名相同且未賦值，則函式宣告會覆蓋變數宣告

如果函式有多個同名引數，那麼最後一個引數（即使沒有定義）會覆蓋前面的同名引數

介紹JavaScript的原型，原型鏈？有什麼特點？

原型：

JavaScript的所有物件中都包含了一個 [proto] 內部屬性，這個屬性所對應的就是該物件的原型

JavaScript的函式物件，除了原型 [proto] 之外，還預置了 prototype 屬性

當函式物件作為建構函式建立例項時，該 prototype 屬性值將被作為例項物件的原型 [proto]。

原型鏈：

當一個物件呼叫的屬性/方法自身不存在時，就會去自己 [proto] 關聯的前輩 prototype 物件上去找

如果沒找到，就會去該 prototype 原型 [proto] 關聯的前輩 prototype 去找。依次類推，直到找到屬性/方法或 undefined 為止。從而形成了所謂的“原型鏈”

原型特點：

JavaScript物件是通過引用來傳遞的，當修改原型時，與之相關的物件也會繼承這一改變

JavaScript有幾種型別的值

原始資料型別（Undefined，Null，Boolean，Number、String）-- 棧

引用資料型別（物件、陣列和函式）-- 堆

兩種型別的區別是：儲存位置不同：

原始資料型別是直接儲存在棧(stack)中的簡單資料段，佔據空間小、大小固定，屬於被頻繁使用資料；

引用資料型別儲存在堆(heap)中的物件，佔據空間大、大小不固定，如果儲存在棧中，將會影響程式執行的效能；

引用資料型別在棧中儲存了指標，該指標指向堆中該實體的起始地址。

當直譯器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中獲得實體。

談談this物件的理解

this 總是指向函式的直接呼叫者

如果有 new 關鍵字，this 指向 new 出來的例項物件

在事件中，this指向觸發這個事件的物件

IE下 attachEvent 中的this總是指向全域性物件Window

eval是做什麼的？

eval的功能是把對應的字串解析成JS程式碼並執行

應該避免使用eval，不安全，非常耗效能（先解析成js語句，再執行）

由JSON字串轉換為JSON物件的時候可以用 eval(’(’+ str +’)’);

什麼是 Window 物件? 什麼是 Document 物件?

Window 物件表示當前瀏覽器的視窗，是JavaScript的頂級物件。

我們建立的所有物件、函式、變數都是 Window 物件的成員。

Window 物件的方法和屬性是在全域性範圍內有效的。

Document 物件是 HTML 文件的根節點與所有其他節點（元素節點，文字節點，屬性節點, 註釋節點）

Document 物件使我們可以通過指令碼對 HTML 頁面中的所有元素進行訪問

Document 物件是 Window 物件的一部分，可通過 window.document 屬性對其進行訪問

介紹 DOM 的發展

DOM：文件物件模型（Document Object Model），定義了訪問HTML和XML文件的標準，與程式語言及平臺無關

DOM0：提供了查詢和操作Web文件的內容API。未形成標準，實現混亂。如：document.forms[‘login’]

DOM1：W3C提出標準化的DOM，簡化了對文件中任意部分的訪問和操作。如：JavaScript中的Document物件

DOM2：原來DOM基礎上擴充了滑鼠事件等細分模組，增加了對CSS的支援。如：getComputedStyle(elem, pseudo)

DOM3：增加了XPath模組和載入與儲存（Load and Save）模組。如：XPathEvaluator

介紹DOM0，DOM2，DOM3事件處理方式區別

DOM0級事件處理方式：

btn.onclick = func;

btn.onclick = null;

DOM2級事件處理方式：

btn.addEventListener(‘click’, func, false);

btn.removeEventListener(‘click’, func, false);

btn.attachEvent(“onclick”, func);

btn.detachEvent(“onclick”, func);

DOM3級事件處理方式：

eventUtil.addListener(input, “textInput”, func);

eventUtil 是自定義物件，textInput 是DOM3級事件

事件的三個階段

捕獲、目標、冒泡

介紹事件“捕獲”和“冒泡”執行順序和事件的執行次數？

按照W3C標準的事件：首是進入捕獲階段，直到達到目標元素，再進入冒泡階段

事件執行次數（DOM2-addEventListener）：元素上繫結事件的個數

注意1：前提是事件被確實觸發

注意2：事件繫結幾次就算幾個事件，即使型別和功能完全一樣也不會“覆蓋”

事件執行順序：判斷的關鍵是否目標元素

非目標元素：根據W3C的標準執行：捕獲->目標元素->冒泡（不依據事件繫結順序）

目標元素：依據事件繫結順序：先繫結的事件先執行（不依據捕獲冒泡標準）

最終順序：父元素捕獲->目標元素事件1->目標元素事件2->子元素捕獲->子元素冒泡->父元素冒泡

注意：子元素事件執行前提 事件確實“落”到子元素佈局區域上，而不是簡單的具有巢狀關係

在一個DOM上同時繫結兩個點選事件：一個用捕獲，一個用冒泡。事件會執行幾次，先執行冒泡還是捕獲？

該DOM上的事件如果被觸發，會執行兩次（執行次數等於繫結次數）

如果該DOM是目標元素，則按事件繫結順序執行，不區分冒泡/捕獲

如果該DOM是處於事件流中的非目標元素，則先執行捕獲，後執行冒泡

事件的代理/委託

事件委託是指將事件繫結目標元素的到父元素上，利用冒泡機制觸發該事件

優點：

可以減少事件註冊，節省大量記憶體佔用

可以將事件應用於動態新增的子元素上

缺點：

使用不當會造成事件在不應該觸發時觸發