2016年全面前端面試題總結
-
非同步載入的方式有哪些？
(1) defer，只支援IE (2) async： (3) 建立script，插入到DOM中，載入完畢後callBack -
documen.write和 innerHTML的區別
document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分
-
.call() 和 .apply() 的區別？
例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以執行結果為：alert(4); 注意：js 中的函式其實是物件，函式名是對 Function 物件的引用。 function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); -
jQuery與jQuery UI 有啥區別？
*jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件繫結等等。 *jQuery UI則是在jQuery的基礎上，利用jQuery的擴充套件性，設計的外掛。 提供了一些常用的介面元素，諸如對話方塊、拖動行為、改變大小行為等等 -
JQuery的原始碼看過嗎？能不能簡單說一下它的實現原理？
-
jquery 中如何將陣列轉化為json字串，然後再轉化回來？
jQuery中沒有提供這個功能，所以你需要先編寫兩個jQuery的擴充套件：
$.fn.stringifyArray = function(array) { return JSON.stringify(array) } $.fn.parseArray = function(array) { return JSON.parse(array) } 然後呼叫： $("").stringifyArray(array)
-
針對 jQuery 的優化方法？
*基於Class的選擇性的效能相對於Id選擇器開銷很大，因為需遍歷所有DOM元素。 *頻繁操作的DOM，先快取起來再操作。用Jquery的鏈式呼叫更好。 比如：var str=$("a").attr("href"); *for (var i = size; i < arr.length; i++) {} for 迴圈每一次迴圈都查找了陣列 (arr) 的.length 屬性，在開始迴圈的時候設定一個變數來儲存這個數字，可以讓迴圈跑得更快： for (var i = size, length = arr.length; i < length; i++) {} -
JavaScript中的作用域與變數宣告提升？
-
如何編寫高效能的Javascript？
-
那些操作會造成記憶體洩漏？
記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。 垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為 0（沒有其他物件引用過該物件），或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。 setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏。 閉包、控制檯日誌、迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈） -
JQuery一個物件可以同時繫結多個事件，這是如何實現的？
其他問題
-
你遇到過比較難的技術問題是？你是如何解決的？
-
常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？
-
頁面重構怎麼操作？
-
列舉IE 與其他瀏覽器不一樣的特性？
-
99%的網站都需要被重構是那本書上寫的？
-
什麼叫優雅降級和漸進增強？
-
WEB應用從伺服器主動推送Data到客戶端有那些方式？
-
對Node的優點和缺點提出了自己的看法？
*（優點）因為Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求， 因此構建在Node上的代理伺服器相比其他技術實現（如Ruby）的伺服器表現要好得多。 此外，與Node代理伺服器互動的客戶端程式碼是由javascript語言編寫的， 因此客戶端和伺服器端都用同一種語言編寫，這是非常美妙的事情。 *（缺點）Node是一個相對新的開源專案，所以不太穩定，它總是一直在變， 而且缺少足夠多的第三方庫支援。看起來，就像是Ruby/Rails當年的樣子。 -
你有哪些效能優化的方法？
（看雅虎14條效能優化原則）。 （1） 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取 ，圖片伺服器。 （2） 前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數 （3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。 （4） 當需要設定的樣式很多時設定className而不是直接操作style。 （5） 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。 （6） 避免使用CSS Expression（css表示式)又稱Dynamic properties(動態屬性)。 （7） 圖片預載入，將樣式表放在頂部，將指令碼放在底部 加上時間戳。 （8） 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比div+css佈局慢。 -
http狀態碼有那些？分別代表是什麼意思？
100-199 用於指定客戶端應相應的某些動作。 200-299 用於表示請求成功。 300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊。 400-499 用於指出客戶端的錯誤。400 1、語義有誤，當前請求無法被伺服器理解。401 當前請求需要使用者驗證 403 伺服器已經理解請求，但是拒絕執行它。 500-599 用於支援伺服器錯誤。 503 – 服務不可用 -
一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）
查詢瀏覽器快取 DNS解析、查詢該域名對應的IP地址、重定向（301）、發出第二個GET請求 進行HTTP協議會話 客戶端傳送報頭(請求報頭) 伺服器回饋報頭(響應報頭) html文件開始下載 文件樹建立，根據標記請求所需指定MIME型別的檔案 檔案顯示 [ 瀏覽器這邊做的工作大致分為以下幾步： 載入：根據請求的URL進行域名解析，向伺服器發起請求，接收檔案（HTML、JS、CSS、圖象等）。 解析：對載入到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部資料結構（比如HTML的DOM樹，JS的（物件）屬性表，CSS的樣式規則等等） } -
除了前端以外還了解什麼其它技術麼？你最最厲害的技能是什麼？
-
你常用的開發工具是什麼，為什麼？
-
對前端介面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
前端是最貼近使用者的程式設計師，比後端、資料庫、產品經理、運營、安全都近。 1、實現介面互動 2、提升使用者體驗 3、有了Node.js，前端可以實現服務端的一些事情 前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好， 參與專案，快速高質量完成實現效果圖，精確到1px； 與團隊成員，UI設計，產品經理的溝通； 做好的頁面結構，頁面重構和使用者體驗； 處理hack，相容、寫出優美的程式碼格式； 針對伺服器的優化、擁抱最新前端技術。 -
加班的看法？
加班就像借錢，原則應當是------救急不救窮 -
平時如何管理你的專案？
先期團隊必須確定好全域性樣式（globe.css），編碼模式(utf-8) 等 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）； 標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）； 頁面進行標註（例如 頁面 模組 開始和結束）； CSS跟HTML 分資料夾並行存放，命名都得統一（例如style.css） JS 分資料夾存放 命民以該JS 功能為準英文翻譯； 圖片採用整合的 images.png png8 格式檔案使用 儘量整合在一起使用方便將來的管理 -
如何設計突發大規模併發架構？
-
說說最近最流行的一些東西吧？常去哪些網站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js -
移動端（Android IOS）怎麼做好使用者體驗?
清晰的視覺縱線、資訊的分組、極致的減法、 利用選擇代替輸入、標籤及文字的排布方式、 依靠明文確認密碼、合理的鍵盤利用、 -
你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用？
-
你認為怎樣才是全端工程師（Full Stack developer）？
-
介紹一個你最得意的作品吧？
-
你的優點是什麼？缺點是什麼？
-
如何管理前端團隊?
-
最近在學什麼？能談談你未來3，5年給自己的規劃嗎？
-
想問公司的問題？
問公司問題： 目前關注哪些最新的Web前端技術（未來的發展方向）？ 前端團隊如何工作的（實現一個產品的流程）？ 公司的薪資結構是什麼樣子的？
經常會用到原生JS來寫前端。。。但是原生JS的一些方法在適應各個瀏覽器的時候寫法有的也不怎麼一樣的。。。
今天下班有點累。。。
就來總結一下簡單的東西吧……
備註：一下的方法都是包裹在一個EventUtil物件裡面的，直接採用物件字面量定義方法了。。。
①新增事件方法
| 1 2 3 4 5 6 7 8 9 |
addHandler：function(element,type,handler){
if(element.addEventListener){//檢測是否為DOM2級方法
element.addEventListener(type,
handler, false);
}elseif(element.attachEvent){//檢測是否為IE級方法
element.attachEvent("on"+
type, handler);
}else{//檢測是否為DOM0級方法
element["on"+
type] = handler;
}
}
|
②移除之前新增的事件方法
| 1 2 3 4 5 6 7 8 9 |
removeHandler：function(element,
type, handler){
|