2021年前端最新常见面试题

1.1: XSS跨站脚本攻击

（1）恶意攻击者向web页面插入恶意代码（html标签，javascript代码），使用户在浏览网页时，html恶意代码被执行，从而达到盗取用户的cookie信息，会话劫持等行为。

（2）类别

1.DOM xss：文本对象模型，使得DOM可以直接允许程序和脚本动态的访问和更新文档的内容，结构和样式，不需要服务器解析响应的直接参与，触发xss靠的是浏览器的DOM解析，可以完全认为这是浏览器的事情。

2.反射型xss：反射型xss也被称为非持久性的xss，是现在最容易出现的一种xss漏洞。发出请求时，xss代码出现在URL中，最后输入提交到服务器，服务器解析后再响应内容中出现这段xss代码，最后浏览器解析执行。

3.存储型xss：存储型的xss也被称为持久性xss，他是最危险的一种跨站脚本攻击，相比反射型xss和Dom型xss具有更高的隐蔽性，所以危害更大，他不需要用户手动触发，当攻击者提交一段xss代码后，被服务器接收被存储起来，当所有浏览器访问某个页面时都会被xss，其中最典型的例子就是留言板

（3）危害

1.利用虚假输入表单盗取用户信息

2.利用脚本窃取用户的cookie值

（4）防御措施

1.在cookie中设置HttpOnLy属性，使js脚本无法读取到cookie信息。（后台设置）

2.避免使用eval执行字符串

3.表达输入经过验证，过滤标签以及转义字符。

1.2 CSRF跨站伪造请求

（1）原理：通过用户访问网站A时所保存的cookie信息，然后再没退出网站A的情况下跳转到网站B，那么就会将cookie信息携带到网站B，然后A就会认为是它自身在本网站访问自己的假象。典型的案例就是转账。

（2）本质：CSRF攻击是攻击者利用用户身份操作用户账号的一种攻击方式

（3）解决方法：

1.验证码：跨站转账的情况下建议在转账之前开设验证码

2.Referer Check:利用HTTP 请求头中的Referer 字段来检测当前请求页面的来源页面的地址是否合法

优点：在最后给所有安全敏感的请求统一添加一个拦截器来检查Referer的值

缺点:服务器并不是什么时候都设置Referer字段，例如：出于保护用户隐私的考虑，会限制Referer的发送HTTPS转到HTTP，处于安全考虑。浏览器不会发送Referer。

3.在url增加一个token参数作为随机数。

优点：比Referer方便，同时让攻击者无法再构造出一个完整的url实施CSRF攻击。

缺点：要给每一个url添加一个字段

注意：token必须是足够安全的随机数算法，可以存放在session，和cookie中，尽量放在表单中，以post方式发送请求。

1.3点击劫持

（1）点击劫持是一种视觉上的欺骗手段，攻击者使用一个透明的不可见的iframe，覆盖在一个页面上，然后通过调整页面使刚刚好覆盖在某个按钮上，然后点击触发事件，跳转到攻击者设置的页面上。

（2）解决方法：X-Frame-Options

X-Frame-Options HTTP响应头是用来浏览器指示允许一个页面能否在<iframe>.<frame><object>中展示的标记

（3）可选值

1.DENY：浏览器拒绝当前页面加载任何frame页面，即使是相同域名的页面也不允许。

2.SAMEORIGIN:允许加载frame页面，但是frame页面的地址只能为同源域名下的页面

3.ALLOW-FROM:可以加载指定来源的frame页面。

2.浏览器的存储类型？

1.sessionStroage

2.localStroage

3.cookie

3.常见的状态码

4.兼容性处理

浏览器的缓存原理(expires和cachet-control)
清除缓存的方法
nodejs如何处理高并发(事件驱动，事件队列)
nodejs是单线程还是多线程(单)

一个页面的构建顺序
post和get请求的区别
ajax的创建过程
http状态码（也是两三次问到）
跨域处理方法
为什么首页会默认是进入index
使用服务器代理，前端需要做什么
前端如何提高加载速度和用户体验（2次）
图片太大如何优化（除了base64）

二 Javascript部分

1.数组去重，排序，替换，求出现次数最多的字母，——实现原理

2.原型链

3.闭包

4.ES6新特性

5.DOM操作，插入，移除，添加到最后，以及通过父元素控制子元素

6.map 和 forEach 的区别，以及forEach和for的区别

7.什么是深拷贝什么是浅拷贝

8.class原理

ES5之前不存在类的概念，创建对象使用的构造函数，通过new操作符来创建；为了使js更像面向对象，ES6版本引入class概念，其基本语法：

9.如何使用ES6改变this指向

1、call()的使用
使用方法：要改变this指向的函数.call(this的新指向,参数1，参数2……)

2、apply()的使用
使用方法：要改变this指向的函数.apply(this的新指向,数组)，参数以数组形式传入

3、bind()的使用
使用方法：要改变this指向的函数.bind(this的新指向,参数1，参数2……)
bind（）使用时不会调用函数，而是返回一个原函数的拷贝和指定的this值，可以定义一个变量去接收返回的原函数拷贝

call、apply、bind区别：
相同点：都可以改变 this 的指向
不同点：
(1)call和apply使用时会调用函数，而bind不会，bind会返回的是原函数拷贝
(2)apply传递参数形式必须是数组
(3)call主要用于继承，apply可用于数组的相关操作，bind由于其不会调用函数的特点，故可用于改变定时器的this指向等。

扩展
改变this指向的其他途径：
1、可利用中间变量，如：在内外层的两个作用域，在外层生声明 that=this，然后在内层用that来代替this
2、箭头函数，箭头函数本身不绑定this，箭头函数中的this指向的是箭头函数被定义位置中的this。

10.this指向有几种

首先必须要说的是，this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。

（1）、作为函数名调用
函数作为全局对象调用，this指向全局对象

（2）、作为方法调用
函数作为对象中的一个属性，成为该对象的一个方法，this指向该对象

（3）、使用构造函数调用
使用new调用的函数，则其中this将会被绑定到那个新构造的对象。（首先new关键字会创建一个空的对象，然后会自动调用一个函数方法(apply...)，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代）

(4）、apply或call调用
自行改变this指向，函数this指向apply或call方法调用时的第一个参数

11.new这个过程中做了什么？

要创建Person的新实例，必须使用new操作符。以这种方式调用构造函数实际上会经历以下4个步骤：

1.创建一个新对象

2.将构造函数的作用域赋给新对象（因此this就指向了这个新对象）

3.执行构造函数中的代码（为这个新对象添加属性）

4.返回新对象

nextTick()的用法

遍历对象的方法有几种

如何判断数组还是对象

js数据类型以及他们之间的区别

如何判断数据类型

排序方法

防抖和节流

说说你对闭包的理解以及为什么要用闭包

箭头函数和普通函数的有什么不同

数组的方法有哪些

阻止事件冒泡和默认行为的方法（除了调api）

你能说说对模块化，工程化的理解吗

数组对象的深拷贝方法有哪些

三 Vue部分

1.Vue组件传值

2.页面重定向，路由守卫

3.Vuex是什么

4.computed和watch使用过吗？

5.v-model的实现原理

v-model本质就是一个语法糖，可以看成是value+input方法的语法糖。可以用v-model指令在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

6.vue生命周期

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）

在实例销毁之前调用，实例仍然完全可用，

这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件

destroyed（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

7.vue-router路由守卫

8.data为什么不是一个函数

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。

如果data是对象的话，对象属于引用类型，会影响到所有的实例。

所以为了保证组件不同的实例之间data不冲突，data必须是一个函数

9.页面加载会触发vue哪些生命周期

10.SEO问题

前端对于SEO有什么要注意的：
合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可

语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt（通常当鼠标滑动到元素上的时候显示alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析）
提高网站速度：网站速度是搜索引擎排序的一个重要指标。

Vue如何解决对于SEO的问题呢？

页面预渲染
服务端渲染
路由采用h5 history模式

11.v-for里面使用v-if

在处于同一节点的时候，v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环，然后在每一个v-for 的循环中，再进行 v-if 的条件对比。所以，不推荐v-if和v-for同时使用。

想要实现的效果：

<template v-for="(item, index) in list" :key="index">	
   <div v-if="item.isShow">{{item.title}}</div>
</template>

推荐使用计算属性先进行过滤

<template>
 <div>
	<div v-for="(user,index) in activeUsers" :key="user.index" >
		{{ user.name }} 
	</div>
</div>
</template>
<script>
export default {
  name:'A',
  data () {
    return {
      users: [{name: 'aaa',isShow: true}, 
              {name: 'bbb',isShow: false}]
    };
  },
  computed: {//通过计算属性过滤掉列表中不需要显示的项目
	activeUsers: function () {
	  return this.users.filter(function (user) {
		return user.isShow;//返回isShow=true的项，添加到activeUsers数组
	  })
	}
  }
};
</script>

12.为什么v-for要和key一起使用

1.在写v-for的时候,都需要给元素加上一个key属性

2.key的主要作用就是用来提高渲染性能的!

3.key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)

13.路由嵌套的好处

14.组件间传参的原理

15.双向数据绑定的好处

单向数据绑定：

指的是我们先把模板写好，然后把模板和数据（数据可能会来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。

缺点：单向数据绑定缺点，HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。

优点：单向数据流数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。

双向数据绑定：

数据模型和视图之间的双向绑定。

缺点：各种数据相互依赖相互绑定，导致数据问题的源头难以被跟踪到，不利于管理数据源。

优点：双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

16.模块化开发的好处

v-model语法糖是怎么实现的
vue的指令修饰符有哪些
MVVM和MVC模式有什么区别
组件通信有哪几种
computed和watch计算属性有什么区别
vue的源码看过吗，能不能说说他的实现原理

中央事件总线

四小程序

1.传参方式

2.小程序与vue双向绑定的区别

五 Html + css

1.h5新特性

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

2.如何让一个盒子居中显示，（左200px,自适应，右200px）至少两种方法

3.重绘和（重排）回流

4.使无宽高的盒子水平居中的方法有哪几种

5.jpg和png格式的图片有什么区别

6.flex布局

display:flex;在父元素设置，子元素受弹性盒影响，默认排成一行，如果超过一行，按比例压缩

flex:1;子元素设置，设置子元素如何分配父元素的空间，

flex:1,子元素宽度占满整个父元素

align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中

justify-content:center 设置子元素在父元素中居中，前提是子元素没有把父元素占满，让子元素水平居中。

7.css3的新特性

transtion transition-property 规定设置过渡效果的css属性的名称

transtion-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。

ainimation实现动画效果主要由两部分组成：

通过类似Flash动画中的帧来声明一个动画；
在animation属性中调用关键帧声明的动画。

translate 3D建模效果