前端工程師面試題(效能優化)
1. 效能優化1
1.1 頁面重構怎麼操作？
網站重構：在不改變外部行為的前提下，簡化結構、新增可讀性，而在網站前端保持一致的行為。 也就是說是在不改變UI的情況下，對網站進行優化，在擴充套件的同時保持一致的UI。 對於傳統的網站來說重構通常是： 表格(table)佈局改為DIV+CSS 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的) 對於移動平臺的優化 針對於SEO進行優化 深層次的網站重構應該考慮的方面 減少程式碼間的耦合 讓程式碼保持彈性 嚴格按規範編寫程式碼 設計可擴充套件的API 代替舊有的框架、語言(如VB) 增強使用者體驗 通常來說對於速度的優化也包含在重構中 壓縮JS、CSS、image等前端資源(通常是由伺服器來解決) 程式的效能優化(如資料讀寫) 採用CDN來加速資源載入 對於JS DOM的優化 HTTP伺服器的檔案快取
1.2 什麼叫優雅降級和漸進增強？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是老式瀏覽器，則程式碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全不能用。 如：border-shadow 漸進增強：從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新版本瀏覽器才支援的功能,向頁面增加不影響基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。 如：預設使用flash上傳，但如果瀏覽器支援 HTML5 的檔案上傳功能，則使用HTML5實現更好的體驗；
1.3 前端效能優化的方法？
（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指儘量不使用檔案系統作為快取、減少讀寫檔案次數等。程式優化永遠要優化慢的部分，換語言是無法“優化”的。
1.4 頁面從輸入 URL 到頁面載入顯示完成
注：
這題勝在區分度高，知識點覆蓋廣，再不懂的人，也能答出幾句，
而高手可以根據自己擅長的領域自由發揮，從URL規範、HTTP協議、DNS、CDN、資料庫查詢、
到瀏覽器流式解析、CSS規則構建、layout、paint、onload/domready、JS執行、JS API繫結等等；
詳細版:
- 瀏覽器會開啟一個執行緒來處理這個請求，對 URL 分析判斷如果是 http 協議就按照 Web 方式來處理;
- 呼叫瀏覽器核心中的對應方法，比如 WebView 中的 loadUrl 方法;
- 通過DNS解析獲取網址的IP地址，設定 UA 等資訊發出第二個GET請求;
- 進行HTTP協議會話，客戶端傳送報頭(請求報頭);
- 進入到web伺服器上的 Web Server，如 Apache、Tomcat、Node.JS 等伺服器;
- 進入部署好的後端應用，如 PHP、Java、JavaScript、Python 等，找到對應的請求處理;
- 處理結束回饋報頭，此處如果瀏覽器訪問過，快取上有對應資源，會與伺服器最後修改時間對比，一致則返回304;
- 瀏覽器開始下載html文件(響應報頭，狀態碼200)，同時使用快取;
- 文件樹建立，根據標記請求所需指定MIME型別的檔案（比如css、js）,同時設定了cookie;
- 頁面開始渲染DOM，JS根據DOM API操作DOM,執行事件繫結等，頁面顯示完成。
簡潔版:
- 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向伺服器發起請求；
- 伺服器交給後臺處理完成後返回資料，瀏覽器接收檔案（HTML、JS、CSS、圖象等）；
- 瀏覽器對載入到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部資料結構（如HTML的DOM）；
- 載入解析到的資原始檔，渲染頁面，完成。
1.5 平時如何管理你的專案？
先期團隊必須確定好全域性樣式（globe.css），編碼模式(utf-8) 等；
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）；
頁面進行標註（例如 頁面 模組 開始和結束）；
CSS跟HTML 分資料夾並行存放，命名都得統一（例如style.css）；
JS 分資料夾存放 命名以該JS功能為準的英文翻譯。
圖片採用整合的 images.png png8 格式檔案使用 儘量整合在一起使用方便將來的管理