2021前端面试题以及答案解析

1.v-show和v-if有什么区别 什么时候使用最好

区别：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

什么时候使用：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

2.带宽增加，什么方式去考虑问题

1.病毒 在服务器上安装杀毒软件，进行杀毒。

2.网络攻击 登陆阿里云管理控制台，查看云盾中的防护 DDOS 攻击是否调整好阈值， 并核实是否开启CC防护。

3.存在耗资源进程 任务管理器>性能>资源监控器>网络>查看

4.爬虫 站点是否存有 MP3，flv，swf 等大文件被频繁访问下载 建议减少这些文件

5.网站规模大 建议升级带宽

3.网站性能优化

1.尽可能减少HTTP请求

2.使用雪碧图

3.css放在文件最上面防止白屏,闪动,js放在最下面

4.压缩js和css 去除不必要的注释 空格

5.合理使用缓存

6.使用CDN(内容分发网络)

4.如何查看linux服务器的资源

查看磁盘信息

fdisk –l

df –h

查看cpu的信息

cat /proc/cpuinfo

5.闭包优缺点

作用:读取函数内部的函数,始终保持在内存中

优点:变量长期保持在内存中,不会清除,避免全局污染

缺点:增大内存使用,导致内存泄漏

网页性能问题

6.你知道内存泄露吗

导致网站/软件反应迟缓,崩溃,高延迟

原因：变量使用没有被回收,造成了内存泄漏,一般由定时器,闭包导致

vue如何处理 生命周期 beforeDestroy 销毁前做处理

react如何处理 生命周期 componentWillUnmount 销毁做处理

7.link标签和@import的区别

1.link标签属于html标签,@import是css提供的方式

2.link除了加载css，还可以做rss(简易联合)，rel属性,@import只能加载css

3.link引用的css同时被加载，@import引用的css等到页面加载完成后再加载,

4.link的权重的大于@import

5.兼容性的差别 @import不兼容IE5以下的,link完全兼容

8.es5和es6的区别

1.引用

es5:require

es6:import

2.声明变量

es5:var

es6:let count

3.函数定义

es6：使用箭头函数 =>

4.set集合和map集合

set 无重复列表

map 键对值列表

5.es6新增一个数据类型 symbol:唯一ID,独一无二

6.promise

9.git常用命令

git clone 下载项目

git add 添加文件

git rm 删除

git commit 提交到仓库

git init 新建一个git代码库

10.nginx的好处

1.高并发连接

2.内存消耗

3.成本低

4.负载均衡

5.反向代理

11.axios的请求方式

get：获取数据

post：提交数据（表单提交+文件上传）

put：更新数据（所有数据推送到后端）

patch：更新数据（只将更改的数据推送到后端）

delete：删除数据

12.React Native的本地存储

Asyncstorage 对应app是全局的

13.vue为什么要有计算属性

把数据缓存起来了,提高性能

14.React的初始化写在哪里

consructor()

15.js的原型和原型链

原型：任何对象都有原型对象,主要用来继承,只存在函数变量中

原型链:两个类型的继承,js查找对象属性,如不存在，在原型链上查找

16.linux常用命令

man ls 查看ls用法

cp 拷贝文件

rm 删除

mr 移走目录

cd 改变目录

bt 宝塔面板

tar 解压

17.ajax的运行原理

AJAX是异步交互，在客户端与服务器只加引入一个媒介，从改变了同步交互过程 中“处理--等待--处理--等待”的模式

18.js的宏任务和微任务

在 js 中，任务分为宏任务(macrotask)和微任务(microtask)，这两个任务分别维护一个队列，均采用先进先出的策略进行执行！同步执行的任务都在宏任务上执行。

宏任务主要有：script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。

微任务主要有：Promise.then、 MutationObserver、 process.nextTick(Node.js 环境)。

具体的操作步骤如下：

从宏任务的头部取出一个任务执行； 执行过程中若遇到微任务则将其添加到微任务的队列中； 宏任务执行完毕后，微任务的队列中是否存在任务，若存在，则挨个儿出去执行，直到执行完毕； GUI 渲染； 回到步骤 1，直到宏任务执行完毕；

这 4 步构成了一个事件的循环检测机制，即我们所称的eventloop。

19.迭代器

ES6提供一个全新的迭代器的概念，它允许我们在语言层面上定义一个（有限或无限的）序列

for-of是ES6中的新语法，用来配合迭代器。

for (var key of table) {

console.log(key + ' = ' + table[key]);

}

20.webpack的配置优化

webpack打包优化分为两部分，一部分是大小优化，另一部分是速度优化。

1.大小优化

使用CommonsChunk 来单独打包第三方库：

webpack 提供Externals的方法，可以通过外部引用的方法，引入第三方库

2.速度优化

优化loader配置

resolve优化

HappyPack是让webpack对loader的执行过程，从单一进程形式扩展为多进程模式，

ParallelUglifyPlugin这个插件可以帮助有很多入口点的项目加快构建速度。把对JS文件的串行压缩变为开启多个子进程并行进行uglify。

剔除JavaScript中用不上的代码

21.js的数据类型有8种

ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、 undefined、object、Null。

ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的 值，可以解决属性名冲突的问题，做为标记。

谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。

22.set集合和普通集合的区别

set集合中的数据没有顺序，且如果add两个一样的对象或基本类型的数据，set集合里 也是只有一个，即set集合中的数据都是独一无二的；不能使用加强的for循环；

list中的数据是有顺序的，可以加入多个一样的对象和基本类型的数据，可使用加强的for循环；

23.说一下async和await

async/await其实是Promise的语法糖，它能实现的效果都能用then链来实现，这也和我们之前提到的一样，它是为优化then链而开发出来的。

async是“异步”的简写，await译为等待，所以我们很好理解async声明function是异步的，await等待某个操作完成。当然语法上强制规定await只能出现在asnyc函数中，

24.flex布局的垂直居中和水平居中

水平居中

display:flex;

justify-content:center;

垂直居中

display:flex;

align-items:center;

25.css3的伪类

p:last-of-type         选择其父元素的最后的一个P元素

p:last-child            选择其父元素的最后子元素(一定是P才行)

 

p:first-of-type        选择其父元素的首个P元素

p:first-child           选择其父元素的首个p元素(一定是p才行)

 

p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)

p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)　

 

p:nth-child(n)    　　选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)    ..............................................从最后一个子元素开始计数

p:nth-of-type(n)　  选择其父元素的n个元素

p:nth-last-of-type(n)   ........................从最后一个子元素开始计数

26.vue的computed和watch都可以我用来计算，差别在哪，什么时候使用哪个

computed

computed适用于动态计算data里的属性值，必须加return，不能对data里的属性进行赋值，当无变化时会先从缓存里读取。使用场景：当一个值受多个属性影响的时候

watch

watch是监听data里的值的变化，当data中的属性发生改变的时候，watch中的函数就会执行）

computed适合处理的场景是，一个数据属性在它所依赖的属性发生变化时，也要发生变化

watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化

27.vue的优缺点和特性

特性：.1.轻量级的框架

2.双向数据绑定

3.指令

4.插件化

优点：组件化

方便重复使用

轻量高效

MVVM

缺点：可扩展性稍差

SEO不好做

28：react如何渲染循环li列表 map方法

{this.state.goods.map(item=> return

• {item.text}
• )}

29:react的foreach和map的异同

共同点：

     1.都是循环遍历数组中的每一项。

    2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。

   3.匿名函数中的this都是指Window。

   4.只能遍历数组。

1.forEach()

   没有返回值。

2.map()

有返回值，可以return 出来。

30：react的虚拟dom

React会在内存中维护一个虚拟DOM树，对这个树进行读或写，实际上是对虚拟DOM进行。当数据变化时，React会自动更新虚拟DOM，然后将新的虚拟DOM和旧的虚拟DOM进行对比，找到变更的部分，得出一个diff，然后将diff放到一个队列里，最终批量更新这些diff到DOM中。

虚拟DOM的优点：

最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染。

虚拟DOM的缺点：

首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。

31：react的生命周期

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

• componentWillMount 在渲染前调用,在客户端也在服务端。
• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 

可以在你确认不需要更新组件时使用。

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

32：react的性能优化写在哪里

性能优化之生命周期函数shouldComponentUpdate

react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染。但是，有的时候子组件的接受父组件的数据没有变动。子组件render的执行会影响性能，这时就可以使用shouldComponentUpdate来解决这个问题。

shouldComponentUpdate   这是一个需要返回布尔值的生命周期，可以理解为疑问句 "组件本身需要被重新渲染吗?"

例如： 

                shouldComponentUpdate (){

                        if(子组件原数据 == 子组件现在接收的数据){

                                 return  false; 

                        }else{

                                 retuen true;

                        }   

                }  

从而达到没必要重新渲染的子组件，阻塞掉父子render变化引起的子组件render的变动，提升性能！

33：react有几种组件？函数组件和类组件

函数组件

function Welcome (props) {

return

Welcome {props.name}

}

ReactDOM.render(, document.getElementById('root'));

函数组件接收一个单一的 props 对象并返回了一个React元素

类组件

class Welcome extends React.Component {

render() {

return (

Welcome { this.props.name }

);

}

}

ReactDOM.render(, document.getElementById('root'));

无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

React是单项数据流，父组件改变了属性，那么子组件视图会更新。

属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改

组件的属性和状态改变都会更新视图。

区别

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

34.react的setState的核心原理

React库控制时，异步；否则同步

setState之后，会经对state进行diff，判断是否有改变，然后去diff dom决定是否要更新UI。如果这一系列过程立刻发生在每一个setState之后，就可能会有性能问题。

35:react的核心

虚拟DOM（Virtual Document Object Model）

DOM的本质是什么：就是用JS表示的UI元素

DOM和虚拟DOM的区别：DOM是由浏览器中的JS提供功能，所以我们只能人为的使用 浏览器提供的固定的API来操作DOM对象；虚拟DOM并不是由浏览器提供的，而是我们程序员手动模拟实现的，类似于浏览器中的DOM，但是有着本质的区别

虚拟DOM：优化频繁操作DOM引发性能问题的产物，将页面的状态抽象为JS对象的形式，本质上是JS和真实DOM的中间层。当我们想用JS脚本大批量进行DOM操作时，会优先作用于虚拟DOM这个JS对象，最后通过对比将要改动的部分通知并更新到真实的DOM上。

Diff算法

tree diff:新旧DOM树，逐层对比的方式，就叫做 tree diff,每当我们从前到后，把所有层的节点对比完后，必然能够找到那些 需要被更新的元素；

component diff：在对比每一层的时候，组件之间的对比，叫做 component diff;当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新，如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置；

element diff:在组件中，每个元素之间也要进行对比，那么，元素级别的对比，叫做 element diff；

key：key这个属性，可以把 页面上的 DOM节点 和 虚拟DOM中的对象，做一层关联关系；

36：js的作用域和作用域链

作用域：

全局作用域： 

最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：

局部作用域： 

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如函数内部

函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

作用域链:

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问。

37:什么是盒子模型

网页中的任何一个标签都相当于是一个盒子模型，而所有的盒子模型都存在五个必要的属性：width,height,padding,border,margin.

38:内容垂直居中的几种方法

1.把父级 div 的显示方式display设置为table，子级设置display:table-well;vertical-align:middle

优点：

• content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断

缺点：

Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)

2.使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

优点：

• 适用于所有浏览器
• 不需要嵌套标签

缺点：

• 没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

3.flex布局父元素display:flex,子元素align-self:center

4.通过伪元素:before实现css垂直居中

父元素添加伪元素:before

5.通过line-height实现css垂直居中

39：css的预处理器 sass/less

优点：变量，复用，嵌套，运算，继承

缺点：提高了门槛

40:DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

（1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

（3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

41:常见的http状态码

200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

403 - 服务器理解请求客户端的请求,但是拒绝执行此请求

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

开头为1，2的没有问题

3为重定向

4为客户端错误

5为服务器错误

42：display和visibility的属性差别

visibility属性：

确定元素显示还是隐藏；

visibility="visible|hidden"，visible显示，hidden隐藏。

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

display:none

display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

43:css选择符有哪些?哪些属性可以继承?优先级算法如何计算?

CSS 选择符：

1.id选择器(# myid)

2.类选择器(.myclassname)

3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p)

5.子选择器(ul > li)

6.后代选择器(li a)

7.通配符选择器( * )

8.属性选择器(a[rel = "external"])

9.伪类选择器(a: hover, li:nth-child)

可继承的样式：

1.font-size

2.font-family

3.color

4.text-indent

不可继承的样式：

1.border

2.padding

3.margin

4.width

5.height

优先级算法：

1.优先级就近原则，同权重情况下样式定义最近者为准;

2.载入样式以最后载入的定位为准;

3.!important >  id > class > tag

4.important 比 内联优先级高，但内联比 id 要高

44:传输数据格式有哪些,说说各自的优缺点？

相同点：

都是从客户端向服务端发送请求。从服务端请求数据的方式

Jsonp和Ajax的区别

Ajax属于同源策略，Jsonp属于非同源策略

原理不一样：

1.Ajax:new XMLHttpRequest

2.jsonp:通过动态创建script标签，添加src属性，前端通过传一个callback给后台，后台返回函数调用，前台将返回的函数调用再进行解析

返回值不一样：

1.Ajax返回的是一个对象

2.jsonp返回的是字符串

请求方式不一样：

Ajax有多种请求方式—(get,post,delete,put,patch)

jsonp：只有get

JSONP的缺陷

没有关于JSONP调用的错误处理，一旦调用失败，浏览器会以静默的方式处理。

他只支持get请求，只能获取数据

管理系统不能JSONP

所以==对于一些需要对安全性有要求的跨域请求，JSONP的使用需要谨慎一点了。

JSONP的优势

JSONP对于老浏览器兼容性方面比较良好，因此，对于那些对IE8以下仍然需要支持的网站来说，仍然被广泛应用