前端面試題搞起來

學而不思則罔，思而不學則殆。這一篇會將一些看到的面試題作一個總結。之後看到新的面試題也會持續的更新在這個裏面。

HTML 和 CSS 面試題

盒子模型

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

塊元素和行內元素

塊元素	行內元素
塊元素會獨佔一行，默認狀況下，其寬度會自動填滿父元素寬度，即便設置了寬度也會獨佔一行	行內元素不會獨佔一行，沒有寬度和和高度屬性。
塊級元素：div p form ul li h1-h6	行內元素：span img input a i

前端須要注意哪些SEO

• 合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
• 語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
• 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
• 重要內容不要用js輸出：爬蟲不會執行js獲取內容
• 少用iframe：搜索引擎不會抓取iframe中的內容
• 非裝飾性圖片必須加alt
• 提升網站速度：網站速度是搜索引擎排序的一個重要指標

從瀏覽器地址欄輸入url到顯示頁面的步驟

• 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
• 服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

HTTP狀態碼及其含義

• 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 服務器端暫時沒法處理請求（多是過載或維護）。

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢

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

Canvas和SVG有什麼區別？

• svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。canvas輸出的是一整幅畫布
• svg輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會是失真和鋸齒。而canvas輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒

CSS 選擇器分類

基本選擇器：

• 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 放在頂部而 JS 寫在後面

• 瀏覽器預先加載 CSS 後，能夠沒必要等待 HTML 加載完畢就能夠渲染頁面了。
• HTML 渲染並不會等到徹底加載完在渲染頁面，而是一邊解析 DOM 一邊渲染。
• JS 寫在尾部，主要是由於 JS主要扮演事件處理的功能，一方面不少操做是在頁面渲染後才執行的。另外一方面，能夠節省加載時間，是頁面可以更好的加載，提升用戶的良好體驗。

position 的值有哪些， relative 和 absolute 分別是相對於誰進行定位的？

• relative： 相對定位，相對於本身自己在正常文檔流中的位置進行定位。
• absolute：生成絕對定位，相對於最近一級定位不爲 static 的父元素進行定位。
• fixed： 生成絕對定位，相對於瀏覽器窗口或者 iframe 進行定位。
• static：默認值，沒有定位，元素出如今正常文檔流中。
• stricky：生成粘性定位元素，容器的位置根據正常文檔流計算得出。

css sprite是什麼,有什麼優缺點

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

• 優勢：

  • 減小HTTP請求數，極大地提升頁面加載速度
  • 增長圖片信息重複度，提升壓縮比，減小圖片大小
  • 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現

• 缺點：

  • 圖片合併麻煩
  • 維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

display:inline-block 何時不會顯示間隙？

• 移除空格
• 使用margin負值
• 使用font-size:0
• letter-spacing
• word-spacing

PNG,GIF,JPG的區別及如何選

• GIF

  • 8位像素，256色
  • 無損壓縮
  • 支持簡單動畫
  • 支持boolean透明
  • 適合簡單動畫

• JPEG

  • 顏色限於256
  • 有損壓縮
  • 可控制壓縮質量
  • 不支持透明
  • 適合照片

• PNG

  • 有PNG8和truecolor PNG
  • PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫
  • 適合圖標、背景、按鈕

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

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

CSS不一樣選擇器的權重

• !important規則最重要，大於其它規則
• 行內樣式規則，加1000
• 對於選擇器中給定的各個ID屬性值，加100
• 對於選擇器中給定的各個類屬性、屬性選擇器或者僞類選擇器，加10
• 對於選擇其中給定的各個元素標籤選擇器，加1
• 若是權值同樣，則按照樣式規則的前後順序來應用，順序靠後的覆蓋靠前的規則

JS 面試題

setTimeout和setInterval的機制

由於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 和 POST 的區別，何時使用 POST ？

GET 和 POST 的區別以下：

• GET：通常用於查詢數據，使用 URL 傳遞參數，因爲瀏覽器對地址欄長度有限制，因此使用 GET 方式所發送信息的數量有限制，同時瀏覽器記錄（歷史記錄，緩存）會保留請求地址的信息，包括地址後面的數據。GET 只能發送普通格式（URL 編碼格式）的數據。
• POST：通常用於向服務器發送數據，對所發送的數據的大小理論上是沒有限制，瀏覽器會緩存記錄地址，但不會記錄 POST 提交的數據。POST 能夠發送純文本、URL 編碼格式、二進制格式的字符串，形式多樣。

如下狀況中，請使用 POST：

• 以提交爲目的的請求（相似語義化，get 表示請求，post 表示提交）；
• 發送私密類數據（用戶名、密碼）（由於瀏覽器緩存記錄特性）；
• 向服務器發送大量數據（數據大小限制區別）；
• 上傳文件圖片時（數據類型區別）

AJAX 的侷限性

• AJAX 不支持瀏覽器 back 按鈕。
• 安全問題 AJAX 暴露了與服務器交互的細節。
• 對搜索引擎的支持比較弱。不會執行你的 JS 腳本，只會操做你的網頁源代碼；
• 跨域請求有必定限制。解決方式：jsonp；

cookie 和 session 有什麼區別和聯繫

• cookie 數據存放在客戶的瀏覽器上， session 數據存放在服務器上
• session 比 cookie 更安全
• 單個 cookie 保存的數據不能超多 4k ， 不少瀏覽器限制一個站點最多保存20個 cookie
• 通常用 cookie 來存放 sessionId

那些操做會形成內存泄漏？

• 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
• setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
• 閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

說幾條寫JavaScript的基本規範？

• 不要在同一行聲明多個變量
• 請使用===/!==來比較true/false或者數值
• 使用對象字面量替代new Array這種形式
• 不要使用全局函數
• Switch語句必須帶有default分支
• If語句必須使用大括號
• for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污

null，undefined 的區別？

• undefined 表示不存在這個值。
• undefined :是一個表示"無"的原始值或者說表示"缺乏值"，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined
• 例如變量被聲明瞭，但沒有賦值時，就等於undefined
• null 表示一個對象被定義了，值爲「空值」
• null : 是一個對象(空對象, 沒有任何屬性和方法)
• 例如做爲函數的參數，表示該函數的參數不是對象；
• 在驗證null時，必定要使用　=== ，由於 ==沒法分別null 和　undefined

框架（vue/react）

MVVM （Model-View-ViewModel）優勢：

• 低耦合：視圖(View)能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。
• 可重用性：你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。
• 獨立開發：開發人員能夠專一於業務邏輯和數據的開發(ViewModel)，設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xaml代碼。
• 可測試：界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。

react 和 vue 有哪些不一樣？談談你的見解

• 二者都採用了 virtual dom 的方式，性能都很好
• ui 上都採用組件化的寫法，開發效率很高。
• vue 採用雙向數據綁定， react 是單項數據綁定。當工程規模比較大時，雙向數據綁定會很難維護
• vue 適合不會持續的，小型的 web 應用，使用 vue.js 能帶來短時間內較高的開發效率， 不然採用 react。

Vue 生命週期

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

• 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 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。