摘要：和面試題盒子模型中盒子模型包括盒子模型和標準的盒子模型。客戶端錯誤服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。服務器端暫時無法處理請求可能是過載或維護。

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

CSS 中盒子模型包括 IE 盒子模型和標準的 W3C 盒子模型。
W3C 盒子模型： width = content （box-sizing: content-box）
IE 盒子模型中： width = content + padding + border （box-sizing: border-box）

合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywords列舉出重要關鍵詞即可

語義化的HTML代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁

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

重要內容不要用js輸出：爬蟲不會執行js獲取內容

少用iframe：搜索引擎不會抓取iframe中的內容

非裝飾性圖片必須加alt

提高網站速度：網站速度是搜索引擎排序的一個重要指標

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

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

瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；

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

1XX：信息狀態碼

100 Continue 繼續，一般在發送post請求時，已發送了http header之后服務端將返回此信息，表示確認，之后發送具體參數信息

2XX：成功狀態碼

200 OK 正常返回信息

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

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

3XX：重定向

301 Moved Permanently 請求的網頁已永久移動到新位置。

302 Found 臨時性重定向。

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

304 Not Modified 自從上次請求后，請求的網頁未修改過。

4XX：客戶端錯誤

400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。

401 Unauthorized 請求未授權。

403 Forbidden 禁止訪問。

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

5XX: 服務器錯誤

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

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

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

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

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

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

基本選擇器：

id選擇器：id = name

類選擇器：class = "name"

標簽選擇器：body, div, ul

全局選擇器：*

復雜選擇器：

組合選擇器：.head .head_logo

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

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

繼承選擇器：

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

子選擇器：div > p

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

優先級：

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

作為 style 屬性寫在元素內的樣式

id 選擇器

類選擇器

標簽選擇器

通配符選擇器（*）

瀏覽器自定義或繼承

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

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

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

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

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

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

static：默認值，沒有定位，元素出現在正常文檔流中。

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

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

優點：

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

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

更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

圖片合并麻煩

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

移除空格

使用margin負值

使用font-size:0

letter-spacing

word-spacing

GIF

8位像素，256色

無損壓縮

支持簡單動畫

支持boolean透明

適合簡單動畫

JPEG

顏色限于256

有損壓縮

可控制壓縮質量

不支持透明

適合照片

PNG

有PNG8和truecolor PNG

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

適合圖標、背景、按鈕

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

!important規則最重要，大于其它規則

行內樣式規則，加1000

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

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

對于選擇其中給定的各個元素標簽選擇器，加1

如果權值一樣，則按照樣式規則的先后順序來應用，順序靠后的覆蓋靠前的規則

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

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

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

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

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

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

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

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

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

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

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

發送私密類數據（用戶名、密碼）（因為瀏覽器緩存記錄特性）；

向服務器發送大量數據（數據大小限制區別）；

上傳文件圖片時（數據類型區別）

AJAX 不支持瀏覽器 back 按鈕。

安全問題 AJAX 暴露了與服務器交互的細節。

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

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

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

session 比 cookie 更安全

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

一般用 cookie 來存放 sessionId

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

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

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

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

請使用===/!==來比較true/false或者數值

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

不要使用全局函數

Switch語句必須帶有default分支

If語句必須使用大括號

for-in循環中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污

undefined 表示不存在這個值。

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

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

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

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

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

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

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

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

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

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

兩者都采用了 virtual dom 的方式，性能都很好

ui 上都采用組件化的寫法，開發效率很高。

vue 采用雙向數據綁定， react 是單項數據綁定。當工程規模比較大時，雙向數據綁定會很難維護

vue 適合不會持續的，小型的 web 應用，使用 vue.js 能帶來短期內較高的開發效率， 否則采用 react。

生命周期函數就是組件在初始化或者數據更新時會觸發的鉤子函數。

beforeCreate()

在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用
注意：此時，無法獲取 data中的數據、methods中的方法

created()

注意：這是一個常用的生命周期，可以調用methods中的方法、改變data中的數據

beforeMounted()

在掛載開始之前被調用

mounted()

此時，vue實例已經掛載到頁面中，可以獲取到el中的DOM元素，進行DOM操作

beforeUpdated()

數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
注意：此處獲取的數據是更新后的數據，但是獲取頁面中的DOM元素是更新之前的

updated()

組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。

beforeDestroy()

實例銷毀之前調用。在這一步，實例仍然完全可用。
使用場景：實例銷毀之前，執行清理任務，比如：清除定時器等

destroyed()

Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。