前端面试：异步加载和延迟加载的前端理解？

作者：NativeBase 2023-06-29 07:48:35开发 前端 异步加载指的是在页面加载完成之后，通过JavaScript异步请求数据或资源，面试来避免阻塞页面的异步加载。常用的加载实现方式是使用XMLHttpRequest对象或fetch API发起异步请求，然后通过回调函数或Promise来处理请求结果。和延

回答：

异步加载和延迟加载是迟加前端优化网站性能的两种方法。

异步加载的理解方案:

动态插入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});

以上是异步加载和延迟加载的一些具体实例，实际上还有很多其他的实现方式，需要根据具体情况来选择。

责任编辑：姜华 来源： 今日头条 异步加载JavaScript

(责任编辑：知识)