个人真实面试总结，前端面试题记录2021补充版

2021-3-24补充

1.BFC是什么？怎么解决BFC带来的问题

2.重绘和重排（回流）的理解

3.vue2.0和vue3.0的区别

4.性能优化

5.项目框架怎么搭建的

 

 

 

一、本地缓存

localStorage：

 这是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

sessionStorage：

和服务器端使用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。

cookie：

cookie大小被限制在4KB，用户每请求一次服务器数据，cookie则会随着这些请求发送到服务器。

默认情况下coolie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户退出浏览器后这些值也会丢失，如果想让cookie存在一段时间，就要性设置为未来的一个过期日期。

Cookie和Session 的区别：

• 1）cookie数据存放在客户的浏览器上，session数据放在服务器上。

• 2）cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。

• 3）session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。

• 4）单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

补充：当我提到会话的时候，面试官又问了，什么是会话？

            会话是指一个终端用户与交互系统进行通讯的过程，比如从输入账户密码进入操作系统到退出操作系统就是一个会话过程。会话较多用于网络上，TCP的三次握手就创建了一个会话，TCP关闭连接就是关闭会话。

 

二、（先记录下问题，答案之后再补充）

1.什么是离线缓存？

 

2.Promise的原理

     Promise 也还是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。

     Permise有三种状态： pendding, fulfilled, rejected

          (1) promise 对象初始化状态为 pending。　　　　
          (2) 当调用resolve(成功)，会由pending => fulfilled。　　　　
          (3) 当调用reject(失败)，会由pending => rejected。　　
          需要记住的是注意promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能再变。
 

     简单实现一个permise：

function Promise(executor){ //executor执行器
    let self = this;
    self.status = 'pending'; //等待态
    self.value  = undefined; // 表示当前成功的值
    self.reason = undefined; // 表示是失败的值
    function resolve(value){ // 成功的方法
        if(self.status === 'pending'){
            self.status = 'resolved';
            self.value = value;
        }
    }
    function reject(reason){ //失败的方法
        if(self.status === 'pending'){
            self.status = 'rejected';
            self.reason = reason;
        }
    }
    executor(resolve,reject);
}

Promise.prototype.then = function(onFufiled,onRejected){
    let self = this;
    if(self.status === 'resolved'){
        onFufiled(self.value);
    }
    if(self.status === 'rejected'){
        onRejected(self.reason);
    }
}
module.exports = Promise;

 

3.HTTP的原理

4.ajax的实现过程

什么是ajax？
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax的优点：
1.实现局部更新（无刷新状态下）
2.减轻了服务器端的压力
ajax的缺点：
1.破坏了浏览器前进和后退机制（因为ajax自动更新机制）
2.一个Ajax请求多了，也会出现页面加载慢的情况。
3.搜索引擎的支持程度比较低。
4.ajax的安全性问题不太好（可以用数据加密解决）。
注：如果要使用ajax必须要有后端环境的支持（服务器端）。
原生ajax请求的五个步骤：
1.实例化请求对象
2.建立服务器链接
3.监听服务器响应
4.发送请求
5.响应成功，传递参数

5.描述项目创建打包部署的过程

6.你觉得最有成就感的项目是哪一个，为什么？

7.你觉得你的优势是什么？

8.React的生命周期？用过哪些高阶组件？父子组件如何通信，父传子，子传父？

9.vue封装组件的过程？父子组件如何通信？

10.对类的理解

11.继承的方法有哪些？

12.export和export default的区别

13.node_modules里面的文件前缀 @ 或 ~ 指什么