前端面試-基礎知識2

1. 頁面重構怎麼操作？

• 網站重構：在不改變外部行為的前提下，簡化結構、新增可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化，在擴充套件的同時保持一致的UI

• 對於傳統的網站來說重構通常是：

• 表格(table)佈局改為DIV+CSS

• 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

• 對於移動平臺的優化

• 針對於SEO進行優化

• 深層次的網站重構應該考慮的方面

• 減少程式碼間的耦合

• 讓程式碼保持彈性

• 嚴格按規範編寫程式碼

• 設計可擴充套件的API

• 代替舊有的框架、語言(如VB)

• 增強使用者體驗

• 通常來說對於速度的優化也包含在重構中

• 壓縮JS、CSS、image等前端資源(通常是由伺服器來解決)

• 程式的效能優化(如資料讀寫)

• 採用CDN來加速資源載入

• 對於JS DOM的優化

• HTTP伺服器的檔案快取

2. 列舉IE與其他瀏覽器不一樣的特性？

- 事件不同之處：

• 觸發事件的元素被認為是目標（target）。而在 IE 中，目標包含在 event 物件的 srcElement 屬性；
• 獲取字元程式碼、如果按鍵代表一個字元（shift、ctrl、alt除外），IE 的 keyCode 會返回字元程式碼（Unicode），DOM 中按鍵的程式碼和字元是分離的，要獲取字元程式碼，需要使用 charCode 屬性；
• 阻止某個事件的預設行為，IE 中阻止某個事件的預設行為，必須將 returnValue 屬性設定為 false，Mozilla 中，需要呼叫 preventDefault() 方法；
• 停止事件冒泡，IE 中阻止事件進一步冒泡，需要設定 cancelBubble 為 true，Mozzilla 中，需要呼叫 stopPropagation()

3. 什麼叫優雅降級和漸進增強？

優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是老式瀏覽器，則程式碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全不能用
漸進增強：從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新版本瀏覽器才支援的功能,向頁面增加不影響基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。
如：預設使用flash上傳，但如果瀏覽器支援 HTML5 的檔案上傳功能，則使用HTML5實現更好的體驗

4. 是否瞭解公鑰加密和私鑰加密

• 一般情況下是指私鑰用於對資料進行簽名，公鑰用於對簽名進行驗證;
• HTTP網站在瀏覽器端用公鑰加密敏感資料，然後在伺服器端再用私鑰解密

5. WEB應用從伺服器主動推送Data到客戶端有那些方式？

• html5提供的Websocket
• 不可見的iframe
• WebSocket通過Flash
• XHR長時間連線
• XHR Multipart Streaming
• <script>標籤的長時間連線(可跨域)

6. 對Node的優點和缺點提出了自己的看法？

（優點）因為Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求因此構建在Node上的代理伺服器相比其他技術實現（如Ruby）的伺服器表現要好得多。此外，與Node代理伺服器互動的客戶端程式碼是由javascript語言編寫的，因此客戶端和伺服器端都用同一種語言編寫，這是非常美妙的事情。
（缺點）Node是一個相對新的開源專案，所以不太穩定，它總是一直在變，而且缺少足夠多的第三方庫支援。看起來，就像是Ruby/Rails當年的樣子。

7. 你有用過哪些前端效能優化的方法？

（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佈局慢
對普通的網站有一個統一的思路，就是儘量向前端優化、減少資料庫操作、減少磁碟IO。向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在快取伺服器上直接返回的不要到應用伺服器，程式能直接取得的結果不要到外部取得，本機內能取得的資料不要到遠端取，記憶體能取到的不要到磁碟取，快取中有的不要去資料庫查詢。減少資料庫操作指減少更新次數、快取結果減少查詢次數、將資料庫執行的操作儘可能的讓你的程式完成（例如join查詢），減少磁碟IO指儘量不使用檔案系統作為快取、減少讀寫檔案次數等。程式優化永遠要優化慢的部分，換語言是無法“優化”的

8. http狀態碼有那些？分別代表是什麼意思？

• 100 Continue 繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊

• 200 OK 正常返回資訊

• 201 Created 請求成功並且伺服器建立了新的資源

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

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

• 302 Found 臨時性重定向。

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

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

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

• 401 Unauthorized 請求未授權。

• 403 Forbidden 禁止訪問。

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

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

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

9. 一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

注：這題勝在區分度高，知識點覆蓋廣，再不懂的人，也能答出幾句，而高手可以根據自己擅長的領域自由發揮，從URL規範、HTTP協議、DNS、CDN、資料庫查詢、 到瀏覽器流式解析、CSS規則構建、layout、paint、onload/domready、JS執行、JS API繫結等等

詳細版：
1、瀏覽器會開啟一個執行緒來處理這個請求，對 URL 分析判斷如果是 http 協議就按照 Web 方式來處理;
2、呼叫瀏覽器核心中的對應方法，比如 WebView 中的 loadUrl 方法;
3、通過DNS解析獲取網址的IP地址，設定 UA 等資訊發出第二個GET請求;
4、進行HTTP協議會話，客戶端傳送報頭(請求報頭);
5、進入到web伺服器上的 Web Server，如 Apache、Tomcat、Node.JS 等伺服器;
6、進入部署好的後端應用，如 PHP、Java、JavaScript、Python 等，找到對應的請求處理;
7、處理結束回饋報頭，此處如果瀏覽器訪問過，快取上有對應資源，會與伺服器最後修改時間對比，一致則返回304;
8、瀏覽器開始下載html文件(響應報頭，狀態碼200)，同時使用快取;
9、文件樹建立，根據標記請求所需指定MIME型別的檔案（比如css、js）,同時設定了cookie;
10、頁面開始渲染DOM，JS根據DOM API操作DOM,執行事件繫結等，頁面顯示完成。

簡潔版：

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

10. 你用的得心應手用的熟練地編輯器&開發環境是什麼樣子？

Sublime Text 3 + 相關外掛編寫前端程式碼
Google chrome 、Mozilla Firefox瀏覽器 +firebug - 相容測試和預覽頁面UI、動畫效果和互動功能
Node.js+Gulp
git 用於版本控制和Code Review

11. 對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近使用者的程式設計師，比後端、資料庫、產品經理、運營、安全都近。

1、實現介面互動
2、提升使用者體驗
3、有了Node.js，前端可以實現服務端的一些事情
前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

參與專案，快速高質量完成實現效果圖，精確到1px；
與團隊成員，UI設計，產品經理的溝通
做好的頁面結構，頁面重構和使用者體驗
處理hack，相容、寫出優美的程式碼格式
針對伺服器的優化、擁抱最新前端技術

12. 平時如何管理你的專案？

• 先期團隊必須確定好全域性樣式（globe.css），編碼模式(utf-8) 等；

• 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

• 標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）；

• 頁面進行標註（例如 頁面 模組 開始和結束）；

• CSS跟HTML 分資料夾並行存放，命名都得統一（例如style.css）；

• JS 分資料夾存放 命名以該JS功能為準的英文翻譯。

• 圖片採用整合的 images.png png8 格式檔案使用 - 儘量整合在一起使用方便將來的管理

13. 說說最近最流行的一些東西吧？常去哪些網站？

• ES6
• WebAssembly
• Node
• MVVM
• Web Components
• React
• React Native
• Webpack
• 元件化