前端面試題的簡單整理，都只是大概回答，具體某些問題的具體理解后續會補上。

前端頁面有哪三層構成，分別是什么?作用是什么?

結構層：主要指DOM節點，html

表現層：主要指頁面渲染，css

行為層：主要指頁面的動畫效果，js

Doctype作用？標準模式與兼容模式各有什么區別?

Doctype在文檔的第一行，處于html標簽之前。告訴我們的瀏覽器用什么文檔標準來解析文檔。Doctype不存在或格式不正確會導致文檔以兼容模式呈現。標準模式：標準模式下的排版和js的運作模式都是按照該瀏覽器支持的最高標準來執行的。兼容模式下，頁面以寬松的，向后兼容的方式顯示，模擬老式瀏覽器的行為以防站點無法工作。

html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和HTML5？

新特性：

語義化更好的標簽：header，footer,nav,aside,article,section

對本地離線存儲更好的支持：localStorage長期存儲數據，瀏覽器關閉后數據不丟失。sessionStorage瀏覽器關閉后自動刪除。

畫布canvas，音頻audio，視頻video，地理Geolocation

新的表單控件：calendar，date，time，email，URL，search

新的表單元素：atalist 元素規定輸入域的選項列表。?keygen 元素的作用是提供一種驗證用戶的可靠方法。?output 元素用于不同類型的輸出

webworker:當前javascript的主線程中，使用Worker類加載一個javascript文件來開辟一個新的線程，起到互不阻塞執行的效果，并且提供主線程和新線程之間數據交換的接口postMessage，onmessage。

JavaScript是單線程的，在執行過程中會阻塞頁面的渲染和其他腳本的執行。因此webworker可以在主線程當中開啟一個新的線程，起到互不阻塞執行的效果。通過 worker = new Worker( url ) 加載一個JS文件來創建一個worker，同時返回一個worker實例。通過worker.postMessage( data ) 方法來向worker發送數據。綁定worker.onmessage方法來接收worker發送過來的數據。

websocket:webscoket是HTML5提供的傳輸協議。它可以將服務器的更新及時主動的發給客戶端

移除了純表現的元素：big,center,font,strike等等。對可用性產生負面影響的元素：frame，frameset，noframes；

如何區分：DOCTYPE聲明\新增的結構元素\功能元素

iframe的優缺點？

優點：

1? 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

2? Security sandbox

3? 并行加載腳本

缺點：

1? iframe會阻塞主頁面的Onload事件；

2? 即時內容為空，加載也需要時間

3? 沒有語意

div+css的布局較table布局有什么優點？

1? 改版的時候更方便 只要改css文件。

2? 頁面加載速度更快、結構化清晰、頁面顯示簡潔。

3? 表現與結構相分離。

4? 易于優化（seo）搜索引擎更友好，排名更容易靠前。

頁面導入樣式時，使用link和@import有什么區別？

1 就標簽的分類來說，link屬于HTML標簽，而@import是CSS提供的。而且link的權重大于@import。

2 加載順序來說，link引用的css文件，頁面載入的時候同時加載。而@import是等到頁面加載完成后再加載。

3 兼容性來說，link沒有兼容性問題，@import在IE5以上才可識別

4 使用DOM控制樣式時，link支持js操作DOM改變樣式。@import不行。

CSS放在頂部/底部有什么區別

CSS放在頂部時，頁面會逐步呈現出來。因為瀏覽器在頁面載入的時候同時加載css。瀏覽器會根據html生成DOM樹，根據css生成渲染樹。

但是放在底部頁面會出現白屏或者閃跳的情況。因為放在底部時，css是等頁面下載完后再被下載。瀏覽器為了彌補樣式比較靠后的加載，為了逐步呈現從而延遲呈現，因此出現白屏的情況。

什么是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

就是@import引起的。@import是等到頁面加載完成后再加載。因此會出現閃爍的感覺。解決辦法是link引用css文件

CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？以及這些選擇器的使用場景？

選擇器：（按優先級）

通配符* ? （*， > ,+ 選擇器的權重都是0）

id選擇器 #myid （權重100）

class選擇器 .class ?（10）

屬性選擇器 input[type="button"]（10）

偽類選擇器 a:link a:visited a:hover a:visited（10）

標簽選擇器 p div （1）

偽元素選擇器 a:before a:after :first-child（1）

相鄰+，子>,后代選擇器

優先級算法：同權重下以最近者為準

！important>行內樣式(權重1000)>id選擇器(權重100)>id選擇器 |屬性選擇器|偽類選擇器 (權重10)>標簽選擇器|偽元素選擇器(權重1)

可繼承的樣式：font的樣式，color,visiblity

不可繼承的：關于盒模型的：width height margin padding border

新增偽類：first-child last-child nth-child（n）

介紹一下CSS的盒子模型？box-sizing常用的屬性有哪些？分別有什么作用？

W3C標準盒模型：content，padding，border，margin。其中width指的是內容content的寬度

IE盒模型：content，padding，border，margin。其中width指的是content的寬度+padding+border的寬度

box-sizing是CSS3中提供的屬性。主要控制盒模型的解析方式。每種盒模型計算元素寬高的方式不同：

它的默認值是content-box，也就是width的寬度指的是內容content的寬度。是W3C標準盒模型。

border-box的width是content+padding+border。也就是IE盒模型

還有padding-box：width指的是content+padding的寬度。

display的值:

規定元素生成框的類型：

block:塊類型元素

inline:行內元素

inline-block：行內塊級元素

list-item：塊類型元素，并添加樣式列表標記

none：元素脫離文檔流，不會顯示

display:none與visibility:hidden的區別是什么？

他們都可以隱藏對應的元素。

display：none：使元素脫離文檔流，不占用空間。其他元素會靠攏，就當他不存在一樣。

visibility：hidden：不會脫離文檔流。

position的值， relative和absolute分別是相對于誰進行定位的？

relative：相對于其在普通流中的位置定位

absolute：相對于離其最近的已定位的父元素定位，如果沒有就相對于窗口。

fixed:相對于瀏覽器窗口定位。

static：元素在正常流當中，并且忽略其top,bottom,left,right值

inherit：從父元素繼承position的值

浮動原理，浮動產生的問題，CSS清除浮動的幾種方法（至少兩種）

浮動的元素脫離文檔流，不占用空間。可以向左和向右浮動，直到它的外邊緣碰到包含框或者另外一個浮動框的邊緣為止。

浮動產生的問題：

因為浮動的元素脫離文檔流，同級非浮動的元素會表現的他不存在一樣。

如果父元素沒有設置寬高，其子元素都浮動的話，會導致父元素的高度無法撐開。影響與父元素同級的元素。

解決辦法：

同級的元素被覆蓋，可以浮動同級元素，但是不推薦這種做法，因為后面的布局會受到影響。也可以給非浮動元素添加clear:both;

可以在浮動元素的后面加上空標簽清除浮動

可以給父元素添加一個after偽元素。也可以讓父元素overflow：hidden/auto；*zoom:1;

CSS隱藏元素的幾種方法（至少說出三種）

display:none;不占用空間

height:0;overflow:hidden

visibility：hidden；占用空間，不影響點擊事件

opacity：0；

css hack原理和分類，利弊

原理：由于不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不一樣，以及CSS優先級對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。

分類：

CSS屬性前綴法?：IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，IE6~IE10都認識"\9"，但firefox前述三個都不能認識

選擇器前綴法：IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}

IE條件注釋法（即HTML頭部引用if IE）針對所有IE(注：IE10+已經不再支持條件注釋)：?IE瀏覽器顯示的內容?，針對IE6及以下版本：?只在IE6-顯示的內容?。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。

利弊：使用hack雖然對頁面表現的一致性有好處，但過多的濫用會造成html文檔混亂不堪，增加管理和維護的負擔。

解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

把網頁中一些背景圖片整合到一張圖片文件中。利用CSS的background-image,background-position組合進行定位。減少HTTP請求次數。

對BFC規范的理解？

塊級格式化上下文，是CSS2.1提出的一個概念：它決定了元素如何對其內容進行布局，以及和其他元素的關系和相互作用。一個創建了BFC的盒子是獨立布局的，盒子里面的元素的樣式不會影響到外面的元素。

在網頁中的應該使用奇數還是偶數的字體？為什么呢？

偶數字號相對更容易和 web 設計的其他部分構成比例關系

為了遷就ie6，ie6會把定義為13px的字渲染成14px

偶數寬的漢字顯得均衡

iconfont矢量圖標優點和缺點

Iconfont 就是指用字體文件取代圖片文件，來展示圖標、特殊字體等元素的一種方法。

優點：

加載文件體積小。

可以直接通過css的font-size，color修改它的大小和顏色，對于需要縮放多個尺寸的圖標，是個很好的解決方案。

支持一些css3對文字的效果，例如：陰影、旋轉、透明度。

兼容低版本瀏覽器。

缺點：

矢量圖只能是純色的。

制作門檻高，耗時長，維護成本也很高。

gba()和opacity的透明效果有什么不同？

都能實現透明效果。opacity會作用于元素的背景和內容，rgba只會作用于背景。

關于letter-spacing的妙用知道有哪些么？

以用于消除inline-block元素間的換行符空格間隙問題。

Sass、LESS是什么？大家為什么要使用他們？

他們是CSS預處理器，他們是一種特殊的語法/語言編譯成CSS。例如LESS是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)

為什么要使用它們？

結構清晰，便于擴展。

可以方便地屏蔽瀏覽器私有語法差異。

可以輕松實現多重繼承。

完全兼容 CSS 代碼，可以方便地應用到老項目中。

Css實現動畫效果Animation還有哪些其他屬性。

CSS3動畫的屬性主要分為三類：

transform

元素順時針旋轉的角度rotate

設置元素放大或縮小的倍數scale

設置元素的位移translate

設置元素傾斜的角度skew

transition過渡：可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。

animation：@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果

事件委托是什么？事件委托的缺點

事件委托：是 JavaScript 中綁定事件的常用技巧，利用事件模型中的冒泡原理，將事件綁定在更上層的父元素時，通過檢查事件的目標對象來判斷并獲取事件源。使用事件代理的好處是可以提高性能。

使用場景：

給許多子元素綁定相同的事件，比如ul的li元素，或者table的td元素。可以大量節省內存，減少事件注冊。

可以實現當新增子對象時無需再次綁定事件，對于動態內容及其合適

缺點：事件代理的常用應用應該僅限于上述需求，如果把所有事件都用事件代理，可能會出現本不該被觸發的事件被綁定上了事件的情況。

事件模型

在各種瀏覽器中存在3種事件模型：

1.DOM0(所有瀏覽器都支持)：

DOM0中事件一旦發生就直接調用事件句柄，無傳播過程

一個DOM對象注冊多個類型相同的事件時，DOM0級中會發生事件的覆蓋

DOM0級事件的注冊是直接將事件處理程序作為js對象的屬性，或者是將js代碼作為HTML元素的性質值。

2.DOM2(除了IE意外都支持)

在DOM2中有一個事件的傳播過程。包括事件捕獲，目標元素的事件處理程序運行，事件冒泡。

DOM2級中一個DOM對象注冊多個類型相同的事件時，則會依次執行各個事件函數。

在DOM2中，事件的注冊可以使用addEventListener("click",fn,false)的方法。事件刪除用removeEventListener()

event對象是事件處理函數的參數，事件源是e.target

3.IE事件模型：

IE的事件傳播過程只有DOM0級和DOM2級中第二第三階段，也就是只冒泡，不捕捉。

ie中也可以在一個對象上添加多個事件處理函數

事件的注冊用attachEvent("onclik",fn);事件刪除用detachEvent();

IE中的event對象不是事件處理函數的參數，而是window，并且事件源是srcElement

js延遲加載的方式有哪些？

延遲javascript代碼的加載是為了加快網頁的訪問速度

1.把延遲腳本放在頁面底部（body標簽里）：如果把script標簽放在head中，那么js加載完后才會加載頁面,因為js會阻塞后面的代碼的運行。這時候可以放在頁面的底部，文檔會按照從上到下的順序加載。

2.動態創建DOM的方式：在文檔都加載完后，創建script標簽，插入到DOM中

functiondownloadJSAtOnload() {varelement = document.createElement("script");

3.defer:在script標簽里設置這個屬性，腳本會被延遲到整個頁面都解析完畢后再運行，就是相當于告訴瀏覽器立即下載但延遲執行。

4.async：它的作用和defer類似，但是不能控制加載的順序。

什么是 “use strict”; ? 使用它的好處和壞處分別是什么？

它是JavaScript另外的一種運行模式，在這種模式下，JavaScript在更嚴格的條件下執行。

好處：

消除JavaScript一些不合理不嚴謹之處，消除一些怪異行為。

保證代碼安全運行

提高編譯器效率，增加運行速度。

為未來版本的JavaScript做好鋪墊。

壞處：

現在網站的js都會進行壓縮，一些文件用了嚴格模式，一些文件沒有，壓縮后本來是嚴格模式的文件，不僅沒有指示嚴格模式，反而在壓縮后浪費了字節。（可以寫在立即執行函數當中）

說說嚴格模式的限制

變量必須先聲明后使用

函數的參數不能有同名屬性，否則報錯

對象不能有同名的屬性

不能對只讀屬性賦值

不能刪除不可刪除的屬性

eval和arguments不能被重新賦值

arguments不會自動追蹤函數參數的變化，傳進來是幾就是幾

不能使用arguments.callee和arguments.caller

禁止設置原始類型的屬性

禁止八進制表示法

新增保留字，不能講保留字作為變量名 let const static private public yield package

判斷類型的方法

原始類型使用typeof操作符(string,number,undefined,object,boolean,function,symbol)

引用類型使用 x instanceof class(Array,Object)

還有所以類型通用的Object.prototypr.toString.call(o) //String,Number,Boolean,Object,Array,Null,Undefined,Function

javascript的typeof返回哪些數據類型？

返回字符串：string,number,undefined,object,boolean,function,symbol

例舉3種強制類型轉換和2種隱式類型轉換?

強制：有三個函數可以將非數值轉化為數值：parseInt,parseFloat,（將字符串轉化為數值）number（適用于任何數據類型）

隱式：==

null和undefined的區別？

null是一個表示"無"的對象，轉為數值時為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。

當聲明的變量還未被初始化時，變量的默認值為undefined。null用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象。

undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：

變量被聲明了，但沒有賦值時，就等于undefined。

調用函數時，應該提供的參數沒有提供，該參數等于undefined。

對象沒有賦值的屬性，該屬性的值為undefined。

函數沒有返回值時，默認返回undefined。

null表示"沒有對象"，即該處不應該有值。典型用法是：

作為函數的參數，表示該函數的參數不是對象。

作為對象原型鏈的終點。

數組

數組方法有哪些？

能改變原數組的：

pop() ?返回被刪除的最后一個元素

push(item1,item2) 在后面添加元素，返回新的長度

shift() ?返回被刪除的第一個元素

unshift(item1,item2) 在前面添加元素，返回新的長度

sort(function(a,b){return b-a(倒序)|a-b(升序)})排序，字母按照開頭字母順序，如果排列數字大寫必須寫比較函數否則有bug

reverse() ?顛倒順序

splice(index,howmany,newitem1,newitem2(加到被刪除的位置))返回被刪除元素組成的數組

不能改變原數組的

slice(start,end)返回數組中的成員數組,包括end

concat(newarr)返回連接后的新數組

join(str)把數組值用指定字符串連起來,如果沒有就默認是逗號

toString()把數組中的每一項用逗號連接起來轉化為字符串（和沒參數的join一樣）

ES5中的數組方法：

arr.forEach(function(e,index,arr){}):給每個元素調用指定的函數，不能中止遍歷

arr.map(function(e,index,arr){return e*e})：每個元素調用函數，有返回值，返回新的數組，不改變原數組,會處理稀疏數組，返回稀疏

arr.filter(function(e){return e<3})返回滿足條件的子數組，不會處理稀疏數組

arr.every(function(e){return e<3}),看數組所有元素是否滿足某條件,返回T/F

arr.some(function(e){return e<3}),判斷數組的某些元素是否滿足某條件，返回T/F

arr.reduce(function(x,y){return x+y},0(初始值))：用指定的函數組合數組元素，返回單個值，初始值不提供的話將數組第一個和第二個作為函數的參數

數組遍歷：

常規for循環(按照順序，會處理稀疏數組不存在的元素，也會處理null和undefined)

for-in語句（不一定按順序,不會處理稀疏數組不存在的元素，保證兼容性使用前判斷null或者undefined）

forEach()

Javascript垃圾回收方法?

標記清除：這是所有瀏覽器最常用的一種垃圾回收方式，當變量進入環境（在函數在聲明一個變量）時，將其標記為“進入環境”，當變量離開環境（函數執行結束）時，將其標記為離開環境。垃圾收集器會按照固定的時間間隔周期性的釋放內存。

引用計數：當聲明了一個變量并將一個引用類型的值賦給該變量時這個值得引用次數+1，當去掉這個引用時，引用次數-1，當引用次數為0時表明可將其內存回收

內存泄漏是什么？

內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

在低版本的IE中經常會出現內存泄漏，是因為IE中DOM/BOM對象都是通過引用計數回收的，因為存在循環引用的問題，所以他們的引用次數永遠不會為0，假如這個函數被重復多次調用，就會導致內存泄漏（大量內存得不到回收）

解決辦法：要想破壞循環引用，引用DOM元素的對象或DOM對象的引用需要被賦值為null。

哪些操作會造成內存泄漏？

閉包：閉包中的變量不會被垃圾回收機制回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。

循環引用：循環（在IE中兩個DOM/BOM對象彼此引用時，就會產生一個循環）

談談This對象的理解。

this總是指函數運行時所在的對象。在不同的場景中，this的身份不同：

DOM的事件處理函數中，this指觸發這個事件的DOM對象；

全局函數調用中，this指window；

作為對象的方法調用時，this指調用這個函數的那個對象；

用new實例化對象，作為構造函數調用時，this指新創建的那個對象

ES6中，箭頭函數當中的this指的的是定義時所在的對象而不是使用時所在的對象。這樣我們在使用的時候就不會產生很多歧義了。

JavaScript有塊作用域嗎？

沒有。在JavaScript中，if/for語句中初始化變量的表達式中所定義的變量，在循環結束后也依舊會存在于循環外部的執行環境當中。

JavaScript的作用域和作用域鏈?

作用域：只有函數才會產生作用域的概念，它指變量的作用范圍，內部作用域由局部變量，函數，形參，實參組成

作用域鏈：保證執行環境中有權訪問的變量和函數是有序的，作用域鏈的變量只能向上訪問，變量訪問到window對象終止，變量作用域鏈向下訪問變量時不允許的。

說說函數表達式和函數聲明的區別

執行代碼時，JavaScript引擎在第一遍會聲明函數并將它們提升到頂部。所以函數聲明語句可以它定義之前出現的代碼所調用。

函數表達式定義的函數，是將其賦值給一個變量，雖然變量的聲明提前了，但給變量賦值是不會提前的，因此調用這個函數之前必須先定義才行。

函數聲明提升：

執行代碼時，JavaScript引擎在第一遍會聲明函數并將它們提升到頂部。函數聲明語句可以它定義之前出現的代碼所調用。

js中上下文是什么,js有哪些函數能改變上下文

上下文就是this關鍵字的值，比如當函數作為對象的方法來調用時，該對象就是此次調用的上下文，也就是該函數的this值;當函數作為全局函數調用時，上下文指的時window。

作用域和上下文之間最大的區別是： 上下文在運行時確定，隨時可能改變；作用域在定義時確定，永遠不會改變。

JavaScript中call和apply可以改變上下文

call和apply的區別和作用？

區別：

call()的第一個參數是上下文，第二個參數是參數序列

apply()的第一個參數是上下文，第二個參數是參數組成的數組

作用：改變函數的上下文，它是以某個對象的方法來調用函數，函數的this指的是第一個參數。如果沒有傳遞參數是null/undefined，this指window

談談你對閉包的理解，為什么使用閉包，使用場景，它會有什么影響？

閉包：就是訪問函數內部變量的函數，創建閉包的方式就是函數嵌套函數

作用：當在函數內部嵌套一個函數時，就創建了閉包，閉包可以訪問它被定義時所處的作用域中的任何變量，并且參數和變量不會被垃圾回收機制回收。閉包還可以避免全局變量的污染。

使用場景：在大型項目當中，為了防止命名沖突，一般會把相應的代碼用閉包的形式包裹起來，避免暴露在全局作用域下

缺點：如果閉包引用外部變量，變量會常駐內存，這樣會增大內存使用量，從而降低性能，使用不當很容易造成內存泄露

new操作符具體做了什么？

創建了一個空對象，并且this變量引用該對象，同時繼承了該函數的原型

屬性和方法加入到this引用的對象

新創建的對象由this引用，并且最后隱式的返回this

正則：

匹配模式：i (忽略大小寫)，g(全局：匹配所有字符串，而不是發現第一個就停止)，m（多行模式：忽略文本的末尾）

regexp的方法：

test() :?pattern.test(str) ? 返回T/F

exec(): pattern.exec(str) ?返回數組，第一個是匹配的字符串，后面都是括號里的子表達式的字符串

字符串方法:

search(pattern):返回第一個匹配字符串的起始位置

replace(pattern，str/fn):先找，然后替換，如果有g替換所以匹配字符串，沒有就替換第一個匹配的，函數可以動態改變字符串(不改變原字符串)

match(pattern):返回數組，如果有g返回所有匹配結果，如果沒有數組第一個是字符串，剩下都是括號里的子表達式

常用的正則：

\s空格,\d數字,\w(字母和數字)，[^..]不在里面的任意字符，+ 一個或多個，* 0個或多個， ？0或1個，{n}n個，{n,m} n<=x個

字符類：中括號匹配一個所包含的任意字符 比如[ab]就是a或b，比如[3457]匹配3或者4或者5或者7，而(3457)只匹配3457

檢驗網址的正則:

var str="visit my personal information at http://www.t1amo.com/about.html"

var pattern=/(\w+):\/\/([\w.]+)\/(\S*)/

var result=str.match(pattern);

result[0] //?http://www.t1amo.com/about.html

result[1] //http 協議

result[2] //www.t1amo.com域名

result[3] //about.html路徑

怎么去除字符串前后的空格:

var str=" hello world ";

str.replace(/^\s+|\s+$/,'') //"hello world"

str.trim(）

web storage和cookie的區別?Cookie、sessionStorage 和 localStrorage?

它們都是為了實現本地存儲而設計的。

存儲空間：cookie數據大小不能超過4K，webstorage雖然也有存儲大小的限制，但是比cookie大得多，有5M

數據是否傳遞：cookie是每請求一個頁面都會發送到服務器，webstorage僅用于本地存儲數據，不會與服務器進行交互。

數據有效時間：cookie在過期時間一直有效，即使窗口和瀏覽器關閉。localstorage存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；sessionstorage數據在當前瀏覽器窗口關閉后自動刪除。

Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie

cookie 和session 的區別?

cookie的數據存放在瀏覽器上，session的數據存放在服務器上

cookie不是很安全，別人會分析本地cookie而進行cookie欺騙，因此考慮到安全性應該使用session。

session的數據在一定時間內會存放在服務器上，當訪問增多，會影響服務器性能，因此考慮到服務器性能應該使用cookie。

單個cookie保存的數據不能超過4k,很多瀏覽器都限制一個站點最多保存20個cookie。

所以一般來說，將重要信息存放在session，不重要的需要保存的數據存放在cookie。

請你談談Cookie的弊端?

cookie雖然在持久保存客戶端數據提供了方便，減輕了服務器的負擔，但是還有很多局限性：

缺點：

數量和長度的限制：單個cookie保存的數據不能超過4k（1024*4=4096字節，為了兼容性一般不能超過4095kb）,很多瀏覽器都限制一個站點最多保存20個cookie。

安全性問題：如果cookie被人攔截了，那么他將獲得所有的session信息

有些狀態不能保存在客戶端。比如為了防止重復提交表單，需要在服務器端保存一個計數器。如果放在客戶端不會起作用。

優點：極高的擴展性和可用性

使用cookie需要注意的問題：

可以通過良好的編程來控制保存在cookie中的session對象的大小

通過加密和安全傳輸技術減小cookie被破解的可能性

不在cookie中存放重要信息。

控制cookie的有效期，偷盜者可能拿到一個過期的cookie

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？（流程說的越詳細越好）

用戶發送一個url請求

瀏覽器通過DNS獲取網站的IP地址：客戶端先檢查本地是否有對應的IP地址，若找到則返回，若沒有則請求上級DNS服務器，直到找到或找到根節點。

瀏覽器和服務器通過TCP三次握手來建立TCP連接。

一旦連接建立，瀏覽器會通過該連接向服務器端發送HTTP請求

遠程服務器找到資源并返回響應報文，響應報文中包含狀態碼。（200表示請求成功）

請求成功后服務器返回相應的資源，客戶端下載資源

釋放TCP連接。

接下來就是頁面渲染階段了。首先解析HTML生成DOM樹，再解析CSS文件生產渲染樹。?javascript又可以根據 DOM API 操作 DOM

說說TCP傳輸的三次握手四次揮手策略

1、三次握手：為了將數據準確無誤的送達目標處，TCP協議采用三次握手策略。

三次握手的過程是：

發送端先發送一個帶有SYN標志的數據包給接收端

接收端收到數據包后，傳回一個帶有SYN/ACK標志的數據包以示傳達確認信息

發送端再發送一個帶有ACK表示的數據包以示握手成功。

在這個過程當中，如果發送方在規定的延遲時間內沒有收到回復則默認接收方沒有收到請求，TCP協議會再次發送數據包。直到收到回復為止。

2、斷開一個TCP連接需要四次握手：

主動關閉方發送一個FIN，用來關閉主動方到被動方的數據傳送。（但是在fin包之前發送出去的數據，如果沒有收到ack確認報文，主動關閉方還是會再次發送這些數據。此時主動關閉方還可以接受數據）

被動關閉方收到fin包后，發送一個ack給對方。確認序號為收到序號+1。

被動關閉方發送一個fin，用來關閉被動關閉方到主動關閉方的數據傳送。

主動關閉方收到fin后，發送一個ack給對方，確認序號為收到序號+1，至此，完成四次握手。

其他 HTTP 請求方法

在請求頭的第一行包含了請求的方法，它包括OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE

GET：從指定資源請求數據

POST：向指定的資源發送數據

HEAD：和GET相同，但是只返回HTTP報頭，不返回文檔主體

DELETE：刪除指定資源

OPTIONS：返回服務器支持的HTTP方法

CONNECT:把請求的連接轉換到透明的TCP/IP通信

PUT：上傳指定的URL表示

TCP和UDP的區別

TCP（Transmission Control Protocol,傳輸控制協議）：是基于連接的協議。也就是說在發送數據前，必須和對方建立可靠的連接。一個TCP連接必須通過三次握手才能建立起來。

UDP（User Data Protocol,用戶數據報協議）：是于TCP相對應的協議。它是面向非連接的協議。也就是說他不與對方建立連接，而是直接把數據包發送過去。UDP適用于一次只傳少量的數據、并且對可靠性要求不高的應用環境

HTTP狀態碼

200 OK 請求成功

201 Created 請求成功并且服務器創建了新的資源

202 Accepted 請求接受但尚未處理

301 Move Permanently 永久性重定向，請求的網頁已被永久性的移到了新的位置。請求的報文中會附帶重定向的URL。

302 Found 臨時性重定向

304 Not Modified 自從上次請求后，請求的網頁未修改過。可直接使用緩存

400??Bad Request 服務器無法理解請求的格式

401?Unauthorized 請求未授權。

402?Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

500 Internal Server Error 最常見的服務器端錯誤。

503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。

webscoket會用嗎？webSocket如何兼容低瀏覽器,websocket原理，應用場景

1、webscoket是HTML5提供的傳輸協議。websocket是應用層第七層上的一個應用層協議，它必須依賴?HTTP 協議進行一次握手?，握手成功后，數據就直接從 TCP 通道傳輸，與 HTTP 無關了。它可以將服務器的更新及時主動的發給客戶端,而不需要客戶端以一定時間間隔去輪詢。

2、目前主流的瀏覽器都支持這個協議，IE還不支持。如何兼容呢？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發送 XHR 、 基于長輪詢的 XHR

3、原理：Websocket的數據傳輸是frame形式傳輸的，比如會將一條消息分為幾個frame，按照先后順序傳輸出去。這樣做會有幾個好處：

大數據的傳輸可以分片傳輸，不用考慮到數據大小導致的長度標志位不足夠的情況。

和http的chunk一樣，可以邊生成數據邊傳遞消息，即提高傳輸效率。

4、應用場景：社交聊天、彈幕、多玩家游戲、協同編輯、基于位置的應用、體育實況更新、視頻會議/聊天等需要高實時的場景

說說網絡分層里七層模型是哪七層(從上到下)

應用層:允許訪問OSI環境的手段

表示層:對數據進行翻譯、加密和壓縮

會話層:建立、管理和終止會話

傳輸層(TCP和UDP)：提供端到端的可靠報文傳遞和錯誤恢復

網絡層(IP)：負責數據包從源到宿的傳遞和網際互連

數據鏈路層：將比特組裝成幀和點到點的傳遞

物理層：通過媒介傳輸比特,確定機械及電氣規范

各種協議

ICMP協議： 因特網控制報文協議。它是TCP/IP協議族的一個子協議，用于在IP主機、路由器之間傳遞控制消息。

TFTP協議： 是TCP/IP協議族中的一個用來在客戶機與服務器之間進行簡單文件傳輸的協議，提供不復雜、開銷不大的文件傳輸服務。

HTTP協議： 超文本傳輸協議，是一個屬于應用層的面向對象的協議，由于其簡捷、快速的方式，適用于分布式超媒體信息系統。

DHCP協議： 動態主機配置協議，是一種讓系統得以連接到網絡上，并獲取所需要的配置參數手段。

線程與進程的區別

一個程序至少有一個進程,一個進程至少有一個線程

線程的劃分尺度小于進程，使得多線程程序的并發性高

另外，進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率

線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制

從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別

你有哪些性能優化的方法？

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器，避免寫行內樣式。少用全局變量，用innerHTML代替DOM操作，減少DOM操作次數，緩存DOM節點查找的結果，避免全局查詢，多個變量聲明合并，避免圖片和iFrame等的空Src。空Src會重新加載當前頁面，影響速度和效率，

緩存利用：緩存Ajax，多個域名緩存，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag等等

減小請求數量：合并樣式和腳本，使用css sprite，圖片按需加載，靜態資源延遲加載。

減少帶寬：壓縮文件，開啟GZIP

為什么利用多個域名來存儲網站資源會更有效？

網站資源指網站的圖片、視頻、js、css。服務器直接把相應文件發送到客戶端的文件都是靜態資源。（動態資源一般指數據庫資源）。

使CDN緩存更方便：靜態資源和動態資源分服務器存放，使用不同的服務器處理請求。

突破瀏覽器的并發限制。比較老的瀏覽器（IE6）只有兩個并發，現代瀏覽器是6個并發。并發請求只針對同一個域名的，即同一時間針對同一域名下的請求數量有限制，超過限制的資源會阻塞。

節省cookie帶寬：每請求一個頁面都會發送一次主域名下的cookie,請求頭的cookie不能壓縮，如果cookie較多時，會造成發送的數據過大，導致速度變慢。使用其他域名來保存cookie

節約主域名的連接數，優化頁面響應速度

防止不必要的安全問題。（上傳js竊取主站cookie）

關于多域名，也不是越多越好，瀏覽器做dns解釋也是耗時間的，所以控制在2~4個之間。

移動端性能優化

盡量使用css3動畫，開啟硬件加速。

適當使用touch事件代替click事件。

避免使用css3漸變陰影效果。

可以用transform: translateZ(0)來開啟硬件加速。

不濫用Float。Float在渲染時計算量比較大，盡量減少使用

不濫用Web字體。Web字體需要下載，解析，重繪當前頁面，盡量減少使用。

合理使用requestAnimationFrame動畫代替setTimeout

CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引發手機過耗電增加

PC端的在移動端同樣適用

談談你對重構的理解

網站重構也就是說是在不改變UI的情況下，對網站進行優化，簡化結構、添加可讀性。

對于傳統的網站來說重構通常是：

表格(table)布局改為DIV+CSS

使網站前端兼容于現代瀏覽器

對于移動平臺的優化

針對于SEO進行優化

深層次的網站重構應該考慮的方面：

減少代碼間的耦合

讓代碼保持彈性

嚴格按規范編寫代碼

設計可擴展的API

代替舊有的框架、語言(如VB)

增強用戶體驗

通常來說對于速度的優化也包含在重構中:

壓縮JS、CSS、image等前端資源

程序的性能優化(如數據讀寫)

采用CDN來加速資源加載

對于JS DOM的優化

HTTP服務器的文件緩存

怎樣減少http請求次數

CSS Sprites

合并js,css文件

js,css,images等資源的壓縮

CDN托管

緩存的使用

你如何對網站的文件和資源進行優化？

文件合并

文件壓縮

使用CDN托管

使用多個域名來緩存資源

你都使用哪些工具來測試代碼的性能？

Profiler

JSPerf

Dromaeo

一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

圖片懶加載，在頁面的未可視區域添加一個滾動條事件，判斷圖片位置和瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優先加載。

如果為幻燈片，相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載

如果圖片為css圖片，可以使用css sprite ,iconfont等技術

如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。

如果圖片展示區域小于圖片的真實大小，則因在服務器端先進行圖片壓縮，圖片壓縮后大小與展示一致。

reflow和repaint（重排和重繪）

1.repaint(重繪)：改變DOM元素的視覺效果時會觸發，使瀏覽器變慢，因為改變某個元素的視覺效果會check這個DOM元素內的所有節點，會重新對DOM渲染。

比如：opacity、background-color、visibility、outline

2.reflow（回流）:改變DOM元素的位置時會觸發，比repaint開銷更大，因為他會重新計算所有元素的位置和占用的面積，這樣會引起整個頁面的重新渲染，他也會觸發repaint。（display：none的元素不會引發重排和重繪）

比如：js添加刪除元素，用js改變DOM的可見性（display:none-block）,添加刪除或改變CSS樣式，增加或移除樣式表，css3的動畫和過渡，使用offsetwidth和offsetheight。還有用戶的一些操作：拖動窗口大小，表單輸入值 ，改變字體大小，更換樣式表等等