中級前端知識點提要

時間 2019-11-13

標籤中級前端知識提要简体版

原文原文鏈接

中級前端知識點提要

標籤（空格分隔）： JavaScript HTML 基礎javascript

1 Restful API

Representational State Transfer（表現層狀態轉移）。
URL定位資源，用HTTP動詞（GET POST PUT DELETE）描述操做。
資源、統一接口、URI、無狀態。
應該將API的版本號放入URL；URL中只能有名詞而不能有動詞；API應該提供參數。css

2 CommonJS/AMD/CMD/ES6 Module

2.1 CommonJS

是Node.js模塊系統具體實現的基石html

JavaScript: not just for browsers any more!
爲解決JavaScript沒有模塊系統，標準庫較少，缺少包管理工具。
定義的模塊
- 模塊引用（require）
- 模塊定義（exports）
- 模塊標識（module）
運行環境
- 服務端JavaScript應用程序
- 命令行工具
- 圖形界面應用程序
- 混合應用程序
特色
- 全部代碼運行在模塊做用域，不會污染全局做用域
- 模塊能夠第一次加載，只在第一次加載時運行一次
- 模塊按照其在代碼中出現的順序加載（同步）
包結構
- package.json包描述文件，存在於包根目錄下
- bin存放可執行二進制文件的目錄
- lib存放js代碼的目錄
- doc存放文檔的目錄
- test存放單元測試用例代碼的目錄

2.2 AMD Asynchronous Module Definition(異步模塊定義)

瀏覽器端的模塊，不能採用「同步加載（synchronous）」，只能採用「異步加載（asynchronous）」。這就是AMD規範誕生的背景。
典型表明require.js前端

模塊定義vue
```
define(id?: String, dependencies?: String, factory: Function|Object);
```
- id是模塊的名字。
- dependencies是依賴模塊列表，默認值是["require", "exports", "module"]。
- factory是模塊的具體實現。
模塊加載html5
```
require([module], callback);
```
require.js
- 實現js文件的異步加載，避免網頁失去響應。
- 管理模塊之間的依賴性，便於代碼的編寫和維護。

2.3 CMD Common Module Definition（通用模塊定義）

一個模塊就是一個文件，依賴就近；懶加載（延遲執行）；沒有全局require。
典型SeaJSjava

模塊定義node

define(factory);

factory是函數時，表示是模塊的構造方法。react

define(function(require, exports, module) {
    // 模塊代碼
});

SeaJS和RequireJS的差別jquery
- 定位有差別
  RequireJS目的是同時做爲瀏覽器端和服務器端的模塊加載器。
  SeaJS專一於瀏覽器端。
- 遵循規範不一樣
  RequireJS遵循AMD規範。
  SeaJS遵循CMD規範，更貼近CommonJS和Node Modules。
- 執行方式不一樣（AMD和CMD的差別）
  RequireJS依賴前置，預執行（異步加載：依賴先執行）（RequireJS從2.0開始，也改爲能夠延遲執行）。
  SeaJS依賴就近，懶執行（運行到需加載，根據順序執行）。
- 對開發調試的支持有差別
  SeaJS有更多的調試插件。
- 插件機制不一樣
  RequireJS採起源碼中預留接口形式，插件類型比較單一。
  SeaJS採起通用事件機制，插件類型更豐富。

2.4 ES6 Module

ES6模塊的設計思想是儘可能的靜態化，使得編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。
這一點不一樣於CommonJS和AMD模塊。所以也不能實現動態加載（提案import([path])用於解決這個問題）。
一個文件就是一個模塊。該文件內部的全部變量，外部沒法獲取，使用export關鍵字輸出指定變量。

export命令

使用as關鍵字重命名導出變量。

對外的接口，必須與模塊內部的變量創建一一對應的關係。好比：

export 1; // 報錯
var m = 1;
export m; // 報錯
// 由於1只是一個值不是接口
// 正確應該是這樣
export var m = 1;
export { m };

import命令
- 使用as關鍵字重命名變量名。
- import命令輸入的變量是隻讀的，不能改寫接口（好比從新賦值）；可是若是變量是個對象，修改屬性是容許的（不建議這麼作）。
- from關鍵字指定模塊文件的位置（相對/絕對路徑）；.js後綴能夠省略。
- import命令具備提高效果，率先執行。
- import命令是靜態執行，不能使用表達式、變量或者在結構語句中。
- 重複import只執行一次。
- 使用*實現全部導出值都加載在as的對象上，好比：
```
import * as obj from './module';
obj.a();
```
  雖然obj是個對象，可是不容許修改它的屬性，好比：obj.a = 'Hello'; // 報錯。
- import默認輸出（export default）時候不須要大括號，而其它的則須要。
- 想要在一條import語句中同時導入默認接口export default和其它接口，能夠用_實現：
```
import _, { momduleA, moduleB as moduleC } from './module';
```
export default命令
- 爲用戶指定默認輸出。
- 其它模塊加載該模塊時，import命令能夠爲該匿名導出接口指定任意名字（即使export時候是具名接口，在外部模塊視爲無效）。
```
export default function foo() { };
import bar from './foo';
```
- 一個模塊只能使用一次export default。
- 本質上export default就是輸出一個叫作default的變量或方法，而後容許你爲它取任意名字。
- export default後面不能跟變量聲明語句。
- 能夠直接把一個值或變量export default，好比：
```
export default 123;
var a = 1;
export default a;
```

export與import複合寫法

export { foo as bar } from './module'; // 接口更名轉發
export { default } from './module'; // 轉發默認接口
export { foo as default } from './module'; // 轉發具名接口爲默認接口
export { default as foo } from './module'; // 轉發默認接口爲具名接口

模塊的繼承

假設有一個moduleA模塊，繼承了moduleB模塊。
```
// @file moduleA.js

export * from 'moduleB';
export var e = 123;
export default function() { };
```
export *表示輸出moduleB的全部屬性和方法，且忽略default方法。
跨模塊常量

創建一個constants文件夾，各個文件保存不一樣類型的常量，加一個index.js來合併（轉發）這些常量，使用的時候直接加載index.js就能夠了。
import()提案
- 用於解決沒法動態加載模塊的問題。
- 返回一個Promise對象。
- import()與Node的require方法差別在於：異步加載。
- 使用場景：按需加載、條件加載、動態模塊路徑。
- 加載完成後模塊會做爲一個對象成爲then方法的參數。
  可使用對象解構賦值語法：
```
import('module.js').then((export1, export2) => {
    // TODO
});
```
- 同時加載多個模塊
```
promise.all([
    import('moduleA.js'),
    import('moduleB.js')
]).then(([moduleA, moduleB]) => {
    // TODO
});
```

3 三大框架底層原理

前端三大框架數據流動和原理

3.1 Angular2+

Angular2+是經過zone.js代理原生異步事件，事件發生觸發tick()去執行變化檢測。
Angular2+髒值檢測（存儲全部變量的值，每當有變量發生變化時，就將全部變量的舊值與新值比較，不相等就說明檢測到變化），Angular每一個組件都有本身的變化檢測器；數據流從上到下（從根組件向下）。

3.2 Vue2+

Vue是經過Object.defineProperty()來劫持數據的getter/setter實現數據綁定。
實現一個數據監聽器observer，對全部屬性進行監聽，有變化通知訂閱者。
實現一個指令解析器compile，根據指令模板替換數據。
實現一個watcher鏈接以上二者的聯繫。

3.3 React

Virtual DOM（虛擬DOM）。

4 跨域

跨域資源共享 CORS 詳解

CORS Cross-Origin Resource Sharing(跨域資源共享)。
它容許向跨源服務器發出XHR請求。
實現關鍵是服務器實現了CORS接口，就能夠跨源通訊。

4.1 簡單請求

同時知足兩個條件：

請求方法時如下三種之一
- HEAD
- GET
- POST
HTTP頭信息不超出如下幾種字段
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type(僅限值爲application/x-www-form-urlencoded、multipart/form-data、text/plain)。

4.1.1 基本流程

瀏覽器請求時，在head信息中增長Origin字段。
服務器根據Origin指定的源，判斷是否在許可範圍內：

若是不在Response Headers中就不會有Access-Control-Allow-Origin字段，觸發XHR的onerror回調。
若是在，會返回如下字段：

Access-Control-Allow-Origin: https://www.google.com  // 必有字段， *（接受任意域名）或者是Request Headers裏的Origin字段值

Access-Control-Allow-Credentials: true  // 可選字段，表示容許發送cookie；若是不發送刪除該字段

Access-Control-Expose-Headers: FooBar  // 可選字段，XHR的getResponseHeader方法只能拿到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma字段，想要其餘字段在這裏指定

Content-Type: text/html;charset=utf-8

4.1.2 withCredentials屬性

容許CORS發送cookie和http認證信息，服務器須要設置Access-Control-Allow-Credentials爲true；瀏覽器端XHR請求須要設置：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

若是要發送cookie，Access-Control-Allow-Origin不能設置爲*，必須指定明確，與請求網頁一致的域名。同時，cookie依舊同源策略，只有服務器域名設置的cookie纔會上傳，瀏覽器端document.cookie沒法讀取服務器域名下的cookie。

4.2 非簡單請求

非簡單請求，會在正式通訊以前增長一次HTTP查詢請求，叫「預檢請求(preflight)」。
用以詢問服務器當前瀏覽器端網頁所在域名是否在服務器的許可名單之中，以及可使用哪些HTTP動詞和頭信息字段，只有獲得確定答覆纔會發起正式請求，不然報錯。

Preflight請求方法是OPTIONS，表示詢問請求。
關鍵字段Origin。

Access-Control-Request-Method  // 必有字段 表示CORS請求的HTTP方法

Access-Control-Request-Headers // 逗號分隔字符串，指定CORS請求額外發送頭信息的字段

Preflight請求的Response。

Access-Control-Allow-Origin  // 表示容許請求的源

Access-Control-Allow-Methods  // 必有字段，逗號分隔字符串，表示服務器支持的跨域請求的全部方法

Access-Control-Allow-Headers  // 若是request時包含Access-Control-Request-Headers字段，則此response字段必有。逗號分隔字符串，表示服務器支持的全部頭信息字段

Access-Control-Allow-Credentials  // 是否容許cookie

Access-Control-Max-Age  // 可選，單位是秒，表示該條迴應緩存時間

瀏覽器正常請求和迴應
與簡單請求一致。

4.3 與JSONP跨域的區別

JSONP只支持GET請求，其優點在於支持老版本瀏覽器。

5 同源策略

瀏覽器同源政策及其規避方法

Same-Origin Policy(同源策略)
1995年網景公司引入瀏覽器。目的是保證用戶信息安全，防止惡意網站竊取數據。

概念
- 協議相同
- 域名相同
- 端口相同
限制範圍
- cookie localStorage和indexDB
- DOM
- Ajax請求
規避限制
- cookie
  若是一個網站一級域名相同，二級域名不一樣。兩個網頁設置相同的document.domain共享cookie。
- iframe
  - 片斷標識符
    Fragment Indentifier指的是URL中#後面的部分
    父窗口能夠把信息寫入子窗口的片斷標識符
```
var src = './page-1.html' + '#test';
setTimeout(() => {
    document.getElementById('iframe').src = src;
}, 1000);
```
    子窗口經過監聽hashchange事件獲得通知：
```
window.onhashchange = function() {
    console.log('Page-1 print fragment identifier: ', window.location.hash);
}
```
    一樣的，子窗口也能夠改變父窗口的片斷標識符：
```
parent.location.href = target + '#' + hash;
```
    demo如圖所示：
  - window.name
    不管同源，只要在一個窗口裏，前一個網頁設置了這個屬性，後一個網頁就能夠讀取它。
  - window.postMessage
    HTML5新API：跨文檔通訊（Cross-Document Messaging）。
    它容許跨窗口通訊，不管是否同源。
- ajax
  JSONP
  WebSocket
  CORS

6 閉包

閉包是函數和聲明該函數的詞法環境的組合。
閉包（closure）就是可以讀取其它函數內部變量的函數（定義在一個函數內部的函數）。
本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

做用
- 讀取函數內部的變量
- 讓這些變量的值始終保持在內存中
- 實現私有屬性
不能濫用
- 閉包在處理速度和內存消耗方面對腳本性能具備負面影響
- 形成內存溢出

7 面向對象

面向對象程序設置(OOP)的目的是在編程中促進更好的靈活性和可維護性、

Namesoace（命名空間）
一個獨特、應用相關名字的名稱下捆綁全部功能的容器。
在js中，命名空間只是一個包含方法、屬性、對象的對象。
Class（類）
定義對象的特徵。它是對象的屬性和方法的模板定義。
js經過定義函數來聲明類(ES6以前)。
Object（對象）
類的一個實例。
js中的每一個對象都是Object對象的實例且繼承它全部的屬性和方法。
Property（屬性）
對象的特徵。
經過this關鍵字調用類中的屬性。
Method（方法）
對象的能力（方法）。
將函數賦值給類的prototype屬性。
Constructor（構造函數）
對象初始化的瞬間，被調用的方法。一般它的名字與包含它的類一致。

Inheritance（繼承）
一個類能夠繼承另外一個類的特徵。

// 子類
// 調用父類構造器，確保（使用Function#call）「this」在調用過程當中設置正確
Parent.call(this, args);
// 同時須要顯示的繼承父類的prototype
Child.prototype = Object.create(Parent.prototype);
// 設置constructor屬性指向子類
Child.prototype.contructor = Child;

// Object.create()僅支持現代瀏覽器（IE9+），有shim方案
functuon createObject(proto) {
    function ctor() {}
    ctor.prototype = proto;
    return new ctor();
}

通用方法：

function extend(Child, Parent) {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype; // uber 是在模擬 class 時用來表示 super 的(由於super是關鍵字因此不能直接用)
}

Encapsulation（封裝）
一種把數據和相關方法綁定在一塊兒使用的方法。
Abstraction（抽象）
結合複雜的繼承、方法、屬性的對象可以模擬現實的模型。
Polymorphism（多態）
多意思是「許多」，態是「形態」。不一樣類能夠定義相同的方法或屬性。

8 繼承與原型鏈

js只有一種結構：對象。每一個實例對象（object）都有一個私有屬性（稱之爲[[prototype]]）指向它的原型對象（prototype）。該原型對象也有一個本身的原型對象，層層向上直到一個對象的原型對象爲null。根據定義，null沒有原型，並做爲這個原型鏈中的最後一環節。
幾乎全部的js中的對象都是位於原型鏈頂端的Object的實例。

prototype屬性屬於構造函數，這個屬性包含一個對象（prototype對象），全部實例對象須要共享的屬性和方法，都放在這對象裏；那些不須要共享的屬性和方法，放在狗仔函數裏。

9 前端優化

雅虎前端優化

Content
- 減小HTTP請求次數
  - 合併文件
  - CSS Sprites(雪碧圖)
  - image maps
  - inline images 使用data:url scheme內聯圖片
- 減小DNS查詢
  緩存DNS查詢。
- 避免重定向
  最浪費的重定向發生在url尾部slash(/)缺失。
- 使Ajax能夠緩存
  Add an Expires or a Cache-Control Header.
- 延遲加載組件
  考慮什麼是頁面初始化必須的，剩下的內容和組件均可以延遲加載。包括隱藏的內容、摺疊起來的圖片等等。
- 預加載組件
  - 無條件(Unconditional )預加載
    一旦onload觸發，你當即獲取另外的組件。好比谷歌會在主頁這樣加載搜索結果頁面用到的雪碧圖。
  - 有條件(Conditional)預加載
    基於用戶動做，推測用戶下一步會去哪裏並加載相應的組件。
  - 預期的(Anticipated)預加載
    You can mitigate this side effect by preloading some components before you even launched the redesign.
- 減小DOM數量
- 跨域拆分組件
  使用2-4個域名來拆分前端資源。好比能夠把HTML和動態內容部署在www.example.com，拆分靜態資源到static1.example.com和static2.example.com。
- 減小iframe數量
  iframe優勢：
  * 解決緩慢的第三方內容的加載
  * 安全沙盒
  * 並行下載腳本
  iframe缺點：
  * 空的也消耗資源和時間
  * 阻塞了頁面的onload
  * 非語義化
- 不要404
  http請求是昂貴的，發出http請求但得到沒用的響應（404）是徹底沒必要要的。
Server
- 使用CDN(Content Delivery Network)內容分發網絡
  CDN是一羣不一樣地點的服務器，能夠更高效地分發內容到用戶。
- 在頭信息使用Expires或是Cache-Control
  - 對靜態組件：經過設置Expires頭部來實現「永不過時」策略，好比圖片。當組件更新後，必須更改文件名。
  - 對動態組件：用合適的Cache-Control來幫助瀏覽器進行有條件請求
- Gzip壓縮組件
  針對文本類型的文件（html，腳本，樣式，xml和json等）。圖片或pdf等不該該被gzip。
  能夠減少http響應的大小從而減小響應時間。
```
Content-Encoding: gzip
```
- 配置Etag
  實體標記（Entity Tag, ETag）是服務器和瀏覽器之間判斷瀏覽器緩存中某個組件是否匹配服務器端原組件的一種機制。實體就是組件：圖片、腳本、樣式等。ETag被當作驗證明體的，且比last-modified（最後更改）更高效地機制。服務器這樣設置組件的ETag:
```
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
```
  瀏覽器經過If-None-Match驗證組件，若是ETag匹配，服務器返回304：
```
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
```
- Flush the Buffer Early
- Use GET for AJAX Requests
  獲取數據應該用GET，提交數據到服務器用POST。
- 避免空src的img
  - IE，向頁面所在的目錄發請求。
  - Safari和Chrome，請求實際的頁面。
  - FireFox3及以前和Safari/Chrome同樣，但從3.5開始修復問題，再也不發請求。
  - Opera遇到空圖片src不作任何事。
Cookie
- 減少cookie體積
  - 消除沒必要要的cookie
  - 儘量減少cookie的大小下降響應時間
  - 注意設置cookie到合適的域名級別，則其它子域名不會被影響
  - 適當設置Expires日期。
- 爲靜態資源設置不一樣域名(Use Cookie-free Domains for Components)
  請求靜態資源沒必要傳輸cookie，因此啓用一個新域名來託管靜態資源。
CSS
- 把樣式文件放在頂部<head>。
- 避免使用CSS表達式（CSS Expressions）
```
// 背景顏色能夠設置成每小時輪換
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
```
- 避免使用@import
  在IE用@import等效於樣式文件放到頁面底部。
- 避免使用過濾器(Filters)
  放棄IE的AlphaImageLoader。用PNG8來優雅降級。
JavaScript
- 把腳本放在底部
  當腳本在下載，瀏覽器不會再下載其餘組件，即便在不一樣域名下。
  一個替代建議是使用異步腳本。defer和async。
- 使用外部CSS和js。
- 壓縮js和css
- 刪除重複腳本
- 最小化DOM訪問
  用js訪問DOM元素是緩慢的:
  * 緩存訪問過的元素的引用
  * 在DOM樹外更新節點，而後添加到DOM樹
  * 避免使用js實現固定佈局
- 使事件處理更靈活
  考慮使用事件委託。
  另外沒必要等到onload事件來開始處理DOM樹，DOMContentLoaded更快。onload包含圖片都被下載完畢才執行。
Images
- 優化圖片
  - 檢查gif圖片的palette size（調色板大小）是否匹配圖片顏色數。
  - 能夠把fig轉成png看看有沒有變小。gif通常能夠轉成png8，動畫除外。
  - 運行pngcrush或其它工具壓縮png。
  - 運行jpegtran或其它工具壓縮jpeg。
- 優化雪碧圖(CSS Sprites)
  - 把圖片橫向合併而不是縱向，橫向更小。
  - 把顏色近似的圖片合併到一張雪碧圖，這樣可讓顏色數更少，若是低於256就能夠用png8。
  - 「Be mobile-friendly」而且合併時圖片間的間距不要太大，這樣對客戶端解壓時須要的內存更少。
- 不要把大圖片縮成小圖片
  好比使用100x100的圖片就使用這麼大的，而不該該是500x500。
- 使favicon.ico小且可緩存
  - 最好1k如下
  - 設置Expires頭部，也許能夠安全設置爲幾個月。
Mobile
- 保持資源小於25k
  這個限制於iPhone不緩存大於25k的組件息息相關。並且注意是非壓縮(uncompressed)的文件大小。
- Pack Components into a Multipart Document

10 瀏覽器兼容性

推薦一個reboot樣式表Normalize.css。
html5shiv.js 解決IE9如下瀏覽器對HTML5標籤不識別的問題。
respond.js 解決IE9如下不支持媒體查詢的問題。
picturefill.js 解決IE9 10 11等不支持<picture>標籤的問題。

條件註釋

操做符	範例	含義
`lt`	`[if lt IE 10]`	小於
`gt`	`[if gt IE 9]`	大於
`lte`	`[if lte IE 6]`	小於等於
`gte`	`[if gte IE 5.5 ]`	大於等於
`!`	`[if !IE]`	不等於
`()`	`[if !(IE 7)]`	子表達式
`&`	`[if (gt IE 5)&(lt IE 7)]`	AND
豎線(md表格語法問題)	`[if (IE 6)豎線(IE 7)]`	OR

好比：

<!--[if !IE]> 除IE外均可識別 <![endif]-->
<!--[if IE]> 全部的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6如下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->

瀏覽器CSS兼容前綴

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 統一標識語句

a標籤CSS狀態順序
1 :link 日常狀態
2 :visited 被訪問過以後
3 :hover 鼠標懸浮
4 :active 連接被點擊

求窗口大小

// 瀏覽器窗口可視區域大小（不包括工具欄和滾動條等邊線）
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 網頁內容實際寬高（包括工具欄和滾動條等邊線）
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 網頁內容實際寬高 (不包括工具欄和滾動條等邊線）
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滾動的高度
var scroll_Top = document.documentElement.scrollTop || document.body.scrollTop;

11 瀏覽器內核

五大流瀏覽器內核及其表明
各主流瀏覽器內核介紹

瀏覽器的內核分爲兩個部分，一個是渲染引擎（Rendering Engine），一個是js引擎。如今就是引擎比較獨立，內核更加傾向於說渲染引擎。

Trident(三叉戟)內核
表明做是IE瀏覽器。
Gecko(壁虎)內核
表明做是Firefox。開源項目。
Webkit(引擎)內核
蘋果公司基於KDE的KHTML引擎開發的內核。
由WebCore和JSCore構成。嚴格意義上來說不只僅是Rendering Engine。
表明做是Safari、曾經的Chrome，開源項目。
谷歌Chrome/Chromium瀏覽器從08年創始至今一直使用蘋果公司的Webkit做爲瀏覽器內核原型，是Webkit的一個分支，能夠稱之爲Chromium引擎。
Presto(說變就變)內核
表明做是Opera(v7.0-v12.16)。13年Opera棄用了Presto轉爲WebKit分支上的Chromium。
Blink(閃亮)內核
有Google和Opera Software開發的，2013年4月發佈的瀏覽器排版引擎。現代Chrome(v28.0.1469.0~)內核是Blink。

12 經典算法和原理

13 TCP/IP協議

Transmission Control Protocol/Internet Protocol（傳輸控制協議/因特網互聯協議）又名網絡通信協議，是Internet最基本的協議，Internet國際互聯網的基礎，由網絡層的IP協議和傳輸層的TCP協議組成。

14 HTTP協議

HyperText Transfer Protocol（超文本傳輸協議），是一種用於分佈式、協做式和超媒體信息系統的應用層協議。HTTP是萬維網的數據通訊基礎。萬維網協議（World Wide Web Consortium, W3C）。
經過HTTP或HTTPS協議請求的資源由統一資源標識符（Uniform Resource Identifiers, URI）來標識。

15 OSI模型

有國際標準化組織提出的使各類計算機在世界範圍內互連爲網絡的標準框架。
Open System Interconnection Reference Model(開放式系統互聯通訊參考模型)

第1層物理層
第2層數據鏈路層
第3層網絡層
第4層傳輸層
第5層會話層
第6層表達層
第7層應用層

16 MVC設計模式

Model
數據模型
View
視圖
Controller
數據模型和視圖之間的控制器。用戶和應用產生交互時，控制器中的事件觸發器觸發工做，更新視圖或者更新數據。

17 MVVM設計模式

Model
數據層的域模型，域模型同步，主要用於抽象出ViewModel中視圖的Model。
View
視圖動態模板。處理狀態，數據綁定的聲明、指令的聲明、事件綁定的聲明。
ViewModel
處理View層的具體業務邏輯。底層作好綁定樹形的監聽，實現雙向綁定。

18 分層架構模式

分層架構（3-tier architecture）：界面層、業務邏輯層、數據訪問層。
爲了高內聚低耦合的軟件設計思想。

19 三次握手

20 call & apply

是爲了動態改變this而生（從新定義函數的執行環境）。

21 Map

Map

Map對象保存鍵值對。任何值（對象或原始值）均可以覺得一個鍵或一個值。
new Map([iterable]);
iterable能夠是一個數組或者其餘iterable對象，其元素或爲鍵值對，或爲兩個元素的數組。每一個鍵值對都會添加到新的Map。null會被當作undefined。

22 this

javascript this

this指的是函數運行時所在的環境。
因爲函數能夠在不一樣的運行運行環境中執行，因此須要一種機制，可以在函數體內部得到當前運行環境（context）。這就是this的由來，它設計的目的就是在函數體內部，指代函數當前的運行環境。

23 undefined和null區別

null表示沒有對象（此處不該該有值）
- 做爲函數的參數，表示該函數的參數不是對象
- 做爲對象原型鏈的終點
undefined表示缺乏值（此處應該有一個值，可是尚未定義）
- 變量被聲明瞭，可是沒有賦值，就等於undefined；像GoLang裏的零值
- 調用函數時，應該提供的參數沒有提供，這個參數等於undefined
- 對象沒有賦值的屬性，該屬性值爲undefined
- 函數沒有返回值時，默認返回undefined

24 HTML5之websocket

HTML5 WebSockets Api

WebSockets 是一種先進的技術。它能夠在用戶的瀏覽器和服務器之間打開交互式通訊會話。使用此API，您能夠向服務器發送消息並接收事件驅動的響應，而無需經過輪詢服務器的方式以得到響應。

webSockets
用於鏈接websocket服務器的主要接口，以後能夠在這個鏈接上發送和接受數據。
closeEbent
鏈接關閉時wensocket對象發送的事件。
messageEvent
當從服務器獲取到消息時websocket對象觸發的事件。

25 HTML5之history

HTML5 history Api

26 HTML5之canvas

27 HTML5之picture

HTML5 picture

是一個容器，用來爲其內部特定的<img>元素提供多樣的<source>元素。瀏覽器會根據當前頁面的佈局以及當前瀏覽的設備區從中選擇最合適的資源。

<picture>
    <source srcset="./img/1.jpg" media="(max-width: 992px)">
    <source srcset="./img/2.jpg" media="(max-width: 1200px)">
    <img src="./img/3.jpg" alt="3">
</picture>

28 HTML5之localStorage和sessionStorage

29 W3C標準

W3C標準文檔

網頁設計和應用
- HTML和CSS
  - HTML
    HTML is the language for describing the sticture of web pages.
    用途：
    * 發佈帶有頭部、文字、表格、列表、圖片等的在線文檔
    * 點擊按鈕經過超文本連接檢索在線信息
    * 設計表單，用於和遠程服務進行交易，用戶搜索信息，預約，訂購產品等
    * 直接在其文檔中包含電子表格，視頻剪輯，聲音剪輯和其它應用程序
  - XHTML
    XHTML is a variant(變種) of HTML that uses the syntax(語法) of XML, the Extensible Markup Language(可擴展標記語言).
  - CSS
    CSS is the language for describing the presentation(呈現) of web pages, including colors, layout, and fonts.
    It allows one to adapt(適應) the presentation to different types of devices, such as large screens, small screens, or printers(打印機).
  - WebFonts
    WebFonts is a technology that enables people to use fonts on demand(按需) over the Web without installation in the operating system(操做系統).
- JavaScript Web APIs
- Graphics
  png, SVG, Canvas API. WebCGM
- Audio and Video
- Accessibility(無障礙)
  W3C的Web Accessibility Initiative(WAI 網頁可訪問性計劃)發佈了Web Content Accessibility Guidelines(WCAG 網頁內容可訪問性指南)，以幫助開發者建立對殘障人士可訪問的內容。
- Internationalization(國際化)
- Mobile Web
- Privacy(隱私)
- Math on the Web

30 自動化發佈，前端自動化

31 前端工程化

32 微信小程序

33 前端架構設計

34 ES6/ES7經常使用

35 cookie操做

36 函數和變量的預解析

函數和變量聲明會置頂，函數聲明在變量聲明之上。因此即使書寫的代碼變量聲明在函數聲明之上，變量聲明也不會被覆蓋。

如下是個典型的題目：

function Foo() {
    // 沒有用var，變量提高
    bar = function() {
        console.log(1);
    };
    return this;
}

Foo.bar = function() {
    console.log(2);
};
Foo.prototype.bar = function() {
    console.log(3);
};
var bar = function() {
    console.log(4);
};

bar = function() {
    console.log(6);
};

function bar() {
    console.log(5);
}


Foo.bar(); // 2
bar(); //** 6
Foo().bar(); // 1
bar(); //** 1
new Foo.bar(); // 2
new Foo().bar(); // 3
new new Foo().bar(); // 3

37 CSS3新增僞類

38 HTML5遺棄的元素

39 event對象

40 XMLHttpRequest基礎

XMLHttpRequest

使用XMLHttpRequest(XHR)對象能夠與服務器交互。

對於full-duplex(全雙工)通訊，WebSockets能夠是更好的選擇。

屬性

XMLHttpRequest.onreadystatechange
當readyState屬性發生變化時調用的事件。

var xhr = new XMLHttpRequest(),
    method = 'GET',
    url = 'https://developer.mozilla.org/';

xhr.open(method, url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

XMLHttpRequest.readystate 只讀
返回一個無符號短整型(unsigned short)，表示請求的狀態碼。

值	狀態	描述
0	UNSENT	代理被建立，但還沒有調用`open()`方法
1	OPENED	`open()`方法已經調用
2	HEADERS_RECEIVED	`send()`方法已經被調用，而且頭部和狀態已經可獲取
3	LOADING	下載中，`responseText`屬性已經包含部分數據
4	DONE	下載操做已完成

XMLHttpRequest.response 只讀
返回ArrayBuffer, Blob, Document, DOMString，取決於XMLHttpRequest.responseType的值。
其中包含響應體body。
XMLHttpRequest.responseText 只讀
返回一個DOMString，包含對請求的響應；若是請求失敗或未發送，返回null。

XMLHttpRequest.responseType
定義響應類型的枚舉值。

值	描述
`""`	默認類型，與`"text"`相同；`DOMString`
`"arraybuffer"`	包含二進制數據的JavaScript`ArrayBuffer`
`"blob"`	包含二進制數據的`Blob`對象
`"document"`	是一個HTML`Document`或XML`XMLDocument`，取決於接收到的數據的MIME類型
`"json"`	是一個JavaScript對象，由JOSN解析
`"text"`	包含在DOMString對象中的文本

XMLHttpRequest.reponseURL 只讀
返回響應的序列化URL，若是URL爲空，則返回空字符串。
XMLHttpRequest.status 只讀
返回無符號短整型(unsigned short)的請求響應狀態。
請求完成前和XMLHttpRequest出錯，status爲0。

HTTP狀態碼
XMLHttpRequest.statusText 只讀
返回一個DOMString，其中包含HTTP服務器返回的響應狀態。包括整個文本，好比："200 OK"。
XMLHttpRequest.timeout
無符號長整型(unsigned long)，表示該請求的最大請求時間（毫秒），超過該時間會自動結束。
XMLHttpRequest.ontimeout
當請求超時調用的事件。
XMLHttpRequest.upload 只讀
表示上傳過程。
XMLHttpRequest.withCredentials
Boolean，用來指定跨域的請求是否應該使用證書（cookie或受權header頭）。
XMLHttpRequest.channel 只讀
對象在執行請求時使用的通道。
XMLHttpRequest.mozAnon 只讀
Boolean，若是爲真，請求將在沒有cookie和身份驗證header頭的狀況下發送。
XMLHttpRequest.mozSystem 只讀
Boolean，若是爲真，則在請求時不會強制執行同源策略。
XMLHttpRequest.mozBackgoundRequest
Boolean，它指示對象是不是後臺服務器端的請求。

方法
- XMLHttpRequest.abort()
  若是請求已經被髮送，則馬上終止請求。
- XMLHttpRequest.getAllResponseHeaders()
  以字符串的形式返回全部用CRLF分隔的響應頭，若是沒有收到響應，則返回null。
- XMLHttpRequest.getResponseHeader()
  返回包含指定響應頭的字符串，若是響應還沒有收到或響應中不存在該報頭，則返回null。
- XMLHttpRequest.open()
  初始化一個請求。該方法只能在JavaScript代碼中使用，若要在native code中初始化請求，請使用openRequest()。
```
xhr.open(method, url, async);
```
  - method HTTP方法
  - url 發送請求的URL
  - async 默認爲true，執行異步操做
- XMLHttpRequest.overrideMimeType()
  重寫由服務器返回的MIME type。
- XMLHttpRequest.send()
  發送請求。若是請求是異步的，那麼該方法將在請求發送後當即返回。
```
void send();
void send(ArrayBuffer data);
void send(ArrayBufferView data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);
```
- XMLHttpRequest.setRequestHeader()
  設置HTTP請求頭的值。您必須在open()以後，send()以前調用setRequestHeader()方法。

41 Ajax基礎

Asynchronous JavaScript and XML

ajax優勢
* 改善用戶體驗，頁面無刷新更新數據
* 異步處理服務器通訊，減小頁面等待時間
* 減輕服務器負擔，按需請求數據，減小冗餘請求
* 基於標準被普遍支持
ajax缺點
* 沒法前進後退(能夠經過操做history api來解決)，破壞瀏覽器機制
* SEO問題
* 安全問題

42 `src`和`href`屬性

src用於替代這個元素，而href用於創建這個標籤與外部資源之間的關係。

href (Hypertext Reference) 超文本引用href這個屬性指定web資源的位置，從而定義當前元素（如錨點a）或當前文檔（如連接）與目標錨點或目標資源之間的聯繫。
src (Source)源這個屬性是將資源嵌入到當前文檔中元素所在的位置。

43 Web應用實現推送的方式

Ajax輪詢
客戶端定時向服務器發送Ajax請求，服務器接收到請求後返回響應信息並關閉鏈接。
- 優勢：簡單
- 缺點：浪費帶寬和服務器資源
長輪詢
客戶端向服務器發送Ajax請求，服務器接收到請求後Hold住連接，直到有新消息才返回響應信息，並關閉連接；客戶端處理完響應後再向服務器發起新一輪請求。
- 優勢：較少耗費資源
- 缺點：仍然會耗費服務器資源，返回數據順序沒法保證，難於管理維護
長連接
在頁面中嵌入一個隱藏的iframe，將這個iframe的src屬性設置爲對一個長連接的請求或XHR請求。
- 優勢：消息即時到達，不發送無用請求。
- 缺點：服務器維護一個長連接會增長開銷
Flash Socket
在頁面中嵌入一個使用了Socket類的Flash程序。
- 優勢：實現真正的即時通訊
- 缺點：客戶端必須安裝Flash插件；非HTTP協議，沒法自動穿越防火牆
WebSocket
HTML5的全雙工API。
- 優勢：事件驅動，異步；使用WS或者WSS協議的客戶端Socket；實現真正意義上的推送功能
- 缺點：兼容性

44 CSS盒模型

45 js做用域

for(var i = 0; i < 5; i++) {
  setTimeout(function() {
     console.log(i);            // 5 5 5 5 5
  }, 200);
};

塊級做用域能夠解決這個問題：

for(let i = 0; i < 5; i++) {
  setTimeout(function() {
     console.log(i);            // 0 1 2 3 4
  }, 200);
};

46 js解析

JavaScript代碼是先聲明後執行，解析的時候js引擎總會從最近的一個域，向外層查找。
如下是個經典題目:

var a = 1;
function b() {
    console.log(a); // undefined
    var a = 2;
    console.log(a); // 2
}
b();

咱們來剖析一下：1：首先聲明變量a；2：聲明函數b；3：賦值a爲1；4：調用函數b；5：進入函數b；6：聲明變量a；7：執行第一個console；8：爲a賦值爲2；9：執行第二個console。

執行第一個console的時候，a已經被聲明可是沒有賦值，咱們知道js中聲明一個未賦值的變量其值是undefined；並且因爲a已經在b函數做用域聲明，引擎也不會去函數做用域外查找。

再好比這個題目：

var foo = 1;
(function() {
    var foo = foo || 2; // js先聲明後執行；變量被聲明瞭js引擎就不會去當前函數做用域外查找
    console.log(foo); // 2
})();

47 多域名存儲網頁資源

CDN緩存更方便
突破瀏覽器併發限制
減小沒必要要的cookie，節省帶寬
對於UGC的內容和主站隔離，防止沒必要要的安全問題
數據做了劃分，設置切到了不一樣的物理集羣，方便經過子域名分流

48 NodeJS適用場景

高併發
I/O密集
少許業務邏輯
海量長連接推送

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

中級前端知識點提要

中級前端知識點提要

1 Restful API

2 CommonJS/AMD/CMD/ES6 Module

2.1 CommonJS

2.2 AMD Asynchronous Module Definition(異步模塊定義)

2.3 CMD Common Module Definition（通用模塊定義）

2.4 ES6 Module

3 三大框架底層原理

3.1 Angular2+

3.2 Vue2+

3.3 React

4 跨域

4.1 簡單請求

4.1.1 基本流程

4.1.2 withCredentials屬性

4.2 非簡單請求

4.3 與JSONP跨域的區別

5 同源策略

6 閉包

7 面向對象

8 繼承與原型鏈

9 前端優化

10 瀏覽器兼容性

11 瀏覽器內核

12 經典算法和原理

13 TCP/IP協議

14 HTTP協議

15 OSI模型

16 MVC設計模式

17 MVVM設計模式

18 分層架構模式

19 三次握手

20 call & apply

21 Map

22 this

23 undefined和null區別

24 HTML5之websocket

25 HTML5之history

26 HTML5之canvas

27 HTML5之picture

28 HTML5之localStorage和sessionStorage

29 W3C標準

30 自動化發佈，前端自動化

31 前端工程化

32 微信小程序

33 前端架構設計

34 ES6/ES7經常使用

35 cookie操做

36 函數和變量的預解析

37 CSS3新增僞類

38 HTML5遺棄的元素

39 event對象

40 XMLHttpRequest基礎

41 Ajax基礎

42 src和href屬性

43 Web應用實現推送的方式

44 CSS盒模型

45 js做用域

46 js解析

47 多域名存儲網頁資源

48 NodeJS適用場景

42 `src`和`href`屬性