2021前端常见的面试题总结

eval这个方法有什么用

eval可以直接把一段字符串转换为js代码

==和 ===区别？

==会在数据类型不同的时候，先进行类型转换在比较

===不会进行类型转换，直接进行比较

js中常见的数据类型

值类型和引用类型有什么区别？

浅拷贝和深拷贝

浅拷贝的方法:

1. …扩展运算符
2. Object.assign

深拷贝

1. JSON.parse(JSON.stringify(obj))

2. lodash中的方法
3. 自己写代码实现

事件传播流程

捕获阶段：是从html标签开始到当前触发事件的标签为止

事件源阶段：是在当前触发事件的标签之上传递

冒泡阶段：从触发事件的标签到html节点为止

事件的阻止

target和currentTarget的区别：target表示触发事件的标签，currentTarget表示绑定事件的标签

原型、原型链

闭包

在函数外不能访问函数内的变量，为了解决这个问题可以使用闭包实现。闭包可以在函数内形成一个局部的作用空间，闭包的滥用可能引起内存泄漏

js中的垃圾回收机制

标记清除法，js虚拟机可以自动的对比较为不在使用的内容进行自动回收

字符串和数组中的常见操作

数组去重

var arr = ['str', 1, 2, 1, 'str1', 'str', { id:1,name:'Tom' }, [1, 2,3], {id: 1, name:'Tom'}]

排序

sort

对象的操作

浏览器兼容性

• html标签部分

  尽量避免使用h5中新增的标签

  使用div等常见的html基础标签进行布局

• css部分

  为整个项目设置一下初始化css样式，让所有的标签在不同的浏览器显示相同的效果

  为css属性添加浏览器内核前缀

  尽量避免使用css3中的动画等内容

• js部分

  使用jQuery的低版本

移动端开发的时候遇到的兼容性问题

• ios中滚动条卡顿的问题
• 关于输入框中的placeholder不能居中显示的问题
• 移动端1px的问题
• 300ms延迟的问题，fastclick.js

viewport视口

<meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1,user-scalable=no"
    />

width	设置***layout viewport*** 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置***layout viewport*** 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

在写页面的时候如何实现响应式布局

使用媒体查询，在不同的屏幕尺寸中显示不同的样式

写页面的时候建议使用flex布局+媒体查询+百分比布局实现+rem

css中常见的定位方式

absolute,绝对定位，是根据离自己最近的一个非默认定位的父元素进行定位

fixed，固定定位，根据浏览器窗口进行定位

relative，相对于自身应该出现的位置进行定位

css中如何实现一个三角形？如何画一个左右颜色不同的圆形？

css中如何实现鼠标移动到元素之上后，元素进行放大

css中如何实现水平垂直居中

flex布局

css3中新增的内容

回流和重绘

回流是页面中的元素宽高尺寸发生改变，或者dom布局发生改变之后页面进行重新排版

重绘是元素尺寸大小等不发生改变，只是显示效果出现改变

回流必然引起重绘，但是重绘不一定引起回流

visibility不会引起回流，因为它所属元素的位置空间还在

display会引起回流，因为设置隐藏之后页面中的标签所占空间就没了

html5中新增的标签有哪些？什么是语义化标签？有什么优势？

https://zhuanlan.zhihu.com/p/137539250

如何获取对象的属性名

Object.keys,或者for in

ajax

前端框架部分面试内容

vue和react的区别？和jQuery呢？

1. vue使用的是数据双向绑定，react使用的是单向数据流
2. vue和react中都使用了虚拟dom来加速页面渲染
3. vue是一个完整的框架，有自己一整套的开发体系，学习成本低
4. react是面向视图层的一个库，它使用的是jsx语法。vue是使用的.vue单文件组件，把所有的html、js、css都放置在一个文件中
5. vue中内置了很多封装好的指令，可以直接进行使用
6. react中使用的更多的是js表达式内容，需要对原生js很熟悉，学习成本相对较高
7. react背景好

jQuery是一个操作dom元素的插件，vue和react是一个前端框架。他们的关注点不同，jQuery主要是做dom操作的。vue和react是通过以数据为核心进行处理

vuex和redux有什么区别？

vuex是vue的状态管理插件，只能在vue中使用。redux是一个面向前端的插件，不止能和react进行结合还能在angular或者vue中进行使用

什么是虚拟dom

是一个用js对象形式表达的一个dom树结构，在框架开发的时候所有的dom树都是有这个虚拟dom进行生成维护的。当虚拟dom中的节点改变之后，才会对真实的dom结构进行改变。尽量使用最小改变的形式，虚拟dom的diff算法，diff算法是通过逐层比较的形式进行dom节点的比对

虚拟dom的优势：

1. 改变的是js对象，操作速度快
2. 使用diff算法最优化，可以实现节点的最小变化
3. 可以根据不同的运行环境编译生成真的节点

为什么要在循环的是添加一个key？

key的作用优化节点比较的速度。key不建议使用index，是因为index是会变

vue中数据双向绑定的原理

使用Object.definePrototype方法通过数据劫持实现。使用观察者模式监听对象属性的改变实现

ref

$root 获取父组件的内容

$refs 获取当前组件中设置了ref属性的标签

$el 获取当前组件的dom元素

生命周期，组件传参

vuex

常见的指令

v-if v-show v-model v-for

v-if和v-show的区别？

计算属性和watch的区别？

计算属性: 多个影响一个的时候使用

watch：一个影响多个的时候使用

axios如何封装？

必问的内容！！！

react的生命周期？你在哪一个生命周期获取数据，为什么？

componentDidMount 获取数据

在更新阶段不能修改状态值，因为会引起死循环

class定义组件和function定义组件有什么区别？

class定义的组件有自己的局部状态和生命周期

function定义的组件没有局部状态和生命周期但是16.8之后的react中新增了hooks，可以模拟局部状态和生命周期

目前官网推荐使用function定义组件，因为它好用，还有就是没有this指向问题

react中的hooks有哪些？

useState 可以创建局部状态

useEffect 当数据改变之后产生对应的副作用，用来模拟生命周期

useRefs 获取设置了ref属性的标签

useReducer 可以生成一个reducers

useContext 上下文

等等

react组件传参

父传子使用props

子传父使用方法调用

非相关组件使用context上下文

高阶组件

react-redux中的connect

错误处理

错误边界，只能在class定义的组件中使用

redux

reducers 改变数据

action 组织数据

state 存储数据

以下为需要了解的内容

react-redux

redux-thunk

redux-sage

dva

js面试时候的一些其他内容问法

什么是面向对象？

三大基本特征：封装、继承、多态

// js多态的例子
function say(name, nickName, skills, v) {
    if (name) {
        return '我的名字是'
    }
    if (name && nickName) {
        return '我的名字是xx，我还有一个昵称'
    }
    if(name && nickName && skills) {
        return '....'
    }
}

mvc和mvvm

mvc分为model view controller

mvvm又叫数据双向绑定model view view-model

mvc关注的点在数据改变之后，重新渲染dom元素

mvvm关注的点只在数据，数据改变之后通过vm实现视图的自动渲染

单向数据流

数据是单向流动的，react是单向数据流的。view视图通过dispatch派发一个action改变state,state改变之后view视图重新渲染

常见的设计模式有哪些？

工厂模式、单例模式、观察者模式等

常见的排序算法

冒泡排序，选择排序，快速排序，二分法排序等。但是开发的时候用的最多的是直接使用sort进行排序

setTimeout和setInterval有什么区别？

js中的同步和异步

js中的异步回调机制

微任务和宏任务

setTimeout(function () {
    console.log("延时器执行了-2");
}, 2);
setTimeout(function () {
    console.log("延时器执行了");
});
for (var i = 0; i < 5; i++) {
    console.log(i);
}
var p = new Promise((reslove, reject) => {
    console.log("定义了一个promise");
    setTimeout(() => {
        reslove();
    }, 1000);
});
p.then((res) => {
    console.log("promise成功了");
});

动画帧requestAnimationFrame

一秒钟执行60次

网络请求中的七层协议

前端框架部分面试内容

vue和react的区别？和jQuery呢？

1. vue使用的是数据双向绑定，react使用的是单向数据流
2. vue和react中都使用了虚拟dom来加速页面渲染
3. vue是一个完整的框架，有自己一整套的开发体系，学习成本低
4. react是面向视图层的一个库，它使用的是jsx语法。vue是使用的.vue单文件组件，把所有的html、js、css都放置在一个文件中
5. vue中内置了很多封装好的指令，可以直接进行使用
6. react中使用的更多的是js表达式内容，需要对原生js很熟悉，学习成本相对较高
7. react背景好

jQuery是一个操作dom元素的插件，vue和react是一个前端框架。他们的关注点不同，jQuery主要是做dom操作的。vue和react是通过以数据为核心进行处理

vuex和redux有什么区别？

vuex是vue的状态管理插件，只能在vue中使用。redux是一个面向前端的插件，不止能和react进行结合还能在angular或者vue中进行使用

什么是虚拟dom

是一个用js对象形式表达的一个dom树结构，在框架开发的时候所有的dom树都是有这个虚拟dom进行生成维护的。当虚拟dom中的节点改变之后，才会对真实的dom结构进行改变。尽量使用最小改变的形式，虚拟dom的diff算法，diff算法是通过逐层比较的形式进行dom节点的比对

虚拟dom的优势：

1. 改变的是js对象，操作速度快
2. 使用diff算法最优化，可以实现节点的最小变化
3. 可以根据不同的运行环境编译生成真的节点

为什么要在循环的是添加一个key？

key的作用优化节点比较的速度。key不建议使用index，是因为index是会变

vue中数据双向绑定的原理

使用Object.definePrototype方法通过数据劫持实现。使用观察者模式监听对象属性的改变实现

ref

$root 获取父组件的内容

$refs 获取当前组件中设置了ref属性的标签

$el 获取当前组件的dom元素

生命周期，组件传参

vuex

常见的指令

v-if v-show v-model v-for

v-if和v-show的区别？

计算属性和watch的区别？

计算属性: 多个影响一个的时候使用

watch：一个影响多个的时候使用

axios如何封装？

必问的内容！！！

react的生命周期？你在哪一个生命周期获取数据，为什么？

componentDidMount 获取数据

在更新阶段不能修改状态值，因为会引起死循环

class定义组件和function定义组件有什么区别？

class定义的组件有自己的局部状态和生命周期

function定义的组件没有局部状态和生命周期但是16.8之后的react中新增了hooks，可以模拟局部状态和生命周期

目前官网推荐使用function定义组件，因为它好用，还有就是没有this指向问题

react中的hooks有哪些？

useState 可以创建局部状态

useEffect 当数据改变之后产生对应的副作用，用来模拟生命周期

useRefs 获取设置了ref属性的标签

useReducer 可以生成一个reducers

useContext 上下文

等等

react组件传参

父传子使用props

子传父使用方法调用

非相关组件使用context上下文

高阶组件

react-redux中的connect

错误处理

错误边界，只能在class定义的组件中使用

redux

reducers 改变数据

action 组织数据

state 存储数据

以下为需要了解的内容

react-redux

redux-thunk

redux-sage

dva

js面试时候的一些其他内容问法

什么是面向对象？

三大基本特征：封装、继承、多态

// js多态的例子
function say(name, nickName, skills, v) {
    if (name) {
        return '我的名字是'
    }
    if (name && nickName) {
        return '我的名字是xx，我还有一个昵称'
    }
    if(name && nickName && skills) {
        return '....'
    }
}

mvc和mvvm

mvc分为model view controller

mvvm又叫数据双向绑定model view view-model

mvc关注的点在数据改变之后，重新渲染dom元素

mvvm关注的点只在数据，数据改变之后通过vm实现视图的自动渲染

单向数据流

数据是单向流动的，react是单向数据流的。view视图通过dispatch派发一个action改变state,state改变之后view视图重新渲染

常见的设计模式有哪些？

工厂模式、单例模式、观察者模式等

常见的排序算法

冒泡排序，选择排序，快速排序，二分法排序等。但是开发的时候用的最多的是直接使用sort进行排序

setTimeout和setInterval有什么区别？

js中的同步和异步

js中的异步回调机制

微任务和宏任务

setTimeout(function () {
    console.log("延时器执行了-2");
}, 2);
setTimeout(function () {
    console.log("延时器执行了");
});
for (var i = 0; i < 5; i++) {
    console.log(i);
}
var p = new Promise((reslove, reject) => {
    console.log("定义了一个promise");
    setTimeout(() => {
        reslove();
    }, 1000);
});
p.then((res) => {
    console.log("promise成功了");
});

动画帧requestAnimationFrame

一秒钟执行60次

网络请求中的七层协议

关于项目介绍

• 项目是做什么的？项目包含什么功能
• 项目使用的技术点
• 你在这个项目中负责什么？

你们项目上线的时候如何做性能优化

• web服务器性能优化

  开启web服务器的gzip压缩(在web服务器中添加一行配置就行)

  优化服务器的性能

  优化接口代码，提高接口的相应速度

• 前端部分优化

  加载第三方资源文件的时候，使用cdn网络资源

  删除代码中无用的标签

  代码压缩合并

  优化打包之后代码的体积大小

  图片懒加载和数据缓存

  精灵图片

网络请求

客户端和服务器端交互常用的方法

form表单提交

ajax，异步的javascript和xml

websocket

get和post区别

1. get传递参数的时候在url中，post传递的数据在请求体中
2. post相对于get更安全一些
3. post传递的数据比get多
4. get请求可以加入收藏夹
5. get常用来获取数据，post用来新增数据
6. get请求是幂等的
7. 因为浏览器对url有长度限制，所以get请求传递的数据要比post少
8. post请求传递的数据不是无穷大，post请求传递的数据大小由服务器端决定

请求报文

请求头中的content-type

url编码，jQuery的ajax请求默认是这种编码，form表单提交默认也是这种编码

form-data，常常用来上传文件

json，axios发起请求的时候传递的数据是json格式的

原生api中的fetch方法

请求行

请求头

请求体

cookie是不能跨域传递的，如何解决这个问题?

在发送请求的时候设置withCredentials可以实现ajax请求的跨域传递问题.此方法还需要在服务器端的请求头中做配置

什么是跨域？

域名、协议、端口号有一个不一样就是跨域

前端如何解决跨域？解决不了！！！如果要做，也是借助了服务器端技术：比如代理服务器，web服务器配置代理

jsonp！两端代码都要改，牵涉内容太多，不划算！

cookie和session有什么区别？

cookie是客户端存储的，是存在客户电脑的文件中的，每一个网站都有自己单独的文件夹存cookie

session是服务器端存储的,session存储大小有限制，存储太多了会浪费服务器资源。使用redis替代session存储一些临时的数据

浏览器本地存储技术

cookie,本地存储，大小在4k以内，可以设置过期时间

localStorage，本地存储，大小在5m以内，只有不手动删除，一直在

sessionStorage，本地存储，大小在5m以内，只在当前会话状态有效。sessionStorage和localStorage用法一模一样

你们开发的时候spa单页面应用程序，如何保证数据的安全性？

我们使用https协议

http和https是的区别

https是一个加密传输的网络协议，需要使用ssl证书进行数据的加密，传输中间的数据无法进行拦截

他们的端口号不一样

常见的网络请求状态码有哪些

200多 表示成功

300多 表示重定向

400多 表示客户端错误了

500多 表示服务器端错误

seo优化

seo叫搜索引擎优化

1. 设置网站的关键词和描述信息
2. 设置网页的title
3. 不要出现空链接
4. 设置网络中图片的alt属性
5. 在页面中多使用hx标签
6. 优化网页相应速度
7. 定期更新文章内容
8. 购买外链
9. 花钱买关键字（额外投入）

spa单页面应用程序如何做seo优化？

1. 尽量的设置网页的title和描述信息
2. 花钱买关键词
3. 技术层面的:可以创建一个静态网站，专门用来做seo优化用。当判断当前是搜索引擎的蜘蛛对网站访问时，跳转到静态网页进行访问，当正常用户访问的时候就走正常的系统。是目前主流的一种解决方案

你们公司的技术团队组成是什么样子的？

ui

后端

前端

原生开发

服务器端用什么开发的：php或者java

你们项目上线之前如何做联调？

你们公司有没有做过code review?

code review大家坐一起开找茬

你有没有对项目做过重构？

有？重构就是不影响功能的基础之上，对代码做优化，让代码可读性更好，更加健壮。

你的职业规划是什么？