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

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

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

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

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

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

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

非裝飾性圖片必須加alt

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

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

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

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

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

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

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

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

200 OK 正常返回信息

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

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

3XX：重定向

301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。

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

4XX：客戶端錯誤

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

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

403 Forbidden 禁止訪問。

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

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

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

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

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

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

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

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

基本選擇器：

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)先級：

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

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

id 選擇器

類選擇器

標(biāo)簽選擇器

通配符選擇器（*）

瀏覽器自定義或繼承

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

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

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

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

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

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

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

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

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

優(yōu)點：

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

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

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

缺點：

圖片合并麻煩

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

移除空格

使用margin負(fù)值

使用font-size:0

letter-spacing

word-spacing

GIF

8位像素，256色

無損壓縮

支持簡單動畫

支持boolean透明

適合簡單動畫

JPEG

顏色限于256

有損壓縮

可控制壓縮質(zhì)量

不支持透明

適合照片

PNG

有PNG8和truecolor PNG

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

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

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

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

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

對于選擇器中給定的各個ID屬性值，加100

對于選擇器中給定的各個類屬性、屬性選擇器或者偽類選擇器，加10

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

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

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

千萬不要使用typeof來判斷對象和數(shù)組，因為這種類型都會返回object。

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

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

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

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

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

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

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

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

以提交為目的的請求（類似語義化，get 表示請求，post 表示提交）；

發(fā)送私密類數(shù)據(jù)（用戶名、密碼）（因為瀏覽器緩存記錄特性）；

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

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

AJAX 不支持瀏覽器 back 按鈕。

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

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

跨域請求有一定限制。解決方式：jsonp；

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

session 比 cookie 更安全

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

一般用 cookie 來存放 sessionId

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

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

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

不要在同一行聲明多個變量

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

使用對象字面量替代new Array這種形式

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

Switch語句必須帶有default分支

If語句必須使用大括號

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

undefined 表示不存在這個值。

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

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

null 表示一個對象被定義了，值為“空值”

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

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

在驗證null時，一定要使用　=== ，因為 ==無法分別null 和　undefined

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

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

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

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