溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“關于性能優化的面試題有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
網站重構是指在不改變外部行為的前提下，簡化結構、添加可讀性，且在網站前端保持一致的行為。也就是說，在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。
對于傳統的網站來說，重構通常包括以下方面。
把表格（ table）布局改為DV+CSS。
使網站前端兼容現代瀏覽器。
對移動平臺進行優化。
針對搜索引擎進行優化。
深層次的網站重構應該考慮以下方面。
減少代碼間的耦合
讓代碼保持彈性。
嚴格按規范編寫代碼。
設計可擴展的API。
代替舊的框架、語言（如VB）
增強用戶體驗。
對速度進行優化。
壓縮 JavaScript、CSS、 image等前端資源（通常由服務器來解決）。
優化程序的性能（如數據讀寫）。
采用CDN來加速資源加載。
優化 JavaScript DOM。
緩存HTTP服務器的文件。
對于圖片懶加載，可以為頁面添加一個滾動條事件，判斷圖片是否在可視區域內或者即將進入可視區域，優先加載。
如果為幻燈片、相冊文件等，可以使用圖片預加載技術，對于當前展示圖片的前一張圖片和后一張圖片優先下載。
如果圖片為CSS圖片，可以使用 CSS Sprite、SVG sprite、 Icon font、Base64等技術。
如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮得特別小的縮略圖，以提高用戶體驗。
如果圖片展示區域小于圖片的真實大小，則應在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后，圖片大小與展示的就一致了。
可以在以下層面優化性能。
緩存利用：緩存Ajax，使用CDN、外部 JavaScript和CSS文件緩存，添加 Expires頭，在服務器端配置Etag，減少DNS查找等。
請求數量：合并樣式和腳本，使用CSS圖片精靈，初始首屏之外的圖片資源按需加載，靜態資源延遲加載。
請求帶寬：壓縮文件，開啟GZIP 。
CSS代碼：避免使用CSS表達式、高級選擇器、通配選擇器。
JavaScript代碼：用散列表來優化查找，少用全局變量，用 innerHTML代替DOM操作，減少DOM操作次數，優化 JavaScript性能，用 setTimeout避免頁面失去響應，緩存DOM節點查找的結果，避免使用with（with會創建自己的作用域，增加作用域鏈的長度），多個變量聲明合并。
HTML代碼：避免圖片和 iFrame等src屬性為空。src屬性為空，會重新加載當前頁面，影響速度和效率，盡量避免在HTML標簽中寫 Style屬性
優化方式如下。
盡量使用CSS3動畫，開啟硬件加速。
適當使用 touch事件代替 click事件。
避免使用CSS3漸變陰影效果。
可以用 transform:translateZ（0）來開啟硬件加速。
不濫用 Float, Float在渲染時計算量比較大，盡量少使用。
不濫用Web字體，Web字體需要下載、解析、重繪當前頁面，盡量少使用。
合理使用requestAnimation Frame動畫代替 setTimeout。
合理使用CSS中的屬性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）觸發GPU渲染。過度使用會使手機耗電量増加。
可以進行文件合并、文件壓縮使文件最小化；可以使用CDN托管文件，讓用戶更快速地訪問；可以使用多個域名來緩存靜態文件。
具體方法如下。
（1）優化圖片
（2）選擇圖像存儲格式（比如，GIF提供的顏色較少，可用在一些對顏色要求不高的地方）
（3）優化CSS（壓縮、合并CSS）
（4）在網址后加斜杠
（5）為圖片標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小。如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，而且影響瀏覽體驗。當瀏覽器知道高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容，從而優化加載時間，提升瀏覽體驗）。
精靈圖合并，減少HTTP請求；壓縮HTML、CSS、JavaScript文件；使用CDN托管靜態文件；使用 localstorage緩存和 mainfest應用緩存。
具體方法如下。
（1）減少HTTP請求次數，控制CSS Sprite、JavaScript與CSS源碼、圖片的大小，使用網頁Gzip、CDN托管、data緩存、圖片服務器
（2）通過前端模板 JavaScript和數據，減少由于HTML標簽導致的帶寬浪費，在前端用變量保存Ajax請求結果，每次操作本地變量時，不用請求，減少請求次數。
（3）用 innerhTML代替DOM操作，減少DOM操作次數，優化 JavaScript性能。
（4）當需要設置的樣式很多時，設置 className而不是直接操作 Style。
（5）少用全局變量，緩存DOM節點查找的結果，減少I/O讀取操作
（6）避免使用CSS表達式，它又稱動態屬性，
（7）預加載圖片，將樣式表放在頂部，將腳本放在底部，加上時間戳。
（8）避免在頁面的主體布局中使用表，表要在其中的內容完全下載之后才會顯示出來，顯示的速度比DIV+CSS布局慢。
具體優化方法如下。
（1）壓縮源碼和圖片（ JavaScript采用混淆壓縮，CSS進行普通壓縮，JPG圖片根據具體質量壓縮為50%~70%，把PNG圖片從24色壓縮成8色以去掉一些PNG格式信息等）。
（2）選擇合適的圖片格式（顏色數多用JPG格式，而很少使用PNG格式，如果能通過服務器端判斷瀏覽器支持WebP就用WebP或SVG格式）。
（3）合并靜態資源（減少HTTP請求）
（4）把多個CSS合并為一個CSS，把圖片組合成雪碧圖。
（5）開啟服務器端的Gzip壓縮（對文本資源非常有效）。
（6）使用CDN（對公開庫共享緩存）。
（7）延長靜態資源緩存時間。
（8）把CSS放在頁面頭部把 JavaScript代碼放在頁面底部（這樣避免阻塞頁面渲染而使頁面出現長時間的空白）
利用性能分析工具監測性能，包括靜態 Analyze工具和運行時的 Profile工具（在Xcode工具欄中依次單擊 Product→ Profile項可以啟動）。
比如測試程序的運行時間，當單擊 Time Profiler項時，應用程序開始運行，這就能獲取到運行整個應用程序所消耗時間的分布和百分比。為了保證數據分析在同一使用場景下的真實性，一定要使用真機，因為此時模擬器在Mac上運行，而Mac上的CPU往往比iOS設備要快。
具體優化方法如下。
（1）正確使用 display屬性， display屬性會影響頁面的渲染，因此要注意以下幾方面。
display:inline后不應該再使用 width、 height、 margin、 padding和float 。
display:inline- block后不應該再使用 float。
display:block后不應該再使用 vertical-align。
display:table-*后不應該再使用 margin或者float。
（2）不濫用 float。
（3）不聲明過多的font-size。
（4）當值為0時不需要單位。
（5）標準化各種瀏覽器前綴，并注意以下幾方面。
瀏覽器無前綴應放在最后。
CSS動畫只用（ -webkit-無前綴）兩種即可。
其他前綴包括 -webkit-、-moz-、-ms-、無前綴（ Opera瀏覽器改用 blink內核，所以-0-被淘汰）
（6）避免讓選擇符看起來像是正則表達式。高級選擇器不容易讀懂，執行時間也長。
（7）盡量使用id、 class選擇器設置樣式（避免使用 style屬性設置行內樣式）
（8）盡量使用CSS3動畫。
（9）減少重繪和回流。
具體方法如下。
（1）對于資源加載，按需加載和異步加載
（2）首次加載的資源不超過1024KB，即越小越好。
（3）壓縮HTML、CSS、 JavaScript文件。
（4）減少DOM節點。
（5）避免空src（空src在部分瀏覽器中會導致無效請求）。
（6）避免30*、40*、50*請求錯誤
（7）添加 Favicon.ico，如果沒有設置圖標ico，則默認的圖標會導致發送一個404或者500請求。
具體方法如下。
（1）緩存DOM的選擇和計算。
（2）盡量使用事件委托模式，避免批量綁定事件。
（3）使用 touchstart、 touchend代替 click。
（4）合理使用 requestAnimationFrame動畫代替 setTimeOut。
（5）適當使用 canvas動畫。
（6）盡量避免在高頻事件（如 TouchMove、 Scroll事件）中修改視圖，這會導致多次渲染。
具體方法如下。
（1）啟用Gzip壓縮。
（2）延長資源緩存時間，合理設置資源的過期時間，對于一些長期不更新的靜態資源過期時間設置得長一些。
（3）減少 cookie頭信息的大小，頭信息越大，資源傳輸速度越慢。
（4）圖片或者CSS、 JavaScript文件均可使用CDN來加速。
具體方法如下。
（1）接口合并：如果一個頁面需要請求兩部分以上的數據接口，則建議合并成一個以減少HTTP請求數。
（2）減少數據量：去掉接口返回的數據中不需要的數據。
（3）緩存數據：首次加載請求后，緩存數據；對于非首次請求，優先使用上次請求的數據，這樣可以提升非首次請求的響應速度。
腳本處理不當會阻塞頁面加載、渲染，因此在使用時需注意。
（1）把CSS寫在頁面頭部，把 JavaScript程序寫在頁面尾部或異步操作中。
（2）避免圖片和 iFrame等的空src，空src會重新加載當前頁面，影響速度和效率。
（3）盡量避免重設圖片大小。重設圖片大小是指在頁面、CSS、 JavaScript文件等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能
（4）圖片盡量避免使用 DataURL。DataURL圖片沒有使用圖片的壓縮算法，文件會變大，并且要在解碼后再渲染，加載慢，耗時長。
具體方法如下。
通過HTML設置 Viewport元標簽， Viewport可以加速頁面的渲染，如以下代碼所示。
<meta name="viewport" content="width=device=width,initial-scale=1">
（2）減少DOM節點數量，DOM節點太多會影響頁面的渲染，應盡量減少DOM節點數量。
（3）盡量使用CSS3動畫，合理使用 requestAnimationFrame動畫代替 setTimeout，適當使用 canvas動畫（5個元素以內使用CSS動畫，5個元素以上使用 canvas動畫（iOS 8中可使用 webGL））。
（4）對于高頻事件優化 Touchmove, Scroll事件可導致多次渲染。
使用 requestAnimationFrame監聽幀變化，以便在正確的時間進行渲染，增加響應變化的時間間隔，減少重繪次數。
使用節流模式（基于操作節流，或者基于時間節流），減少觸發次數。
（5）提升GPU的速度，用CSS中的屬性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）來觸發GPU渲染.
在瀏覽器地址欄中輸入URL以后，瀏覽器首先要查詢域名（ hostname）對應服務器的IP地址，一般需要耗費20~120ms的時間。
DNS查詢完成之前，瀏覽器無法識別服務器IP，因此不下載任何數據。基于性能考慮，ISP運營商、局域網路由、操作系統、客戶端（瀏覽器）均會有相應的DNS緩存機制。
（1）正IE緩存30min，可以通過注冊表中 DnsCacheTimeout項設置。
（2） Firefox混存1 min，通過 network.dnsCacheExpiration配置。
（3）在 Chrome中通過依次單擊“設置”→“選項”→“高級選項”，并勾選“用預提取DNS提高網頁載入速度”選項來配置緩存時間。
開發過程中，發現很多開發者沒有設置圖標，而服務器端根目錄也沒有存放默認的 Favicon.ico，從而導致請求404出現。通常在App的 webview里打開 Favicon.ico，不會加載這個 Favicon.ico，但是很多頁面能夠分享。
如果用戶在瀏覽器中打開 Favicon. ico，就會調取失敗，一般盡量保證該圖標默認存在，文件盡可能小，并設置一個較長的緩存過期時間。另外，應及時清理緩存過期導致岀現請求失敗的資源。
優化方法如下。
（1）使用最新版本的 jQuery類庫。
JQuery類庫每一個新的版本都會對上一個版本進行Bug修復和一些優化，同時也會包含一些創新，所以建議使用最新版本的 jQuery類庫提高性能。不過需要注意的是，在更換版本之后，不要忘記測試代碼，畢竟有時候不是完全向后兼容的。
（2）使用合適的選擇器。
jQuery提供非常豐富的選擇器，選擇器是開發人員最常使用的功能，但是使用不同選擇器也會帶來性能問題。建議使用簡凖選擇器，如i選擇器、類選擇器，不要將i選擇器嵌套等。
（3）以數組方式使用 jQuery對象。
使用 jQuery選擇器獲取的結果是一個 jQuery對象。然而， jQuery類庫會讓你感覺正在使用一個定義了索引和長度的數組。在性能方面，建議使用簡單的for或者 while循環來處理，而不是$. each()，這樣能使代碼更快。
（4）每一個 JavaScript事件（例如 click、 mouseover等）都會冒泡到父級節點。當需要給多個元素綁定相同的回調函數時，建議使用事件委托模式。
（5）使用join( )來拼接字符串。
使用 join( )拼接長字符串，而不要使用“+”拼接字符串，這有助于性能優化，特別是處理長字符串的時候。
（6）合理利用HTML5中的data屬性。
HTML5中的data屬性有助于插入數據，特別是前、后端的數據交換；jQuery的 data( )方法能夠有效地利用HTML5的屬性來自動獲取數據。
（1）盡可能多地利用硬件能力，如使用3D變形來開啟GPU加速，例如以下代碼。
-webkit-transform: translate 3d(0, 0, 0); -moz-transform : translate3d(0,0, 0); -ms-transform : translate 3d(0,0,0); transform: translate3d(0,0,0)；
一個元素通過 translate3d右移500X的動畫流暢度會明顯優于使用left屬性實現的動畫移動，原因是CSS動畫屬性會觸發整個頁面重排、重繪、重組。paint通常是最耗性能的，盡可能避免使用觸發 paint的CSS動畫屬性。
如果動畫執行過程中有閃爍（通常發生在動畫開始的時候），可以通過如下方式處理。
-webkit-backface-visibility:hidden; -moz-backface-visibility:hidden； -ms-backface-visibility:hidden ; backface-visibility:hidden； -webkit-perspective：1000； -moz-perspective：1000； -ms-perspective：1000； perspective：1000;
（2）盡可能少使用box- shadows和 gradients，它們往往嚴重影響頁面的性能，尤其是在一個元素中同時都使用時。
（3）盡可能讓動畫元素脫離文檔流，以減少重排，如以下代碼所示。
position:fixed； position:absolute;
“關于性能優化的面試題有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
