性能優化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 格式文件使用 盡量整合在一起使用方便將來的管理

本次給大家推薦一個免費的學習群，里面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。 最后，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。

轉載于:https://juejin.im/post/5bacf972e51d450e9649f1f7

總結

以上是生活随笔為你收集整理的前端面试被问到性能优化该肿么办！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。