中高级前端自学

首要参考衔接路径

https://blog.csdn.net/qq_40126542/article/details/80307984
https://blog.csdn.net/qq_16546829/article/details/83040236
实现账号免登录5天内
参考
节流，防抖，性能优化，事件委托，变量提升，数组去重，es6，web安全，正则表达式，vue相关的，基本上双向绑定原理是必问的，以前还有问算法的，比如二叉查找树，快速排序的原理，深复制对象的实现

2019/12/10-12/13

1.性能优化(至少5条)，

（1）减少 HTTP 的请求数量可以很大程度上对网站性能进行优化
（2）浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。一般情况下都是 CSS 在头部，JS 在底部。
（3）减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。
（4）减少 DOM 操作
（5）采用 lazyLoad,使用懒加载
（6）资源合并与压缩

2.纯前端怎么解决跨域(应该是前端解决跨域是没意义的，没意思的那就说说web安全)，

https://segmentfault.com/a/1190000011145364

3.js存储方式cookie/sessionStorage/localStorage/indexedDB区别用法，

参考博客VUE专栏的VUE组件间通信/参数传递
https://blog.csdn.net/SuperxApple/article/details/103513144

4.浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程(三次握手和四次挥手)，

https://blog.csdn.net/weixin_43322208/article/details/89457720

5.rem的原理，

https://www.cnblogs.com/leaf930814/p/9059340.html

6.数组的api以indexOf/includes/filter/has/some/Map/Set/之前的区别，

7.ES6/7/8，

https://blog.csdn.net/SuperxApple/article/details/103522482

8.常见的设计模式有哪些？分别怎么实现，

参考博客JS专栏的JS常见的设计模式及实现
https://blog.csdn.net/SuperxApple/article/details/103513914

9.父组件可以监听到子组件的生命周期吗？(附近几个题答案都在这里)

https://juejin.im/post/5d59f2a451882549be53b170(勿删)

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：
			// Parent.vue
			<Child @mounted="doSomething"/>
			    
			// Child.vue
			mounted() {
			  this.$emit("mounted");
			}
			复制代码以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：
			//  Parent.vue
			<Child @hook:mounted="doSomething" ></Child>
			
			doSomething() {
			   console.log('父组件监听到 mounted 钩子函数 ...');
			},
			    
			//  Child.vue
			mounted(){
			   console.log('子组件触发 mounted 钩子函数 ...');
			},    

10.组件中 data 为什么是一个函数？

11.Vue 组件间通信有哪几种方式？

参考博客VUE专栏的VUE组件间通信/参数传递
https://blog.csdn.net/SuperxApple/article/details/103513144

12.使用过 Vue SSR 吗？说说 SSR？

SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染

13.vue-router 中常用的 hash 和 history 路由模式实现原理吗？

https://www.cnblogs.com/guanm/p/11964600.html

14.Vue 框架怎么实现对象和数组的监听？

如果只是监听数组列表项的增减，直接对数组进行监听就好了
watch:{
data (newVal,oldVal) {

}
}
如果是要对数组列表项的内容是否发生改变做监听，需要加上一个deep:true
data: {
handler(newVal, oldVal) {
console.log(‘深度监听’, newVal, oldVal)
},
deep: true
}

15.Proxy 与 Object.defineProperty 优劣对比，

https://blog.csdn.net/sinat_17775997/article/details/84233822

Proxy 的优势如下:
Proxy 可以直接监听对象而非属性；
Proxy 可以直接监听数组的变化；
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

16.Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？

受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm. $set (object, propertyName, value) 来实现为对象添加响应式属性 在 vue 中是无法检测到根据索引值修改的数据变动的 你可以这样做 // 第一个参数是要修改的数据, 第二个值是修改当前数组的哪一个字段,第三个是要修 改为什么值 // 要修改的数据: 根据索引 值你可以拿到数组中的第 index条数据: this.iptDatas[index] // 前数组的哪一个字段: showAlert// 修改为 true this.$set(this.iptDatas[index], showAlert, true)

17.虚拟 DOM 的优缺点？

https://blog.csdn.net/Charlene_lx/article/details/89677905
缺点:
-首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
优点:
-虚拟DOM具有批处理和高效的Diff算法,最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染,优化性能.
优点：
保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。
缺点:
无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

18.虚拟 DOM 实现原理？

虚拟DOM (虚拟DOM就是真实的JS对象，操作内存中的JS对象比操作真实的DOM速度要快)

真实DOM的浏览器渲染引擎工作流程大致分为5步：创建DOM树–创建stylerules–创建render树–布局–绘制
js操作真实DOM的代价：
举一个例子：在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验

虚拟DOM就是为了解决浏览器性能问题而被设计出来的
如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。
实现虚拟DOM：将一个真实的DOM对象用js来模拟DOM节点来实现虚拟DOM
1.将真实DOM用JS对象来表示
2.将得到的JS对象映射成真实的DOM
3.用Diff算法将所有的更新反应到虚拟DOM上
4.深度遍历DOM将Diff的内容更新进去

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

19.Vue 中的 key 有什么作用？

Key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速

20.对于即将到来的 vue3.0 特性你有什么了解的吗？

https://blog.csdn.net/weixin_33834628/article/details/88004643
https://blog.csdn.net/xllily_11/article/details/88548616

2019/12/16-12/20

https://juejin.im/post/5d124a12f265da1b9163a28d

###(最近几题答案)

1.柯里化函数实现，

https://blog.csdn.net/weixin_34087503/article/details/91385135
函数柯里化，是可以用来慢慢凑齐参数，延迟函数的执行。（先分期交钱，后交货！）
柯里化(currying)就是将使用多个参数的函数转换成一系列使用部分参数的函数的技术。

2.什么是BFC？BFC的布局规则是什么？如何创建BFC？

1，什么是BFC？
1）BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
2）可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流
3）不是所有的元素，模式都能产生BFC 。w3c规范：display属性为block, list-item ,table的元素，会产生BFC。
2，BFC的原理是什么？
1）内部的Box会在垂直方向，一个接一个地放置。
2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4）BFC的区域不会与float box重叠。
5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6）计算BFC的高度时，浮动元素也参与计算
3，如何创建BFC?
1）根元素
2）float属性不为none
3）position不为static和relative
4）overflow不为visible
5）display为inline-block, table-cell, table-caption, flex, inline-flex

3.let、const、var 的区别有哪些？

https://blog.csdn.net/qq_43004614/article/details/90697463
var是ES5提出的，let和const是ES6提出的。
var允许重复声明变量。let和const在同一作用域不允许重复声明变量。
var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。
let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，
var不存在块级作用域。let和const存在块级作用域。
var和let可以修改声明的变量。
const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

4.请实现一个 flattenDeep 函数，把嵌套的数组扁平化

https://blog.csdn.net/Zhangxiaorui_9/article/details/98506427
const arr = [1, 2, [3, 4, [5, 6]]]
console.log(arr.flat(3));

5. JSONP 的原理是什么？

https://blog.csdn.net/hansexploration/article/details/80314948

6. 原型及原型链的理解

https://www.jb51.net/article/105637.htm
在js中，原型也是一个对象，原型的作用就是实现对象的继承
js中所有的对象都存在一个——proto_属性，_
（1）原型
在JavaScript中，原型也是一个对象，原型的作用，则是实现对象的继承。
在js的所有函数对象中，都存在一个属性prototype，该属性对应当前对象的原型。
而所有的JavaScript对象，都存在一个_proto_属性，_proto_属性指向实例对象的构造函数的原型
var p = new Person();
console.log(p._proto === Person.prototype)//true
从上面代码可以看出，p是实例对象，Person是p的构造函数，可以看出来p的_proto_属性指向构造函数Person的原型。
（2）原型链

除开Object的prototype的原型是null以外，所有的对象和原型都有自己的原型，对象的原型指向原型对象。

在层级多的关系中，多个原型层层相连则构成了原型链。

在查找一个对象的属性时，倘若在当前对象找不到该属性，则会沿着原型链一直往上查找，知道找到为止，如果到了原型链顶端，还没找到，则返回undefined。

7. 路由导航钩子（导航守卫）

（1）全局前置守卫 router.beforeEach
（2）全局后置钩子 router.afterEach
（2）在配置路由时在路由中写钩子函数（路由独享的守卫），进入路由beforeEnter钩子函数
（3）组件内的守卫（ beforeRouteEnter，beforeRouteLeave，beforeRouteUpdate ）
beforeEnter函数有三个参数，to是去往哪个界面，from是从哪个界面过来，
next相当于开关是否允许跳转到去的页面

8. Canvas/SVG/WebGL的区别和优劣

（1）canvas
绘制2D位图。
Echarts是基于Canvas技术的可视化工具，底层封装了原生的JavaScript的绘图 API。
canvas里面绘制的图形不能被引擎抓取，canvas中我们绘制图形通常是通过javascript来实现。
（2）svg
绘制2D矢量图。
svg里面的图形可以被引擎抓取，支持事件的绑定，svg更多的是通过标签来实现。
（3）webgl
用3D画位图的api。

9. 实现账号免登录5分钟内，5分钟后过期

https://www.jb51.net/article/146656.htm

10. 事件冒泡、事件捕获的区别

https://www.jb51.net/article/146656.htm
事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击
元素, 哪个元素的 “click” 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发 ，然后再触发
元素的点击事件。
https://blog.csdn.net/zxhj963/article/details/80906967

11. 什么是垃圾回收

Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。

JS中最常见的垃圾回收方式是标记清除。

工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程：

1.垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。

2.去掉环境中的变量以及被环境中的变量引用的变量的标记。

3.再被加上标记的会被视为准备删除的变量。

4.垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

12. AJAX的流程是什么？

第1步：创建XMLHttpRequest对象，也就是创建一个异步调用对象。
第2步：创建一个新的HTTP请求，并指定该HTTP请求的方法、URL以及验证信息。
第3步：设置响应HTTP状态变化的函数。
第4步：发送HTTP请求。
第5步：获取异步调用返回的数据。
第6步：使用javascript和DOM实现局部刷新。
复制代码
var xhr;
if (window.XMLHttpRequest) { // 标准浏览器
xhr = new XMLHttpRequest();
}else { // IE浏览器
xhr = ActiveXObject(‘Microsoft.XMLHTTP’);
}
xhr.open(‘get’,‘api/ajax.php’,true); // 创建HTTP连接
xhr.oreadystatechange = function () { // 响应HTTP状态变化
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
}
}
}

xhr.send(); // 向服务器发送请求

13. 浅谈一下如何避免用户多次点击造成的多次请求(说出多种解决方法)

14. 实现Lazyman

15. 二叉查找树，快速排序的原理

16. 什么是 Event Loop，为什么需要 Event Loop？以及浏览器 Event Loop

https://juejin.im/post/5df631afe51d45581269a7b5
JS事件循环机制https://www.cnblogs.com/yugege/p/9598265.html

17. 箭头函数和普通函数的区别！什么时候不使用箭头函数? 说出三个或更多的例子

18. JS 的提升

19. 解释一下 Object.freeze() 和 const 的区别

20. 前端安全相关(怎么防范)

21. typeof 与 instanceof 区别

22. Vue的 nextTick 原理

https://blog.csdn.net/zhouzuoluo/article/details/84752280?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158728012319724843311737%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.57650%2522%257D&request_id=158728012319724843311737&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v25-1

23. Vue 项目性能优化

https://juejin.im/post/5d548b83f265da03ab42471d
24. https://juejin.im/post/5dcbb828f265da4cf85d84b4#heading-7

###此路径下题目按顺序来