面試前端性能優化八股文十問十答第二期

作者：程序員小白條，個人博客

相信看了本文后，對你的面試是有一定幫助的！關注專欄后就能收到持續更新！

?點贊?收藏?不迷路！?

1）如何優化動畫？

優化動畫可以通過以下幾個方面進行：

使用 CSS 動畫：利用 CSS3 提供的 transition 和 animation 屬性來實現動畫效果，因為 CSS 動畫是由瀏覽器來執行的，通常比 JavaScript 動畫性能更高。
使用硬件加速：通過 CSS 屬性 transform 和 opacity 來觸發 GPU 加速，可以使動畫更加流暢。例如，可以使用 translate3d() 來進行 3D 變換，或者使用 opacity 來實現淡入淡出效果。
避免強制同步布局（Layout）：在動畫過程中避免頻繁地讀取和修改布局信息，因為這會觸發瀏覽器的重排和重繪，導致動畫卡頓。可以通過將動畫元素設置為 position: absolute 或 fixed，或者使用 transform 屬性來避免布局抖動。
使用 requestAnimationFrame：使用 requestAnimationFrame 方法來執行動畫，它可以讓瀏覽器在下一次重繪之前執行動畫邏輯，保證動畫的流暢性，并且在頁面被隱藏或最小化時自動暫停動畫，節省 CPU 資源。
節流和防抖：對于一些頻繁觸發的事件（如滾動、鼠標移動等），可以使用節流（Throttling）和防抖（Debouncing）等技術來控制事件的觸發頻率，減少不必要的動畫計算和渲染次數，提高性能。

2）documentFragment 是什么？

DocumentFragment 是一個輕量級的文檔片段，它是 DOM 結構的一部分，但是不屬于文檔樹的一部分。它可以作為一個臨時的容器，用來存儲和操作 DOM 元素，然后一次性地將這些元素添加到文檔中，從而減少 DOM 操作所帶來的性能開銷。

DocumentFragment 可以通過 document.createDocumentFragment() 方法來創建，然后可以像操作普通的 DOM 元素一樣來操作它，比如添加子節點、移除子節點等。一般情況下，當需要頻繁地操作 DOM 元素時，可以將這些操作放在 DocumentFragment 中進行，然后將整個 DocumentFragment 添加到文檔中，以提高性能。

3）用 documentFragment 跟直接操作 DOM 的區別是什么？

使用 DocumentFragment 和直接操作 DOM 的主要區別在于性能和渲染效率：

性能：直接操作 DOM 可能會導致瀏覽器頻繁地觸發重排和重繪，因為每次操作都會導致瀏覽器重新計算布局和樣式。而使用 DocumentFragment 可以將多次操作合并成一次，然后一次性地將所有操作結果添加到文檔中，減少了瀏覽器的重排和重繪次數，提高了性能。
渲染效率：直接操作 DOM 可能會導致頁面閃爍或者布局抖動的問題，因為每次操作都會影響到頁面的渲染。而使用 DocumentFragment 可以避免這些問題，因為所有的操作都是在一個虛擬的文檔片段中進行的，直到操作完成后才將結果添加到文檔中，用戶在這個過程中不會看到任何中間狀態的頁面渲染。

因此，總的來說，使用 DocumentFragment 可以提高 DOM 操作的性能和渲染效率，特別是在需要頻繁操作大量 DOM 元素時，使用 DocumentFragment 是一個很好的優化手段。

4）對節流與防抖的理解

節流（Throttling）：節流是一種限制一個函數在一定時間內執行的頻率的技術。當一個函數被節流控制時，它不會在短時間內被連續調用，而是以一定的時間間隔執行。這可以防止過多的函數調用，特別是在一些頻繁觸發的事件中，如滾動、鼠標移動等。
防抖（Debouncing）：防抖是一種在一定時間內，延遲執行函數的技術。當一個函數被防抖控制時，如果在規定的時間內再次觸發該函數，則會重新計時，直到沒有新的觸發事件。這通常用于處理輸入框的輸入事件，確保在用戶輸入結束后再觸發相應的處理邏輯，避免頻繁的處理。

5）實現節流函數和防抖函數

下面是簡單的 JavaScript 實現：

節流函數：

function throttle(func, delay) {let lastCallTime = 0;return function (...args) {const now = Date.now();if (now - lastCallTime >= delay) {func.apply(this, args);lastCallTime = now;}};
}

防抖函數：

function debounce(func, delay) {let timer;return function (...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};
}

使用方式如下：

const throttledFn = throttle(() => {console.log('Throttled function called');
}, 1000);const debouncedFn = debounce(() => {console.log('Debounced function called');
}, 1000);// 使用節流函數
window.addEventListener('scroll', throttledFn);// 使用防抖函數
document.getElementById('inputField').addEventListener('input', debouncedFn);

6）如何對項目中的圖片進行優化？

對項目中的圖片進行優化是提高頁面加載性能的重要步驟。一些優化技術包括：

選擇合適的圖片格式：選擇適合場景的圖片格式，如JPEG、PNG、WebP等。JPEG適合照片，PNG適合圖標和透明圖像，而WebP通常可以在保持高質量的同時減小文件大小。
壓縮圖片：使用工具對圖片進行壓縮，以減小文件大小。常見的工具有TinyPNG、ImageOptim等。在構建過程中，可以使用構建工具集成壓縮操作。
懶加載（Lazy Loading）：僅在用戶滾動到視口附近時加載圖片，而不是一開始就加載所有圖片。這可以通過設置loading="lazy"屬性或使用JavaScript庫來實現。
使用CSS Sprites：將多個小圖標或圖片合并成一個圖集，減少HTTP請求次數，提高加載速度。
適當的圖片尺寸：確保圖片的實際尺寸和在頁面上顯示的尺寸一致，避免加載過大的圖片。
CDN加速：使用內容分發網絡（CDN）來加速圖片加載，將圖片資源分布到全球多個服務器，提高訪問速度。
響應式圖片：為不同設備提供不同尺寸的圖片，以確保在不同屏幕大小和分辨率下都能夠獲得最佳的用戶體驗。

綜合使用這些優化技術，可以顯著提升項目中圖片的加載性能，加快頁面加載速度。

7）常見的圖片格式及使用場景

常見的圖片格式有：

JPEG（.jpg、.jpeg）：適用于照片和復雜圖像，具有較高的壓縮比，但會損失一定的圖像質量。
PNG（.png）：適用于圖標、透明圖片等，支持無損壓縮，保留圖像質量的同時可以實現透明效果。
GIF（.gif）：適用于動畫，支持多幀動畫，但顏色數較少，適用于簡單的動畫場景。
WebP：一種現代的圖片格式，結合了JPEG和PNG的優點，支持有損和無損壓縮，可以實現更小的文件大小和更高的圖像質量。
SVG（.svg）：矢量圖形格式，適用于圖標、簡單圖形等，可無限放大而不失真。

使用場景一般根據圖片的特性來選擇：

如果需要高質量的照片或者復雜圖像，可以選擇JPEG格式。
如果需要保留透明度或者是簡單的圖標，可以選擇PNG格式。
如果是動畫，可以選擇GIF格式。
如果希望在保證高質量的同時減小文件大小，可以考慮使用WebP格式。
如果是簡單的圖形或需要無限放大而不失真的圖形，可以選擇SVG格式。

8）如何提?webpack的打包速度?

提高Webpack的打包速度可以采取以下措施：

升級Webpack版本：Webpack的新版本通常會優化性能，使用最新版本可以獲得更好的打包速度。
合理配置Loader：盡量減少Loader的使用數量，避免不必要的轉換和處理。可以使用loader的include和exclude配置選項，只對必要的文件進行處理。
使用HappyPack或ThreadLoader：這些工具可以將Loader的工作分配給多個子進程或者線程，提高并行處理能力，加快打包速度。
使用DllPlugin：將不經常變動的第三方庫打包成單獨的文件，并使用DllPlugin插件進行緩存，避免每次重新打包。
優化resolve.modules配置：通過配置resolve.modules選項，告訴Webpack在哪些目錄下搜索模塊，避免搜索過多的目錄，提高搜索速度。
使用Tree Shaking：通過配置Webpack進行無用代碼的剔除，減少打包體積，提高打包速度。