前端面试所需要掌握的知识点总结2020年，搜集中

为了更好的复习，搜集了网上写总结写得好的文章。每天慢慢追加，之前略过的知识这次要找到详解弄明白！
接下来的面试：

富途暑假实习(面经很少)

网易雷火（搜集一下面经里出现过的考点）

【4-10】+【9-9】+【12-1】问题后面有x代表出现了n次
二面的还没有收录。。
讲讲this

webpack怎么样
，node怎么样？？大概是问的原理和理解？ X3
ajax原理：中间层AJAX引擎，通过HMLHTTPrequest对象向服务器发送请求。获得数据后用JS来操作DOM
做过兼容，CSS兼容做过吗？
清除浮动

• 为什么overflow：hidden可以清除浮动

居中
跨域

• Jsonp原理
• JSONP有哪些缺点，安全吗（不安全）缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求。知乎更多
• cors带cookie怎么操作客户端(XMLHttpRequest的withCredentials)服务端(一堆响应头，Access-Control-Allow-Credentials)分别设置参数。请求头：xhrFields: {withCredentials: true}

前端安全：web大前端面试——浏览器、网络和安全

• XSS防御的转义，对用户输入全都转义吗

事件委托（addEventListener第三个参数）
原型
请求字段：HTTP报文详解

• HTTP缓存相关的头部

ES6：ES6中常用的10个新特性讲解

• for in 和 for of 的区别 in key, of value

BFC是什么
防抖节流的区别，防抖节流举例应用场景，防抖节流

其他乱乱的问题：
上传文件怎么看文件的名字，内容，大小等等
移动端的布局方式
vue的生命周期 X 2

生命周期钩子	组件状态	最佳实践
beforeCreate	实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据	常用于初始化非响应式变量
created	实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组	常用于简单的ajax请求，页面的初始化
beforeMount	在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数	-
mounted	实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问	常用于获取VNode信息和操作，ajax请求
beforeupdate	响应式数据更新时调用，发生在虚拟DOM打补丁之前	适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated	虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作	避免在这个钩子函数中操作数据，可能陷入死循环
beforeDestroy	实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例	常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed	实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁	-

Created和Mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

• vue-router原理

• vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一

• Vue中，一个变量a=2，DOM中
• Vue-router的hash模式和history模式。hash的缺点 X2
• 有部分内容是这个变量的值；假如这个变量变化a=1，会重新渲染，怎么知道什么渲染完成/挂载，或者说想在这个时间段做一些事的话怎么办（不是updated）watch? 还是不知道答案

JS有哪些基本类型和引用类型
有没有用过canvas
网页前进后退失效怎么做 用ajax，jquery.history.js/jquery-hashchange
rem了解吗
eventloop
宏任务微任务？
process.nextTick？
前后端自定义响应的命名规范
非递归遍历树
设置背景色会对padding产生效果吗
数组复制和对象复制的方法

【
2. 说一下React-router的原理
3. hash路由怎么去改变页面而不刷新的
4. 说一下Redux
5. 你觉得dvajs的redux和redux用起来有哪些区别和感受
6. css写一个动画让一个div在水平的两个点之间来回运动怎么做
7. 说一下less和css区别
8. webpack怎么打包的
9. webpack用过哪些插件
10. webpack路由懒加载和优化了解过没有
11. 怎么做webpack多入口
12. 跨域怎么解决的
13. 做H5项目遇到过哪些坑
14. 没有遇到过ios和android不一致的坑吗
15. 说一下js对象的深拷贝
16. 说一下H5的语义化标签
17. 说一下常用的linux命令
18. 我看你不是计算机的，后台数据库了解过没
19. sql语句 增删改查
】
其他未分类知识点：

ES8都有哪些新特性，你还在用ES6吗？

js:Promise的简单理解

@import与link

懒加载预加载

CSS3新增属性用法
CSS水平垂直居中常见方法总结
判断一个js对象是否为数组
简述GET和POST的区别
vue如何判断图片加载失败
flex属性设置详解 flex-grow、flex-shrink、flex-basis
箭头函数和普通函数的区别

一些个人不是很能记清的知识点，写个短语更容易回想起来。

cooki, sessionStorage, locakStorage 【455 , KMM】

HTMl 全局属性：draggable, data-* (add 自定义属性)

浏览器内核： 谷歌- Blink webkit, 火狐 - gecko，IE -trident

创建BFC：5种方法（要能全部写出来。【1根OF2不等PD25】

1. 根元素
2. float != none。也就是有浮动
   3 .overflow != visible
3. position = absolute, fixed
4. display = inline-block, inline-flex, flex, table-cell, table-caption

iframe可用在以下几个场景中：
1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。
4： 在上传图片时，不用flash实现无刷新。
5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

CSS3新增用法：
1、box-shadow（阴影效果）
2、border-color（为边框设置多种颜色）
3、border-image（图片边框）
4、text-shadow（文本阴影）
5、text-overflow（文本截断）
6、word-wrap（自动换行）
7、border-radius（圆角边框）
8、opacity（透明度）
9、box-sizing（控制盒模型的组成模式）
10、resize（元素缩放）
11、outline（外边框）
12、background-size（指定背景图片尺寸）
13、background-origin（指定背景图片从哪里开始显示）
14、background-clip（指定背景图片从什么位置开始裁剪）
15、background（为一个元素指定多个背景）
16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）
17、hsla（在hsl的基础上增加透明度设置）
18、rgba（基于rgb设置颜色，a设置透明度）

Input标签的readonly属性
Readonly规定输入的字段为只读，即用户不可修改，但是用户可以通过tab切换到该字段，还可以选中复制该字段。可以配合js设置条件控制用户是否可以更改或输入内容

Input标签的step属性
Step规定输入字段的合法数字间隔(如step=”2”,则合法数字可为-2，0，2，4等)
Step属性的值为负数或0时默认为1，该属性可以配合max，min属性来创建合法值得范围。
Step，max，min属性适用于类型有:number,range,date,datetime,month,time,week

form标签的enctype属性
规定在发送表单数据之前如何对其编码，可取值有：
application/x-www-form-urlencoded
multipart/form-data
text/plain

form标签的method属性
规定用于发送表单数据的http方法，可取值有：post和get

video标签，H5新标签
用来定义视频，电影片段或其他视频流
常用属性：autoplay(视频就绪后马上播放)
controls(向用户显示播放控件，如按钮)
loop(循环播放)
可以为没有controls控件属性的video嵌套按钮控件

原型链：
Ø Object.prototype只是一个普通对象，它是js原型链的最顶端
 Object.prototype.proto=== null;//true
 Object.prototype.prototype === undefied;//true

Object.prototype只是一个普通对象(普通对象没有prototype属性，所以值是undefined)，Object.prototype是js原型链的最顶端，它的__proto__是null(有__proto__属性，但值是null，因为这是原型链的最顶端)。

Ø 在js中如果A对象是由B函数构造的，那么A.proto === B.prototype。
javascript中对象是由Object创建的，函数是由Function创建的。
Ø 内置的Object是其实也是一个函数对象，它是由Function创建的。
Object.proto === Function.prototype;
Ø js中每一个对象或函数都有__proto__属性，但是只有函数对象才有prototype属性。
//函数对象
function Person(){}

// 普通对象
var obj = {};
obj.proto === Object.prototype;//true
obj.prototype === undefined;//true
Person.proto === Function.prototype;//true
Person.prototype !== undefined;//true

原型链是基于__proto__形成的，继承是通过prototype实现的。
Ø Function.prototype是个特例，它是函数对象，但是没有prototype属性。其他所有函数都有prototype属性。
Function.prototype.prototype === undefined;//true
Ø 内置的Function也是一个函数对象，它是通过自己来创建自己的。
Function.proto=== Function.prototype;//true
Ø 函数也是对象，因为Function.prototype__proto__指向Object.prototype。
typeof Function.prototype.proto) === “object”;//true
Function.prototype.proto=== Object.prototype;//true

冒泡事件很多，个人觉得记住常见的不支持冒泡事件就可以了
有：①focus
②blur
③mouseenter
④mouseleave
⑤load
⑥unload
⑦resize
scroll支持冒泡。