前端开发笔面试总结（2020秋招）

最新推荐文章于 2023-01-18 21:28:53 发布

小卖部出来的Coder

最新推荐文章于 2023-01-18 21:28:53 发布

阅读量521

点赞数

分类专栏：前端开发学习笔记

本文链接：https://blog.csdn.net/lancerFm/article/details/108365058

版权

本文是作者关于前端开发的面试经验总结，涵盖了前端基础、算法题和开放性问题。前端基础部分包括事件循环、XSS与CSRF的防御、HTTPS工作原理、登录模块实现、图片懒加载、原生XMLHttpRequest的ajax封装、排序算法和定时器的理解。算法题涉及数组去重、链表排序等。开放性问题则讨论了选择Vue框架的原因和前端安全防护措施。

摘要由CSDN通过智能技术生成

暑期实习给我带来了美好的实习体验，作为一个刚走出校园踏入社会的学生，熟悉了职场环境，认识了优秀的同事，有了不同的经历。也让我得以把在学校和自身所学的理论知识，运用到实际工作中去，提升了自己的经验和能力，这是在企业环境之外无法接触到的，让我对以后的职业生涯有了更清晰的认识。也让我明白了工作是一个不断在实践中学习，在学习中实践的过程。总结和积累是进步的阶梯。

秋招已然开始，为了能更进一步，也投递和面试了许多公司的岗位，每次都会遇到新问题和新知识，在这里也进行一个总结，查漏补缺的同时增强记忆，希望在秋招后也能拿到理想的offer！

一、前端基础

1、浏览器事件循环

JavaScript 引擎是单线程

JavaScript 引擎是单线程，也就是说每次只能执行一项任务，其他任务都得按照顺序排队等待被执行，只有当前的任务执行完成之后才会往下执行下一个任务。

HTML5 中提出了 Web-Worker API，主要是为了解决页面阻塞问题，但是并没有改变 JavaScript 是单线程的本质。了解 Web-Worker。

JavaScript 事件循环机制

JavaScript 事件循环机制分为浏览器和 Node 事件循环机制，两者的实现技术不一样，浏览器 Event Loop 是 HTML 中定义的规范，Node Event Loop 是由 libuv 库实现。这里主要讲的是浏览器部分。

Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。

JS 调用栈

JS 调用栈是一种后进先出的数据结构。当函数被调用时，会被添加到栈中的顶部，执行完成之后就从栈顶部移出该函数，直到栈内被清空。
同步任务、异步任务

JavaScript 单线程中的任务分为同步任务和异步任务。同步任务会在调用栈中按照顺序排队等待主线程执行，异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候，也就是栈内被清空的时候，被读取到栈中等待主线程执行。任务队列是先进先出的数据结构。
Event Loop

调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环。

宏任务(macro-task)、微任务(micro-task)

除了广义的同步任务和异步任务，JavaScript 单线程中的任务可以细分为宏任务和微任务。

macro-task包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task包括：process.nextTick, Promises, Object.observe, MutationObserver。

有了宏任务和微任务的概念后，那 JS 的执行顺序是怎样的？是宏任务先还是微任务先？

第一次事件循环中，JavaScript 引擎会把整个 script 代码当成一个宏任务执行，执行完成之后，再检测本次循环中是否寻在微任务，存在的话就依次从微任务的任务队列中读取执行完所有的微任务，再读取宏任务的任务队列中的任务执行，再执行所有的微任务，如此循环。JS 的执行顺序就是每次事件循环中的宏任务-微任务。