前端工程師面試題（性能優化）

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綁定等等；

詳細版:

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,執行事件綁定等，頁面顯示完成。

簡潔版:

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

1.5 平時如何管理你的項目？

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

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

標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

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

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

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

圖片採用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

推薦文章

Web性能的方方面面

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！