2020前端面试

2020-09-24  本文已影响0人  Poppy11

https://github.com/haizlin/fe-interview

2、http缓存

localStorage
在前端设置,可以减少数据请求，长期存储。
sessionStorage
在前端设置，只存在当前会话中即重新打开浏览器则数据消失
cookie
在后端设置,保存在客户端本地文件,通过set-cookie设置且Cookie的内容自动在请求的时候被传递到服务器

3、nginx负载均衡

使用upstream设置不同的服务器，以便每次访问的时候，都会访问到不同的服务器


image.png

5、key使用index会有什么问题

key是这条数据唯一的标识，用来追踪列表中哪条元素进行变动了。如果数组某项数据删除，以前的数据和重新渲染后的数据随着 key 值的变化从而没法建立关联关系. 这就失去了 key 值存在的意义，可能就会导致数据错乱。一般都会使用每条数据的id，因为id是唯一的

6、css优先级

内联样式>ID选择器>类选择器（Class）

8、绝对定位和相对定位的区别

绝对定位:是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于body
相对定位:相对于元素在文档中的初始位置

9、let、const、var的区别

const一般用于声明常量，var和let一般用于声明变量
const和let不能重复定义属性名，而var可以，并且var存在变量提升的现象
var可以跨快访问

10、get和post的区别

get返回时，不会重新请求，而post返回时，会重新提交表单
get没有post安全，因为get请求参数直接暴露在url上
get参数通过url传递，post放在body中
get请求参数长度有限制，post没有
get请求参数会被保存在浏览器历史中，而post不会

11、常用状态码

200 - 成功
301 - 重定向
304 - 一般用于协商缓存，向后台发请求读取资源，如果本地有缓存，则返回304读取本地缓存
400 - 前台数据格式有错误
401 - 权限不足
403 - 服务器拒绝请求
500 - 服务器内部错误
503 - 服务器维护

12、react调用setState后发生了什么

react会触发调和过程，react会以相对高效的方式根据新的状态构建react元素树并且重新渲染界面，react会自动计算新数树与旧树的差异，然后根据差异来渲染。

14、react为什么虚拟 dom 会提高性能?

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。传统diff算法复杂度达到 O(n^3) ，n是树的节点数，而虚拟dom中的Diff算法复杂度只需要O(n)复杂度

15、了解redux吗？

redux是公共管理状态的，主要有三个核心方法，action,reducer,store，工作流程就是view调用dispatch触发action，action可以写异步操作，然后分发dispatch，reducer会根据action分发的dispatch中的type和state来更新状态。当我们在组件中使用则需要使用connect将组件与store连接起来。

16、JS事件循环

首先JS是单线程的，一般的代码都会按顺序执行，如果遇到异步代码，会将异步代码放到另一个线程，这个线程我们叫工作线程，主线程继续执行剩余的代码，当工作线程异步代码执行完成过后，比如setTimeout时间到了或者axios得到了数据，该线程就会将回调函数放到消息队列里面去，当主线程代码执行完过后，会检查任务队列是否有任务要执行，如果有，则会执行，如果没有，则会一直循环等待任务到来。

17、什么是闭包和内存泄漏

闭包通俗来讲，就是a函数里面还有b函数，而b函数可以访问a函数里面的变量。
因为闭包会携带它的函数的作用域，这样会导致多余的内存被占用，这就是内存泄漏
在推出函数之前，将变量赋值为null，就可解决内存泄漏

18、async和await的原理和使用

在异步代码的函数上加上async，在异步代码前加上await，这样使用的话，我们即使调用的异步代码，也会变成类似于同步，只有让这个异步代码执行完过后，才会执行下面的代码，好处就是promise一般会通过then方法来获取异步数据，如果过多的话，就会造成回调地狱，代码可读性差，使用async/await可以使代码很简洁。

19、MVVM是什么？

MVVM即Model-View-ViewModel的简写。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。例如react的state和vue的data里面，然后页面数据是从这个state或data里面取到的

20、css和less区别

less是css预处理语言，扩展了css。

21、form表单提交和ajax提交表单区别

22、Promise是什么？

promise是一个对象，内部有三个状态，resolved,rejected,pending。当我们new一个promise对象的时候，会传入一个回调函数，这回调函数有resolve和reject两个方法。想改变状态只能调用resolve()或者reject()这两个方法，并且resolve可以将异步数据存储在内部data里面，然后他们通过.then方法来获取数据，then方法可以接受两个参数，一个成功的回调，一个失败的回调。但是我们获取数据一般是通过async/await来获取数据。这样可以避免回调地狱。

23、高阶函数是什么？

高阶函数就是指函数作为可以作为另外一个函数的参数

24、组件化开发有什么好处？

25、什么是跨域？

当一个url的协议、域名、端口三者之间任意一个与当前url不同即为跨域，跨域则是因为受到浏览器同源策略的限制，同源就是指两个页面具有相同的协议、域名、端口号。

26、怎么解决跨域？

27、react框架的优点

1、react速度快，因为含有虚拟dom
2、组件化，便于维护
3、单向数据流，便于阅读代码
4、纯粹的javaScript语法，没有任何专有的react语法

28、vue框架和react框架的区别

29、什么是回调函数？

回调函数则是函数作为参数传入另外一个函数，这个作为参数的函数会在某个时机被调用，这就是回调函数

30、xss跨站脚本如何进行？防御手段？

如何进行：xss是指恶意攻击者利用网站没有对用户提交的数据进行过滤处理，进而添加一些恶意代码，嵌入到Web页面，从而利用用户的身份进行某种动作
防御手段：不信任客户端提交的任何数据，只要是客户端提交的就应该先进行对应的过滤处理。

31、CSRF跨站请求伪造如何进行？防御手段？

如何进行：当用户在某网页登录后，在没有关闭网页的情况下，收到恶意链接，点击链接，则会利用浏览器的cookie把密码改掉。
防御手段：后端使用jwt技术验证token，使用axios请求

32、web上传漏洞如何进行？防御手段？

如何进行：用户上传了一个可执行的脚本文件，并通过脚本文件获得了执行服务器端命令的能力
防御手段：1、前后端都对文件后缀名进行限制
2、吧文件上传目录的权限设置为只读

33、什么是盒子模型？

盒子模型从外到内由margin、border、padding、content组成

34、简要说一下css的元素分类

块级元素：div,p,h1,form,ul,li;
行内元素 : span,a,label,input,img,strong,em;

35、axios有什么好处？

36、冒泡排序

比较相邻的元素，如果前者比后者大，则交换，大的在右边，双重循环，最外层循环arr.length - 1，内层循环比较相邻两个数的大小，直到吧最大的数放在最右边，外层循环arr.length-1次，然后数组就会从小到大排列。

37、快排排序

一个数组里面寻找中间的值作为基准，然后创建两个空数组，循环原数组，将数组的每个值跟基准比较，比基准小的存在一个数组，比基准大的存在一个数组，然后递归执行以上操作，最后将两个数组合并。

38、为什么要清楚浮动，如何清除？

当给元素设置了浮动float过后，就会产生高度塌陷的情况，就是如果子元素高度大于父元素时，父元素就包含不住子元素了。

.clear-float:after{
   display:block;
   content : "";
   clear:both;
   height:0
}

39、实现数组去重

 let res = []
    for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {
            res.push(arr[i])
        }
    }

const arr = [1,2,2,3,4,5,3]
console.log(new Set(arr))

40、谈一谈箭头函数

41、谈一谈ES6中的模块化

ES6的模块化分为导出（export）与导入（import）两个模块。如果希望外部能读取模块当中的内容，就必须使用export暴露出去，然后在另外一个文件中用Import引入该模块，一个模块如果只有一个默认导出的话，就使用export default，引入的时候也可使用as进行重命名。

42、JS原型链和原型

43、使用原型链实现js继承

 //父方法
  function SupperFunction(flag1){
    this.flag1 = flag1;
  }

  //子方法
  function SubFunction(flag2){
    this.flag2 = flag2;
  }

  //父实例
  var superInstance = new SupperFunction(true);

  //子继承父
  SubFunction.prototype = superInstance;

  //子实例
  var subInstance = new SubFunction(false);

  //子调用自己和父的属性
  console.log(subInstance.flag1);
  console.log(subInstance.flag2);

44、Vue组件间的通信

45、介绍Vuex

vuex能对vue项目进行状态管理，主要一般通过state，mutations，action这三个模块构造，state是保存所有数据，mutations用来保存所有方法，用来改变state的数据，action一般暴露给用户使用，可执行异步操作，用来触发mutatios的方法，用来改变数据。一般在页面中通过mapState来读取数据，通过mapActions来操作action。面对复杂的应用我们还需要创建modules，将vuex的store对象拆分成模块来写。

46、vuex的优缺点

优点首先是

47、vue双向数据绑定原理

实现双向数据绑定主要是结合发布者-订阅者的模式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发给订阅者，触发相应的监听回调，当把一个普通的对象作为data选项时，vue将遍历它的属性并且转换为getter/setter。

48、sum求和，可以传入多个参数

使用arguments这个API，arguments为函数传入的实参，并且会转换为数组形式，这样的话就好做了，遍历实参，相加，最后返回。

49、多维数组降为一维数组

将数组转换为字符串，再切割字符串

let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]]
console.log(arr.toString())  
let newArr = arr.toString().split(',')
console.log(newArr)

50、什么是TCP

OSI一共有7层网络模型，应用层、表示层、会话层、传输层、网络层、数据链路层、物理层，TCP和UDP是传输层的协议。
TCP无论哪一方向另一方发送数据之前，都会在双方之间建立一条连接。连接是通过“三次握手”进行初始化的。三次握手的目的是建立可靠的通信连接，确认双方的发送与接收是否正常。完成了三次握手，客户端和服务端就可以开始传送数据了。
三次握手的步骤

51、为什么TCP是三次握手，而不是两次

可能会形成死锁。假设客户端给服务器发送了一个连接请求报文，服务端成功接收并给客户端发送了确认应答报文，此时服务端并不能确认该应答报文是否成功到了客户端，但因为两次握手，所以这时候服务端就处于成功连接的状态了，并给客户端发送数据。如果客户端未收到服务端的应答报文，则不知道服务器是否确认好建立连接，甚至不知道自己发送给服务器的报文是否成功抵达，此时客户端会认为连接并未成功建立，会忽略服务端发送过来的任何数据。而服务端发送的数据未得到相应超时时，会重复发送同样的数据，这样就形成了死锁。

52、TCP和UDP的区别

TCP是一种面向连接，可靠稳定的传输协议，建立连接需要经历三次握手，握手成功才可通信，但是速度比较慢，效率比较低，容易被DOS，DDOS攻击。
UDP是一种面向无连接，不可靠的传输协议，会直接建立连接，速度快，没有三次握手的机制，所以会相对安全，但是UDP还是可能会被flood攻击，在网络不好的情况，容易发生丢包。

HTTP请求报文

HTTP的请求报文包括：请求行(request line)、请求头部(header)、空行 和 请求数据(request data) 四个部分组成。

浏览器渲染的步骤

53、输入url后发生了什么

54、重绘和重排的区别

重绘不一定重排，重排必定导致重绘

54、HTML行内元素、块状元素、行内块状元素的区别

使用display可以将三者任意转换，

55、http和https的区别

https的ssl加密是在传输层实现的

56、移动端怎么做适配的

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

width设置成了设备的宽度，initial-scale控制了页面加载时候的缩放等级，maximum-scale为用户最大缩放值，user-scalabel是否允许用户进行缩放

57、box-sizing属性

box-sizing是更改盒子模型基准，有两个选项，一个是content-box，一个是border-box。还有一个是inherit默认的是content-box。
其实两者的区别也就是盒子的宽高是否包含border和padding，如果是content-box那么宽高就是固定的，如果是border-box，那么宽高就是设定的宽高再减去border和padding，就是这个盒子的宽高。
inherit是继承父元素的box-sizing。

58、宏任务与微任务

宏任务例如，script，setTimeout，setInterval
微任务例如Promise.then
执行一个宏任务，执行过程中如果遇到微任务，就会将微任务添加到微任务的队列，宏任务执行完毕过后，会立即按顺序执行微任务，当这个宏任务执行完毕后，开始进行渲染，渲染完毕后，开始下一个宏任务。

59、BFC是什么？

BFC是块级格式化上下文，是用于布局块级盒子的一块渲染区域。
一般触发BFC的条件

60、AST抽象语法树

抽象语法树，是源代码的抽象语法结构的树状表现形式，一般指编程语言的源代码

61、put、post、patch的区别

post用来创建资源，多次执行，会导致多条资源重复创建
put一般用来更新已知资源
patch对已知资源进行局部更新

62、vue-router原理

vue-router是应用在单页面应用中。
单页面：第一次进入页面的时候会请求一个html文件，当url变化时，js会感知到，js会将当前的页面清除掉，判断当前url需要显示哪个组件，清除不需要的，显示需要的组件。
实现原理：更新视图但不重新请求页面
前端路由主要有两种模式，hash模式和history模式，hash会在域名后面加一个#号，hash虽然会出现在url中，但不会包括在http请求中而history则不存在，没有#号，这种模式需要服务端支持。服务端接收到请求后，都指向同一个html文件。
vue-router也是利用了这两个特性来实现前端路由

63、Node.js中间件

中间件主要是指封装所有http请求细节处理的方法，比如记录日志、权限验证、异常处理等。
中间件是从http请求发起到响应结束过程中的处理方法，通常需要对请求和响应进行处理。

64、什么是DNS、FTP，基于什么协议？

DNS（Domain Name System）：域名解析协议，端口号：53；通过域名解析获得域名所对应的IP

FTP（File Transfer Protocol）：文件传输协议，端口号：21；用户可通过客户机程序向远程主机上传文件；或从远程主机上下载文件。

65、Vue生命周期

beforeCreate : 组件创建之前
created：组件创建后
beforeMount：组件挂载之前
mounted:挂载完成
beforeUpdate：数据更新前
updated：数据更新后
beforeDestory：实例销毁之前
destored：实例销毁后

65、防抖和节流

防抖：让某个时间期限内，事件处理函数只执行一次，例如获取滚动条位置，就要每3S执行一次，可以使用定时器来实现，我们可以在一个方法里面使用闭包来存储一个状态，定时器每次执行，都会返回一个类似于ID，ID是用来关闭定时器的，每次执行该方法，如果有ID就清除该ID的定时器，并且创建一个新的定时器。

function dbbounce(fn,delay){
        let timer = null
        return function(){
            //setTimeout每次执行，会返回给我一个特殊的值，这个值是用来关闭定时器的,每次执行该方法时，如果有timer就清楚上个定时器
            //如果没有就执行定时器
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(fn,delay)
        }
    }

    function showTop (){
        var scrollTop = document.documentElement.scrollTop
        console.log('滚动距离',scrollTop)
    }

    window.onscroll = dbbounce(showTop,3000)

节流:函数执行一次后，在某个时间段内暂时失效，过段时间再重新激活，使用闭包存储一个布尔类型的状态，每次执行该方法时，如果状态为false则不执行，如果状态为true，则会使状态先等于false，达到冷却的效果，再调用定时器，定时器完成过后，会将状态改为true。

 function throttle(fn, delay) {
        let valid = true
        return function () {
            //类似于技能能却，执行完一次，有间隔时间，时间走完了，才能再执行
            //滚动时，如果状态为false就不执行，如果状态为true，在间隔期间设置状态为false，然后在执行定时器，定时器执行完，将状态改为true
            if (!valid) {
                return false
            }
            valid = false
            setTimeout(() => {
                fn()
                valid = true
            }, delay)

        }
    }

    function showTop() {
        var scrollTop = document.documentElement.scrollTop
        console.log('滚动距离', scrollTop)
    }

    window.onscroll = throttle(showTop, 2000)

66、ajax，axios和fetch有什么区别

ajax

67、为什么JS是单线程的？

JS作为浏览器脚本语言，JS的主要用途是与用户互动，以及操作DOM。这决定了只能是单线程，否则会带来复杂的同步问题，比如，假如JS有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时候浏览器就不知道应该以哪个为准。

68、路由懒加载

路由懒加载也叫按需加载，即在需要的时候进行加载，单页应用，利用webpack打包后的文件会非常大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间白屏，而运用懒加载可以将页面进行划分，需要的时候加载页面，减少首页加载用时。

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]

69、前端项目优化

72、水平垂直居中

 #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}

73、两个等号和三个等号的区别

74、常用操作字符串方法

75、常用操作数组方法

  1. currentValue(必须),数组当前元素的值
  2. index(可选), 当前元素的索引值
  3. arr(可选),数组对象本身

76、什么是事件委托

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
当我们有很多dom需要添加处理事件，比如ul下面有很多li，我们给每个li都要添加相同的点击事件，通常会用for循环，给它们添加点击事件，这有很大的性能弊端

77、call、bind、apply的区别？

78、深拷贝和浅拷贝的区别

它们最根本的区别在于是否真正获取了一个对象的复制实体，而不是引用
浅拷贝现在可以使用Object.assign快速实现
Object.assign()只有源对象，没有目标对象时为浅拷贝
JSON.parse(JSON.stringify())可以实现深拷贝

79、JSON.parse和JSON.stringify的区别

80、JS动画和CSS3动画差异性

css3后来添加了transform动画函数
css3动画与js动画的区别：
js功能涵盖面比css3广
css3比js更易实现
css3存在兼容问题 js不存在兼容问题

81、join("")和toString()的区别

join（“”）转换为字符串时，会将逗号去掉

82、JS基本数据类型

基础类型：Undefined,Null,Boolean,Number,String,Symbol
引用类型：Object,Array
symbol生成的是一个全局唯一的值,Symbol(1) === Symbol(1)是为false的。

83、ES6新特性

84、谈谈ES6中的class

首先class是用来创建类的，在传统的js中，没有类的概念。class的作用让原型对象的写法更加清晰

85、扩展运算符

扩展运算符就是遍历目标对象，拷贝到当前对象中
扩展运算符如果目标对象中含有引用数据类型，则使用扩展运算符拷贝出来的则是浅拷贝。

86、vue和react的事件绑定对比

首先vue的特色是双向绑定，而react是单向绑定，其实vue的双向绑定也可以使用单向绑定加上onChange事件监听来实现。

87、Hooks是什么

原来我们写一个组件需要去声明一个类，但是使用了hooks就不需要了，就直接使用function创建一个函数，然后使用useState来管理状态，然后在返回html模板就可以成功创建一个组件了

88、webpack是什么，loader是什么？

webpack是前端构建的一个工具，loader其实就是提供了打包方案，就比如webpack不知道怎么打包图片模块、css模块、js模块时，就会使用各种loader来帮助Webpack打包
比如：
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
eslint-loader：通过 ESLint 检查 JavaScript 代码

plugin其实主要是监听一些webpack事件的，然后做优化

89、CSS可继承的属性

1、字体系列属性，例如字体粗细，风格，大小
2、文本系列属性，例如行高，文本颜色
无继承的属性：display，背景属性，盒子模型的属性，定位属性

谈一谈RCM自动升级这个项目？

公司每次有升级包，就需要在这创建任务，上传升级包，然后对任务可视化操作，显示进度和状态信息等，可以编辑，可以查看详情，可以下载对比文件等，除此之外还有一些基准文件配置、邮箱配置、常用工具等功能。
1、表单联动太多，开始想着用change方法来监听数据，最后编辑的时候，因为需要初始化数据，最后才采用的watch的深度监听
2、formdata传递数组，当时后端需求就是我需要传一个数组，这个数组每一个对象里面都包含的有文件，所以我选择采
用Formdata形式传递数据给后台，而formdata添加数据又是key,value的形式，所以我添加时key就是将数组转为语义化来命名。
3、下载浏览器默认打开的文件。

谈一谈你做项目遇到的困难

1、最开始做项目的时候，跨域问题以及服务器配置
2、前期对数据的处理，例如数组，或者对象类型的方法了解的太少

上一篇 下一篇

猜你喜欢

热点阅读