前端知識回顧

時間 2019-11-11

標籤前端知識回顧简体版

原文原文鏈接

2017-1-17javascript

(面試題：http://www.qdfuns.com/notes/35376/2fada0407dae579a95d1622436f5e0ab.html)css

（前端面試，大漠：http://www.w3cplus.com/css/write-to-front-end-developer-interview.html）html

（html5：http://blog.csdn.net/baihuaxiu123/article/details/51585718）前端

（乾貨：http://tools.jb51.net/table/javascript_event）html5

js篇：java

*做用域、做用域鏈node

每當去執行函數的時候，函數就會建立一個本身的執行環境，這個執行環境就是一個做用域；當函數被定義的時候，函數就建立了一個內部屬性[scop]，css3

[scop]裏面包含的就是一個做用域鏈，這個做用域鏈就是一個指向變量對象的指針列表；函數被建立的時候做用域鏈中只包含全web

局變量對象，函數被執行時，當前的活動對象就被添加到做用域鏈的最前端。做用域鏈決定了哪些變量能夠被訪問到。面試

當訪問一個函數中的標識符時，首先會從做用域鏈的前端開始查找，若是做用域鏈的前端不存在該標識符，就會沿着做用域鏈向上一個包含環境查找，直到

查找到全局變量環境。

*閉包，閉包的做用，爲何閉包不會被回收變量和函數

閉包：可以訪問另外一個函數中的變量的函數；

閉包的做用：

在函數外部訪問函數內部中的變量

將函數內部中的變量保存在內存中

閉包的應用場景：

模仿塊級做用域，避免變量污染全局執行環境

建立私有變量和函數，向外提供公共接口來訪問私有變量和函數

垃圾回收機制：

垃圾回收機制的方式有兩種：標記清除和引用計數。

經常使用的是標記清除，垃圾收集器在運行時，首先會將內存中的全部變量都加上標記，而後會給環境中的變量以及被環境中的變量引用的變量去掉標記；最後標記了的變量

都是再也不須要了的變量，垃圾收集器最後會將這些標記了的變量的內存回收。

不經常使用的是引用計數，引用計數即跟蹤記錄每一個值被引用的次數，只有變量的引用次數爲0時，變量纔會被垃圾收集器回收；在ie9以前的ie中，BOM與DOM對象都是以

COM對象的形式實現的，COM垃圾回收機制是基於引用計數策略。引用計數策略容易致使循環引用的問題，變量沒法被垃圾收集器回收，從而引發內存泄露的問題。

將被引用的變量設置爲null，解除引用。將變量設置爲null的目的是讓變量與變量以前引用的值斷開鏈接，垃圾回收器再下次運行時能夠回收變量的佔用的內存。

爲何閉包不會被回收變量和函數:

若是閉包在全局環境中一直被引用着，閉包的函數和變量就不會被回收。局部環境中的變量在離開執行環境以後會自動被解除引用，而全局變量在不須要的時候

須要手動解除引用。

註釋部分，沒有保存外部環境變量中的this，訪問的是全局環境中的name，函數被調用時，函數活動對象中包含了this，arguments、命名參數、局部變量；

因此在查找this的時候只會查找到活動對象爲止，this指向的是函數的直接調用者，匿名函數被調用是在全局環境中，因此this===window。

var name = "The window";
var object = {
	name : "my object",
	getNameFunc : function() {
		var that = this;
		return function() {
		//	return this.name;//The window
          return that.name;//my object
		};
	}
//  getNameFunc : function() {
//	     return this.name;//my object
//	}
};

//console.log(object.getNameFunc());
console.log(object.getNameFunc()());

   var message = "ok";
		var hander = {
			message: "event hander",
			handleClick: function() {
//				return function () {
					console.log(this.message);
//				};
				
			}
        };
//      hander.handleClick()();
       var btn = document.getElementById("btn");
       btn.addEventListener('click', hander.handleClick);//undefied
       btn.addEventListener('click', function() {
       	    hander.handleClick();//event hander
       });

this指向函數的直接調用者

* 內存泄露，何時會發生內存泄露，如何防止內存泄露。

* 函數聲明和函數表達式

非嚴格模式下，函數聲明方式定義的函數能夠在函數定義前調用，函數表達式定義的函數不能夠在函數定義前調用。

函數聲明後面不能直接跟圓括號，函數表達式能夠。

匿名函數後面不能直接跟圓括號，JavaScript會將function關鍵字看成函數聲明的開始。能夠將函數聲明轉化成函數表達式。外面加括號。

* 函數聲明提高和變量聲明提高的區別

函數聲明提高和變量聲明提高都是在代碼執行以前優先被處理，若是函數名和變量名是同一標識符，函數聲明會覆蓋變量聲明，無論

二者的順序如何，可是函數聲明不會覆蓋變量賦值。

var a;
 var c = 1; 
a = 1; 
function a() { return true; } 
console.log(a);
 //1
//undefined

var a;
 var c = 1;  
console.log(a);
 a = 1;
 function a() { return true; }
//function a() { return true; }
//1

*什麼是面向對象編程

面向對象編程首先實現的是一個類，這個類裏面包含的是這一類對象所共有的屬性和方法；

面向對象具備封裝、繼承、多態的特色；

面向對象編程的好處是：將某一類對象所具備的特性封裝起來，再須要這個類的某個特性的時候，直接去調用對應的接口，不須要再關心功能實現的具體細節。

封裝以後的程序，能夠複用，節省了開發成本，提升開發效率。

*建立對象的幾種方式

字面量

工廠模式： new 一個object類型對象，而後給對象添加屬性和方法（解決了建立多個類似對象建立問題，但沒解決對象識別的問題）

構造函數模式：建立有參的構造函數，經過this來指定上下文（公共方法沒法複用）

原型模式：建立一個構造函數，而後在函數的原型上定義屬性和方法（包含的引用對象，例如數組，那麼一個實例對這個數組作了改變，其餘實例上也能反應出來）

構造函數模式和原型模式的組合模式（將每一個實例都須要擁有一份的變量定義在構造函數中，將公共變量或方法定義在原型對象上）

* 原型、原型鏈

* 繼承，如何實現繼承

子類原型指向父類實例

子類構造函數中經過apply方法來繼承父類構造函數

* 如何判斷一個對象是否屬於某一個類

instanceOf用來檢測引用類型

isPrototypeOf用於判斷某個對象是否包含指向某個類型對象的指針，從而來判斷對象類型。

* 如何判斷一個屬性是在實例對象上仍是在實例原型上

用hasOwnProperty（）判斷某個實例對象是否包含某個屬性

* 函數的幾種調用方式

經過函數名直接調用，this指向window

函數做爲對象中的一個方法來調用，this指向函數的直接調用者

new關鍵字來調用構造函數，this指向new出來的對象，指向當前構造函數的原型

經過apply/call來調用函數，第一個參數爲null時，this指向window；爲對象時，this指向這個對象

* apply/call的區別

都是用來在特定做用域中調用函數。

第一個參數都爲對象（運行函數的做用域），主要區別是其餘的參數的傳遞形式不同；

apply接受兩個參數，第二個參數能夠是Array實例，也能夠是arguments對象

call方法傳遞給函數的參數必須逐個傳遞

使用場景（傳遞參數、擴充函數運行的做用域）：

在子類構造函數中經過call/apply調用父類構造函數，實現繼承

arr.push.apply(arr, arguments);將一個包含參數的僞數組直接添加到一個數組裏面

* bind()

返回一個在指定做用域中運行的函數的函數

實現原理：就是經過apply來指定函數運行的做用域

使用場景：事件處理（this指向當前點擊對象）、setTimeout/setInterval(this指向window)

*this對象的理解
this指向new關鍵字建立的對象；（調用構造函數，若是沒有加new關鍵字，就會建立全局變量）

this指向函數的直接調用者；

this指向當前點擊的事件對象，可是在ie中採用attachEvent處理的事件處理程序，this指向的是window。（這也是ie事件處理程序與dom0事件處理程序的區別）

* new關鍵字都作了什麼

建立一個新對象、this對象指向這個新對象、爲新對象添加屬性和方法、返回新對象。

=============================================================================================

* 事件、事件流、ie與火狐事件處理的區別

事件流，即從頁面中接收事件的順序

ie事件流中沒有事件捕獲階段，只有事件冒泡；火狐中有事件處理分三個階段：捕獲階段、處理目標、事件冒泡

標準瀏覽器（包括火狐）在添加事件、刪除事件、阻止默認行爲、阻止事件冒泡、獲取事件對象、獲取目標對象上與舊版本ie都有區別

標準瀏覽器經過addEventListener添加事件處理程序、removeEventListener刪除事件處理程序；

ie瀏覽器對應的是attachEvent、detachEvent；

標準瀏覽器獲取目標對象是經過target屬性，ie是經過srcElement

ie的事件處理程序的事件對象指向的是window，而不是當前的點擊對象

標準瀏覽器阻止默認行爲是經過preventDefult(),而ie是經過將屬性returnValue設置爲false

阻止冒泡是經過stopPropagation(),ie是經過將cancelBubble設置爲true

* JavaScript的事件模型

原始事件模型：即經過on+事件名的形式來處理的事件

捕獲事件模型：即指事件從Document傳遞直到目標對象（事件發生地）

冒泡事件模型：與捕獲相反，事件是從目標對象到Document

* 編寫一個通用的事件機制

* js事件總結

一、事件分爲dom0級事件和dom2級事件：

dom0級事件即經過on加事件名稱的方式來添加事件處理程序，全部的瀏覽器都兼容

dom2級事件即經過addEventListener方式來添加事件處理程序，高版本瀏覽器才兼容

兼容Dom的瀏覽器都會將event對象傳入到事件處理程序中

（addEventListener第三個參數爲true，事件在捕獲階段調用事件處理程序；爲false，事件在冒泡階段調用事件處理程序）

二、事件流又分爲事件冒泡和事件捕獲：

全部的瀏覽器都具備事件冒泡

只有高版本瀏覽器才具備事件捕獲，ie8及ie8以前的瀏覽器都只有事件冒泡，沒有事件捕獲

三、ie與火狐瀏覽器處理事件的區別：見上面

添加、刪除事件處理方式不同

獲取事件對象、目標元素不同

阻止冒泡、阻止默認行爲不同

四、onclick方法能夠兼容任何瀏覽器，添加addEventListener、attachEvent的好處是能夠爲同一個元素綁定多個事件處理程序

onclick在給一個元素綁定多個事件處理程序時，以最後一個事件處理程序爲準

addEventListener在爲同一個元素綁定多個事件處理程序時，事件的執行順序，是代碼的書寫順序

attachEvent在高版本ie瀏覽器中同addEventListener處理多個事件處理程序同樣，在ie8及以前的瀏覽器中執行順序正好相反

五、爲何要有事件捕獲？事件冒泡？

獲取的事件可能在目標對象以前，或是以後。

* 事件代理（委託）

事件代理就是利用了事件冒泡的原理，事件處理程序綁定在父元素上，經過事件冒泡原理，點擊子元素能夠觸發父元素上的事件處理程序。

好處：對於須要爲一個元素的多個子元素綁定事件處理元素的狀況，經過事件代理只需在父元素上添加一個事件處理程序來處理。佔用內存更少，程序性能更好。

*==與===的區別

==是等同，===是徹底相等

===，在比較兩個基本類型的值時，值的類型相等、值相等即相等

==，在比較兩個不一樣類型的值時，這兩個值仍然有可能相等；在比較兩個不一樣類型的值時，有一個隱式轉化的過程，

字符串和數字進行比較，會先將字符串轉化數字而後再比較；true會轉化爲1再與數值比較，false轉化成0再與數值比較；

==比較null和undefined返回true，===比較null和undefined返回false。

NAN永遠不會和其餘任何值相等包括它自身。

* 類型轉化

* 如何檢測JavaScript數據類型

typeof通常用來檢測基本數據類型，可是null通常用===/!==來判斷；

instanceOf通常用來檢測引用類型，可是檢測function的最好的方式是用typeOf，能夠跨幀檢測；

檢測數組用Array.isArray或Object.protypeof.toString.call()，二者均可以跨幀使用，可是前者

存在兼容性的問題，ie9以前的瀏覽器不兼容。

* 經過點屬性名的形式添加的自定義屬性，除了ie瀏覽器，其餘瀏覽器都不能經過 getAttribute（）方法來獲取自定義的屬性的值

* setInterval與setTimeOut的區別，以及它們的原理

* 程序、線程與進程（http://www.qdfuns.com/notes/17659/7cb0a395fea126caceeb64909b594b0f.html）

http://www.cnblogs.com/way_testlife/archive/2011/04/16/2018312.html

javascript爲何是單線程：http://www.cnblogs.com/zhongxinWang/p/4334510.html

* 嚴格模式

超時調用的方法運行在全局環境中，非嚴格模式下，this等於window，嚴格模式下this等於undefined

（關於網絡：http://www.cnblogs.com/haoyijing/p/5898420.html#html8）

==================================================================================================

* ajax的執行過程

建立一個異步請求對象；初始化請求，指定請求的方式、url、是否爲異步請求；而後建立一個響應請求變化的函數；若是是post請求，要設置頭信息（設置發送的內容類型）；

最後發送請求。獲取異步請求返回的數據，最後經過JavaScript和DOM實現局部刷新。

* get請求與post請求的區別

二者都是數據請求的方式；

get的數據是經過網址後面加？加參數的形式來傳遞數據，而post的數據是經過HTTP包體傳遞數據的。

get傳遞數據是有限制的，而post沒有；

get的安全性可能沒有post高，因此通常用get來獲取數據，post修改數據。

=======================================================================

* http協議的理解（http://www.tuicool.com/articles/Ufmy6j）

http即超文本傳輸協議，它是基於請求/響應模式的、無狀態的、應用層的協議。

http的主要特色：

一、基於請求/響應模式

二、簡單快速

三、靈活

四、無鏈接

五、無狀態

http的工做流程：

創建TCP/IP鏈接，客戶端與服務器端經過socket三次握手創建鏈接；

而後客戶端向服務端發送http請求（請求行：請求的方式、請求路徑、http協議的版本）；

其次客戶端向服務端發送請求頭、請求內容；

服務器接受請求，而後給客戶端做出應答（發送響應行，響應行：http協議的版本、狀態碼、狀態碼文本描述）；

其次服務器向客戶端發送響應頭、響應內容；

服務器關閉tcp鏈接，若是客戶端頭部或服務器端頭部添加了connection爲keep-alive，客戶端與服務器端的鏈接會繼續保持，

在下次請求時會繼續使用此次的鏈接。

http請求由三部分組成：請求行、消息報頭、消息正文

http響應：響應行、響應報頭、響應正文

通用首部：

date 消息發送時間

cache-control指定客戶端和服務器遵循的緩存機制

pragma：同cache-control一致

connection容許客戶端或服務器端任何一方經過設置該字段來肯定在請求響應完成以後，是關閉TCP鏈接仍是繼續保持TCP鏈接

upgrade用來指定徹底不一樣的通訊協議

請求報文包含的字段：

accept：瀏覽器可以處理的內容類型

accept-ecoding：瀏覽器可以處理的壓縮編碼

accept-charset：瀏覽器可以處理的字符集

accept-language：瀏覽器當前設置的語言

host：當前頁面所在的域

referer：發出請求的頁面的uri

use-angent：瀏覽器的用戶代理字符串

authorization：受權信息

if-none-mach

if-modified-since

響應報文包含的字段：

server：數據的服務器類型

x-powered-by：自定義的響應頭

vary：告訴下游代理是使用緩存數據仍是從原始服務器請求

set-cookie

ETag: 緩存有關的頭

Last-modified: 請求資源的最後修改的時間

請求消息和響應消息均可以包含實體，因此均可能包含的實體頭部字段有：

content-type：消息類型

content-length：消息長度

content-encoding：消息的壓縮類型

expires：設置資源的緩存時間

狀態碼：

============================================================================================

* 關於客戶端存儲：

cookie的結構： cookie中的變量經過"屬性=值"的形式保存

響應的cookie保存在set-cookie字段裏面

字段的組成：

名稱：惟一標識cookie

值

有效時間： cookie的過時時間

域： cookie在哪些域下有效

路徑：指定域下的那個路徑，在向服務器發送請求時，要發送cookie

安全標示：cookie只有在使用ssl鏈接的時候才發送給服務器

名稱和值是必須有的字段，且必須被URL編碼（encodeURIComponent編碼）

cookie的限制：

cookie綁定在特定的域名下，在建立了cookie以後，在給建立它的域名發送請求時，都會包含這個cookie。

將cookie綁定在特定域下，是出於安全性考慮，確保cookie中的信息只有批准的接受方纔能訪問。

每一個域下的cookie總數是有限的，不一樣的瀏覽器之間各不一樣，有的瀏覽器下沒有限制，有的每一個域下最多50個cookie，有

的30個cookie。

爲何要限制每一個域下cookie數量：

由於cookie是存在客戶端的計算機中，有限制是爲了確保cookie不會被惡意使用，同時不會佔用太多內存。

cookie在不設置過時時間時默認生命週期爲會話時間，cookie存在內存中；設置過時時間，cookie存在計算機的磁盤中。

cookie的應用場景以及安全問題：

記錄用戶的登陸狀態、用戶的瀏覽信息等

爲何要有cookie和session：

http協議是無狀態的，對事務處理沒有記憶功能；cookie和session的存在是爲了用於客戶端的狀態管理。

例如：記錄用戶的登陸狀態，將用戶的用戶名和密碼經過加密以後存在cookie中。

爲何要限制cookie大小：

由於cookie會經過http請求發送給服務器，cookie越小對傳輸性能的影響就越小。

cookie與session的區別：

cookie、localstorage、sessionstorage的區別：

獲取、設置cookie的方法：

var CookieUtil = {
	
	getCookie: function ( name ) {
		
		var cookieName = decodeURIComponent( name ) + "=";
		var cookieStart = document.cookie.indexOf( cookieName );
		var cookieValue = null;
		
		if ( cookieStart > -1) {
			
			var cookieEnd = document.cookie.indexOf(";", cookieStart);
			if (cookieEnd === -1) {
              cookieEnd = document.cookie.length;
			}
			cookieValue = decodeURIComponent( document.cookie.substring(cookieStart + cookieName.length, cookieEnd) );
			
		}
		return cookieValue;
	},
	
	setCookie: function (name, value, expires, path, domain, secure) {
		
		var cookieText = encodeURIComponent( name )+ "=" +
		                 encodeURIComponent( value );
		                 
		if ( expires instanceof Date ) {
			cookieText += "; expires=" + expires.toGMTString();
		}
		
		if ( path ) {
		  cookieText += "; path=" + path;	
		}
		
		if ( domain ) {
			cookieText += "; domain=" + domain;
		}
		
		if ( secure ) {
			cookieText += "; secure=" + secure;
		}
		
		document.cookie = cookieText;
	},
	
	unset: function( name, path, domain, secure ) {
		this.set(name, "", new Date(0), path, domain, secure);
	}
};

===========================================================================================

* 關於緩存

禁止瀏覽器緩存資源的方式：

將expires設置爲0或-1

cache-control設置爲 no-cache

pragma設置爲no-cache

瀏覽器緩存就是瀏覽器端保存數據用於快速讀取或避免重複性地請求資源的一種優化機制

一、http緩存，基於http協議的瀏覽器文件級緩存機制。

強緩存和協商緩存的命中管理過程：

當瀏覽器下載資源時，首先會根據資源的http頭部信息判斷資源是否命中強緩存，若是命中強緩存，瀏覽器就會直接從本身的緩存中調用資源，不會再將請求

發送到服務器；

若是沒有命中強緩存，就會將請求發送到服務器，而後根據http頭部中的信息判斷是否命中協商緩存，若是命中，就會向瀏覽器返回請求，可是不會返回資源，

而是告訴瀏覽器能夠直接從緩存中下載該資源；若是未命中，就從服務器中加載資源數據。

強緩存和協商緩存的共同點及區別：

共同點是：命中都從瀏覽器緩存中加載資源

區別：強緩存不發請求到服務器，協商緩存要發請求到服務器

強緩存：

經過給http 響應頭中設置expries或cache-control字段來實現

expries即給資源設置過時時間，設置的是絕對時間，時間設置取決於服務器，http1.0提出的，原理：

一、瀏覽器第一次向服務器請求資源時，服務器成功處理請求，並將資源返回給瀏覽器的同時，會將expires字段添加到響應頭中

二、瀏覽器接受到服務器返回的資源，會將資源連同全部響應頭所有緩存下來

三、瀏覽器下次再請求這個資源時，會首先去緩存中查找這個資源，查找到後會將字段中的expires同當前請求的時間作比較，若是

請求時間在expries以前，就會命中緩存

四、若是沒有命中緩存，就直接去服務器加載資源，再從新設置expries的值。

cache-control：設置緩存時間，設置的是相對時間，以秒爲單位，http1.1提出的，cache-control：max-age：222222；原理：

和expries相似，只是在瀏覽器的緩存中查找到資源後，會根據第一次請求和cache-control計算出一個資源過時時間，而後再拿這

個值與當前請求的時間比較，在過時時間以前，即命中緩存；不然，請求服務器從新加載資源，同時從新更新cache-control的值。

expries與cache-control的差別：

expries設置的時間是服務器返回的時間，若是客戶端的時間與服務器端的時間不一致，最後結果就會有誤差。

而cache-control設置的是相對時間，不依賴於服務器端的時間，因此用cache-control設置緩存管理會更有效。

使用問題:

能夠同時使用，也能夠只使用其中一個

同時使用時，cache-control的優先級高於expries

協商緩存：

協商緩存就是經過ETag/ If-none-match Last-modified/If-modified-since這兩對來設置緩存

Last-modified/If-modified-since控制緩存的原理，若是修改了服務器端的時間或篡改客戶端緩存，這個協商緩存就不可靠：

一、瀏覽器第一次向服務器端請求資源時，服務器在向瀏覽器返回這個資源的同時會向響應頭中添加last-modified字段，

表示這個資源在服務器上最後修改的時間。

二、瀏覽器再次向服務器請求這個資源時，就會在請求頭部添加if-modified-since字段，這個字段的值就是上次請求時

返回的last-modified的值。

三、服務器再次收到請求，會將瀏覽器傳過來的if-modified-since與資源在服務器上最後修改的時間作比較，若是一致，

服務器返回304 not modified，不用返回資源，響應頭中也不包含last-modified，由於last-modified未改變。

四、瀏覽器接受到服務器返回的304 not modified，就會從緩存中加載資源。

五、若是協商緩存沒有命中，就向服務器請求資源，last-modified在資源從新加載的時候被更新。

ETag/ If-none-match控制緩存的原理：

一、瀏覽器第一次向服務器端請求資源時，服務器在向瀏覽器返回這個資源的同時會向響應頭中添加ETag字段，這個字段的值

是服務器根據請求的資源生成的一個惟一的標識，這個惟一的標識是一個字符串，只要資源變化這個值就不一樣。

二、瀏覽器下次再請求服務器時，就會將if-none-match字段添加到請求頭中，這個字段的值就是上次請求返回的ETag的值。

三、服務器再次收到請求，就會將請求頭中的if-none-match的值與服務器根據請求資源新生成的ETag進行比較，若是相同，就向瀏覽器

返回304 not modified，同時返回ETag（只要從新生成過就會返回，儘管沒有變化）。若是不想同，就正常返回資源。

四、瀏覽器端接收到服務器端返回的304 not modified，就從緩存中獲取資源

瀏覽器行爲對緩存的影響：

ctrl+f5刷新頁面，會跳過強緩存和協商緩存，直接向服務器加載資源

f5刷新頁面，會跳過強緩存，檢測協商緩存

（關於瀏覽器緩存：http://blog.csdn.net/longxibendi/article/details/41630389）

二、應用緩存（http://www.jianshu.com/p/98cd7a6985ac）

HTML5的appcache，專門爲開發離線web應用而設計的

一、建立一個後綴爲manifest的描述文件，描述文件中包含須要下載和緩存的文件

CACHE MANIFEST

#Comment（註釋）

XX.js //須要緩存的資源

xx.css

NETWORK：

xx.js //在線狀態才加載的資源

FALLBACK：

/ /index.html //備選資源路徑，第一個路徑表明任何匹配的資源都不被緩存，第二個路徑表明被緩存的資源

二、在頁面的html標籤中添加manifest，設置值爲描述文件的路徑。

注意：應用緩存被添加就不會被改變

改變應用緩存的方式：刪除描述文件、修改描述文件、刪除頁面html中的manifest屬性（不然應用緩存再資源改變以後，也不會被刷新）

======================================================================================

* 從輸入網址到頁面呈現內容這個過程當中都發生了什麼

在瀏覽器地址欄輸入地址，首先會將地址發送給DNS進行域名解析，客戶端獲取到對應的ip地址

而後向對應的網絡服務器發送http請求

傳輸到傳輸層，客戶端與服務器端創建TCP三次握手鍊接，數據包被分割

而後數據包傳輸到網絡層，經過ip地址獲取到對應的MAC地址

數據包被傳輸到數據鏈路層，而後根據接受方的MAC地址，將數據發送給服務器

服務器在鏈路層獲取到數據而後又經過層層上傳，直到應用層；這個過程包括在傳輸層TCP將數據包組合的過程

服務器在接受到客戶端發送的HTTP請求以後，查找到客戶端請求資源，並返回響應報文

客戶端成功接受到服務器端的響應，並下載資源，資源包括html文件、html中可能含有的css、js、圖片等資源

而後客戶端開始解析html，生成DOM樹

解析css，生成渲染樹

而後渲染每個節點

* 瀏覽器如何加載、解析、渲染頁面

用戶在瀏覽器地址欄輸入地址，而後將地址發送給DNS進行域名解析，獲取到對應的ip地址。

客戶端獲取到ip地址，並向ip地址對應的網絡服務器發送HTTP請求。

網絡服務器接受到客戶端的請求，並去請求數據庫服務器獲取數據。

數據庫服務器接受到請求並返回請求數據給網絡服務器，網絡服務器接受到數據，並解析生成html文件。

網絡服務器經過http response將html文件發送給客戶端。

客戶端接受服務器端的響應，並下載html文件，以及html文件中可能包含的外部引入的css文件、js文件、圖片等資源。

頁面加載順序是由上至下

在加載js文件、css文件、圖片時都分別會發送http請求來獲取資源

在加載js文件時，js會當即執行，js加載執行的時候，會阻塞後面代碼的加載執行。

在加載css文件時，不會阻塞後面的js文件的加載，可是會阻塞後面js文件的執行。

在加載圖片時，是異步加載，不會影響html文檔的加載。

解析：

客戶端在下載了html，而後解析html生成DOM樹

下載css文件，就會解析css生成css規則樹

而後根據DOM樹和css規則樹來構建渲染樹

（計算節點位置，佈局渲染樹）

最後遍歷渲染樹渲染節點

渲染樹不包括不可見元素：head、display：none的元素

DOM樹的元素和文檔中含有的標籤元素同樣。

注意：渲染引擎爲了更好的用戶體驗，html在一邊解析就在一邊被渲染(css已獲取到，若是由於網速緣由，css未被下載完成，也不會影響後面的html文檔的加載)，

而不是等到html所有加載完再渲染。

渲染：

渲染過程依賴於dom樹和css規則樹，也就是頁面渲染受到dom結構、css選擇器的寫法影響。

在查找元素匹配的css選擇器時，查找過程是從選擇器的右到左開始查找的，因此選擇器嵌套的越深查找的就越慢。

Reflow和Repaint：

Reflow：迴流或是重排，頁面某個地方發生了變化，影響了頁面佈局。頁面須要重頭開始渲染。

Repaint：重繪，頁面某個元素的樣式發生變化，可是沒有影響頁面佈局，頁面從新渲染變化的部分。

致使Reflow的條件：

操做dom，例如：刪除、修改、添加、移動dom，給dom添加動畫效果。

改變窗口大小

改變頁面字體大小

增長刪除樣式表

致使Repaint的條件：

頁面中的元素屬性發生變化，例如：改變了背景顏色，頁面佈局沒有影響，只會致使重繪。

Reflow比Repaint更耗時間。

重繪和重排都會影響用戶體驗，因此應儘可能減小頁面的重繪與重排：

一、不要一條一條的修改樣式，能夠預先定義好css的class，而後修改dom的className；

二、減小對DOM的操做

三、爲要添加動畫的html元素，設置絕對定位或固定定位，讓元素脫離文檔流（脫離文檔流的元素在另外一個渲染樹上，添加動畫不會影響文檔頁面的渲染）；

四、不要使用table佈局，table中的一個小改動，就會形成整個table的從新佈局。

（table佈局不夠靈活，不便於維護，不易於seo）

明白了瀏覽器加載、解析、渲染文件的過程，就知道如何來優化網站的文件和資源了

====================================================================

* 如何對網站的文件和資源進行優化?

一、合併文件（減小http請求），對於圖片的合併可使用css sprites將多張圖片合併成一張，而後經過background-position等css屬性來獲取

圖片（頁面請求數越多頁面加載的就越慢）。

二、壓縮文件，減小數據量（請求中傳輸數據量越小，傳輸的越快）

三、靜態資源利用cdn託管（儘量的避開互聯網上可能影響數據傳輸速度和穩定性的瓶頸和環節，解決的是internet網絡擁擠的狀態，提升用戶訪問網站的響應速度）

四、利用緩存：

服務器端設置cache-control、expries、last-modified、ETag，緩存文件。

五、將css放在頭部，js放在尾部

六、圖片設置寬高，避免頁面的重排。

七、用多個域名來存儲資源（瀏覽器同一時刻對同一個域下下載資源個數是有限制的，採用不一樣域來存儲能夠加快瀏覽器下載資源的速度）

* 前端性能優化

一、減小http請求：合併js、css、圖片等文件，減小加載資源時的請求次數，節省網絡請求時間，加快頁面的加載

二、靜態資源採用cdn託管：儘量避開網絡上影響資源傳輸速度和穩定性的瓶頸和環節，提升用戶訪問網站的速度

三、css放到頂部：頁面加載資源順序是從上到下，css放到頂部能夠優先渲染頁面，讓用戶感受頁面加載很快

四、js放到底部

五、將css、js放到外部文件中，緩存文件

六、css不要採用css表達式：表達式會持續在頁面上計算樣式，影響性能，而且表達式只被ie支持

七、壓縮文件，減少文件大小

八、使用gizp壓縮內容：gizp可以壓縮任何文本類型的響應（xml、html、json），大大縮小請求返回的數據量

九、減小對dom的操做（對dom的操做會致使頁面重排，增長瀏覽器解析負擔）

十、避免空的src、href

十一、避免404錯誤： 404錯誤會破壞瀏覽器的並行加載

十二、設置可緩存的ajax

1三、使用get方式來完成ajax請求獲取數據

1四、減小cookie大小

1五、使用無cookie的域來存放靜態資源

1六、權衡dns查找次數：大量的dns查詢，會影響頁面響應速度

1七、請求地址最後加上/,避免默認跳轉

1八、不要使用濾鏡

1九、不要再html縮放圖片：圖片須要多大就設置多大尺寸（避免頁面重排）

20、縮小favicon.ico並緩存

* 爲何利用多個域名來存儲資源會更有效？

瀏覽器在同一時間同一域下可同時下載的資源是有限的。

* 瀏覽器同一時間能夠從同一域名下載多少資源？

不一樣瀏覽器不一樣：二、四、六、8不等

=====================================================================

* 什麼是同源策略，爲何要有同源策略

同源策略主要針對的是經過XHR實現的ajax通訊

一個XHR對象只能訪問與包含它的頁面處在同一域中的資源

* 跨域

* 前端安全： xss和csrf

====================================================================

* 異步編程（http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html）

javascript執行任務的模式有兩種：同步和異步

同步和異步的區別：

異步的好處：對於很是耗時的操做應該進行異步處理，避免程序一直運行讓瀏覽器失去響應。

js提供的異步編程的方法：

回調函數：

事件監聽：

發佈與訂閱：

promise：

* 如何來獲取UA

===================================================================

* 事件：

* 事件代理：

*CMD與AMD、commentJS的區別

commentJS服務器端JavaScript的編碼規範，AMD和CMD是客戶端JavaScript的編碼規範；

commentJS經過export向外導出接口，用require來引入模塊；

AMD利用define來明肯定義模塊，經過返回的方式向外提供接口，在聲明模塊的時候，須要指定全部的依賴，一樣也是經過require來引入模塊；

define（['dep1', 'dep2'], function (dep1, dep2) {

return function () {};

}）;

CMD也是利用define來明肯定義模塊，支持動態引入依賴，require、module、exports經過形參傳遞給模塊，在須要依賴模塊時，隨時調用require()引入。

define( function( require, exports, module) {

});

（AMD與CMD的區別在於定義模塊和依賴引入部分的不一樣）

* 如何區別nodejs環境和瀏覽器環境

node環境中沒有window全局對象，全局對象爲global；瀏覽器的全局對象爲window。

* 異步編程

css3:

* 優雅降級和漸進加強

優雅降級：先實現只有高版本瀏覽器支持的功能，再針對低版本瀏覽器實現兼容

漸進加強：先針對低版本瀏覽器實現功能，再到實現只有高版本瀏覽器支持的功能，讓頁面都可以有更好的用戶體驗

* 制定一個標準的過程

* display和visiblity的區別

* box-sizing的理解（https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing）

* animation和transfrom、transition的區別

三者均可用來製做動畫效果，可是transform是一個靜態屬性，主要用於作元素的特殊變形；

transition是一個動態屬性，是animation的簡單版，它做用於元素的樣式屬性，必須須要用事件來觸發才能實現動畫效果；

animation也是一個動態屬性，它做用於元素自己，能夠利用關鍵幀keyframe來實現更自由的動畫效果，不使用事件觸發也能實現動畫效果。

==================================================================================

* BFC

塊級格式化上下文，設置爲BFC的元素中的子元素的佈局不會受容器外部元素的影響，子元素的佈局也不會影響外部元素。

生成一個BFC元素的方式：

float不爲none

overflow不爲visible

display設爲table-cell、table-capation、inline-block中的任何一個

position不爲static和relative

BFC的用處：

不讓元素與浮動元素重疊

清除元素內部浮動

避免兩個相鄰元素的垂直外邊距發生重疊

非浮動元素和浮動元素重疊原理：在BFC中，每一個元素的左邊距要與包含塊的左邊距相接觸。建立了BFC的元素不能與浮動元素重疊

普通流中的元素的子元素的高度計算方式：在普通文檔流中，元素的浮動子元素的高度不會計算在內；設爲BFC的元素在計算高度時，其浮動子元素的高度會計算在內。

相鄰兩個垂直外邊距重疊：處在同一個BFC中的兩個相鄰垂直外邊距會發生重疊，設置爲BFC的元素不會與其子元素的外邊距發生重疊。

根元素生成的是BFC元素

=====================================================================================================

* 外邊距重疊

處在普通文檔流同一環境中的兩個相鄰垂直外邊距會有重疊現象。（同一環境中的兩個浮動元素不會發生垂直外邊距重疊）

合併方式：兩個相鄰垂直外邊距相等時，合併爲一個外邊距

不相等時，取最大的那個

兩個都爲負數時，取絕對值較大的那個

一個爲正一個爲負數時，取兩個外邊距的和

外邊距重疊不只發生在兄弟元素之間，還發生在父子元素之間（普通流中的元素會和其子元素的垂直方向上的空白邊距重疊）、和自身（自身在沒有內容填充的狀況下/上邊距會重疊）。

（子元素與父元素都處在普通流中，那麼它們就是一個總體，子元素設置margin-top/margin-bottom相對的是父容器外面的元素，子元素的垂直外邊距與父元素的垂直外邊距在同一BFC中；要讓子元素的垂直外邊距與父元素的垂直外邊距在不一樣的環境中，可將父元素設置爲一個BFC的元素，設置爲BFC的元素，其子元素會按文檔流一個一個排列，垂直方向上的起始位置爲包含塊的頂部，相鄰元素垂直方向上的距離由margin決定）。

哪些元素會有外邊距重疊：普通流中塊級元素的垂直外邊距會發生合併，行內框、浮動元素或絕對定位之間的外邊距不會合並。

普通流中塊級元素的垂直外邊距會發生合併：

垂直外邊距遵循上面的合併方式（若是將子元素設置overflow：hidden結果和上面同樣）

設置爲BFC的元素的垂直外邊距不會和子元素的垂直外邊距重疊：

行內框、浮動元素或絕對定位之間的垂直外邊距不會合並：

       一、 <div style="width:400px; margin:40px;">
             <div style="background:gray; margin:20px; display: inline-block;" >6666</div>
          </div>

     二、 <div style="width:400px; height: 100px; margin:40px; ">
           <div style="background:gray; margin:20px; float: left;" >6666</div>
           </div>

三、<div style="width:400px; height: 100px; margin:40px; position: relative;">
<div style="background:gray; margin:20px; position: absolute;" >6666</div>

</div>

同2同樣，二、3由於設置float、absoulte佈局，元素會脫離文檔流不會撐開父容器，因此必須給父容器設置高度。

* nomal flow 文檔流

==================================================================================================

* 塊級元素與行內元素、行內塊級元素的區別

塊級元素老是獨佔一行，塊級元素由上至下排列，能夠設置寬、高、margin、padding值

多個行內元素在一行排列，至到一行排列不下才另起一行，不能夠設置寬、高，margin的上下邊距，和padding的上下邊距

行內塊級元素，元素佈局相似行級元素，元素中的內容佈局相似塊級元素，元素能夠設置寬、高、margin、padding（input、img、

button等都是能夠設置寬、高的行級元素）。

* 對line-height的理解

* 如何給行級元素設置高度：

塊級元素： div 、p、h1~h六、li、ul等

行級元素： a、br、strong、img、input、button、textarea等

行級元素例如：a，自己不能設置寬、高

能夠將元素display：block/inline-block 、float：left/right、position：absolute

         .floatest {
                /*margin: 20px;*/
                /*float: left;*/
                position: absolute;
                height: 100px;
                width: 100px;
                background: #FF0;
            }
            
            .floatTest2 {
                /*display: inline ;
                float: left;*/
                  margin: 20px;
                height: 100px;
                width: 100px;
                background: #FF0000;
            }

<div class="floatTest2">
	66666
</div>
<a class="floatTest"> 77777</a>

（再一次補充：設置爲inline-block或absolute定位或設置了float的元素，它們的垂直外邊距不會和相鄰的垂直外邊距發生重疊）

================================================================================================

* css的盒模型的理解

文檔中的每一個節點都會被描繪成一個矩形盒子，渲染引擎的目的就是斷定盒子的大小、背景顏色、邊框、位置等方面，盒模型由元素的margin、padding、border、

元素內容構成。

盒模型分爲2種：標準盒子模型和ie盒子模型。

兩種盒模型的區別：標準盒模型的元素的屬性寬、高不包含元素的padding和border的值，而ie盒子模型的元素的屬性寬、高包含。

頁面在標準模式下，元素按標準盒模型的方式渲染，頁面在各瀏覽器上呈現都如此；頁面在怪異模式下，並在ie9及如下瀏覽器上呈現，元素按ie盒子模型的方式渲染，其餘高版本瀏覽器均按標準盒模型的方式渲染。

* 什麼是標準模式，什麼是怪異模式

標準模式：瀏覽器按w3c標準來解析執行頁面；怪異模式：瀏覽器以一種向後兼容的方式呈現頁面，主要是模擬老式瀏覽器的行爲，以防止老式站點沒法工做。

* 如何觸發標準模式和怪異模式：

一、頁面沒有寫Doctype，或是Doctype格式不正確會觸發怪異模式，Doctype必須聲明在頁面的第一行

二、對於html4.01，包含嚴格DTD的Doctype會以標準模式呈現頁面；包含過渡DTD和URI的Doctype以標準模式呈現頁面，

只包含DTD不包含URI的會以怪異模式呈現。框架集DTD和過渡相似。

* box-sizing改變盒模型的計算方式

box-sizing： centent-box 標準盒模型計算

border-box ie盒模型計算

inherit 繼承父元素的屬性

==================================================================================================

* float的理解

設置了浮動的元素會脫離文檔

一個浮動元素，若是前面的元素也是一個浮動元素，該元素就會緊跟前面的元素在後面排列（前提是一行可以容納的下這兩元素。不然，後面的元素會在新的一行顯示）；

若是前面的元素是一個在標準文檔流中的元素，則在新的一行排列。浮動元素的頂部和上一個元素的底部對齊。

清除浮動的方式：

一、 clear：none，默認值容許兩邊有浮動元素

left，元素左邊不容許有浮動元素

right

both

做用的是使用清除的元素自己

二、給浮動元素添加父元素，並給其設置

overflow：hidden/auto（將超出部分裁剪去掉）

zoom： 1

清除浮動的原理是：將浮動元素包含在一個BFC的容器裏，這樣BFC中的浮動元素就不會對容器外面的元素產生影響。

三、利用：after給浮動元素的父元素添加一個空元素

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}//支持ie6

* div居中的方式

一、水平居中：元素左右外邊距設置爲auto

二、水平垂直居中：

已知元素大小：

position+margin：auto

          .center1 {
               position: absolute;
               width: 200px;
               height: 200px;
               top: 0;
               bottom: 0;
               left: 0;
               right: 0;
               margin: auto;
               /*margin: 0 auto;*/
                background: #FF0;
           }

position+absolute/relative +margin-left、margin-top

            .center2 {
               position: absolute;//relative
               width: 200px;
               height: 200px;
               top: 50%;
               left: 50%;
               margin: -100px 0 0 -100px;
               /*margin: 0 auto;*/
                background: #FF0;
           }

父元素設置爲table-cell，而後設置vertical-align：middle，子元素設置margin：0 auto。（父元素不能居中）

           .div1{
                display: table-cell;
                width: 500px;
                height: 500px;
                /*margin-right: auto;
                margin-left: auto;*/
                border:1px solid red;
                vertical-align: middle;
            }
            .div2{
                width: 100px;
                height: 200px;
                background: blue;
                margin:0 auto;          /*爲了水平居中*/
            }

未知子元素大小，子元素相對於父元素居中：

transform（ie9如下不支持），子元素設置樣式以下：

          .center3 {
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               /*margin: 0 auto;*/
                background: #FF0;
           }

子元素相對於父元素居中，寬高由父元素決定

             .div3{
              position: relative;
             width: 500px;
             height: 500px;
             border: 1px solid red;
             margin:auto;
            }

           .div4{
            position: absolute;
            left: 30%;
            right:30%;
            top: 20%;
            bottom:20%;
            background: blue;
            text-align: center;//讓文字居中
            line-height: 300px;
         }

flex佈局（ie11+才支持，存在兼容性問題）：

          .flex1 {
               margin-top: 20px;
               display: flex;
               justify-content: center;
               align-items: center;
               height: 400px;
               background: #000;
           }

           .sub_flex1 {
               width: 100px;
               height: 100px;
               background: #009246;
           }

注： vertical-align

* inline-block佈局，以及兼容性：

須要設置寬度，不然元素大小就由元素內容決定

行內塊元素之間一行顯示時會有間隙

vertical-align： top對inline-block有影響

* columns多列布局

* flexbox佈局，以及使用場景

* div自適應佈局

一、兩列顯示，一端固定，一端自適應（下面兩種方法兩個元素都是重疊的）

左邊的元素固定寬高，右邊元素寬度自適應

左邊元素寬度由內容撐開，右邊元素寬度自適應

二、左邊元素寬度由內容撐開，右邊元素寬度自適應，且不重疊