前端面試題的簡(jiǎn)單整理猾瘸，都只是大概回答，具體某些問(wèn)題的具體理解后續(xù)會(huì)補(bǔ)上钙姊。

前端頁(yè)面有哪三層構(gòu)成毯辅，分別是什么?作用是什么?

結(jié)構(gòu)層：主要指DOM節(jié)點(diǎn)，html

表現(xiàn)層：主要指頁(yè)面渲染煞额，css

行為層：主要指頁(yè)面的動(dòng)畫(huà)效果，js

Doctype作用沾谜？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

Doctype在文檔的第一行膊毁，處于html標(biāo)簽之前。告訴我們的瀏覽器用什么文檔標(biāo)準(zhǔn)來(lái)解析文檔基跑。Doctype不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)婚温。標(biāo)準(zhǔn)模式：標(biāo)準(zhǔn)模式下的排版和js的運(yùn)作模式都是按照該瀏覽器支持的最高標(biāo)準(zhǔn)來(lái)執(zhí)行的。兼容模式下媳否，頁(yè)面以寬松的栅螟，向后兼容的方式顯示荆秦，模擬老式瀏覽器的行為以防站點(diǎn)無(wú)法工作。

html5有哪些新特性力图、移除了那些元素步绸？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和HTML5吃媒？

新特性：

語(yǔ)義化更好的標(biāo)簽：header瓤介，footer,nav,aside,article,section

對(duì)本地離線存儲(chǔ)更好的支持：localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失赘那。sessionStorage瀏覽器關(guān)閉后自動(dòng)刪除刑桑。

畫(huà)布canvas，音頻audio募舟，視頻video祠斧，地理Geolocation

新的表單控件：calendar，date拱礁，time梁肿，email，URL觅彰，search

新的表單元素：atalist 元素規(guī)定輸入域的選項(xiàng)列表吩蔑。?keygen 元素的作用是提供一種驗(yàn)證用戶的可靠方法。?output 元素用于不同類型的輸出

webworker:當(dāng)前javascript的主線程中填抬，使用Worker類加載一個(gè)javascript文件來(lái)開(kāi)辟一個(gè)新的線程烛芬，起到互不阻塞執(zhí)行的效果，并且提供主線程和新線程之間數(shù)據(jù)交換的接口postMessage飒责，onmessage赘娄。

JavaScript是單線程的，在執(zhí)行過(guò)程中會(huì)阻塞頁(yè)面的渲染和其他腳本的執(zhí)行宏蛉。因此webworker可以在主線程當(dāng)中開(kāi)啟一個(gè)新的線程遣臼，起到互不阻塞執(zhí)行的效果。通過(guò) worker = new Worker( url ) 加載一個(gè)JS文件來(lái)創(chuàng)建一個(gè)worker拾并，同時(shí)返回一個(gè)worker實(shí)例揍堰。通過(guò)worker.postMessage( data ) 方法來(lái)向worker發(fā)送數(shù)據(jù)。綁定worker.onmessage方法來(lái)接收worker發(fā)送過(guò)來(lái)的數(shù)據(jù)嗅义。

websocket:webscoket是HTML5提供的傳輸協(xié)議屏歹。它可以將服務(wù)器的更新及時(shí)主動(dòng)的發(fā)給客戶端

移除了純表現(xiàn)的元素：big,center,font,strike等等。對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame之碗，frameset蝙眶，noframes；

如何區(qū)分：DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

iframe的優(yōu)缺點(diǎn)褪那？

優(yōu)點(diǎn)：

1? 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題

2? Security sandbox

3? 并行加載腳本

缺點(diǎn)：

1? iframe會(huì)阻塞主頁(yè)面的Onload事件幽纷；

2? 即時(shí)內(nèi)容為空式塌，加載也需要時(shí)間

3? 沒(méi)有語(yǔ)意

div+css的布局較table布局有什么優(yōu)點(diǎn)？

1? 改版的時(shí)候更方便 只要改css文件友浸。

2? 頁(yè)面加載速度更快峰尝、結(jié)構(gòu)化清晰、頁(yè)面顯示簡(jiǎn)潔尾菇。

3? 表現(xiàn)與結(jié)構(gòu)相分離境析。

4? 易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前派诬。

頁(yè)面導(dǎo)入樣式時(shí)劳淆，使用link和@import有什么區(qū)別？

1 就標(biāo)簽的分類來(lái)說(shuō)默赂，link屬于HTML標(biāo)簽沛鸵，而@import是CSS提供的。而且link的權(quán)重大于@import缆八。

2 加載順序來(lái)說(shuō)曲掰，link引用的css文件，頁(yè)面載入的時(shí)候同時(shí)加載奈辰。而@import是等到頁(yè)面加載完成后再加載栏妖。

3 兼容性來(lái)說(shuō)，link沒(méi)有兼容性問(wèn)題奖恰，@import在IE5以上才可識(shí)別

4 使用DOM控制樣式時(shí)吊趾，link支持js操作DOM改變樣式。@import不行瑟啃。

CSS放在頂部/底部有什么區(qū)別

CSS放在頂部時(shí)论泛，頁(yè)面會(huì)逐步呈現(xiàn)出來(lái)。因?yàn)闉g覽器在頁(yè)面載入的時(shí)候同時(shí)加載css蛹屿。瀏覽器會(huì)根據(jù)html生成DOM樹(shù)屁奏，根據(jù)css生成渲染樹(shù)。

但是放在底部頁(yè)面會(huì)出現(xiàn)白屏或者閃跳的情況错负。因?yàn)榉旁诘撞繒r(shí)坟瓢，css是等頁(yè)面下載完后再被下載。瀏覽器為了彌補(bǔ)樣式比較靠后的加載湿颅，為了逐步呈現(xiàn)從而延遲呈現(xiàn)载绿，因此出現(xiàn)白屏的情況。

什么是 FOUC（無(wú)樣式內(nèi)容閃爍）油航？你如何來(lái)避免 FOUC？

就是@import引起的怀浆。@import是等到頁(yè)面加載完成后再加載谊囚。因此會(huì)出現(xiàn)閃爍的感覺(jué)怕享。解決辦法是link引用css文件

CSS 選擇符有哪些？哪些屬性可以繼承镰踏？?jī)?yōu)先級(jí)算法如何計(jì)算函筋？ CSS3新增偽類有那些？以及這些選擇器的使用場(chǎng)景奠伪？

選擇器：（按優(yōu)先級(jí)）

通配符* ? （*跌帐， > ,+ 選擇器的權(quán)重都是0）

id選擇器 #myid （權(quán)重100）

class選擇器 .class ?（10）

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

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

標(biāo)簽選擇器 p div （1）

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

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

優(yōu)先級(jí)算法：同權(quán)重下以最近者為準(zhǔn)

绊率！important>行內(nèi)樣式(權(quán)重1000)>id選擇器(權(quán)重100)>id選擇器 |屬性選擇器|偽類選擇器 (權(quán)重10)>標(biāo)簽選擇器|偽元素選擇器(權(quán)重1)

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

不可繼承的：關(guān)于盒模型的：width height margin padding border

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

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

W3C標(biāo)準(zhǔn)盒模型：content，padding藐俺，border炊甲，margin。其中width指的是內(nèi)容content的寬度

IE盒模型：content欲芹，padding卿啡，border，margin菱父。其中width指的是content的寬度+padding+border的寬度

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

它的默認(rèn)值是content-box滞伟，也就是width的寬度指的是內(nèi)容content的寬度揭鳞。是W3C標(biāo)準(zhǔn)盒模型。

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

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

display的值:

規(guī)定元素生成框的類型：

block:塊類型元素

inline:行內(nèi)元素

inline-block：行內(nèi)塊級(jí)元素

list-item：塊類型元素，并添加樣式列表標(biāo)記

none：元素脫離文檔流亩钟，不會(huì)顯示

display:none與visibility:hidden的區(qū)別是什么乓梨？

他們都可以隱藏對(duì)應(yīng)的元素。

display：none：使元素脫離文檔流清酥，不占用空間扶镀。其他元素會(huì)靠攏，就當(dāng)他不存在一樣焰轻。

visibility：hidden：不會(huì)脫離文檔流臭觉。

position的值， relative和absolute分別是相對(duì)于誰(shuí)進(jìn)行定位的？

relative：相對(duì)于其在普通流中的位置定位

absolute：相對(duì)于離其最近的已定位的父元素定位蝠筑，如果沒(méi)有就相對(duì)于窗口狞膘。

fixed:相對(duì)于瀏覽器窗口定位。

static：元素在正常流當(dāng)中什乙，并且忽略其top,bottom,left,right值

inherit：從父元素繼承position的值

浮動(dòng)原理挽封，浮動(dòng)產(chǎn)生的問(wèn)題，CSS清除浮動(dòng)的幾種方法（至少兩種）

浮動(dòng)的元素脫離文檔流臣镣，不占用空間辅愿。可以向左和向右浮動(dòng)忆某，直到它的外邊緣碰到包含框或者另外一個(gè)浮動(dòng)框的邊緣為止点待。

浮動(dòng)產(chǎn)生的問(wèn)題：

因?yàn)楦?dòng)的元素脫離文檔流，同級(jí)非浮動(dòng)的元素會(huì)表現(xiàn)的他不存在一樣褒繁。

如果父元素沒(méi)有設(shè)置寬高亦鳞，其子元素都浮動(dòng)的話，會(huì)導(dǎo)致父元素的高度無(wú)法撐開(kāi)棒坏。影響與父元素同級(jí)的元素燕差。

解決辦法：

同級(jí)的元素被覆蓋，可以浮動(dòng)同級(jí)元素坝冕，但是不推薦這種做法徒探，因?yàn)楹竺娴牟季謺?huì)受到影響。也可以給非浮動(dòng)元素添加clear:both;

可以在浮動(dòng)元素的后面加上空標(biāo)簽清除浮動(dòng)

可以給父元素添加一個(gè)after偽元素喂窟。也可以讓父元素overflow：hidden/auto测暗；*zoom:1;

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

display:none;不占用空間

height:0;overflow:hidden

visibility：hidden；占用空間磨澡，不影響點(diǎn)擊事件

opacity：0碗啄；

css hack原理和分類，利弊

原理：由于不同的瀏覽器和瀏覽器各版本對(duì)CSS的支持及解析結(jié)果不一樣稳摄，以及CSS優(yōu)先級(jí)對(duì)瀏覽器展現(xiàn)效果的影響稚字，我們可以據(jù)此針對(duì)不同的瀏覽器情景來(lái)應(yīng)用不同的CSS。

分類：

CSS屬性前綴法?：IE6能識(shí)別下劃線"_"和星號(hào)" * "厦酬，IE7能識(shí)別星號(hào)" * "胆描，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)

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

IE條件注釋法（即HTML頭部引用if IE）針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)：?IE瀏覽器顯示的內(nèi)容?昌讲，針對(duì)IE6及以下版本：?只在IE6-顯示的內(nèi)容?。這類Hack不僅對(duì)CSS生效减噪，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效短绸。

利弊：使用hack雖然對(duì)頁(yè)面表現(xiàn)的一致性有好處车吹，但過(guò)多的濫用會(huì)造成html文檔混亂不堪，增加管理和維護(hù)的負(fù)擔(dān)鸠按。

解釋下 CSS sprites礼搁，以及你要如何在頁(yè)面或網(wǎng)站中使用它饶碘。

把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中目尖。利用CSS的background-image,background-position組合進(jìn)行定位。減少HTTP請(qǐng)求次數(shù)扎运。

對(duì)BFC規(guī)范的理解瑟曲？

塊級(jí)格式化上下文，是CSS2.1提出的一個(gè)概念：它決定了元素如何對(duì)其內(nèi)容進(jìn)行布局豪治，以及和其他元素的關(guān)系和相互作用洞拨。一個(gè)創(chuàng)建了BFC的盒子是獨(dú)立布局的，盒子里面的元素的樣式不會(huì)影響到外面的元素负拟。

在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體烦衣？為什么呢？

偶數(shù)字號(hào)相對(duì)更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系

為了遷就ie6掩浙，ie6會(huì)把定義為13px的字渲染成14px

偶數(shù)寬的漢字顯得均衡

iconfont矢量圖標(biāo)優(yōu)點(diǎn)和缺點(diǎn)

Iconfont 就是指用字體文件取代圖片文件花吟，來(lái)展示圖標(biāo)、特殊字體等元素的一種方法厨姚。

優(yōu)點(diǎn)：

加載文件體積小衅澈。

可以直接通過(guò)css的font-size，color修改它的大小和顏色谬墙，對(duì)于需要縮放多個(gè)尺寸的圖標(biāo)今布，是個(gè)很好的解決方案。

支持一些css3對(duì)文字的效果拭抬，例如：陰影部默、旋轉(zhuǎn)、透明度造虎。

兼容低版本瀏覽器傅蹂。

缺點(diǎn)：

矢量圖只能是純色的。

制作門檻高累奈，耗時(shí)長(zhǎng)贬派，維護(hù)成本也很高。

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

都能實(shí)現(xiàn)透明效果搞乏。opacity會(huì)作用于元素的背景和內(nèi)容，rgba只會(huì)作用于背景戒努。

關(guān)于letter-spacing的妙用知道有哪些么请敦？

以用于消除inline-block元素間的換行符空格間隙問(wèn)題镐躲。

Sass、LESS是什么侍筛？大家為什么要使用他們萤皂？

他們是CSS預(yù)處理器，他們是一種特殊的語(yǔ)法/語(yǔ)言編譯成CSS匣椰。例如LESS是一種動(dòng)態(tài)樣式語(yǔ)言. 將CSS賦予了動(dòng)態(tài)語(yǔ)言的特性裆熙，如變量，繼承禽笑，運(yùn)算入录， 函數(shù). LESS 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可一在服務(wù)端運(yùn)行 (借助 Node.js)

為什么要使用它們佳镜？

結(jié)構(gòu)清晰僚稿，便于擴(kuò)展。

可以方便地屏蔽瀏覽器私有語(yǔ)法差異蟀伸。

可以輕松實(shí)現(xiàn)多重繼承蚀同。

完全兼容 CSS 代碼，可以方便地應(yīng)用到老項(xiàng)目中啊掏。

Css實(shí)現(xiàn)動(dòng)畫(huà)效果Animation還有哪些其他屬性蠢络。

CSS3動(dòng)畫(huà)的屬性主要分為三類：

transform

元素順時(shí)針旋轉(zhuǎn)的角度rotate

設(shè)置元素放大或縮小的倍數(shù)scale

設(shè)置元素的位移translate

設(shè)置元素傾斜的角度skew

transition過(guò)渡：可以在不使用 Flash 動(dòng)畫(huà)或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果脖律。

animation：@keyframes 規(guī)則用于創(chuàng)建動(dòng)畫(huà)谢肾。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果

事件委托是什么小泉？事件委托的缺點(diǎn)

事件委托：是 JavaScript 中綁定事件的常用技巧芦疏，利用事件模型中的冒泡原理，將事件綁定在更上層的父元素時(shí)微姊，通過(guò)檢查事件的目標(biāo)對(duì)象來(lái)判斷并獲取事件源酸茴。使用事件代理的好處是可以提高性能。

使用場(chǎng)景：

給許多子元素綁定相同的事件兢交，比如ul的li元素薪捍，或者table的td元素∨湓可以大量節(jié)省內(nèi)存酪穿，減少事件注冊(cè)。

可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無(wú)需再次綁定事件晴裹，對(duì)于動(dòng)態(tài)內(nèi)容及其合適

缺點(diǎn)：事件代理的常用應(yīng)用應(yīng)該僅限于上述需求被济，如果把所有事件都用事件代理，可能會(huì)出現(xiàn)本不該被觸發(fā)的事件被綁定上了事件的情況涧团。

事件模型

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

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

DOM0中事件一旦發(fā)生就直接調(diào)用事件句柄只磷，無(wú)傳播過(guò)程

一個(gè)DOM對(duì)象注冊(cè)多個(gè)類型相同的事件時(shí)经磅，DOM0級(jí)中會(huì)發(fā)生事件的覆蓋

DOM0級(jí)事件的注冊(cè)是直接將事件處理程序作為js對(duì)象的屬性，或者是將js代碼作為HTML元素的性質(zhì)值钮追。

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

在DOM2中有一個(gè)事件的傳播過(guò)程预厌。包括事件捕獲，目標(biāo)元素的事件處理程序運(yùn)行元媚，事件冒泡轧叽。

DOM2級(jí)中一個(gè)DOM對(duì)象注冊(cè)多個(gè)類型相同的事件時(shí)，則會(huì)依次執(zhí)行各個(gè)事件函數(shù)惠毁。

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

event對(duì)象是事件處理函數(shù)的參數(shù)鞠绰，事件源是e.target

3.IE事件模型：

IE的事件傳播過(guò)程只有DOM0級(jí)和DOM2級(jí)中第二第三階段，也就是只冒泡飒焦，不捕捉蜈膨。

ie中也可以在一個(gè)對(duì)象上添加多個(gè)事件處理函數(shù)

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

IE中的event對(duì)象不是事件處理函數(shù)的參數(shù)，而是window牺荠，并且事件源是srcElement

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

延遲javascript代碼的加載是為了加快網(wǎng)頁(yè)的訪問(wèn)速度

1.把延遲腳本放在頁(yè)面底部（body標(biāo)簽里）：如果把script標(biāo)簽放在head中，那么js加載完后才會(huì)加載頁(yè)面,因?yàn)閖s會(huì)阻塞后面的代碼的運(yùn)行休雌。這時(shí)候可以放在頁(yè)面的底部灶壶，文檔會(huì)按照從上到下的順序加載。

2.動(dòng)態(tài)創(chuàng)建DOM的方式：在文檔都加載完后杈曲，創(chuàng)建script標(biāo)簽驰凛，插入到DOM中

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

3.defer:在script標(biāo)簽里設(shè)置這個(gè)屬性，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后再運(yùn)行担扑，就是相當(dāng)于告訴瀏覽器立即下載但延遲執(zhí)行恰响。

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

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

它是JavaScript另外的一種運(yùn)行模式，在這種模式下燕垃，JavaScript在更嚴(yán)格的條件下執(zhí)行枢劝。

好處：

消除JavaScript一些不合理不嚴(yán)謹(jǐn)之處，消除一些怪異行為卜壕。

保證代碼安全運(yùn)行

提高編譯器效率您旁，增加運(yùn)行速度。

為未來(lái)版本的JavaScript做好鋪墊印叁。

壞處：

現(xiàn)在網(wǎng)站的js都會(huì)進(jìn)行壓縮被冒，一些文件用了嚴(yán)格模式军掂，一些文件沒(méi)有，壓縮后本來(lái)是嚴(yán)格模式的文件昨悼，不僅沒(méi)有指示嚴(yán)格模式蝗锥，反而在壓縮后浪費(fèi)了字節(jié)。（可以寫(xiě)在立即執(zhí)行函數(shù)當(dāng)中）

說(shuō)說(shuō)嚴(yán)格模式的限制

變量必須先聲明后使用

函數(shù)的參數(shù)不能有同名屬性率触，否則報(bào)錯(cuò)

對(duì)象不能有同名的屬性

不能對(duì)只讀屬性賦值

不能刪除不可刪除的屬性

eval和arguments不能被重新賦值

arguments不會(huì)自動(dòng)追蹤函數(shù)參數(shù)的變化终议，傳進(jìn)來(lái)是幾就是幾

不能使用arguments.callee和arguments.caller

禁止設(shè)置原始類型的屬性

禁止八進(jìn)制表示法

新增保留字，不能講保留字作為變量名 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返回哪些數(shù)據(jù)類型葱蝗？

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

例舉3種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?

強(qiáng)制：有三個(gè)函數(shù)可以將非數(shù)值轉(zhuǎn)化為數(shù)值：parseInt,parseFloat,（將字符串轉(zhuǎn)化為數(shù)值）number（適用于任何數(shù)據(jù)類型）

隱式：==

null和undefined的區(qū)別穴张？

null是一個(gè)表示"無(wú)"的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示"無(wú)"的原始值遮怜，轉(zhuǎn)為數(shù)值時(shí)為NaN佳魔。

當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined偿枕。null用來(lái)表示尚未存在的對(duì)象，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象户辫。

undefined表示"缺少值"渐夸，就是此處應(yīng)該有一個(gè)值，但是還沒(méi)有定義渔欢。典型用法是：

變量被聲明了墓塌，但沒(méi)有賦值時(shí)，就等于undefined奥额。

調(diào)用函數(shù)時(shí)苫幢，應(yīng)該提供的參數(shù)沒(méi)有提供，該參數(shù)等于undefined披坏。

對(duì)象沒(méi)有賦值的屬性态坦，該屬性的值為undefined。

函數(shù)沒(méi)有返回值時(shí)棒拂，默認(rèn)返回undefined伞梯。

null表示"沒(méi)有對(duì)象"，即該處不應(yīng)該有值帚屉。典型用法是：

作為函數(shù)的參數(shù)谜诫，表示該函數(shù)的參數(shù)不是對(duì)象。

作為對(duì)象原型鏈的終點(diǎn)攻旦。

數(shù)組

數(shù)組方法有哪些喻旷？

能改變?cè)瓟?shù)組的：

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

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

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

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

sort(function(a,b){return b-a(倒序)|a-b(升序)})排序且预，字母按照開(kāi)頭字母順序槽袄，如果排列數(shù)字大寫(xiě)必須寫(xiě)比較函數(shù)否則有bug

reverse() ?顛倒順序

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

不能改變?cè)瓟?shù)組的

slice(start,end)返回?cái)?shù)組中的成員數(shù)組,包括end

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

join(str)把數(shù)組值用指定字符串連起來(lái),如果沒(méi)有就默認(rèn)是逗號(hào)

toString()把數(shù)組中的每一項(xiàng)用逗號(hào)連接起來(lái)轉(zhuǎn)化為字符串（和沒(méi)參數(shù)的join一樣）

ES5中的數(shù)組方法：

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

arr.map(function(e,index,arr){return e*e})：每個(gè)元素調(diào)用函數(shù)锋谐，有返回值遍尺，返回新的數(shù)組，不改變?cè)瓟?shù)組,會(huì)處理稀疏數(shù)組涮拗，返回稀疏

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

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

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

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

數(shù)組遍歷：

常規(guī)for循環(huán)(按照順序，會(huì)處理稀疏數(shù)組不存在的元素就漾，也會(huì)處理null和undefined)

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

forEach()

Javascript垃圾回收方法?

標(biāo)記清除：這是所有瀏覽器最常用的一種垃圾回收方式，當(dāng)變量進(jìn)入環(huán)境（在函數(shù)在聲明一個(gè)變量）時(shí)从藤，將其標(biāo)記為“進(jìn)入環(huán)境”催跪，當(dāng)變量離開(kāi)環(huán)境（函數(shù)執(zhí)行結(jié)束）時(shí)，將其標(biāo)記為離開(kāi)環(huán)境夷野。垃圾收集器會(huì)按照固定的時(shí)間間隔周期性的釋放內(nèi)存。

引用計(jì)數(shù)：當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型的值賦給該變量時(shí)這個(gè)值得引用次數(shù)+1荣倾，當(dāng)去掉這個(gè)引用時(shí)悯搔，引用次數(shù)-1，當(dāng)引用次數(shù)為0時(shí)表明可將其內(nèi)存回收

內(nèi)存泄漏是什么舌仍？

內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在妒貌。

在低版本的IE中經(jīng)常會(huì)出現(xiàn)內(nèi)存泄漏，是因?yàn)镮E中DOM/BOM對(duì)象都是通過(guò)引用計(jì)數(shù)回收的铸豁，因?yàn)榇嬖谘h(huán)引用的問(wèn)題灌曙，所以他們的引用次數(shù)永遠(yuǎn)不會(huì)為0，假如這個(gè)函數(shù)被重復(fù)多次調(diào)用节芥，就會(huì)導(dǎo)致內(nèi)存泄漏（大量?jī)?nèi)存得不到回收）

解決辦法：要想破壞循環(huán)引用在刺，引用DOM元素的對(duì)象或DOM對(duì)象的引用需要被賦值為null。

哪些操作會(huì)造成內(nèi)存泄漏头镊？

閉包：閉包中的變量不會(huì)被垃圾回收機(jī)制回收蚣驼。

setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏相艇。

循環(huán)引用：循環(huán)（在IE中兩個(gè)DOM/BOM對(duì)象彼此引用時(shí)颖杏，就會(huì)產(chǎn)生一個(gè)循環(huán)）

談?wù)凾his對(duì)象的理解。

this總是指函數(shù)運(yùn)行時(shí)所在的對(duì)象坛芽。在不同的場(chǎng)景中留储，this的身份不同：

DOM的事件處理函數(shù)中翼抠，this指觸發(fā)這個(gè)事件的DOM對(duì)象；

全局函數(shù)調(diào)用中获讳，this指window阴颖；

作為對(duì)象的方法調(diào)用時(shí)，this指調(diào)用這個(gè)函數(shù)的那個(gè)對(duì)象赔嚎；

用new實(shí)例化對(duì)象膘盖，作為構(gòu)造函數(shù)調(diào)用時(shí)，this指新創(chuàng)建的那個(gè)對(duì)象

ES6中尤误，箭頭函數(shù)當(dāng)中的this指的的是定義時(shí)所在的對(duì)象而不是使用時(shí)所在的對(duì)象侠畔。這樣我們?cè)谑褂玫臅r(shí)候就不會(huì)產(chǎn)生很多歧義了。

JavaScript有塊作用域嗎损晤？

沒(méi)有软棺。在JavaScript中，if/for語(yǔ)句中初始化變量的表達(dá)式中所定義的變量尤勋，在循環(huán)結(jié)束后也依舊會(huì)存在于循環(huán)外部的執(zhí)行環(huán)境當(dāng)中喘落。

JavaScript的作用域和作用域鏈?

作用域：只有函數(shù)才會(huì)產(chǎn)生作用域的概念，它指變量的作用范圍最冰，內(nèi)部作用域由局部變量瘦棋，函數(shù)，形參暖哨，實(shí)參組成

作用域鏈：保證執(zhí)行環(huán)境中有權(quán)訪問(wèn)的變量和函數(shù)是有序的赌朋，作用域鏈的變量只能向上訪問(wèn)，變量訪問(wèn)到window對(duì)象終止篇裁，變量作用域鏈向下訪問(wèn)變量時(shí)不允許的沛慢。

說(shuō)說(shuō)函數(shù)表達(dá)式和函數(shù)聲明的區(qū)別

執(zhí)行代碼時(shí)，JavaScript引擎在第一遍會(huì)聲明函數(shù)并將它們提升到頂部达布。所以函數(shù)聲明語(yǔ)句可以它定義之前出現(xiàn)的代碼所調(diào)用团甲。

函數(shù)表達(dá)式定義的函數(shù)，是將其賦值給一個(gè)變量黍聂，雖然變量的聲明提前了躺苦，但給變量賦值是不會(huì)提前的，因此調(diào)用這個(gè)函數(shù)之前必須先定義才行分冈。

函數(shù)聲明提升：

執(zhí)行代碼時(shí)圾另，JavaScript引擎在第一遍會(huì)聲明函數(shù)并將它們提升到頂部。函數(shù)聲明語(yǔ)句可以它定義之前出現(xiàn)的代碼所調(diào)用雕沉。

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

上下文就是this關(guān)鍵字的值集乔，比如當(dāng)函數(shù)作為對(duì)象的方法來(lái)調(diào)用時(shí)，該對(duì)象就是此次調(diào)用的上下文，也就是該函數(shù)的this值;當(dāng)函數(shù)作為全局函數(shù)調(diào)用時(shí)扰路，上下文指的時(shí)window尤溜。

作用域和上下文之間最大的區(qū)別是： 上下文在運(yùn)行時(shí)確定，隨時(shí)可能改變汗唱；作用域在定義時(shí)確定宫莱，永遠(yuǎn)不會(huì)改變。

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

call和apply的區(qū)別和作用哩罪？

區(qū)別：

call()的第一個(gè)參數(shù)是上下文授霸，第二個(gè)參數(shù)是參數(shù)序列

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

作用：改變函數(shù)的上下文际插，它是以某個(gè)對(duì)象的方法來(lái)調(diào)用函數(shù)碘耳，函數(shù)的this指的是第一個(gè)參數(shù)。如果沒(méi)有傳遞參數(shù)是null/undefined框弛，this指window

談?wù)勀銓?duì)閉包的理解辛辨，為什么使用閉包，使用場(chǎng)景瑟枫，它會(huì)有什么影響斗搞？

閉包：就是訪問(wèn)函數(shù)內(nèi)部變量的函數(shù)，創(chuàng)建閉包的方式就是函數(shù)嵌套函數(shù)

作用：當(dāng)在函數(shù)內(nèi)部嵌套一個(gè)函數(shù)時(shí)慷妙，就創(chuàng)建了閉包僻焚，閉包可以訪問(wèn)它被定義時(shí)所處的作用域中的任何變量，并且參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收膝擂。閉包還可以避免全局變量的污染溅呢。

使用場(chǎng)景：在大型項(xiàng)目當(dāng)中，為了防止命名沖突猿挚，一般會(huì)把相應(yīng)的代碼用閉包的形式包裹起來(lái)，避免暴露在全局作用域下

缺點(diǎn)：如果閉包引用外部變量驶鹉，變量會(huì)常駐內(nèi)存绩蜻，這樣會(huì)增大內(nèi)存使用量，從而降低性能室埋，使用不當(dāng)很容易造成內(nèi)存泄露

new操作符具體做了什么办绝？

創(chuàng)建了一個(gè)空對(duì)象，并且this變量引用該對(duì)象姚淆，同時(shí)繼承了該函數(shù)的原型

屬性和方法加入到this引用的對(duì)象

新創(chuàng)建的對(duì)象由this引用孕蝉，并且最后隱式的返回this

正則：

匹配模式：i (忽略大小寫(xiě))，g(全局：匹配所有字符串腌逢，而不是發(fā)現(xiàn)第一個(gè)就停止)降淮，m（多行模式：忽略文本的末尾）

regexp的方法：

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

exec(): pattern.exec(str) ?返回?cái)?shù)組，第一個(gè)是匹配的字符串搏讶，后面都是括號(hào)里的子表達(dá)式的字符串

字符串方法:

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

replace(pattern佳鳖，str/fn):先找霍殴，然后替換，如果有g(shù)替換所以匹配字符串系吩，沒(méi)有就替換第一個(gè)匹配的来庭，函數(shù)可以動(dòng)態(tài)改變字符串(不改變?cè)址?

match(pattern):返回?cái)?shù)組，如果有g(shù)返回所有匹配結(jié)果穿挨，如果沒(méi)有數(shù)組第一個(gè)是字符串月弛，剩下都是括號(hào)里的子表達(dá)式

常用的正則：

\s空格,\d數(shù)字,\w(字母和數(shù)字)，[^..]不在里面的任意字符科盛，+ 一個(gè)或多個(gè)帽衙，* 0個(gè)或多個(gè)， 土涝？0或1個(gè)佛寿，{n}n個(gè)，{n,m} n<=x個(gè)

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

檢驗(yàn)網(wǎng)址的正則:

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 協(xié)議

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

result[3] //about.html路徑

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

var str=" hello world ";

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

str.trim(）

web storage和cookie的區(qū)別?Cookie、sessionStorage 和 localStrorage?

它們都是為了實(shí)現(xiàn)本地存儲(chǔ)而設(shè)計(jì)的蜡饵。

存儲(chǔ)空間：cookie數(shù)據(jù)大小不能超過(guò)4K弹渔，webstorage雖然也有存儲(chǔ)大小的限制，但是比cookie大得多溯祸，有5M

數(shù)據(jù)是否傳遞：cookie是每請(qǐng)求一個(gè)頁(yè)面都會(huì)發(fā)送到服務(wù)器肢专，webstorage僅用于本地存儲(chǔ)數(shù)據(jù)，不會(huì)與服務(wù)器進(jìn)行交互焦辅。

數(shù)據(jù)有效時(shí)間：cookie在過(guò)期時(shí)間一直有效博杖，即使窗口和瀏覽器關(guān)閉。localstorage存儲(chǔ)持久數(shù)據(jù)筷登，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)剃根；sessionstorage數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。

Web Storage擁有setItem,getItem,removeItem,clear等方法前方，不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie狈醉，getCookie

cookie 和session 的區(qū)別?

cookie的數(shù)據(jù)存放在瀏覽器上，session的數(shù)據(jù)存放在服務(wù)器上

cookie不是很安全惠险，別人會(huì)分析本地cookie而進(jìn)行cookie欺騙苗傅，因此考慮到安全性應(yīng)該使用session。

session的數(shù)據(jù)在一定時(shí)間內(nèi)會(huì)存放在服務(wù)器上班巩，當(dāng)訪問(wèn)增多渣慕，會(huì)影響服務(wù)器性能，因此考慮到服務(wù)器性能應(yīng)該使用cookie。

單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4k,很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie摇庙。

所以一般來(lái)說(shuō)旱物，將重要信息存放在session，不重要的需要保存的數(shù)據(jù)存放在cookie卫袒。

請(qǐng)你談?wù)凜ookie的弊端?

cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便宵呛，減輕了服務(wù)器的負(fù)擔(dān)，但是還有很多局限性：

缺點(diǎn)：

數(shù)量和長(zhǎng)度的限制：?jiǎn)蝹€(gè)cookie保存的數(shù)據(jù)不能超過(guò)4k（1024*4=4096字節(jié)夕凝，為了兼容性一般不能超過(guò)4095kb）,很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie宝穗。

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

有些狀態(tài)不能保存在客戶端码秉。比如為了防止重復(fù)提交表單逮矛，需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果放在客戶端不會(huì)起作用转砖。

優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性

使用cookie需要注意的問(wèn)題：

可以通過(guò)良好的編程來(lái)控制保存在cookie中的session對(duì)象的大小

通過(guò)加密和安全傳輸技術(shù)減小cookie被破解的可能性

不在cookie中存放重要信息须鼎。

控制cookie的有效期，偷盜者可能拿到一個(gè)過(guò)期的cookie

一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成府蔗，這個(gè)過(guò)程中都發(fā)生了什么晋控？（流程說(shuō)的越詳細(xì)越好）

用戶發(fā)送一個(gè)url請(qǐng)求

瀏覽器通過(guò)DNS獲取網(wǎng)站的IP地址：客戶端先檢查本地是否有對(duì)應(yīng)的IP地址，若找到則返回姓赤，若沒(méi)有則請(qǐng)求上級(jí)DNS服務(wù)器赡译，直到找到或找到根節(jié)點(diǎn)。

瀏覽器和服務(wù)器通過(guò)TCP三次握手來(lái)建立TCP連接不铆。

一旦連接建立蝌焚，瀏覽器會(huì)通過(guò)該連接向服務(wù)器端發(fā)送HTTP請(qǐng)求

遠(yuǎn)程服務(wù)器找到資源并返回響應(yīng)報(bào)文，響應(yīng)報(bào)文中包含狀態(tài)碼誓斥。（200表示請(qǐng)求成功）

請(qǐng)求成功后服務(wù)器返回相應(yīng)的資源只洒，客戶端下載資源

釋放TCP連接。

接下來(lái)就是頁(yè)面渲染階段了劳坑。首先解析HTML生成DOM樹(shù)红碑，再解析CSS文件生產(chǎn)渲染樹(shù)。?javascript又可以根據(jù) DOM API 操作 DOM

說(shuō)說(shuō)TCP傳輸?shù)娜挝帐炙拇螕]手策略

1泡垃、三次握手：為了將數(shù)據(jù)準(zhǔn)確無(wú)誤的送達(dá)目標(biāo)處，TCP協(xié)議采用三次握手策略羡鸥。

三次握手的過(guò)程是：

發(fā)送端先發(fā)送一個(gè)帶有SYN標(biāo)志的數(shù)據(jù)包給接收端

接收端收到數(shù)據(jù)包后蔑穴，傳回一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息

發(fā)送端再發(fā)送一個(gè)帶有ACK表示的數(shù)據(jù)包以示握手成功。

在這個(gè)過(guò)程當(dāng)中惧浴，如果發(fā)送方在規(guī)定的延遲時(shí)間內(nèi)沒(méi)有收到回復(fù)則默認(rèn)接收方?jīng)]有收到請(qǐng)求存和，TCP協(xié)議會(huì)再次發(fā)送數(shù)據(jù)包。直到收到回復(fù)為止。

2捐腿、斷開(kāi)一個(gè)TCP連接需要四次握手：

主動(dòng)關(guān)閉方發(fā)送一個(gè)FIN纵朋，用來(lái)關(guān)閉主動(dòng)方到被動(dòng)方的數(shù)據(jù)傳送。（但是在fin包之前發(fā)送出去的數(shù)據(jù)茄袖，如果沒(méi)有收到ack確認(rèn)報(bào)文操软，主動(dòng)關(guān)閉方還是會(huì)再次發(fā)送這些數(shù)據(jù)。此時(shí)主動(dòng)關(guān)閉方還可以接受數(shù)據(jù)）

被動(dòng)關(guān)閉方收到fin包后宪祥，發(fā)送一個(gè)ack給對(duì)方聂薪。確認(rèn)序號(hào)為收到序號(hào)+1。

被動(dòng)關(guān)閉方發(fā)送一個(gè)fin蝗羊，用來(lái)關(guān)閉被動(dòng)關(guān)閉方到主動(dòng)關(guān)閉方的數(shù)據(jù)傳送藏澳。

主動(dòng)關(guān)閉方收到fin后，發(fā)送一個(gè)ack給對(duì)方耀找，確認(rèn)序號(hào)為收到序號(hào)+1翔悠，至此，完成四次握手野芒。

其他 HTTP 請(qǐng)求方法

在請(qǐng)求頭的第一行包含了請(qǐng)求的方法蓄愁，它包括OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE

GET：從指定資源請(qǐng)求數(shù)據(jù)

POST：向指定的資源發(fā)送數(shù)據(jù)

HEAD：和GET相同，但是只返回HTTP報(bào)頭复罐，不返回文檔主體

DELETE：刪除指定資源

OPTIONS：返回服務(wù)器支持的HTTP方法

CONNECT:把請(qǐng)求的連接轉(zhuǎn)換到透明的TCP/IP通信

PUT：上傳指定的URL表示

TCP和UDP的區(qū)別

TCP（Transmission Control Protocol,傳輸控制協(xié)議）：是基于連接的協(xié)議涝登。也就是說(shuō)在發(fā)送數(shù)據(jù)前，必須和對(duì)方建立可靠的連接效诅。一個(gè)TCP連接必須通過(guò)三次握手才能建立起來(lái)胀滚。

UDP（User Data Protocol,用戶數(shù)據(jù)報(bào)協(xié)議）：是于TCP相對(duì)應(yīng)的協(xié)議。它是面向非連接的協(xié)議乱投。也就是說(shuō)他不與對(duì)方建立連接咽笼，而是直接把數(shù)據(jù)包發(fā)送過(guò)去。UDP適用于一次只傳少量的數(shù)據(jù)戚炫、并且對(duì)可靠性要求不高的應(yīng)用環(huán)境

HTTP狀態(tài)碼

200 OK 請(qǐng)求成功

201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源

202 Accepted 請(qǐng)求接受但尚未處理

301 Move Permanently 永久性重定向剑刑，請(qǐng)求的網(wǎng)頁(yè)已被永久性的移到了新的位置。請(qǐng)求的報(bào)文中會(huì)附帶重定向的URL双肤。

302 Found 臨時(shí)性重定向

304 Not Modified 自從上次請(qǐng)求后施掏，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)∶┟樱可直接使用緩存

400??Bad Request 服務(wù)器無(wú)法理解請(qǐng)求的格式

401?Unauthorized 請(qǐng)求未授權(quán)七芭。

402?Forbidden 禁止訪問(wèn)。

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

500 Internal Server Error 最常見(jiàn)的服務(wù)器端錯(cuò)誤狸驳。

503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求（可能是過(guò)載或維護(hù)）预明。

webscoket會(huì)用嗎？webSocket如何兼容低瀏覽器,websocket原理耙箍，應(yīng)用場(chǎng)景

1撰糠、webscoket是HTML5提供的傳輸協(xié)議。websocket是應(yīng)用層第七層上的一個(gè)應(yīng)用層協(xié)議辩昆，它必須依賴?HTTP 協(xié)議進(jìn)行一次握手?阅酪，握手成功后，數(shù)據(jù)就直接從 TCP 通道傳輸卤材，與 HTTP 無(wú)關(guān)了遮斥。它可以將服務(wù)器的更新及時(shí)主動(dòng)的發(fā)給客戶端,而不需要客戶端以一定時(shí)間間隔去輪詢。

2扇丛、目前主流的瀏覽器都支持這個(gè)協(xié)議术吗，IE還不支持。如何兼容呢帆精？

Adobe Flash Socket 较屿、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 卓练、 基于長(zhǎng)輪詢的 XHR

3隘蝎、原理：Websocket的數(shù)據(jù)傳輸是frame形式傳輸?shù)模热鐣?huì)將一條消息分為幾個(gè)frame襟企，按照先后順序傳輸出去嘱么。這樣做會(huì)有幾個(gè)好處：

大數(shù)據(jù)的傳輸可以分片傳輸，不用考慮到數(shù)據(jù)大小導(dǎo)致的長(zhǎng)度標(biāo)志位不足夠的情況顽悼。

和http的chunk一樣曼振，可以邊生成數(shù)據(jù)邊傳遞消息，即提高傳輸效率蔚龙。

4冰评、應(yīng)用場(chǎng)景：社交聊天、彈幕木羹、多玩家游戲甲雅、協(xié)同編輯、基于位置的應(yīng)用坑填、體育實(shí)況更新抛人、視頻會(huì)議/聊天等需要高實(shí)時(shí)的場(chǎng)景

說(shuō)說(shuō)網(wǎng)絡(luò)分層里七層模型是哪七層(從上到下)

應(yīng)用層:允許訪問(wèn)OSI環(huán)境的手段

表示層:對(duì)數(shù)據(jù)進(jìn)行翻譯、加密和壓縮

會(huì)話層:建立脐瑰、管理和終止會(huì)話

傳輸層(TCP和UDP)：提供端到端的可靠報(bào)文傳遞和錯(cuò)誤恢復(fù)

網(wǎng)絡(luò)層(IP)：負(fù)責(zé)數(shù)據(jù)包從源到宿的傳遞和網(wǎng)際互連

數(shù)據(jù)鏈路層：將比特組裝成幀和點(diǎn)到點(diǎn)的傳遞

物理層：通過(guò)媒介傳輸比特,確定機(jī)械及電氣規(guī)范

各種協(xié)議

ICMP協(xié)議： 因特網(wǎng)控制報(bào)文協(xié)議函匕。它是TCP/IP協(xié)議族的一個(gè)子協(xié)議，用于在IP主機(jī)蚪黑、路由器之間傳遞控制消息盅惜。

TFTP協(xié)議： 是TCP/IP協(xié)議族中的一個(gè)用來(lái)在客戶機(jī)與服務(wù)器之間進(jìn)行簡(jiǎn)單文件傳輸?shù)膮f(xié)議，提供不復(fù)雜忌穿、開(kāi)銷不大的文件傳輸服務(wù)抒寂。

HTTP協(xié)議： 超文本傳輸協(xié)議，是一個(gè)屬于應(yīng)用層的面向?qū)ο蟮膮f(xié)議掠剑，由于其簡(jiǎn)捷屈芜、快速的方式，適用于分布式超媒體信息系統(tǒng)朴译。

DHCP協(xié)議： 動(dòng)態(tài)主機(jī)配置協(xié)議井佑，是一種讓系統(tǒng)得以連接到網(wǎng)絡(luò)上，并獲取所需要的配置參數(shù)手段眠寿。

線程與進(jìn)程的區(qū)別

一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程

線程的劃分尺度小于進(jìn)程躬翁，使得多線程程序的并發(fā)性高

另外，進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元盯拱，而多個(gè)線程共享內(nèi)存盒发，從而極大地提高了程序的運(yùn)行效率

線程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口狡逢、順序執(zhí)行序列和程序的出口宁舰。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中奢浑，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制

從邏輯角度來(lái)看蛮艰，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行雀彼。但操作系統(tǒng)并沒(méi)有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用壤蚜，來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別

你有哪些性能優(yōu)化的方法详羡？

代碼層面：避免使用css表達(dá)式仍律，避免使用高級(jí)選擇器，通配選擇器实柠，避免寫(xiě)行內(nèi)樣式水泉。少用全局變量，用innerHTML代替DOM操作窒盐，減少DOM操作次數(shù)草则，緩存DOM節(jié)點(diǎn)查找的結(jié)果，避免全局查詢蟹漓，多個(gè)變量聲明合并炕横，避免圖片和iFrame等的空Src∑狭＃空Src會(huì)重新加載當(dāng)前頁(yè)面份殿，影響速度和效率膜钓，

緩存利用：緩存Ajax，多個(gè)域名緩存卿嘲，使用CDN颂斜，使用外部js和css文件以便緩存，添加Expires頭拾枣，服務(wù)端配置Etag等等

減小請(qǐng)求數(shù)量：合并樣式和腳本沃疮，使用css sprite，圖片按需加載梅肤，靜態(tài)資源延遲加載司蔬。

減少帶寬：壓縮文件，開(kāi)啟GZIP

為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效姨蝴？

網(wǎng)站資源指網(wǎng)站的圖片俊啼、視頻、js似扔、css吨些。服務(wù)器直接把相應(yīng)文件發(fā)送到客戶端的文件都是靜態(tài)資源。（動(dòng)態(tài)資源一般指數(shù)據(jù)庫(kù)資源）炒辉。

使CDN緩存更方便：靜態(tài)資源和動(dòng)態(tài)資源分服務(wù)器存放豪墅，使用不同的服務(wù)器處理請(qǐng)求。

突破瀏覽器的并發(fā)限制黔寇。比較老的瀏覽器（IE6）只有兩個(gè)并發(fā)偶器，現(xiàn)代瀏覽器是6個(gè)并發(fā)。并發(fā)請(qǐng)求只針對(duì)同一個(gè)域名的缝裤，即同一時(shí)間針對(duì)同一域名下的請(qǐng)求數(shù)量有限制屏轰，超過(guò)限制的資源會(huì)阻塞。

節(jié)省cookie帶寬：每請(qǐng)求一個(gè)頁(yè)面都會(huì)發(fā)送一次主域名下的cookie,請(qǐng)求頭的cookie不能壓縮憋飞，如果cookie較多時(shí)霎苗，會(huì)造成發(fā)送的數(shù)據(jù)過(guò)大，導(dǎo)致速度變慢榛做。使用其他域名來(lái)保存cookie

節(jié)約主域名的連接數(shù)唁盏，優(yōu)化頁(yè)面響應(yīng)速度

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

關(guān)于多域名检眯，也不是越多越好厘擂，瀏覽器做dns解釋也是耗時(shí)間的，所以控制在2~4個(gè)之間锰瘸。

移動(dòng)端性能優(yōu)化

盡量使用css3動(dòng)畫(huà)刽严，開(kāi)啟硬件加速。

適當(dāng)使用touch事件代替click事件避凝。

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

可以用transform: translateZ(0)來(lái)開(kāi)啟硬件加速眨补。

不濫用Float。Float在渲染時(shí)計(jì)算量比較大倒脓，盡量減少使用

不濫用Web字體渤涌。Web字體需要下載，解析把还，重繪當(dāng)前頁(yè)面，盡量減少使用茸俭。

合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout

CSS中的屬性（CSS3 transitions吊履、CSS3 3D transforms、Opacity调鬓、Canvas艇炎、WebGL、Video）會(huì)觸發(fā)GPU渲染腾窝，請(qǐng)合理使用缀踪。過(guò)渡使用會(huì)引發(fā)手機(jī)過(guò)耗電增加

PC端的在移動(dòng)端同樣適用

談?wù)勀銓?duì)重構(gòu)的理解

網(wǎng)站重構(gòu)也就是說(shuō)是在不改變UI的情況下，對(duì)網(wǎng)站進(jìn)行優(yōu)化虹脯，簡(jiǎn)化結(jié)構(gòu)驴娃、添加可讀性。

對(duì)于傳統(tǒng)的網(wǎng)站來(lái)說(shuō)重構(gòu)通常是：

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

使網(wǎng)站前端兼容于現(xiàn)代瀏覽器

對(duì)于移動(dòng)平臺(tái)的優(yōu)化

針對(duì)于SEO進(jìn)行優(yōu)化

深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面：

減少代碼間的耦合

讓代碼保持彈性

嚴(yán)格按規(guī)范編寫(xiě)代碼

設(shè)計(jì)可擴(kuò)展的API

代替舊有的框架循集、語(yǔ)言(如VB)

增強(qiáng)用戶體驗(yàn)

通常來(lái)說(shuō)對(duì)于速度的優(yōu)化也包含在重構(gòu)中:

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

程序的性能優(yōu)化(如數(shù)據(jù)讀寫(xiě))

采用CDN來(lái)加速資源加載

對(duì)于JS DOM的優(yōu)化

HTTP服務(wù)器的文件緩存

怎樣減少http請(qǐng)求次數(shù)

CSS Sprites

合并js,css文件

js,css,images等資源的壓縮

CDN托管

緩存的使用

你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化咒彤？

文件合并

文件壓縮

使用CDN托管

使用多個(gè)域名來(lái)緩存資源

你都使用哪些工具來(lái)測(cè)試代碼的性能疆柔？

Profiler

JSPerf

Dromaeo

一個(gè)頁(yè)面上有大量的圖片（大型電商網(wǎng)站），加載很慢镶柱，你有哪些方法優(yōu)化這些圖片的加載旷档，給用戶更好的體驗(yàn)。

圖片懶加載歇拆，在頁(yè)面的未可視區(qū)域添加一個(gè)滾動(dòng)條事件鞋屈，判斷圖片位置和瀏覽器頂端的距離與頁(yè)面的距離，如果前者小于后者查吊，優(yōu)先加載谐区。

如果為幻燈片，相冊(cè)等逻卖，可以使用圖片預(yù)加載技術(shù)宋列，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載

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

如果圖片過(guò)大评也，可以使用特殊編碼的圖片炼杖，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖灭返，以提高用戶體驗(yàn)。

如果圖片展示區(qū)域小于圖片的真實(shí)大小坤邪，則因在服務(wù)器端先進(jìn)行圖片壓縮熙含，圖片壓縮后大小與展示一致。

reflow和repaint（重排和重繪）

1.repaint(重繪)：改變DOM元素的視覺(jué)效果時(shí)會(huì)觸發(fā)艇纺，使瀏覽器變慢怎静，因?yàn)楦淖兡硞€(gè)元素的視覺(jué)效果會(huì)check這個(gè)DOM元素內(nèi)的所有節(jié)點(diǎn)，會(huì)重新對(duì)DOM渲染黔衡。

比如：opacity蚓聘、background-color、visibility盟劫、outline

2.reflow（回流）:改變DOM元素的位置時(shí)會(huì)觸發(fā)夜牡，比repaint開(kāi)銷更大，因?yàn)樗麜?huì)重新計(jì)算所有元素的位置和占用的面積侣签，這樣會(huì)引起整個(gè)頁(yè)面的重新渲染塘装，他也會(huì)觸發(fā)repaint。（display：none的元素不會(huì)引發(fā)重排和重繪）

比如：js添加刪除元素影所，用js改變DOM的可見(jiàn)性（display:none-block）,添加刪除或改變CSS樣式蹦肴，增加或移除樣式表，css3的動(dòng)畫(huà)和過(guò)渡型檀，使用offsetwidth和offsetheight冗尤。還有用戶的一些操作：拖動(dòng)窗口大小，表單輸入值 胀溺，改變字體大小裂七，更換樣式表等等