摘要：和面試題盒子模型中盒子模型包括盒子模型和標(biāo)準(zhǔn)的盒子模型?？蛻舳隋e(cuò)誤服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。服務(wù)器端暫時(shí)無法處理請(qǐng)求可能是過載或維護(hù)。

學(xué)而不思則罔，思而不學(xué)則殆。這一篇會(huì)將一些看到的面試題做一個(gè)總結(jié)。以后看到新的面試題也會(huì)持續(xù)的更新在這個(gè)里面。

CSS 中盒子模型包括 IE 盒子模型和標(biāo)準(zhǔn)的 W3C 盒子模型。
W3C 盒子模型： width = content （box-sizing: content-box）
IE 盒子模型中： width = content + padding + border （box-sizing: border-box）

合理的title、description、keywords：搜索對(duì)著三項(xiàng)的權(quán)重逐個(gè)減小，title值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過2次，而且要靠前，不同頁(yè)面title要有所不同；description把頁(yè)面內(nèi)容高度概括，長(zhǎng)度合適，不可過分堆砌關(guān)鍵詞，不同頁(yè)面description有所不同；keywords列舉出重要關(guān)鍵詞即可

語(yǔ)義化的HTML代碼，符合W3C規(guī)范：語(yǔ)義化代碼讓搜索引擎容易理解網(wǎng)頁(yè)

重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對(duì)抓取長(zhǎng)度有限制，保證重要內(nèi)容一定會(huì)被抓取

重要內(nèi)容不要用js輸出：爬蟲不會(huì)執(zhí)行js獲取內(nèi)容

少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容

非裝飾性圖片必須加alt

提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請(qǐng)求；

服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；

瀏覽器對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語(yǔ)法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；

載入解析到的資源文件，渲染頁(yè)面，完成。

1XX：信息狀態(tài)碼

100 Continue 繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息

2XX：成功狀態(tài)碼

200 OK 正常返回信息

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

202 Accepted 服務(wù)器已接受請(qǐng)求，但尚未處理

3XX：重定向

301 Moved Permanently 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。

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

303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。

304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過。

4XX：客戶端錯(cuò)誤

400 Bad Request 服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。

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

403 Forbidden 禁止訪問。

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

5XX: 服務(wù)器錯(cuò)誤

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

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

在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪問app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。

離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。

svg繪制出來的每一個(gè)圖形的元素都是獨(dú)立的DOM節(jié)點(diǎn)，能夠方便的綁定事件或用來修改。canvas輸出的是一整幅畫布

svg輸出的圖形是矢量圖形，后期可以修改參數(shù)來自由放大縮小，不會(huì)是失真和鋸齒。而canvas輸出標(biāo)量畫布，就像一張圖片一樣，放大會(huì)失真或者鋸齒

基本選擇器：

id選擇器：id = name

類選擇器：class = "name"

標(biāo)簽選擇器：body, div, ul

全局選擇器：*

復(fù)雜選擇器：

組合選擇器：.head .head_logo

后代選擇器：ul li 從父集到子集

群組選擇器：div span {color: red} 具有相同樣式的標(biāo)簽分組顯示

繼承選擇器：

為類選擇器：鏈接樣式 a:hover

子選擇器：div > p

css 相鄰兄弟選擇器： h1 + p

優(yōu)先級(jí)：

屬性后面加 !import 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式

作為 style 屬性寫在元素內(nèi)的樣式

id 選擇器

類選擇器

標(biāo)簽選擇器

通配符選擇器（*）

瀏覽器自定義或繼承

瀏覽器預(yù)先加載 CSS 后，可以不必等待 HTML 加載完畢就可以渲染頁(yè)面了。

HTML 渲染并不會(huì)等到完全加載完在渲染頁(yè)面，而是一邊解析 DOM 一邊渲染。

JS 寫在尾部，主要是因?yàn)?JS主要扮演事件處理的功能，一方面很多操作是在頁(yè)面渲染后才執(zhí)行的。另一方面，可以節(jié)省加載時(shí)間，是頁(yè)面能夠更好的加載，提高用戶的良好體驗(yàn)。

relative： 相對(duì)定位，相對(duì)于自己本身在正常文檔流中的位置進(jìn)行定位。

absolute：生成絕對(duì)定位，相對(duì)于最近一級(jí)定位不為 static 的父元素進(jìn)行定位。

fixed： 生成絕對(duì)定位，相對(duì)于瀏覽器窗口或者 iframe 進(jìn)行定位。

static：默認(rèn)值，沒有定位，元素出現(xiàn)在正常文檔流中。

stricky：生成粘性定位元素，容器的位置根據(jù)正常文檔流計(jì)算得出。

概念：將多個(gè)小圖片拼接到一個(gè)圖片中。通過background-position和元素尺寸調(diào)節(jié)需要顯示的背景圖案。

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

減少HTTP請(qǐng)求數(shù)，極大地提高頁(yè)面加載速度

增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小

更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實(shí)現(xiàn)

缺點(diǎn)：

圖片合并麻煩

維護(hù)麻煩，修改一個(gè)圖片可能需要從新布局整個(gè)圖片，樣式

移除空格

使用margin負(fù)值

使用font-size:0

letter-spacing

word-spacing

GIF

8位像素，256色

無損壓縮

支持簡(jiǎn)單動(dòng)畫

支持boolean透明

適合簡(jiǎn)單動(dòng)畫

JPEG

顏色限于256

有損壓縮

可控制壓縮質(zhì)量

不支持透明

適合照片

PNG

有PNG8和truecolor PNG

PNG8類似GIF顏色上限為256，文件小，支持alpha透明度，無動(dòng)畫

適合圖標(biāo)、背景、按鈕

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

!important規(guī)則最重要，大于其它規(guī)則

行內(nèi)樣式規(guī)則，加1000

對(duì)于選擇器中給定的各個(gè)ID屬性值，加100

對(duì)于選擇器中給定的各個(gè)類屬性、屬性選擇器或者偽類選擇器，加10

對(duì)于選擇其中給定的各個(gè)元素標(biāo)簽選擇器，加1

如果權(quán)值一樣，則按照樣式規(guī)則的先后順序來應(yīng)用，順序靠后的覆蓋靠前的規(guī)則

因?yàn)閖s是單線程的。瀏覽器遇到etTimeout和setInterval會(huì)先執(zhí)行完當(dāng)前的代碼塊，在此之前會(huì)把定時(shí)器推入瀏覽器的待執(zhí)行時(shí)間隊(duì)列里面，等到瀏覽器執(zhí)行完當(dāng)前代碼之后會(huì)看下事件隊(duì)列里有沒有任務(wù)，有的話才執(zhí)行定時(shí)器里的代碼。

千萬不要使用typeof來判斷對(duì)象和數(shù)組，因?yàn)檫@種類型都會(huì)返回object。

typeOf()是判斷基本類型的Boolean,Number，symbol, undefined, String。 對(duì)于引用類型：除function，都返回object null返回object。

installOf() 用來判斷A是否是B的實(shí)例，installof檢查的是原型。

toString() 是Object的原型方法，對(duì)于 Object 對(duì)象，直接調(diào)用 toString() 就能返回 [Object Object] 。而對(duì)于其他對(duì)象，則需要通過 call / apply 來調(diào)用才能返回正確的類型信息。

hasOwnProperty()方法返回一個(gè)布爾值，指示對(duì)象自身屬性中是否具有指定的屬性，該方法會(huì)忽略掉那些從原型鏈上繼承到的屬性。

isProperty()方法測(cè)試一個(gè)對(duì)象是否存在另一個(gè)對(duì)象的原型鏈上。

valueof：所有對(duì)象都有valueof，如果存在任意原始值，他就默認(rèn)將對(duì)象轉(zhuǎn)化為表示它的原始值。如果對(duì)象是復(fù)合值，而卻大部分對(duì)象無法真正表示一個(gè)原始值，因此默認(rèn)的valueof()方法簡(jiǎn)單的返回對(duì)象本身，而不是返回原始值。

GET：一般用于查詢數(shù)據(jù)，使用 URL 傳遞參數(shù)，由于瀏覽器對(duì)地址欄長(zhǎng)度有限制，所以使用 GET 方式所發(fā)送信息的數(shù)量有限制，同時(shí)瀏覽器記錄（歷史記錄，緩存）會(huì)保留請(qǐng)求地址的信息，包括地址后面的數(shù)據(jù)。GET 只能發(fā)送普通格式（URL 編碼格式）的數(shù)據(jù)。

POST：一般用于向服務(wù)器發(fā)送數(shù)據(jù)，對(duì)所發(fā)送的數(shù)據(jù)的大小理論上是沒有限制，瀏覽器會(huì)緩存記錄地址，但不會(huì)記錄 POST 提交的數(shù)據(jù)。POST 可以發(fā)送純文本、URL 編碼格式、二進(jìn)制格式的字符串，形式多樣。

以提交為目的的請(qǐng)求（類似語(yǔ)義化，get 表示請(qǐng)求，post 表示提交）；

發(fā)送私密類數(shù)據(jù)（用戶名、密碼）（因?yàn)闉g覽器緩存記錄特性）；

向服務(wù)器發(fā)送大量數(shù)據(jù)（數(shù)據(jù)大小限制區(qū)別）；

上傳文件圖片時(shí)（數(shù)據(jù)類型區(qū)別）

AJAX 不支持瀏覽器 back 按鈕。

安全問題 AJAX 暴露了與服務(wù)器交互的細(xì)節(jié)。

對(duì)搜索引擎的支持比較弱。不會(huì)執(zhí)行你的 JS 腳本，只會(huì)操作你的網(wǎng)頁(yè)源代碼；

跨域請(qǐng)求有一定限制。解決方式：jsonp；

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

session 比 cookie 更安全

單個(gè) cookie 保存的數(shù)據(jù)不能超多 4k ， 很多瀏覽器限制一個(gè)站點(diǎn)最多保存20個(gè) cookie

一般用 cookie 來存放 sessionId

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

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

閉包、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）

不要在同一行聲明多個(gè)變量

請(qǐng)使用===/!==來比較true/false或者數(shù)值

使用對(duì)象字面量替代new Array這種形式

不要使用全局函數(shù)

Switch語(yǔ)句必須帶有default分支

If語(yǔ)句必須使用大括號(hào)

for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域，從而避免作用域污

undefined 表示不存在這個(gè)值。

undefined :是一個(gè)表示"無"的原始值或者說表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒有定義。當(dāng)嘗試讀取時(shí)會(huì)返回 undefined

例如變量被聲明了，但沒有賦值時(shí)，就等于undefined

null 表示一個(gè)對(duì)象被定義了，值為“空值”

null : 是一個(gè)對(duì)象(空對(duì)象, 沒有任何屬性和方法)

例如作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象；

在驗(yàn)證null時(shí)，一定要使用　=== ，因?yàn)?==無法分別null 和　undefined

低耦合：視圖(View)可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以綁定到不同的"View"上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變。

可重用性：你可以把一些視圖邏輯放在一個(gè)ViewModel里面，讓很多view重用這段視圖邏輯。

獨(dú)立開發(fā)：開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)，設(shè)計(jì)人員可以專注于頁(yè)面設(shè)計(jì)，使用Expression Blend可以很容易設(shè)計(jì)界面并生成xaml代碼。

可測(cè)試：界面素來是比較難于測(cè)試的，而現(xiàn)在測(cè)試可以針對(duì)ViewModel來寫。