2021年最新前端面试题（js,vue,webpack,css,react）总结_编译模板时出错: v-bind表达式的值不能为空。在“v-bind:visi”中找到

欢迎大家留言补充面试题，或更改我的题目错误，我会根据大家意见给补充上，谢谢！

这边文章主要是最近面试加上同事的面试总结出来的，包含了大多数公司的面试题目，有些答案有出入，请多多包涵，欢迎留言一起探讨。该文章持续更新中

（某公司面试题概括：css 新增的那些特性 介绍一下，写动画 怎么写，响应式设计怎么做的 自适应，flex布局简单介绍一下，es6 set
map 简单介绍一下，map 和对象有什么区别，promise 简单介绍一下，promise有哪些方法可以调用 ，传3个异步请求
怎么判断，改变this指向的方法，dom的常见操作，防抖函数，浏览器的缓存有哪些，v-if
v-show的区别，简单说一下双向绑定的理解，nextick的用法和怎么实现，mixin，在mounted处理响应式数据
，跨域问题解决，vue3 了解过吗，介绍自己的项目 ）

一.javascript

1.javascript 有哪几种数据类型

undefined，null，string，boolean，number，symbol(ES6)，BigInt。。。object里面包含的
function、Array、Date

2.target和currentTarget区别

event.target 返回触发事件的元素 event.currentTarget 返回绑定事件的元素

3. $(document).ready()方法和window.onload有什么区别

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数

4.jquery里面的dom是通过js添加的，怎么绑定事件

bind 、live、delegate、on   $("#info_table").delegate("td","click",function(){/*显示更多信息*/});
1

5.常见的HTTP状态码

2开头 （请求成功）表示成功处理了请求的状态代码。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
    400 服务器不理解请求的语法。 
    401 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 
    403 服务器拒绝请求。
    404 服务器找不到请求的网页。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误
    500 （服务器内部错误）  服务器遇到错误，无法完成请求。 
    501 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。 
    502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。 
    503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。 
    504 （网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求。 
    505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14

6.闭包

优点： 避免全局变量的污染，同时，局部变量没有被销毁，驻留在内存中，还可以被访问 缺点： 使用不当，会造成内存泄露

7.get、post请求区别

1、请求方式不同：$.get()方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多 服务器和浏览器控制大小
4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

8.对象的健值对，

object.kes,value

9.dom隐藏方法，visilibity的占位点击有效果吗

display 设为 none，不占位置，但是dom存在，点击无效
visibility，hidden，占位置，dom存在，点击无效
opacity：0，占位，dom存在，点击有效

10.h5、css3新增了哪些内容？分别的作用是是什么？

新的语义标签,本地存储,离线存储,Websocket,2d，3d变换,Transition,animation,媒体查询
新的单位（rem,vw，vh等
css3 box-sizing(内减);background-size;background-origin(背景定位);E:nth-child(n)(结构伪类选择器);border-color;border-radius;linear-gradient(线性渐变);radial-gradiaent(径向渐变)

11.bind、call、apply的区别

call和apply其实是一样的，区别就在于传参时参数是一个一个传或者是以一个数组的方式来传。
call和apply都是在调用时生效，改变调用者的this指向。
bind也是改变this指向，不过不是立即执行，而是调用的时候执行。
bind()方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数,它的参数是bind()的其它参数和其原本的参数 export default class App extends Component { constructor() { super(props) this.state = { times: 0 } this.timePlus = this.timePlus.bind(this) } timePlus() { let time = this.state.times time++ this.setState({ time: time }) } render() { // 重点： this.timePlus是方法调用，调用上面timePlus方法时候，它里面的this就改变了，所以一开始就用this.timePlus=this.timePlus.bind(this)这样既能返回一个新函数，也不改变this指向 return (

) } }

12.javascript 有哪几种方法定义函数

函数声明表达式
function 操作符
Function 构造函数
ES6:arrow function

13.es6方法

let，const,箭头函数，解构赋值，复制数组arr2=Array.from(arr1)，字符串模板 ``，
数组方法，数组合并concat，async,await,import export,promise

14.排序方法

冒泡排序，选择排序，插入排序，快速排序，二分查找，希尔排序

15.数组的方法，数组合并，多位数组合并一位数组

数组多维变成一维数组：
1.arr.flat();
2.arr.join(",").split(","),3.toString()
数组合并：
1.arr1.concat(arry2);
2.Array.prototype.push.apply(arr1, arr2);
3.[…arr1,…arr2]
数组去重：
1.Array.from(new Set(arr))
2.[…new Set(arr)]
3.indexOf去重
4.includes去重
5.sort()然后循环比较相邻两个元素，arr[i]!=arr[i-1]
6.递归

16.promise用法，多个请求，单个请求，怎么实现promise.all()、promise.race()
17.async和await的用法

async返回的值都是promise，await后面的函数会先执行一遍再跳出整个async函数来执行后面的js

18.跨域问题同源策略

jsonp ，允许 script 加载第三方资源
反向代理（nginx 服务内部配置 Access-Control-Allow-Origin *）
cors 前后端协作设置请求头部，Access-Control-Allow-Origin 等头部信息
iframe 嵌套通讯，postmessage

19.事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存

20.原型继承

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，
则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，
如果还没有找到就会再在构造函数的prototype的__proto__中查找，
这样一层一层向上查找就会形成一个链式结构，我们称为原型链

21.prototype和__proto__的关系是什么

函数的 proto 指向自己的函数实现，而 protytpe 是一个对象，
所以函数的 prototype 也有 proto 属性，指向 Object.prototype

22.this的指向问题，如果改变this的指向

普通函数调用和定时器，此时 this 指向 window
构造函数调用， 此时 this 指向 实例对象
对象方法调用， 此时 this 指向 该方法所属的对象
通过事件绑定的方法， 此时 this 指向 绑定事件的对象
箭头函数指向定义时候的上下文
更新this的方法：
call() 方法，apply() 方法，bind()方法

23.变量提升

使用var关键字声明或初始化的变量，会将声明语句“提升”到当前作用域的顶部。
但是，只有声明才会触发提升，赋值语句（如果有的话）将保持原样。

24.new一个对象经历了什么

创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创建的对象由 this 所引用,并且最后隐式的返回 this

25.防抖与节流

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。操作多次只执行一次。
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。操作多次，可能执行不止一次

26.JS哪些操作会造成内存泄露

1）意外的全局变量引起的内存泄露
function leak(){
leak=“xxx”;//leak成为一个全局变量，不会被回收
}
2）闭包引起的内存泄露
3）没有清理的DOM元素引用
4）被遗忘的定时器或者回调
5）子元素存在引起的内存泄露

27.IE6 浏览器

“IE6 不支持 min-height=== min-height: 100px;
height: auto !important;
height: 100px;
2.ol内li的序号全为 1，不递增。解决方法：为 li 设置样式display: list-item;”
3.IE6 只支持a标签的:hover伪类，解决方法：使用 js 为元素监听 mouseenter，mouseleave 事件，添加类实现效果：
4.IE5-8 不支持opacity，解决办法：opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/
5.IE6 在设置height小于font-size时高度值为font-size，解决办法：font-size: 0;
6.IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片

28.css sprite 是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式

29.如何进行网站性能优化

减少 HTTP 请求：合并文件、CSS 精灵、inline Image
避免重定向：多余的中间访问
使 Ajax 可缓存
非必须组件延迟加载
未来所需组件预加载
减少 iframe 数量
将样式表放到页面顶部
不使用 CSS 表达式
使用不使用@import
不使用 IE 的 Filter
将脚本放到页面底部
将 javascript 和 css 从外部引入
压缩 javascript 和 css
删除不需要的脚本
减少 DOM 访问

30.前端需要注意哪些 SEO

合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

31.如何判断一个对象是否为数组

function isArray(arg) {
if (typeof arg === ‘object’) {
return Object.prototype.toString.call(arg) === ‘[object Array]’;
}
return false;
}

32.如何判断一个对象是否为函数

function isFunction(arg) {
if (arg) {
if (typeof (/./) !== ‘function’) {
return typeof arg === ‘function’;
} else {
return Object.prototype.toString.call(arg) === ‘[object Function]’;
}
} // end if
return false;
}

33.判断类型

1.typeof
2.instanceof
{} instanceof Object; //true
[] instanceof Array; //true
[] instanceof Object; //true
“123” instanceof String; //false
new String(123) instanceof String; //true
3.constructor
‘’.constructor == String
new Function().constructor ==Function
[].constructor == Array
window.constructor == window
4.Object.prototype.toString() . toString()是Object的原型方法…对于Object对象，直接调用toString()就能返回[object Object],而对于其他对象，则需要通过call、apply来调用才能返回正确的类型信息

33.2 instanceof

在 JavaScript 中，通常用 typeof 判断类型，但是在判断引用类型的值时，无论引用的是什么类型的对象，都会返回 "object"或者 “function”
1.instanceof 运算符用于测试构造函数的 prototype 属性是否出现在对象原型链中的任何位置
2.比如说：A instanceof B，那么 A 必须是一个对象，而 B 必须是一个合法的 JavaScript 函数
3.每一个构造函数都有一个 prototype 属性
这个 prototype 属性指向这个构造函数的原型对象
通过 new 关键字，可以创建一个构造函数的实例，而实例上都有一个 proto 属性
实例上的 proto 属性也指向构造函数的原型对象

34.浏览器输入地址经历哪几个步骤

域名DNS解析
为了将消息从你的PC上传到服务器
发起TCP的3次握手
建立TCP连接后发起http请求
服务器响应htp请求
浏览器解析htm代码,并请求html代码中的资源(如js、css、图片等）
断开TCP连接
浏览器对页面进行渲染呈现给用户

35.实现add函数,让add(a)(b)和add(a,b)两种调用结果相同

function add(a, b) {
if (b === undefined) {
return function(x) {
return a + x
}
}
return a + b
}

36.git常用命令

git branch 查看本地分支
git branch -a 查看所有的远程分支
git checkout -b develop origin/develop 切换分支
git log 查看提交记录 q 退出
git branch develop 新建分支并切换到该分支
git add .
git commit -m “注释”
git push origin master
合并：
git checkout dev 切换分支
git merge dev1
//有问题的话 shift冒号 + q + enter
git status
//编辑冲突提交
git pull拉代码
git commit -am
//推送远程

37.深拷贝浅拷贝
深拷贝

function clone(obj){
    if(typeof(obj) != 'object') return obj;
    var r = Array.prototype.splice === obj.splice ? []:{};
    for(var i in obj){
        if(obj.hasOwnProperty(i)){
            r[i] = clone(obj[i]);
        }
    }
    return r;
}
1
2
3
4
5
6
7
8
9
10

浅拷贝

Object.assign()
1

38.ajax请求步骤

第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数

39.js循环机制loop

JS 调用栈
JS 调用栈是一种后进先出的数据结构。当函数被调用时，会被添加到栈中的顶部，执行完成之后就从栈顶部移出该函数，直到栈内被清空。
同步任务、异步任务
JavaScript 单线程中的任务分为同步任务和异步任务。同步任务会在调用栈中按照顺序排队等待主线程执行，异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候，也就是栈内被清空的时候，被读取到栈中等待主线程执行。任务队列是先进先出的数据结构。
Event Loop
调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环。

40.Javascript创建对象的几种方式

工厂模式
构造函数模式
原型模式
混合构造函数和原型模式
动态原型模式
寄生构造函数模式
稳妥构造函数模式

41.继承

1.原型链继承 Cat.prototype = new Animal();Cat.prototype.name = ‘cat’;
2.借用构造函数（经典继承） 定义一个函数用call()方法继承
3.组合继承
5.寄生式继承
6.寄生组合式继承

42.移动端300毫秒延迟

1.faskclick：在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。缺点: 脚本相对较大, 不建议使用
2. 禁用游览器缩放，HTML头部meta标签content=“user-scalable=no”

43.移动端1像素问题

1.transform: scale(0.5) 缩放
2.background-image 渐变实现
3.box-shadow 方案
4.border-image 方案

44.线程

1.GUI渲染线程
2.js引擎线程
3.事件触发线程
4.定时器触发线程
5.异步请求线程

45.并发的情况下，如何刷新token,说下思路

1.利用 Redis 缓存:后端在用户第一次登录时，需要将生成的 Token 数据,缓存一份到 Redis 中.当 Token 过期时，重新生成新的 Token 数据并更新 Redis 缓存，同时在 Redis 中设置一条 Token 过渡数据并设置一个很短的过期时间（比如 30s）。如果后面的请求发现 Token 已经被刷新了，就判断 Redis 中是否存在 Token 过渡数据，存在就放行，这样同一时间的请求都可以通过
2.前端：我们得借助 Promise。将请求存进队列中后，同时返回一个 Promise，让这个 Promise 一直处于 Pending 状态，此时这个请求就会一直等啊等，只要我们不执行 resolve，这个请求就会一直在等待。当刷新请求的接口返回来后，我们再调用 resolve，逐个重试

46.window.isNaN 和number.isNaN的区别

window.isNaN是一个放在 global（浏览器里是window）对象里的一个value，代表Not-A-Number的value.
所以NaN是一个 value, 这个 value 的 type 是 number
但是：不是 NaN 的 value 也被误判成 NaN 了
isNaN(“AB”); // true
isNaN(undefined); // true
isNaN({}); // true
所以： ES6 为了弥补这一BUG引入了 Number.isNaN()
Number.isNaN(NaN); // true
Number.isNaN(“AB”); // false
Number.isNaN(undefined); // false
Number.isNaN({}); // false

47.小程序钩子函数

onLaunch：小程序App启动时执行（全局只执行一次）
onLoad：第一次进入页面前会进入此函数，类似于vue中的created
onReady：类似于vue中的mounted，监听页面初次渲染完成
onShow：每次进入该页面都会触发
onHide：每次离开该页面会触发
onUnload：页面卸载，vue中的beforeDestroy
onError：小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onPageNotFound：页面不存在监听函数
onShareAppMessage：用户点击右上角分享会触发该函数

48.new一个对象的四个过程

1.创建一个空对象
2.让构造函数中的this指向新对象，并执行构造函数的函数体
3.设置新对象的proto属性指向构造函数的原型对象
4.判断构造函数的返回值类型，如果是值类型，则返回新对象。如果是引用类型，就返回这个引用类型的对象

49.为什么pop,push,能监听数组变化

50.手写promiss.all方法

Promise.all = function (promises) {
  return new Promise((resolve, reject) => {
    let count = 0 // 声明计数变量
    // const values = []; // 保存每个成功promise结果的数组
    const values = new Array(promises.length) // 指定数组长度
    for (let i = 0; i < promises.length; i++){
      // promises[i].then(value => {
      Promise.resolve(promises[i]).then(value => { // 防止数组中有不是promise的元素
        // 得知对象状态是成功
        count++
        // 将当前promise对象成功的结果存入到数组中
        values[i] = value
        if (count === promises.length) { //每个promise对象都成功
          resolve(values) // 修改函数状态
        }
      }, reason => {
          reject(reason)
        })
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

51.fetch,Ajax,axios区别

Ajax是什么：Ajax是（Asynchronous JavaScript and XML）的缩写。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。核心使用XMLHttpRequest对象。
axios是什么：axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
fetch是什么：Fetch被称为下一代Ajax技术,采用Promise方式来处理数据。是一种简洁明了的API，比XMLHttpRequest更加简单易用。
所以其主要区别是 axios、fetch请求后都支持Promise对象API，ajax只能用回调函数

52.TCP和UDP的区别

a. TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。
b. TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达; UDP 尽最大努力交付，即不保证可靠交付。并且因为 tcp 可靠， 面向连接，不会丢失数据因此适合大数据量的交换。
c. TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低（因 此会出现丢包，对实时的应用比如 IP 电话和视频会议等）。
d. TCP 只能是 1 对 1 的，而UDP 支持 1 对 1,1 对多。
e. TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。
f. TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。

53. js中的堆和栈,栈和队列有什么区别

堆(heap)和栈(stack)的区别:
堆：队列优先,先进先出；由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
栈：先进后出；动态分配的空间 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表。
栈和队列的区别：
a. 栈只允许在表尾一端进行插入和删除，队列只允许在表尾一端进行插入，在表头一端进行删除。
b. 栈是先进后出，队列是先进先出

54.箭头函数和普通函数的区别

a. 箭头函数和普通函数的样式不同，箭头函数语法更加简洁、清晰，箭头函数是=>定义函数,普通函数是function定义函数。
b. 箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，定义的时候就确定并固定了。
c. 箭头函数不能作为构造函数使用，也不能使用new关键字(因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会改变,作为构造函数其的this要是指向创建的新对象)。
d. 箭头函数没有自己的arguments。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。
e. call、apply、bind 并不会影响其 this 的指向。
f. 箭头函数没有原型prototype。
g. 箭头函数不能当作 Generator 函数，不能使用 yield 关键字

55.var，let和const之间的区别

变量提升方面：var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined。
let和const不存在变量提升问题，即它们所声明的变量一定要在声明后使用，否则报错。
块级作用域方面：var不存在块级作用域,let和const存在块级作用域
声明方面：var允许重复声明变量,let和const在同一作用域不允许重复声明变量。其中const声明一个只读的常量一旦声明，常量的值就不能改变。

56.http和https的区别
a. HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。
b. 使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。
c. HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。
d. http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
e. HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源

57.进程线程的区别

a. 根本区别：进程是操作系统资源分配的基本单位，而线程是处理器任务调度和执行的基本单位
b. 资源开销：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。
c. 包含关系：如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分，所以线程也被称为轻权进程或者轻量级进程。
d. 内存分配：同一进程的线程共享本进程的地址空间和资源，而进程之间的地址空间和资源是相互独立的
e. 影响关系：因为进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响，而线程之间没有单独的地址空间，一个线程死掉就等于整个进程死掉，所以多进程要比多线程健壮

58.localstorage、sessionstorage、cookie的区别

a. 相同点是都是保存在浏览器端、且同源的
b. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
c. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
d. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
e. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
f. webStorage(webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage)支持事件通知机制，可以将数据更新的通知发送给监听者
h. webStorage的api接口使用更方便

59.MongoDB和MySQL的区别

数据库 MongoDB MySQL
数据库模型 非关系型 关系型
存储方式 以类JSON的文档的格式存储 不同引擎有不同的存储方式
查询语句 MongoDB查询方式（类似JavaScript的函数） SQL语句
数据处理方式 基于内存，将热数据存放在物理内存中，从而达到高速读写 不同引擎有自己的特点
成熟度 新兴数据库，成熟度较低 成熟度高
广泛度 NoSQL数据库中，比较完善且开源，使用人数在不断增长 开源数据库，市场份额不断增长
事务性 仅支持单文档事务操作，弱一致性 支持事务操作
占用空间 占用空间大 占用空间小
join操作 MongoDB没有join MySQL支持join

二. css

1.清除浮动

1.父级设置高度，2.后加div，clear:both，3.父级div伪类:after和zoom 父级加overflow:hidden

2.单行省略多行省略

/*单行*/
.single{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;    
}
/*多行*/
.single{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
     flex-direction: column;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.flex布局

display: flex;
flex-direction
flex-wrap:
flex-flow
justify-content
align-items
align-content
1
2
3
4
5
6
7

4.上下左右居中

1.two{position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;width,height
2..two{position:absolute;margin:auto;left:0;right:0;top:0;bottom:0;width:height:  }
3..two{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
4.display: flex;/*设置外层盒子display为flex*/
    justify-content:center;/*设置内层盒子的水平居中*/
    align-items:center;/*设置内层盒子的垂直居中*/
1
2
3
4
5
6

5.三角形css

transparent

6.谷歌支持小于12px，

font-size:10px; -webkit-transform:scale(0.8)缩放比例

7.平行四边形

transform:skew(0，30deg)
1

8.左边定宽度，右边自适应

1.a.margin-left:100px;b.float:left;width:100px;
2.父级：display: flex;，左边：定宽，右边flex:1;
3.父级：display: table;table-layout: fixed; 子：display: table-cell;

9.上面定高，下面自适应

1.div1:定高，div2:display:table;height:100%;padding-top:100px;
2.父级display: flex;flex-direction: column; div1:定高，div2:flex:1

10.position

absolute :生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed :生成固定定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky 粘性定位，该定位基于用户滚动的位置。
inherit 规定应该从父元素继承 position 属性的值。
initial 设置该属性为默认值，详情查看 CSS initial 关键字。

三. vue

1.vue3.0新特性

1.性能
双向响应原理由Object.defineProperty改为基于ES6的Proxy，使其颗粒度更大，速度更快，且消除了之前存在的警告；
重写了 Vdom ，突破了 Vdom 的性能瓶颈
进行了模板编译的优化
进行了更加高效的组件初始化
2.Tree-Shaking 的支持
需要的模块才会打入到包里，优化后的 Vue3.0 的打包体积只有原来的一半（13kb)
像 keep-alive 、 transition 甚至 v-for 等功能都可以按需引入
3.Composition API
是一个 Vue3 中新增的功能,可以提高代码逻辑的可复用性,比 mixin 更强大的存在。
4.Fragments
不再限制 template 只有一个根节点。
render函数也可以返回数组了，有点像 React.Fragments
5.Better TypeScript Support
更好的类型推导，使得 Vue3 把 TypeScript 支持得非常好
6.Custom Renderer API
实现用DOM的方式进行 WebGL 编程
7.Setup函数
在Vue3中，定义methods、watch、computed、data数据都放在了setup()函数中
setup()函数会在created()生命周期之前执行
props是setup()函数的一个形参，组件接收的props数据可以在setup()函数内访问到
context 是 setup() 的第二个形参，它是一个上下文对象，可以通过 context 来访问Vue的实例 this
setup(props,context) {
console.log(this)
console.log(context)
}

2.v-model原理

v-model 本质上是语法糖，用 v-model 指令在表单上创建双向数据绑定。根据控件类型type自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
原理主要是：v-bind:绑定响应式数据
触发oninput 事件并传递数据

3.生命周期

生命周期 是否获取dom节点 是否可以获取data 是否获取methods
beforeCreate 否 否 否
created 否 是 是
beforeMount 否 是 是
mounted 是 是 是

4.双向绑定原理/vue3.0

vue2.0:对象放在vue的data里面，通过Object.defineProperty()来劫持各个属性的 setter、getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。vue3将使用 ES6的Proxy 作为其观察者机制,取代之前使用的Object.defineProperty。。。。vue3.0:采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调.比较：由Object.defineProperty更改为Proxy代理
2.0递归循环遍历去监听data内的数据，3。0是直接针对整个对象监听

5.router的钩子

boforeEach:to,from,next,afterEach

6.组件传值

props,emit(),$attr/$listeners,$parent/$children,provide/inject,$refs.bus

查看文档

7.路由传参，获取参数，路由跳转页面，刷新之后参数怎么不变

(1)通过在router.js文件中配置path的地方动态传递参数 eg: path: '/detail/:id' 然后在组件内通过this.$route.params.id即可获取
(2).隐式传参<router-link :to={params: {x: 1}} /> 也通过this.$route.params获取
router传参方式
this.$router.push({ name:"detail",params:{ code:11}})//params用name来传值，接收this.$route.params.code//不显示
this.$router.push({path:"/",query:{alert:"用户信息"}});// query用path来传值，接收this.$route.query.alert,显示浏览器上
1
2
3
4
5

8.keep-alive

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；
使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

9.你经常用到的webpack配置有哪些

设置入口：entry，
配置输出目录：output，
设置loader：module=》loaders=〉css/less/图片文字/jsx解析/
设置代理，配置环境，对某些文件忽略打包（trunk文件太大）

10.watch监听

“form.name”:{
    handler(news,olds){

    }
},
form:{
    handler(){

    },
    deep:true,
}
1
2
3
4
5
6
7
8
9
10
11

11.vue的nexttick原理

vue的响应式不是数据加载完成就能立即改变dom的变化，而是按照一定的策略更新的。nextTick会将外部传进的函数回调存在内部数组中，nextTick内部有一个用来遍历这个内部数组的函数nextTickHandler,而这个函数的执行是异步的，什么时候执行取决于这个函数是属于什么类型的异步任务：微任务or宏任务。

12.数组监听不到

那种方式该改变数组setter是监听不到的.这些方法在vue源码中都被重新改写，this.$set，push,pop,shift,unshift,sort,reverse,splice

13.has和history

hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面
history是html5新增的 pushState() 和 replaceState() 方法来修改历史状态

14.props/类似于父子组件传值

{
    //动态路由-props获取参数
    // props?: boolean | Object | Function,
    path: '/test/:id',
    name: 'Test',
    component: Test,
    props:true,
  },
组件中直接获取值：props:["id"]
1
2
3
4
5
6
7
8
9

15.组件传值:祖孙组件传值

provide,inject，bus,parent和children,props,$emit,vuex,$refs,.sync,

16.vue和react的区别

1、监听数据变化的实现原理不同
Vue通过 getter/setter以及一些函数的劫持
React默认是通过比较引用的方式（diff）进行的
2、数据流的不同
vue:props=>v-model,父子传递再传给dom
react:props=>state 父子传递再传给dom
3、HoC和mixins
4.React中也有对应的三种方式：父组件通过props可以向子组件传递数据或者回调；可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多
5、模板渲染方式的不同

react
1 函数式思想,jsx语法，js操控css
2 单项数据流
3 setState重新渲染
4 每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。
vue
1 响应式思想，把html、js、css、组合到一起
2 双向绑定，每一个属性都需要建立watch监听
3 Vue可以更快地计算出Virtual DOM的差异，它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树
性能
react ----大型项目
优化需要手动去做，状态可控
vue ------中小型项目
状态改变需要watch监听，数据量太大的话会卡顿
扩展性
react
1 类式写法api少，更容易结合ts
2 可以通过高阶组件来扩展
vue
1 声明式写法，结合ts比较复杂
2 需要通过mixin方式来扩展

四。webpack和服务

1.你经常用到的webpack配置有哪些

设置入口：entry，
配置输出目录：output，
设置loader：module=》loaders=〉css/less/图片文字/jsx解析/
设置代理，配置环境，对某些文件忽略打包（trunk文件太大）

2.webpack的核心概念

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output ：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

3.webpack如何配置单页面和多页面的应用程序？

//单个页面
module.exports = {
entry: ‘./path/to/my/entry/file.js’
}
//多页面应用程序
module.entrys = {
entry: {
pageOne: ‘./src/pageOne/index.js’,
pageTwo: ‘./src/pageTwo/index.js’
}
}

4.webpack与grunt、gulp的不同

grunt和gulp在早期比较流行
grunt和gulp是基于任务和流，类似jQuery
webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能
gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系 webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工

5.什么是entry,output

entry入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

6.node服务器中间层

Web领域分为客户端和服务端，也就是前端和后端,这里的后端就包含了网关，静态资源，接口，缓存，数据库等,而中间层呢，就是在后端这里再抽离一层出来，在业务上处理和客户端衔接更紧密的部分，比如页面渲染（SSR），数据聚合，接口转发等等。
代理：在开发环境下，我们可以利用代理来，解决最常见的跨域问题；在线上环境下，我们可以利用代理，转发请求到多个服务端。
缓存：缓存其实是更靠近前端的需求，用户的动作触发数据的更新，node中间层可以直接处理一部分缓存需求。
限流：node中间层，可以针对接口或者路由做响应的限流。
日志：相比其他服务端语言，node中间层的日志记录，能更方便快捷的定位问题（是在浏览器端还是服务端）。
监控：擅长高并发的请求处理，做监控也是合适的选项。
鉴权：有一个中间层去鉴权，也是一种单一职责的实现。
路由：前端更需要掌握页面路由的权限和逻辑。
服务端渲染：node中间层的解决方案更灵活，比如SSR、模板直出、利用一些JS库做预渲染等等。

7.服务端渲染

就是服务端将数据与模版转换成html，返回给浏览器直接渲染。jsp,php,nodejs,

8.中间件

介于操作系统和应用程序之间的产品，屏蔽了底层的通讯，交互，连接等复杂又通用化的功能。
系统在交互时，直接采用中间件进行连接和交互即可，避免了大量的代码开发和人工成本。
1、缩短应用的开发周期，本来由程序开发做的控制，通过中间件介入都给你做了。
2、降低开发的失败率，通过引入成熟的中间件，增加了软件应用开发的成功率。
3、提高应用的开发质量。
4、减少前期开发成本和维护费用

9.服务端缓存

1.数据库缓存，select搜索语句的结果被缓存。2.平台级缓存：一些框架/插件的缓存。3.应用级缓存：开发自己写的缓存

10.http/https区别

HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443
HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。（无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息）

11.浏览器缓存

强缓存:不会向服务器发送请求，直接从缓存中读取资源，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。
协商缓存:协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

12.网络协议

物理层、数据链路层、网络层（IP）、传输层（TCP/UDP）、应用层（HTTP、HTTPS）

五.react

1.react 中 setState ，是同步还是异步，哪些情况是同步，哪些情况是异步

在React内部机制能检测到的地方， setState就是异步的；
在React检测不到的地方，例如setInterval,setTimeout，addEventListener里，setState就是同步更新的。

2.react优化：

1.Code Splitting
shouldComponentUpdate避免重复渲染
使用不可突变数据结构
组件尽可能的进行拆分、解耦
列表类组件优化
bind函数优化
不要滥用props
ReactDOMServer进行服务端渲染组件

入口起点：使用 entry 配置手动地分离代码。
防止重复：使用 SplitChunks 去重和分离 chunk。
动态导入：通过模块的内联函数调用来分离代码
在此，主要了解一下第三种动态导入的方法。
1、例如可以把下面的import方式
import { add } from ‘./math’;
console.log(add(16, 26));
改写成动态 import 的形式，让首次加载时不去加载 math 模块，从而减少首次加载资源的体积。
import("./math").then(math => {
console.log(math.add(16, 26));
});

3.钩子函数

// 1.dom挂载的时候执行函数
//1).componentWillMount //组建将要挂载 可以调用api，但是不能dom操作
//2).componentDidMount //组建已经挂载 可以进行dom操作，对状态操作
// 2.下面是state/props发生变化的时候执行的生命周期函数
//1).shouldComponentUpdate //组建是否需要更新，返回布尔值
//2).componentWillUpdate //组建将要更新
//3).render
//4).componentDidUpdate //组建已经更新
// 3.子组建独有的周期函数，子组建的props变化才会执行
// 1).componentWillReceiveProps:用法：1.放在子组建中，2.组建第一次存在于dom中，函数是不会被执行的，3.已经存在于dom中，函数才会执行
//4.组建将要被删除之前执行
//1).componentWillUnmount //组建将要销毁

1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor()
2. getDerivedStateFromProps （若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps）
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate（在更新之前获取快照）
5. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

4.组件传值查看文档

2.pubsub-js订阅==》PubSub.publish(‘atguigu’,{isLoading:false})===PubSub.subscribe(‘atguigu’,(_,stateObj)=>{this.setState(stateObj)})
3.redux

5.路由传值

1.parames传参：<Link to={/home/message/detail/${msgObj.id}/${msgObj.title}}> ==== =this.props.match.params
2.search传参：<Link to={/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}}>this.props.location/qs.parse(search.slice(1))
3.state传值：<Link to={{pathname:’/home/message/detail’,state:{id:msgObj.id,title:msgObj.title}}}>正常无接受=this.props.location.state

6.路由跳转

this.props.history.push(’/home/message’) replace

7.BrowserRouter 改为 HashRouter

1.HashRouter：页面跳转原理是使用了location.hash、location.replace,并且路径中是包含/#
2.BrowerRouter：页面跳转原理是使用了pushState、replaceState,路径不包含#直接定位到/目录下
区别：
A.从页面的地址栏中可以看出HashRouter是包含#号的，而BrowerRouter是不包含#号的
B.BrowerRouter的开启需要后端配置的，类似于Vue中的history模式。HashRouter类型于Vue中的hash模式

六.原生小程序和uni-app
查看我的文档

欢迎大家留言补充面试题，或更改我的题目错误，我会根据大家意见给补充上，谢谢！