前端面試複習要點

時間 2019-11-07

標籤前端面試複習要點欄目快樂工作简体版

原文原文鏈接

1、HTML和CSS

頁面佈局的方法

一、浮動佈局（佈局簡單，兼容性好，可是浮動元素脫離文檔流）javascript

二、絕對定位佈局（佈局快速，元素脫離文檔流）css

三、彈性盒子佈局（自應性好，兼容性差）html

四、多列布局（寬度自適應）前端

五、table佈局（兼容性好）java

HTML5新特性

一、擁有更多的語義化的標籤

好比：header footer nav section article aside dialoggit

二、更好的表單

input輸入框有更多的輸入類型：

color（選取顏色）
data（日期選擇器）
email（e-mail 地址的輸入域）
month（選擇月份）
number（數值輸入域）
range（必定範圍內數字值的輸入域）
search（用於搜索）
tel（定位電話號碼字段）
time（時間）
url（URL輸入域）

HTML5新增的表單屬性

placehoder 輸入框默認提示，在用戶輸入後消失。
required 是一個布爾值，要求輸入域不能爲空。
pattern 描述一個正則表達式用於驗證input元素的值
min和max 設置元素最大最小值
step 爲type爲number的輸入域規定合法的數字間隔
multiple 是一個 boolean 屬性。規定上傳元素中可選擇多個值
autofocus 是一個 boolean 屬性。規定在頁面加載時，域自動地得到焦點。

三、視頻和音頻

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
複製代碼

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標籤。
</video>
複製代碼

四、Canvas繪圖

canvas標籤訂義圖形，好比圖表和其餘圖像，您必須使用腳原本繪製圖形web

五、地理定位

HTML5 Geolocation API 用於得到用戶的地理位置，鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的正則表達式

window.navigator.geolocation {
    getCurrentPosition:  fn  用於獲取當前的位置數據
    watchPosition: fn  監視用戶位置的改變
    clearWatch: fn  清除定位監視
}&emsp;
複製代碼

navigator.geolocation.getCurrentPosition(
    function(pos){
    	console.log('用戶定位數據獲取成功')
    	console.log('定位時間：',pos.timestamp)
    	console.log('經度：',pos.coords.longitude)
    	console.log('緯度：',pos.coords.latitude)
    	console.log('海拔：',pos.coords.altitude)
    	console.log('速度：',pos.coords.speed)
    
    },    //定位成功的回調
    function(err){ 
    	console.log('用戶定位數據獲取失敗')
    }        //定位失敗的回調
)
複製代碼

六、拖放API

拖放是一種常見的特性，即抓取對象之後拖到另外一個位置，在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放算法

七、web Storage

使用HTML5能夠在本地存儲用戶的瀏覽數據。早些時候,本地存儲使用的是cookies。可是Web 存儲須要更加的安全與快速. 這些數據不會被保存在服務器上，可是這些數據只用於用戶請求網站數據上.它也能夠存儲大量的數據，而不影響網站的性能。數據以鍵/值對存在, web網頁的數據只容許該網頁訪問使用。數據庫

客戶端存儲數據的兩個對象爲：

localStorage - 沒有時間限制的數據存儲 sessionStorage - 針對一個 session 的數據存儲, 當用戶關閉瀏覽器窗口後，數據會被刪除。

無論是 localStorage，仍是 sessionStorage，可以使用的API都相同，經常使用的有以下幾個（以localStorage爲例）：

保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除全部數據：localStorage.clear();
獲得某個索引的key：localStorage.key(index);

八、webSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送

九、Web Worker

當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。 web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行

dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發，。
darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發。
dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發。
dragover：事件主體是目標元素，在被拖放在某元素內移動時觸發。
dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸發。
drop：事件主體是目標元素，在目標元素徹底接受被拖放元素時觸發。
dragend：事件主體是被拖放元素，在整個拖放操做結束時觸發

css盒模型

css盒子的四個組成區域相對應，每一個盒子有四個邊界：內容邊界 Content edge、內邊距邊界 Padding Edge、邊框邊界 Border Edge、外邊框邊界 Margin Edge。

css盒模型分爲兩種兩種標準：一種是標準模型，一種是IE模型

從上圖中發現，標準盒模型的寬高就是內容（content）的寬高，而IE盒模型的寬高則是由內容（content）+內邊距（padding）+邊框（border）的寬高的總和。

2、DOM事件類

事件流

事件流描述的是從頁面中接受事件的順序，事件流分爲冒泡流和捕獲流

###事件冒泡

IE事件流叫作事件冒泡，就是事件開始是由最具體的元素（目標元素）接收，而後逐級向上傳播到較爲不具體的節點（文檔），如圖所示

事件捕獲

事件捕獲是從Document接收到事件，而後逐級向下傳播到目標元素，如圖所示

事件對象event

在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含着全部與事件有關的信息，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

下圖是事件對象經常使用的屬性方法

事件委託

事件委託是利用事件冒泡，只指定一個事件處理程序來管理某一類型的全部事件。

優勢：減小事件註冊，節省內存、簡化了dom節點更新時，相應事件的更新。缺點：事件委託基於冒泡，對於不冒泡的事件不支持

3、HTTP協議類

http與https

http:超文本傳輸協議，用於從WWW服務器傳輸超文本到本地瀏覽器的傳輸協議。 https:是以安全爲目標的HTTP通道，即HTTP下加入SSL層，HTTPS的安全基礎是SSL。

區別

http傳輸的數據是明文的，https傳輸的數據是通過SSL加密的
https協議須要ca證書，費用較高。
使用的連接方式，端口也不一樣，通常http的端口是80，https的端口是443

https的工做原理

客戶端在使用HTTPS方式與Web服務器通訊時有如下幾個步驟：

一、客戶使用https url訪問服務器，則要求web服務器創建ssl連接
二、web服務器接收到客戶端的請求以後，會將網站的證書（證書數中包含了公鑰），傳給客戶端。
三、客戶端和web服務器開始協商ssl連接的安全等級
四、客戶端瀏覽器經過雙方協商一致的安全等級，創建會話密鑰，而後經過網站的公鑰來加密會話密鑰，並傳送給網站。
五、web服務器經過本身的私鑰解密出會話密鑰
六、web服務器經過會話密鑰加密與客戶端之間的通訊。

http報文的組成部分

http報文由請求報文和響應報文組成

http請求方式

一、GET (獲取資源)
二、POST (傳輸資源)
三、PUT (更新資源)
四、DELETE (刪除資源)
五、HEAD (得到報文首部)

GET與POST的區別

GET在瀏覽器回退是無害的，而POST會再次提交請求
GET請求會被瀏覽器主動緩存，而POST不會，除非手動設置
GET請求在URL中傳送的參數是有長度限制的，而POST沒有限制
GET參數經過URL傳遞的，POST放在Request body中
GET請求參數會被完整的保留在瀏覽器歷史記錄中，而POST中的參數不會被保留
GET請求只能進行url編碼，而POST支持多種編碼方式
GET比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感信息
對參數的數據類型，GET只接受ASCII字符，而POST沒有限制

http狀態碼

1xx: 指示信息-表示請求已接收，繼續處理
2xx：成功-表示請求已被成功接收
3xx：重定向-要完成請求必須進行更進一步的操做
4xx：客戶端錯誤-請求有語法錯誤或請求沒法實現
5xx：服務端錯誤-服務器未能實現合法的請求

http常見的狀態碼

200 OK:客戶端請求成功
206 Partial Content: 客戶發送一個帶有Range（範圍）頭的GET請求，服務器完成了它
301 Moved Permanently：全部頁面已經轉移到新的url
302 Found：所請求的頁面已經臨時轉移至新的url
304 Not Modified：客戶端有緩存的文檔併發出一個條件性的請求，服務器告訴客戶，原來緩衝的文檔還能夠繼續使用
403 Forbidden：對請求頁面的訪問被禁止
404 Not Found：請求資源不存在
500 Internal Server Error：服務器發生不可預期的錯誤原來緩衝的文檔還能夠繼續使用
503 Server Unavailable：請求未完成，服務器宕機

4、javascript篇

原型鏈

一、建立對象的方法

//第一種方式：字面量
    var o1 = {name: 'o1'};
    var o2 = new Object({name: 'o2'});
    
    //第二種方式：經過構造函數
    var M = function (name) {
        this.name = name;
    };
    var o3 = new M('o3');
    
    //第三種方式：Object.create
    var p = {name: 'p'};
    var o4 = Object.create(p);
    
複製代碼

二、原型對象

每一個函數被建立的時候都會有一個prototye屬性，這個屬性會指向函數的原型對象。默認狀況下每一個原型對象又都會獲取一個constructor屬性，這個屬性包含一個指向prototype屬性所在函數的指針(指向構造函數)

//建立構造函數
    function Person (name) {
        this.name = name;
    }
    //在Person函數的原型對象上增長一個方法
    Person.prototype.sayName = function (){
        console.log(this.name)
    }
    //Person的原型對象中的constructor屬性指向Person函數
    Person.prototype.constructor===Person  //true
    //建立child實例
    var child = new Person ('xiaoming');
    child.sayName()   //xiaoming
    
複製代碼

三、原型鏈

function Foo1(){
   this.name1 = '1';
}
function Foo2(){
   this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name3 = '3';
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3)

console.dir(foo3.name1);  //1
3個函數經過__proto__連接起來造成原型鏈，繼承就是經過這個原理來的
複製代碼

四、instance of VS constructor

instanceof 原理：檢查左邊對象與右邊對象是否在同一條原型鏈上。
constructor原理：取對象的proto屬性指向的prototype對象上的constructor字段。

五、new運算符的原理

建立一個空對象，它的__proto__等於構造函數的原型對象（能夠用Object.create()完成）
構造函數以第1步建立的對象作爲上下文，是否會返回一個對象
若第2步返回了對象，則使用該對象做爲新實例，不然用第1步建立的對象做爲新實例

var myNew = function (func) {
    var o = Object.create(func.prototype)
    var i = func.call(o)
    return typeof i === 'object' ? i : o
}
複製代碼

六、繼承

js要實現繼承，咱們須要一個父類，代碼以下：

// 定義一個動物類
function Animal (name) {
    // 屬性
    this.name = name || 'Animal';
    // 實例方法
    this.sleep = function(){
        console.log(this.name + '正在睡覺！');
    }
}
// 原型方法
Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃：' + food);
};
複製代碼

一、原型鏈繼承

核心：將父類的實例做爲子類的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//&emsp;Test Code
var cat = new Cat();
console.log(cat.name);  //cat
console.log(cat.eat('fish')); //cat正在吃：fish
console.log(cat.sleep());   //cat正在睡覺！
console.log(cat instanceof Animal);  //true 
console.log(cat instanceof Cat);    //true
複製代碼

特色：

父類原型上的屬性方法，子類都能訪問到
實現簡單

缺點：

一、來自原型對象的全部屬性被全部實例共享
二、建立子類實例時，沒法向父類構造函數傳參

二、構造函數繼承

核心：就是子類構造函數內部調用父類構造函數（使用call或者apply方法）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);  //Tom
console.log(cat.sleep());  //Tom正在睡覺
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
複製代碼

特色：

一、建立子類實例時，能夠向父類傳遞參數
二、能夠實現多繼承（call多個父類對象）

缺點：

一、只能繼承父類的屬性方法，不能繼承原型對象的屬性方法
二、每一個子類都有父類函數的屬性方法，影響性能

三、組合繼承

核心：經過原型鏈實現對原型屬性和方法的繼承，經過構造函數來實現對實例屬性的繼承。

function Cat(name){
  Animal.call(this); //第一次調用父類
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();  //第二次調用父類
//改變構造函數的指向
Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name); //Tom
console.log(cat.sleep());//Tom正在睡覺！
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
複製代碼

特色：

一、避免了原型鏈和構造函數的缺陷，融合了二者的優勢

缺點：

一、調用了兩次父類構造函數

四、寄生組合式繼承

核心：經過寄生方式，砍掉父類的實例屬性

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 建立一個沒有實例方法的類
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //將實例做爲子類的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);  //Tom
console.log(cat.sleep()); //Tom正在睡覺！
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
複製代碼

特色：

解決組合繼承調用兩次父類的缺陷

七、封裝

blog.csdn.net/CCwm0129/ar…

閉包

閉包就是可以讀取其餘函數內部變量的函數，或者子函數在外調用，子函數所在的父函數的做用域不會被釋放

this的指向

JS中的this不是指向定義他的位置，而是在哪調用它它就指向哪裏，箭頭函數中的 this 是依賴於所在函數的上下文的，相似於繼承的關係。

5、通訊類

什麼是同源策略？

同源策略限制從一個源加載的文檔或腳步如何與來自另外一個源的資源進行交互（協議、域名、端口這3個構成一個源）。這是一個用於隔離潛在惡意文件的關鍵的安全機制

限制的內容

Cookie、LocalStorage和IndexDB沒法讀取
DOM沒法獲取
AJAX請求不能發送

跨域通訊的幾種方式

JSONP
Hash
postMessage
WebSocket
CORS

一、JSONP

原理：利用script標籤的異步加載來實現的，script標籤src屬性中的連接能夠訪問跨域的js腳本，利用這個特性，服務端再也不返回JSON格式的數據，而是返回一段調用某個函數的js代碼，在src中進行了調用，這樣實現了跨域。

舉個例子：

function test(data){
    //打印後端傳過來的數據
    console.log(data) //data爲{a:1,b:2}
}
var url="http://www.x.com/test?callback=test"//向x.com/test告訴他要調用的函數名是「test」
//後臺攔截到callback，知道要生成一個調用方法，方法名是test，並傳遞參數，後臺處理生成以下（數據虛構）
test({a:1,b:2})
//而後前端經過script標籤去訪問並執行，上面的東西
var script = document.createElement('script');
    script.setAttribute('src', url);
// 把script標籤加入head，此時調用開始
document.getElementsByTagName('head')[0].appendChild(script); 
//而後就會調用頁面的test方法，這就是jsonp的實現原理。
複製代碼

把js封裝成一個通用組件

function myjsonp(URL,callback,callbackname){
	//給系統中建立一個全局變量，叫作callbackname，指向callback函數
	//定義
	window[callbackname] = callback;
	//建立一個script節點
	var oscript = document.createElement("script");
	//和image不同，設置src並不會發出HTTP請求 
	oscript.src = URL;
	oscript.type = "text/javascript";
	//script標籤的請求是在上樹的時候發出，請求的是一個函數的執行語句
	document.head.appendChild(oscript);
	//爲了避免污染頁面，瞬間把script拿掉
	document.head.removeChild(oscript);
}


//使用
myjsonp("http://sclub.jd.com/productpage/p-1217508-s-0-t-3-p-1.html?callback=abcdefg",function(data){
	console.log(data);
},"abcdefg");

複製代碼

二、hash

原理：原理是利用location.hash來進行傳值。

//利用hash,場景是當前頁面A經過iframe或frame嵌入了跨域的頁面B
//在A中的僞代碼以下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';

//在B中的僞代碼以下：
//onhashchange事件是用來監聽當前頁面的hash有沒有改變
window.onhashchange = function () {
    var data = window.location.hash;
}
複製代碼

三、postMessage

舉例來講，父窗口http://a.com向子窗口http://b.com發消息，調用postMessage方法就能夠了

a頁面

<iframe id="frame1" src="http://127.0.0.1/JSONP/b.html" frameborder="1"></iframe>
document.getElementById('frame1').onload = function(){
    //contentWindow返回的是iframe的window對象，因此後面能夠接着調用document方法
    var win = document.getElementById('frame1').contentWindow;
    win.postMessage("我是來自a頁面的","http://127.0.0.1/JSONP/b.html")
}
複製代碼

b頁面

window.onmessage = function(e){
    e = e || event;
    console.log(e.data);//我是來自a頁面的數據
    console.log(e.source);//發送消息的窗口對象
    console.log(e.origin);//發送消息窗口的源
}
複製代碼

四、WebSocket

WebSocket protocol是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通訊，同時容許跨域通信，是server push技術的一種很好的實現

五、CORS

整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。

所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

參考資料：www.ruanyifeng.com/blog/2016/0…

6、安全類

CSRF

一、基本概念

CSRF,即(Cross-site request forgery), 中文名爲跨站請求僞造。是一種挾持用戶在當前已登陸的Web應用程序上執行非本意的操做的一種攻擊方式。

二、攻擊原理

舉個例子：當用戶經過身份認證登陸了網站A，這時候網站A的cookie會保存在瀏覽器中，而後用戶又訪問了網站B，這時候網站B會有一個引誘點擊，這個引誘點擊每每是個連接，這個連接指向的就是網站A的API接口，由於瀏覽器會自動上傳cookie，當網站A對身份從新確認發現是合法用戶，因此就執行這個接口的動做。

綜上所訴：要完成一個CSFR攻擊，受害者必須依次完成兩個步驟

一、登陸受信任的網站A，並在本地生成Cookie
二、在不登出A的狀況下，訪問了危險網站B

三、防護措施

Token驗證：CSRF原理中訪問漏洞接口的時候瀏覽器只上傳了cookie，沒有手動的上傳一個token。這個token是用戶登陸註冊甚至只是訪問網站A，服務器會自動向用戶本地存儲一個token，在用戶訪問各個接口的時候，若是沒帶這個token，服務器就不會經過驗證。因此當用戶點擊引誘連接，這個連接只會自動攜帶cookie，可是不會自動攜帶token

Referer驗證（Referer指的是頁面來源）：服務器經過判斷頁面來源是否是本身站點的頁面來源，若是是就執行接口動做，若是不是一概攔截。

XSS

一、基本概念

XSS就是跨域腳本攻擊

二、攻擊原理

反射型：發出請求時，XSS代碼出如今URL中，做爲輸入提交到服務器端，服務器端解析後響應，XSS代碼隨響應代碼一塊兒傳給瀏覽器，最後瀏覽器解析執行XSS代碼。整個過程像一次反射，故叫反射型XSS

儲存型：也叫持久型XSS，主要是將XSS代碼發送到服務器（無論是數據庫、內存仍是文件系統等。），而後在下次請求頁面的時候就不用帶上XSS代碼了

三、防範措施

對重要的cookie設置httpOnly, 防止客戶端經過document.cookie讀取cookie。服務端能夠設置此字段
是服務端要進行過濾

7、算法篇

排序（快速排序、冒泡排序、選擇排序）
遞歸

排序

###一、快速排序

原理：

在數據集之中，選擇一個元素做爲「基準」。
全部小於「基準」的元素，都移到「基準」的左邊，全部大於「基準」的元素，都移到「基準」的右邊。
對「基準」左邊和右邊的兩個子集，不斷重複第一步和第二步，直到全部子集只剩下一個元素爲止。

var quickSort = function(arr) {
    
        //若是數組長度小於等於1無需判斷直接返回便可
        if (arr.length <= 1){ return arr; }
        
        var pivotIndex = Math.floor(arr.length / 2);
        
        //取基準點的值,splice(index,1)函數能夠返回數組中被刪除的那個數
        var pivot = arr.splice(pivotIndex, 1)[0];
        console.log(pivot)
        var left = [];
        var right = [];
        
        for(var i = 0; i < arr.length; i++){
            if (arr[i] < pivot){
                left.push(arr[i]);
            } else {
                right.push(arr[i]);
            }
        }
        
        //遞歸執行以上操做,對左右兩個數組進行操做，直到數組長度爲<=1； 
        return quickSort(left).concat([pivot], quickSort(right));
    }
複製代碼

二、冒泡排序

原理：

1.比較相鄰的兩個元素，若是前一個比後一個大，則交換位置。
2.第一輪的時候最後一個元素應該是最大的一個。
3.按照步驟一的方法進行相鄰兩個元素的比較，這個時候因爲最後一個元素已是最大的了，因此最後一個元素不用比較

function bSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len-1; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
         // 相鄰元素兩兩對比，元素交換，大的元素交換到後面
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }
    }
  }
  return arr;
}

//舉個數組
myArr = [20,18,27,19,35];
//使用函數
bSort(myArr)//[18,19,20,27,35]
複製代碼

三、選擇排序

原理：

把每個數都與第一個數比較，若是小於第一個數，就把它們交換位置；這樣一輪下來，最小的數就排到了最前面；重複n-1輪，就實現了選擇排序

function selectSort (arr) {
        var len = arr.length;
        var temp;
        for(var i=0; i<len-1; i++){
            for(var j=i+1; j<len; j++){
                if(arr[i]>arr[j]){
                    //互換位置
                    temp = arr[j];
                    arr[j] = arr[i];
                    arr[i] = temp;
                }
            }
        }
        return arr;
    }
    
    var oldArr = [3,9,4,5,2,8];
    selectSort(oldArr); //[2, 3, 4, 5, 8, 9]
複製代碼

遞歸

www.cnblogs.com/huangshikun…

8、渲染機制

blog.csdn.net/buzhibujuel…

9、js運行機制

js的單線程機制

概念：簡單地說就是同一時間只能作一件事，當有多個任務時，只能按照一個順序一個完成了再執行下一個

任務隊列

任務隊列能夠分紅兩種，一種是同步任務（synchronous），另外一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務能夠執行了，該任務纔會進入主線程執行。

一、全部同步任務都在主線程上執行，造成一個執行棧（execution context stack）
二、主線程以外，還存在一個"任務隊列"，只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件
三、一旦"執行棧"中的全部同步任務執行完畢，系統就會讀取"任務隊列"，看看裏面有哪些事件。那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行
四、主線程不斷重複上面的第三步

舉個例子：

console.log(1)  //這個是同步任務，放入主線程裏
    
setTimeout(function(){ //這個是異步任務，放入任務隊列中，等同步任務執行完畢，才能執行
    console.log(2)
},0)

console.log(3) //這個是同步任務，在主線程裏

//運行結果是132
複製代碼

Event Loop

主線程從任務隊列中讀取事件，這個過程是循環不斷的，因此整個的這種運行機制又稱爲Event Loop(事件循環)

異步任務的執行順序準確的劃分方式是：

宏任務（macro-task）：包括總體代碼script，setTimeout，setInterval
微任務（micro-task）：Promise，process.nextTick

舉個例子：

setTimeout(function(){
     console.log('定時器開始啦')
 });
 
 new Promise(function(resolve){
     console.log('立刻執行for循環啦');
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log('執行then函數啦')
 });
 
 console.log('代碼執行結束');
 
 //執行結果是：立刻執行for循環啦 > 代碼執行結束 > 執行then函數啦 > 定時器開始啦
 
 //執行原理是：
首先執行script下的宏任務,遇到setTimeout,將其放到宏任務的【隊列】裏

遇到 new Promise直接執行,打印"立刻執行for循環啦"（Promise函數體裏面是同步任務）

遇到then方法,是微任務,將其放到微任務的【隊列裏】

打印 "代碼執行結束"

本輪宏任務執行完畢,查看本輪的微任務,發現有一個then方法裏的函數, 打印"執行then函數啦"

到此,本輪的event loop 所有完成。


下一輪的循環裏,先執行一個宏任務,發現宏任務的【隊列】裏有一個 setTimeout裏的函數,執行打印"定時器開始啦"
複製代碼

10、頁面性能

提高頁面性能的方法有哪些？

資源壓縮合並，減小HTTP請求
非核心代碼異步加載
利用瀏覽器緩存
使用CDN
預解析DNS

非核心代碼異步加載

一、異步加載的方式

動態腳本加載
script標籤使用defer屬性
script標籤使用async屬性

二、異步加載的區別

defer是在HTML解析以後纔會執行，若是多個，按照加載的順序依次執行
async是在加載以後當即執行，若是多個，執行順序和加載順序無關

瀏覽器緩存

瀏覽器緩存：「分爲強制緩存和協商緩存」，當客戶端向瀏覽器發送請求的時候，若是沒有緩存則直接請求服務器。若是有則根據緩存狀態來是否從緩存中獲取對應的文件

做用：

減小冗餘的數據傳輸
減小服務器負擔
加快客戶端加載網頁的速度

一、強制緩存

利用Expires和Cache-Control兩個字段來控制

expires:是緩存過時時間（即資源過時時間），是個絕對值。因此若是客戶端更改時間，會致使緩存混亂。因此http:1.1增長了cache-control：max-age 字段,它是一個相對的時間

Cache-Control與Expires能夠在服務端配置同時啓用，同時啓用的時候Cache-Control優先級高。

Control:max-age=3600，表明着資源的有效期是3600秒

二、協商緩存

協商緩存涉及到兩組header 字段。

Etag和If-None-Match

Last-Modified和If-Modified-Since
複製代碼

Etag和If-None-Match

他們返回的是一個校驗碼，是個hash值。Etag可以保證資源都是惟一的，是客戶端請求服務器的時候服務器返回的。若是資源變化了Etag也會發生變化。當再次請求服務器的時候服務器根據瀏覽器上送的If-None-Match（以前服務器返回的etag值）值來判斷是否命中緩存。

Last-Modified和If-Modified-Since

瀏覽器第一次請求一個資源的時候，服務器返回的header中會加上Last-Modify，Last-modify是一個時間標識該資源的最後修改時間，例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。
當瀏覽器再次請求該資源時，request的請求頭中會包含If-Modify-Since，該值爲緩存以前返回的Last-Modify。服務器收到If-Modify-Since後，根據資源的最後修改時間判斷是否命中緩存。
若是命中緩存，則返回304，而且不會返回資源內容，而且不會返回Last-Modify。
Last-Modified與ETag是能夠一塊兒使用的，服務器會優先驗證ETag，一致的狀況下，纔會繼續比對Last-Modified，最後才決定是否返回304。