前端面試手冊

分別從HTML、CSS、JavaScript、綜合四個方面總結，後續持續更新

---

HTML部分

---

• Doctype的做用？

文檔聲明，不存在或格式不正確會致使文檔以兼容模式呈現
標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行
兼容模式頁面以寬鬆的向後兼容的方式顯示
HTML5不基於SGML，所以不須要對DTD進行引用

• 行內、塊級、 空(void)元素

行內：a b span img input select strong
塊級：div ul ol li dl dt dd h1-6 p
空: br hr img input link meta

• 導入樣式link和@import的區別

做用範圍、加載時機、兼容性三方面不一樣

• CSS和JS的放置位置

CSS放在head防止頁面迴流和重繪，JS放body末尾防止頁面阻塞

• 標籤語義化

用正確的標籤作正確的事情，便於對瀏覽器、搜索引擎解析

• HTML5的離線儲存

localStorage 長期存儲數據，瀏覽器關閉後數據不丟失
sessionStorage 數據在瀏覽器關閉後自動刪除
cookie在瀏覽器和服務器間來回傳遞，大小有限制

---

CSS部分

---

• 盒模型

內容(content)、填充(padding)、邊界(margin)、 邊框(border)
兩種：標準|IE（寬高含邊框），box-sizing：content-box|border-box

• 選擇符

ID、類、標籤、屬性、僞類、後代、子類、相鄰、通配
important 》ID》Class》Tag

• 浮動和定位

浮動脫離標準文檔流，形成父元素塌陷
清除浮動：overflow，clear，height
定位：relation，absolute，fixed，static（inherit）

• 垂直居中佈局

表格法table-cell，彈性佈局flex，絕對定位margin，相對定位translate

• 漸進加強和優雅降級

針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

• CSS3新特性

圓角、陰影、文字特效、線性漸變、變換、高級選擇器、多背景、RGBA

---

JS部分

---

• Undefined和null的區別

Undefined未賦值，Null還沒有存在的對象
用typeof來判斷五種原始類型：String、Number、Boolean、Undefined、Null，用instanceof來判斷繼承關係

• 相等和全等的區別

相等默認進行隱式轉換，全等不會

• 字符串的經常使用方法

charAt 返回指定位置
concat 鏈接
indexOf 檢索
replace 替換
slice 提取
split 分割
substr 提取
toLowerCase 轉小寫
toUpperCase 轉大寫

• 數組的經常使用方法

concat 鏈接
join 拼接
pop 刪除尾
push 添加尾
shift 刪除頭
unshift 添加頭
reverse倒敘
sort 排序
slice 截取
splice 替換

• 數組去重

基礎循環法、排序相鄰法、對象屬性法、下標查詢法（indexOf）

• 排序算法

冒泡：相鄰比較後，逐個冒泡
選擇：查找最小值後，逐個交換
插入：逐個對比後，再插入

• new操做符

建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
屬性和方法被加入到 this 引用的對象中
新建立的對象由 this 所引用，而且最後隱式的返回 this

• 做用域、閉包和this

全局做用域和函數做用域，內部可訪問外部，外部不能訪問內部
在函數A內部定義函數B並做爲返回值，當B在A以外被執行時就會造成閉包
this通常狀況下指全局對象。 看成爲方法調用，那麼this就是指這個對象

• apply和call

在特定的做用域中調用，等於設置函數體內this對象的值，以擴充函數賴以運行的做用域
接收參數的方式不一樣

• JS框架和原理

React單向數據，Vue結合angular和react的優勢，組件化、指令、雙向綁定
vue採用數據劫持結合發佈訂閱模式，經過Object.defineProperty()劫持各個屬性的setter
、getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
VUE生命週期：Created建立，Mounted編譯，Update更新，Destory銷燬

• AJAX原理

經過XmlHttpRequest對象向服務器發異步請求，得到數據後操做DOM更新頁面
Open》onreadystatechange》send

• 跨域和JsonP原理

瀏覽器同源策略，同協議|域名|端口，解決方案：後端代理|設置CORS頭|Jsonp等
JSONP是經過動態建立script實現的，本質不屬於AJAX技術。

• DOM操做

建立：createElement，增刪改：innerHTML,
查找：getElementById/getElementsByName/getElementsByTagName

• CMD、AMD和模塊化

AMD 是提早執行，CMD 是延遲執行
模塊化是經過當即執行函數來進行的

• VUE組件通訊

路由參數、storage、父傳子props&子傳父emit、vuex

---

綜合

---

• 前端性能優化

加載：合併請求、緩存資源、外部文件、文件壓縮、按需加載
圖片：壓縮、代替（css三、SVG、Iconfont）、webp、png八、base64
樣式：頭部引入、避免內聯、避免重設圖片大小、優化選擇符
腳本：減小重繪和迴流、緩存dom和length、事件代理、ID選擇
渲染：優化DOM結構、CSS3動畫觸發GPU

• 構建工具和原理

gulp基於流的自動化構建工具，Webpack基於模塊的自動化打包工具

• 安卓和IOS瀏覽器兼容

IOS定位fixed，圖片加載失敗

• HTTP請求

GET、POST、PUT、DELETE、HEAD、OPTIONS

• TCP和UDP

TCP穩定可靠的鏈接，經過三次握手四次釋放，UDP不穩定的鏈接