資訊專欄INFORMATION COLUMN
摘要：工作中總結的一些比較重要的前端技能，覺得在面試中比較合適提問，即能查看出面試者的技術功底，又能考察其知識體系的廣度。異步編程的考察，其關鍵字的使用，與的關系，同時可以深入考察總共有幾種異步編程的方式。
工作中總結的一些比較重要的前端技能，覺得在面試中比較合適提問，即能查看出面試者的技術功底，又能考察其知識體系的廣度。適用于應屆生和工作年限兩年下的同學，掌握下面的知識基本滿足工作需求了。更高年限的開發工程師則應該更注重架構能力而不是具體的技術細節。
HTML5語義化標簽，meta元數據標簽，考察其對語義化的理解。
draggale屬性的api，dragstart, drop, dataTransfer等內容，考察其對新技術的使用。
CSS3
盒子模型是什么，怎么計算的？
盒子模型指的是瀏覽器將文檔流從視覺上渲染為不同矩形框的組合，每個元素都被渲染為一個矩形框，包含內容區域（文本、圖片等真實內容的區域）和可選的margin/border/padding三個區域，中文名為外邊距、邊框和填充。包含關系為margin > border > padding > content。
計算方式為自上而下，4個盒子區域的寬度和高度都支持固定值進行設置，同時margin/padding支持百分比，計算的高度和寬度值都依據父元素的content區域寬度，content區域也支持百分比，不過高度和寬度分別對應父元素content區域的高度和寬度，border不支持百分比。content區域的默認寬高由盒子類型和是否包含有其他盒子來進行計算，其余區域均為0。
盒子模型包含幾種類型，怎么轉換。
盒子模型相關的一些DOM屬性offsetHeight/offsetTop/scrollHeight/clientHeight分別指什么？
offsetHeight: 包含border、padding和content區域的高度總和。 offsetTop: 元素border上邊界到父元素content上邊界的距離。 scrollHeight: 沒有滾動條的情況下，元素的offsetHeight總高度。 clientHeight: 瀏覽器視口的高度。
選擇器實現原理以及其權重和最右匹配的概念。
圣杯布局（大屏幕分為頂部、底部和中間三個縱向容器，小屏幕時橫列為5項）的幾種實現方式(同時考察@media媒體查詢)。
bootstrap框架的響應式布局實現原理，考察viewport視口，媒體查詢的邊界條件。
垂直居中對齊的方式，考察元素的文字基線。
bootstrap輸入框組怎么實現，考察:first-child等偽元素和垂直居中對齊。
JavascriptJs包含的基礎類型，null/undefined/boolean/number/string/object/Symbol。array, function, object實例和原型鏈對應關系。
數組的常用函數，如unshift/slice/map/forEach/filter/some/every/reduce，同時考察哪些返回新的，哪些修改了原數組。
嘗試給數組添加一個通用方法makeIndexObj，使得可以根據某個參數作為key值重構為新對象。
Object.defineProperty(Array.prototype, "makeIndexObj", {
value: function (key) {
let result = {};
this.forEach(item => {
// 這里借用了jQuery的深度復制，可以考察其具體的實現
result[item[key]] = $.extend(true, {}, item);
});
return result;
}
});
考察對象的屬性以及其特征，包括defineProperty和屬性訪問器定義屬性的區別，以及屬性的enumerable, configurable, writable, value, get, set特征，同時考察深度復制和功能體邊界檢測（支持多key值，輸入的是一個數組或字符串）。
淺拷貝和深度拷貝的實現，考察Object.assign(), for in遍歷, $.extend()等。
let, var, const的區別和優劣，考察變量提升，常量實現方式，同時深入考察如何實現真正的不可修改的對象。
cookie，localstorage, sessionstorage的區別，考察空間限制，哪些和服務器交互，常見應用場景。
es6箭頭函數 => 的簡化寫法和作用，考察對參數的要求和自動返回值以及this強制綁定運行環境。
事件捕獲和冒泡的方式，考察addEventListener和attachEvent事件，以及jQuery on/bind/off/die/live等常用方法的區別和關系。
兄弟元素內容互相覆蓋，事件如何觸發。考察與冒泡的混淆，以及元素碰撞檢測。
AJAX的原理以及跨域原理和方法，可以考察瀏覽器和服務端HTTP通信。
Promise異步編程，考察其基本用法，常用race/all方法，異常捕獲方式。
異步編程Generator的考察，其關鍵字yield的使用，與Promise的關系，同時可以深入考察js總共有幾種異步編程的方式。
this對象的綁定方式，總共包含有默認綁定、隱含綁定、明確綁定、new綁定，每種的應用場景闡述和內部原理。
閉包，閉包如何產生以及其作用和副作用。
Vue MVVM框架MVVM框架解決了什么問題，帶來了什么問題。考察Vue的特性，如雙向數據綁定、模塊化、組件化、模板語言等優勢，隱藏實現細節、不利于問題追查、過度封裝影響性能的弊端。是否使用過官方vue devtools開發工具調試。
雙向數據綁定如何實現，考察es5 getter/setter方法，以及其對數組對象等完全重寫，深入考察設計模式
的觀察者模式和訂閱者模式的方式以及區別。
如何追蹤數據變化，數組的哪些改變方式不能被檢測到，如直接改變length，元素索引修改，同時還有對象的屬性修改。為什么這些不能被檢測到，因為現有js語言層面不支持，只能對既有方法進行重寫。
nextTick的使用場景，為什么會使用nextTick，事件驅動，同一個執行周期內去重回調事件提高效率減少資源消耗。
組件的優勢，模塊封裝有什么優劣，組件如何進行模塊化：props down, events up。
單頁面復雜應用應該new多少個vue對象，不同vue對象數據如何傳遞，公有函數如何聲明。考察模塊的封裝和耦合以及其取舍，引入vuex.js。
vuex和vue-router是否使用過，都解決了什么問題。不深究第三方庫，只考察廣度和技術棧以及其理解程度。
綜合知識url從輸入到返回都經歷了什么過程？考察范圍非常恐怖：
1. 瀏覽器讀取最近瀏覽，自動推薦網址. 2. 拿到url，嘗試讀取緩存。 3. 緩存不存在，構建響應頭，發起請求。其中包括dns解析，tcp建連，發起http請求。 4. 服務器接收到客戶端請求，解析并處理返回數據。 5. 瀏覽器接收到響應頭，讀取狀態碼等信息，進行緩存或讀取緩存或再次發起請求。 6. 讀取響應體，檢測數據類型，進行解析。 7. 渲染頁面。
在這些過程中，每一個都可以深入詢問，如：
1. 網絡通信方向dns解析的過程，一共分為幾次，根域名服務器、權威服務器、代理服務器等概念。 2. tcp建連的過程，三次握手，`syn, ack+syn, ack`，以及斷開連接的`wait time state`的作用。 3. 如何進行緩存和格式的控制，請求頭和響應頭的主體參數的作用。 4. 常見的狀態碼的含義，如200、304、404、500等，不同分段指向什么錯誤。 5. 瀏覽器的請求控制，對同一個域名下最多保持6個請求，如何復用連接，keep-alive的作用。 6. 渲染頁面的過程，DOM、BOM、ECMAScript的關系，什么為阻塞，什么非阻塞。document.ready是準備好了什么。
頁面性能優化
圖片合并、異步加載、js壓縮、CDN加速等
兼容性
常見的滾輪事件、事件對象等，主要看個人遇到的問題，不要挑偏僻的問。對兼容性的歷史遺留過程的了解。出現問題常用的解決方案，查文檔常用的網站，如MDN、w3c、segmentfault、stackoverflow、github等官方文檔和程序員交友社區，考察其善用搜索引擎的能力。
git倉庫管理
如何構建新的分支和合并分支，出現沖突如何處理，如何回滾版本。主要考察合作開發代碼的經驗以及對倉庫的理解。
算法相關
都了解什么排序算法，插入排序和快速排序和冒泡排序的事件復雜度，快速排序的思想，手寫快排，快排的最優情況和最差情況。js使用了什么排序算法，深入考察for i++和[].forEach的效率，為什么。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91826.html
摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...
摘要：一基礎接口的意義百度規范擴展回調抽象類的意義我的前端面試經歷百度前端掘金博主就讀于電子科技大學，大三狗一枚面試是個漫長的過程，從海投到收獲電話面試，一面二面三面，一個步驟出錯那么后面就宣告終結。 一道常被人輕視的前端 JS 面試題 - 前端 - 掘金 目錄前言第一問第二問變量聲明提升函數表達式第三問第四問第五問第六問構造函數的返回值第七問最后前言 年前剛剛離職了，分享下我曾經出過的一道...
摘要：一基礎接口的意義百度規范擴展回調抽象類的意義想不想通過一線互聯網公司面試文檔整理為電子書掘金簡介谷歌求職記我花了八個月準備谷歌面試掘金原文鏈接翻譯者 【面試寶典】從對象深入分析 Java 中實例變量和類變量的區別 - 掘金原創文章，轉載請務必保留原出處為：http://www.54tianzhisheng.cn/... , 歡迎訪問我的站點，閱讀更多有深度的文章。 實例變量 和 類變量...
閱讀 1808·2021-11-23 09:51
閱讀 1268·2021-11-18 10:02
閱讀 962·2021-10-25 09:44
閱讀 2098·2019-08-26 18:36
閱讀 1619·2019-08-26 12:17
閱讀 1145·2019-08-26 11:59
閱讀 2746·2019-08-23 15:56
閱讀 3350·2019-08-23 15:05
