前端面试 - JS总结（3）- 异步，性能优化，错误处理(3)

最新推荐文章于 2024-07-11 15:29:37 发布

m0_60607971

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量974

点赞数 19

分类专栏： 2024年程序员学习文章标签：前端面试 javascript

本文链接：https://blog.csdn.net/m0_60607971/article/details/137741492

版权

2024年程序员学习专栏收录该内容

259 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

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查询进行缓存

频繁DOM操作，合并到一起插入DOM结构

节流throttle和防抖debounce

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

js 的加载、解析和执行会阻塞页面的渲染过程，因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。

将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。
给 js 脚本添加 defer属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
给 js 脚本添加 async属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

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

（1）DNS解析

（2）TCP三次握手

（3）浏览器向服务器发送http请求 一旦建立了TCP链接，web浏览器就会向web服务器发送请求命令。

（4）浏览器发送请求头信息 浏览器发送其请求命令之后，还要以头信息的形式想web服务器发送一些别的信息，之后浏览器发送了一空白行开通知服务器，它已经结束了该头信息的发送。

（5）服务器处理请求 服务器收到http请求之后，确定用相应的一眼来处理请求。读取参数并进行逻辑操作后，生成指定的数据。

（6）服务器做出响应 客户端向服务器发送请求后，服务端向客户端做出应答。

（7）服务器发送应答头信息 正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据以及被请求的文档。

（8）服务器发送数据 web服务器向浏览器发送信息后，它会发送一个空白行来表示头信息的发送到此结束。接着，它会以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。

（9）TCP关闭（四次挥手）

一般情况下，一旦web服务器向浏览器发送了请求数据，它就要关闭tcp链接。如果浏览器或服务器在其头信息加入了Connection:keep-alive,则会保持长连接状态，也就是TCP链接在发送后仍保持打开状态，浏览器可以继续通过仙童的链接发送请求。

14. DNS解析过程

DNS( Domain Name System)是“域名系统”的英文缩写，是一种组织成域层次结构的计算机和网络服务命名系统，它用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换为IP地址的工作。DNS是应用层协议，事实上他是为其他应用层协议工作的，包括不限于HTTP和SMTP以及FTP，用于将用户提供的主机名解析为ip地址。

关于DNS的获取流程具体过程如下：

(1) 用户主机上运行着DNS的客户端，就是我们的PC机或者手机客户端运行着DNS客户端了

(2) 浏览器将接收到的url中抽取出域名字段，就是访问的主机名, 并将这个主机名传送给DNS应用的客户端

(3) DNS客户机端向DNS服务器端发送一份查询报文，报文中包含着要访问的主机名字段（中间包括一些列缓存查询以及分布式DNS集群的工作）

(4) 该DNS客户机最终会收到一份回答报文，其中包含有该主机名对应的IP地址

(5) 一旦该浏览器收到来自DNS的IP地址，就可以向该IP地址定位的HTTP服务器发起TCP连接

15. 回流和重回

影响页面渲染速度主要有：reflow(回流)和repaint(重绘)

**reflow（回流）当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，该过程称为reflow（回流）。**reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint(重绘)： 如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。 reflow是不可避免的，只能将reflow对性能的影响减到最小。

repaint 的速度明显快于 reflow. reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。

**导致reflow发生：**改变窗囗大小，设置style属性，计算offsetWidth和offsetHeight，脚本操作DOM，操作class属性，激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)，内容的改变，如用户在输入框中敲字，添加/删除样式表，改变文字大小

如何避免：

尽可能限制reflow的影响范围。需要改变元素的样式，不要通过父级元素影响子元素。最好直接加在子元素上。
通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。

参考链接：https://www.cnblogs.com/Peng2014/p/4687218.html

16. 防抖与节流

函数防抖 是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

函数节流 是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。

三、错误处理

==========

17. try - catch - finally

（1）try种没有发生异常，没有走catch，执行顺序是 try=>finally=>return（try）；

（2）try发生异常，没有正常返回，进入catch方法块：try=>catch=>finally=>return（catch）；

（3）finally方法中修改try或catch中的变量，返回结果不会被改变。也就是如果finally是在return之后执行的那么他会把返回结果先保存起来，然后不管finally代码执行了什么，都不会影响到返回结果，等finally执行完成在返回结果。

（4）finally也不是必须的。如果catch没有return 就会返回底部return方法。这是我们的常识。

（5）不写catch。try发生了异常，finally始终执行，然后异常被调用方法内的catch捕获执行顺序：try=>finally=>catch(主方法)

（6）throw 用于抛出异常，在catch中捕获异常。

不管try有没有出错finally方法块都会被执行。【快记笔记，知识点。】
就算try和catch方法都有return，finally都会执行；
只要try或者catch return返回，try catch 之外的return都无效；
不能在finally中写return 否则会报错。不可以写重复多个try 但是可以多个catch

参考链接：https://www.cnblogs.com/yanbigfeg/p/9295541.html

四、其他

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

HTML 和 CSS：

html5知识

css基础知识

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
CSS：

html5知识

css基础知识

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-HpNP2U1h-1713068694891)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

m0_60607971

关注

19
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
前端面试 - JS总结（3）- 异步，性能优化，错误处理(3)

推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
复制链接

扫一扫