前端面試題及答案 - 性能優化篇

時間 2019-11-09

標籤端面試題答案性能優化欄目系統性能简体版

原文原文鏈接

這篇文章並非最全的前端面試題（沒有最全，只有更全），只是針對本身面試過程當中遇到的一些難題、容易忽略的題作一個簡單的筆記，方便後面有面試須要的小夥伴們借鑑，後續內容會不定時更新，有錯誤之處但願你們不吝指出。

一、如何對網站的文件和資源進行優化？前端

清理HTML文檔web
- CSS文件儘可能放在<head></head>之間
- JS文件儘可能放在文檔底部
減小外部http請求面試
- 沒必要要的圖片
- 沒用的js代碼
- 過多的CSS
- 多餘的插件
壓縮CSS、JS和HTML
使用預先獲取chrome
- 能夠在網站HTML中的連接屬性上增長rel="prefetch",rel="dns-prefetch"，或者rel="prerender" 標記。
使用CDN和緩存

二、雅虎網站優化的14條規則gulp

減小HTTP請求

　　減小HTTP請求的方式不少，常見的包括CSS Sprites、合併JS和CSS、圖片地圖等。遵照這條規則能夠改善首次訪問網站的響應時間。segmentfault

使用CDN（內容發佈網絡）

　　只有10%-20%的最終用戶響應時間花在了下載HTML文檔上，其他的80%-90%時間花在了下載頁面中的全部組件上。若是web服務器離服務器更近，則一個HTTP請求的響應時間將縮短。CDN是一組分佈在多個不一樣地理位置的web服務器，每一個服務器都擁有全部網站的文件副本，用戶訪問網站時，就能夠從離用戶最近的服務器發送所需的文件給客戶端。Yahoo！Shopping網站使用CDN後響應時間減小了20%。瀏覽器

添加Expires頭

　　經過使用Expires頭，瀏覽器能夠在用戶首次訪問網站後，將頁面的資源緩存下來。能夠爲Expires指定過時時間，在指定時間後，緩存將失效。緩存

啓用Gzip

　　客戶端能夠經過HTTP請求中的Accept-Encoding頭來標識對壓縮的支持（Accept-Encoding：gzip,deflate），服務器看到請求中有這個頭，就會使用客戶端列出的一種方法來壓縮響應。大多數網站使用gzip壓縮了HTML。服務器

將CSS放在頂部

　　將CSS放在底部會發生無樣式閃爍，瀏覽器會先加載HTML，而後加載CSS，會出現一段沒有任何樣式的「白屏時間」。而將CSS放在頂部則能規避這個問題。網絡

將腳本放在底部

　　將腳本放在頂部或頁面中，瀏覽器會對script標籤內的內容進行解析，從而阻塞樣式的渲染。除此以外，HTTP1.1規範建議瀏覽器從每一個主機並行的下載兩個組件，在高版本的IE和chrome、Firefox等瀏覽器則支持並行下載六個組件。但script會阻塞並行下載。所以咱們應該將腳本放在底部。

避免CSS表達式

　　CSS表達式具有求值計算能力，然而每次頁面發生重繪時，CSS表達式會影響頁面的加載時間。

使用外部JavaScript和CSS

　　使用大量內聯的JS和CSS就不能實現樣式、結構、行爲的分離，這樣會在維護上形成不少麻煩，同時也會增大網頁的體積。

減小DNS查詢

　　經過使用Keep-Alive和較少的域名能夠減小DNS查詢

精簡JavaScript和CSS

　　進行代碼混淆能夠壓縮JS文件的大小，這個經過gulp等構建工具能夠自動化的進行。

避免重定向

　　重定向用於將用戶從一個URL從新路由到另外一個URL。重定向有不少種，包括301永久重定向、302臨時重定向，304 Not Modified並非真正的重定向，它是用來響應Get請求，避免下載已經存在於瀏覽器緩存中的數據。在URL的結尾加上斜線（/）能夠避免一部分重定向。

移除重複腳本
配置ETag

　　實體標籤（Entity Tag）是web服務器和瀏覽器用於確認緩存資源的有效性的一種機制，它能夠檢測瀏覽器中緩存的資源與原始服務器上的資源是否匹配。ETag是惟一標識資源的一個特定版本的字符串，瀏覽器要驗證一個資源，它會使用If-None-Match頭將ETag傳回原始服務器。若是ETag是匹配的，就會返回304狀態碼，從而使用瀏覽器緩存。