1. 程式人生 > >前端工程師面試題(效能優化)

前端工程師面試題(效能優化)

  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 格式檔案使用 儘量整合在一起使用方便將來的管理