面试必备：前端知识点总结-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38294099/article/details/114324367

本文整理了前端面试中常见的知识点，包括登录实现、浏览器缓存机制、宏任务与微任务、Vue数据绑定、跨域解决方案、TCP连接、HTTP与HTTPS的区别、垃圾回收等，帮助考生巩固基础，准备面试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要复习自己以前学过做过的东西！！

1. 项目中的登陆是怎么实现的（token具体是怎么转换数据的）
参考1
首先需要连接数据库，然后创建用户，设置表单的请求地址请求方式，点击登录，客户端判断是否输入，有输入则将输入通过请求体传到服务器端，服务器端将判断输入的数据是否复合规则，复合规则就通过邮箱地址查询用户信息，存在进行密码比对，不存在则为客户端做出响应。
登录拦截是通过判断session.username是否存在

2. 说说浏览器是怎么缓存的
浏览器每发送一次请求都会在浏览器中查找该请求结果和缓存标识，每次拿到返回结果都会将结果和缓存标识存入浏览器；浏览器缓存分为强缓存和协商缓存，强缓存主要依靠expirse Cache-Control里面的max-age；协商缓存依靠Last-Modified, If-Modified-Since,
ETag和If-None-Match;
参考答案1

3. 浏览器本地缓存有哪些，区别是什么
localStorage和sessionStorage,localStorage是永久存储，关闭页面第二次打开还有，可以在同一浏览器不同页面共享；sessionStorage关闭页面就没了，而且只能在这个页面访问这个数据；cookie;

说说输出顺序

作者：小松在努力！
链接：https://www.nowcoder.com/discuss/598631?type=2&order=3&pos=13&page=1&channel=-1&source_id=discuss_tag_nctrack
来源：牛客网

async function async1() {
console. log( "async1 start");
await async2();
console. log( "async1 end");
}

async function async2() {
console. log( "async2");
}

console. log( "script start");

setTimeout( function() {
console. log( "setTimeout");
}, 0);

async1();

new Promise( function( resolve) {
console. log( "promise1");
resolve();
}). then( function() {
console. log( "promise2");
});

console. log( "script end");

5 . 讲讲宏任务和微任务
宏任务的话是浏览器 nodejs发起的，微任务是javascritp自身发起的，微任务比宏任务要先执行，Promise就属于javascript发起的，定时器是浏览器发起的所以后面执行，new Promise立即执行；
参考1
参考2

~~6. vue如何实现数据绑定、数据劫持，进一步问了getter在哪些场景会触发~~
6. 进程与线程的关系与区别
可以说线程是进程的子集，一个进程中可以并发多个线程，每条线程执行不同的任务；
参考1
参考2

7. 节流和防抖
参考1
参考2
参考3
参考4

节流和防抖都是因为有些事情在短时间内频繁触发，所以需要我们控制；节流就是一定时间内只对事件进行一次处理；
防抖就是一个连续触发只操作一次；防抖用到clearTimeout(timer);节流用的flag标志；
https://blog.youkuaiyun.com/TaTaPark/article/details/105390480

手写instanceof，用了var，又讲了一下var、let区别
判断数据类型参考1

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
 var O = R.prototype;
 L = L.__proto__;
 while (true) { 
   if (L === null) 
     return false; 
   if (O === L)  // 这里重点：当 O 严格等于 L 时，返回 true 
     return true; 
   L = L.__proto__; 
 } 
}

11. 将一个字符串数组排序

11. http与https区别，https通信过程，安全如何实现的，加密密文怎么做的
参考1
参考2
参考3
参考3

区别：端口，传输协议，安全，证书；
http通信过程：客户端发起，DNS将域名解析为IP地址，建立TCP连接，进行TCP三次握手，浏览器发送请求，服务器响应，向浏览器发送数据，TCP关闭；
https通信建立再ssl连接层上面的，首先是客户端和服务端TCP建立，发送https请求，服务器响应，将数组证书（公钥，域名）给客户端，客户端收到证书后验证数字证书合法性，用公钥对客户端钥匙进行非对称加密，客户端再次发送请求将加了密的钥匙给服务端，服务端用自己的私钥对客户端传过来的加密钥匙解密得到了客户端的钥匙，用客户端的钥匙对数据进行对称加密响应给客户端，客户端收到后用客户端钥匙进行解密获取数据。
数据摘要是https能确保数据完整性和防止篡改的根本原有；

13. 讲一下死锁，死锁为什么会出现
在这里插入图片描述
参考1

~~14. 讲一些浏览器自身的缓存机制，加载一次的网页为什么第二次加载更快~~
14. 缓存相关的HTTP请求头
参考1

一枚不规则概率的硬币，如何实现公平事件

16. 跨域（jsonP、cors）
非同源问题客户端A只能访问服务器A，不能访问服务器B，同理客户端B也不能访问服务器A，为了解决这个问题可以使用jsonP CORS 等方法，jsonp的话就是把请求地址放到script标签中，然后服务器响应的数据必须是一个函数的调用，这个函数是在客户端的全局作用域定义的；CORS是在服务器端通过设置响应头，允许哪些地址哪些方式访问的，并且允许跨域的客户端携带cookie信息完成请求。

18. TCP三次握手 TCP四次挥手
A告诉B我要给你发送数据了，B回馈给好的我知道了，A再告诉B，好的我知道你知道了我们开始传送数据把；
A 告诉B我数据传送完了，B告诉A好的，我知道了，但是我还没有传送完等一下，过了一会B告诉A我也传完了，A告诉B好的我知道你知道了那结束传数据吧。
TCP三次握手漏洞

19. get、post请求属于TCP还是UDP get post的区别
get和post都是属于TCP

get请求会被浏览器自动缓存，post不会只有手动保存；
get请求参数只有url格式，post可以有多种，如 formdata对象等；
get请求将参数放到地址栏，post将请求参数放到请求体，所以get相对不安全；
get的参数长度和类型都有限制，post没有；
~~- get发送一个TCP数据包，post发送两个TCP数据包。~~
UDP 相关

20. 懒加载是怎么完成的（图片and组件）
懒加载就是鼠标到了才加载显示图片，使用bootstrap的组件实现懒加载，懒加载原理就是再图片没有进入可视区的时候不给<img>src赋值，等到图片进入可视区再给src赋值。
参考1

20. let var const区别
const参考1
let具有块级作用域，没有变量提升，所以使用let声明的变量具有暂时性死区；var没有块级作用域，有变量提升；
const就是常量，具有块级作用域，声明的时候必须赋值；const定义的基本数据类型不能改但是定义的对象之类的可以通过改变它的属性和方法来改动；
21. this指向问题
在这里插入图片描述
箭头函数指向函数定义的地方；

22. 浅拷贝深拷贝
B浅拷贝A，浅拷贝实际上只把复杂类型数据A的地址拷贝给了B，所以当改变B的时候A也会改变，；深拷贝是B将A的值拷贝了并且自己有一块内存。

23. cookie session
cookie实际是浏览器再计算机硬件中开辟的一块内存空间，使用cookie是有时间限制的，cookie使用域名的方式存储数据，每次发送请求的时候都会自动发送cookie。
session 是服务端的一个对象，sessionID存放再会话cookie中的。.
参考1

24. TCP和UDP的区别
参考1
UDP无连接，知道对端IP和端口号就直接进行传输，不需要建立连接。没有三次握手四次挥手，不可靠，没有确认机制。
TCP需要先建立连接，三次握手，四次挥手，可靠，http https协议。

25. 如何区分引用类型
instanceof底层原理
 参考2
在这里插入图片描述

引用类型可以理解为复杂类型，引用类型有属性，方法等，可以实现继承，基础类型不可以。简单数据类型存放在栈中，应用类型放在堆中，地址存储在栈中。
栈和堆
堆分配的内存大小不一，不会自动释放但是可以手动释放，栈式系统自动的分配相对固定大小的内存，会自动释放；这样的话栈比堆更容易管理内存；

在这里插入图片描述

26. 手写promise.all
参考1

27. 有200个异步请求，最多同时只能由5个请求发出，怎样才能最快的获取所有数据

让位？空出来就加入一个吗？

28. js的垃圾回收
为什么要进行垃圾回收以及垃圾回事方式参考1

29.模块化，CommonJS和ESModule的区别
CommonJS只在node坏境支持，一个js文件就是一个模块，其实博客项目就使用的模块化路由应该有感觉吧，参考1
ES6模块之中，顶层的this指向的是undefined，CommonJS模块的顶层this指向当前模块，这是两者的一个重大差异,第二个差异是因为CommonJS加载的是一个对象（即module.export属性），该对象只有在脚本运行结束时才会生成。而ES6模块不是对象，它的对外接口是一种静态定义，在代码静态解析阶段就会生成。参考2

30. 应用层有哪些协议
参考1
在这里插入图片描述

31. 从输入URL到渲染页面发生了什么？
从输入URL到渲染页面加载
 渲染页面
在这里插入图片描述
32.Gulp构建工具
Gulp可以实现HTML、CSS、JS文件压缩合并；语法转换es6 less;公共文件抽离；修改文件浏览器自动刷新；
32. 什么是中间件

使用Express创建路由代码简单，模块化的路由管理，获取请求参数代码简单，对模板引擎支持度高，中间件其实就是一堆方法，可以接收客户端发来的请求可以对请求做出响应也可以将请求交给下一个中间件处理；中间件可以用来路由保护，客户端需要访问页面是先判断用户登录状态即登录拦截，网站维护公共，在所有路由上面定义接收所有请求的中间件，直接做出响应网站正在维护。
33. ES6学习网站