2024年最新前端面试 - JS总结（3）- 异步，性能优化，错误处理，前端高级工程师进阶学习-CSDN博客

本文链接：https://blog.csdn.net/2401_84437691/article/details/138541239

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

1. 异步概念

2. 异步机制

3. 宏任务和微任务

4. JS常见的异步模式

5. 回调函数（Callback）

6. Async await

7. Promise

8. Ajax

9. jsonp的原理，以及为什么不是真正的ajax

10. 常用定时器函数

二、性能优化

11. 如何入手性能优化

12. js 延迟加载的方式有哪些？

13. 在浏览器中输入URL到整个页面显示

14. DNS解析过程

15. 回流和重回

三、错误处理

16. try - catch - finally

四、其他

17. 模块化开发的理解？

18. js 的几种模块规范？

一、异步

========

1. 异步概念

javascript语言是一门“单线程”的语言。所谓单线程，是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。同步和异步区别：异步是基于JS单线程语言；异步不会阻塞代码执行；同步会阻塞代码执行.

在JS中，异步编程只有四种情况：（网络请求，如Ajax图片加载；定时任务，如setTimeout）

–> 定时器都是异步编程的
–> 所有的事件绑定都是异步编程的
–> Ajax读取数据都是异步编程的，我们一般设置为异步编程
–> 回调函数都是异步编程的

2. 异步机制

具体来说，异步运行机制如下：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。（事件就是回调函数，用于触发函数的执行）。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

3. 宏任务和微任务

宏任务（macrotask ）和微任务（microtask ）表示异步任务的两种分类。在挂起任务时，JS 引擎会将所有任务按照类别分到这两个队列中，首先在 macrotask 的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的所有任务顺序执行；之后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。同一次事件循环中微任务永远在宏任务之前执行

参考链接：https://www.cnblogs.com/ckAng/p/11133643.html

4. JS常见的异步模式

（1）回调函数 – 回调函数作为参数传递给另一个函数，在另一个函数中被调用。但是使用回调函数，经常会写出回调地狱，这是非常致命的。回调地狱的根本问题是：嵌套函数存在耦合性；嵌套函数变多，处理问题的困难也变大

（2）事件监听 – 事件监听模式，异步任务的执行取决于，某个事件的发生。比如点击事件（onClick）和内容改变时间（onChange）等

（3）发布/订阅模式 -- 想象有一个类似消息中心的地方，可以在消息中心“注册”一条消息，然后就会有若干对这消息感兴趣的人“订阅”，一旦该消息被“发布”，所有”订阅“了该消息的用户都会得到提醒。

（4）promise – Promise是ES6推出的一种解决异步编程的解决方案。有三种状态：等待中（pending）、完成（resolved）、拒绝（rejected）。一旦状态从等待改变为其他状态就不再可变了。Promise是个构造函数，接受一个函数作为参数。作为参数的函数有两个参数：resolve和reject，分别对应完成和拒绝两种状态。我们可以选择在不同时候执行resolve或reject去触发下一个动作，执行then方法里的函数。Promise实现了链式调用，每次调用then之后返回的都是一个Promise对象。

（5）Generator(ES6) – Generator 最大的特点就是可以控制函数的执行。Generator 函数调用和普通函数不同，它会返回一个迭代器

（6）async/await(ES7) – 一个函数如果加上async，那么该函数就会返回一个Promise对象。async函数执行后可以继续使用then等方法来继续执行后面的逻辑。async函数执行遇到await后，等待后面的Promise对象的状态从pending变成resolve后，将resolve的参数返回并自动往下执行知道下一个await或结束。

参考链接：https://www.cnblogs.com/bzsheng/p/12456944.html

5. 回调函数（Callback）

回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码

回调地狱的根本问题就是：

嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
嵌套函数一多，就很难处理错误

当然，回调函数还存在着别的几个缺点，比如不能使用 try catch 捕获错误，不能直接 return。

6. Async await

async/await是异步操作的终极解决方案： async 用于声明一个 function 是异步的，而await 用于等待一个异步方法执行完成。

语法简洁，更像是同步代码，也更符合普通的阅读习惯；改进JS中异步操作串行执行的代码组织方式，减少callback的嵌套；Promise中不能自定义使用try/catch进行错误捕获，但是在Async/await中可以像处理同步代码处理错误。

不过也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。

JS 异步编程进化史：callback -> promise -> generator -> async/await

7. Promise

Promise是ES6推出的一种解决异步编程的解决方案。Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。

有三种状态：等待中（pending）、完成（resolved）、拒绝（rejected）。一旦状态从等待改变为其他状态就不再可变了。Promise是个构造函数，接受一个函数作为参数。作为参数的函数有两个参数：resolve和reject，分别对应完成和拒绝两种状态。我们可以选择在不同时候执行resolve或reject去触发下一个动作，执行then方法里的函数。Promise实现了链式调用，每次调用then之后返回的都是一个Promise对象。当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的

缺点：无法取消 Promise，错误需要通过回调函数捕获。

参考链接：https://blog.csdn.net/itkingone/article/details/86492104

8. Ajax

ajax 是一种异步通信的方法，通过直接由 js 脚本向服务器发起 http 通信，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一种方法。

****优点：****通过异步模式，提升了用户体验.；优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.；Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。Ajax可以实现动态不刷新（局部刷新）

****缺点：****安全问题 AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。不容易调试。

描述AJAX的工作原理

第一步：创建AJAX对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp));
第二步：使用open打开连接，格式为open（请求方式，‘请求路径’，同步/异步）；
第三步：发送send();
第四步：当ajax对象完成第四步（onreadystatechange），数据接收完成。再判断对象状态码(readystate) 当状态码为成功接收的状态码时，HTTP响应完全接收。再判断http响应状态（200-300之间或者304），（缓存）执行回调函数获取的数据转成字符串格式(responseText) 。

9. jsonp的原理，以及为什么不是真正的ajax

Jsonp原理：利用浏览器可以动态的插入一段JS代码并执行；

为什么不是真正的AJAX

首先，ajax和jsonp在调用方式上虽然长得差不多（目的一样，都是请求一个url，然后把服务器返回的数据进行处理），但是ajax和jsonp本质上是不同的东西;
哪里不同？核心不同！ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本;
此外，需要注意的是，ajax和jsonp的区别不在于是否跨域。因为ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。还有就是jsonp是一种方式或者说是非强制协议，如同ajax一样，它也不一定非要jsonp格式来传递数据;
jsonp只支持get请求，ajax支持get和post请求.

10. 常用定时器函数

常见的定时器函数有 setTimeout、setInterval、

（1）setTimeout

在指定的毫秒数后，将定时任务处理的函数添加到执行队列的队尾。setTimeout只在指定时间后执行一次. setTimeout用于延迟执行某方法或功能

（2）setInterval

按照指定的周期(以毫秒数计时)，将定时任务处理函requestAnimationFrame。数添加到执行队列的队尾。setInterval以指定时间为周期循环执行。setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

（3）requestAnimationFrame

HTML5 新增加的 API，类似于 setTimeout 定时器。window 对象的一个方法， window.requestAnimationFrame。使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿。（setTimeout 通过设置一个间隔时间不断改变图像，达到动画效果。该方法在一些低端机上会出现卡顿、抖动现象。参考链接：https://blog.csdn.net/weixin_40851188/article/details/89669416）

二、性能优化

==========

11. 如何入手性能优化

（1）加载更快

减少资源体积：压缩代码

减少访问次数：合并代码，SSR服务器端渲染，缓存

使用更快的网络：CDN

（2）渲染更快/流畅

CSS放在head，JS放在body最下面

尽早开始执行JS，用DOMContentLoaded触发

懒加载（图片懒加载，上滑加更多）

对DOM查询进行缓存