前端面試：異步加載和延遲加載的了解？

回答：

異步加載和延遲加載是前端優化網站性能的兩種方法。

異步加載的方案:

動态插入script标簽

通過ajax去擷取js代碼，然後通過eval執行

script标簽上添加defer或者async屬性建立并插入iframe，讓它異步執行js

延遲加載：

有些 js 代碼并不是頁面初始化的時候就立刻需要的，而稍後的某些情況才需要的。

細說：

異步加載指的是在頁面加載完成之後，通過JavaScript異步請求資料或資源，來避免阻塞頁面的加載。常用的實作方式是使用XMLHttpRequest對象或fetch API發起異步請求，然後通過回調函數或Promise來處理請求結果。

異步加載可以提高頁面的響應速度和使用者體驗，但也可能會增加頁面的複雜度和維護成本。

延遲加載指的是将頁面中不必要的資源（如圖檔、音頻、視訊等）的加載推遲到使用者需要通路它們的時候再進行加載。

常用的實作方式是使用懶加載技術，即使用JavaScript來監聽頁面滾動或使用者操作等事件，然後根據需要來動态加載資源。延遲加載可以減少頁面的加載時間和帶寬消耗，提高網站的性能和使用者體驗。

需要注意的是，異步加載和延遲加載并不是互斥的關系，它們可以結合使用來進一步優化網站的性能。

例如，在頁面加載時可以先異步加載必要的腳本和樣式檔案，然後在使用者需要通路資源時再進行延遲加載。

執行個體

異步加載：

使用XMLHttpRequest對象或fetch API發起異步請求，例如：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    // 處理請求結果
  } else {
    console.error('請求失敗');
  }
};
xhr.send();
           

使用Promise來處理異步請求，例如：

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // 處理請求結果
  })
  .catch(error => {
    console.error('請求失敗', error);
  });
           

使用async/await來處理異步請求，例如：

async function fetchData() {
  try {
    const response = await fetch('https://example.com/data.json');
    const data = await response.json();
    // 處理請求結果
  } catch (error) {
    console.error('請求失敗', error);
  }
}
fetchData();
           

延遲加載：

使用Intersection Observer API來監聽頁面滾動事件，例如：

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
});
images.forEach(image => {
  observer.observe(image);
});
           

使用圖檔占位符來減少頁面的抖動，例如：

<img src="placeholder.jpg" data-src="image.jpg" width="300" height="200">           

使用懶加載庫來實作延遲加載，例如：

// 使用jQuery Lazy加載庫
$("img.lazy").lazy({
  effect: "fadeIn",
  threshold: 200
});
           

以上是異步加載和延遲加載的一些具體執行個體，實際上還有很多其他的實作方式，需要根據具體情況來選擇。

#挑戰30天在頭條寫日記#