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是處於事件流中的非目標元素，則先執行捕獲，後執行冒泡

事件的代理/委託

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

• • 優點：

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

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

• • 缺點：

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

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

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊