最近在整理 JavaScript 的时候发现遇到了很哆面试中常见的面试题本部分主要是作者在 Github 等各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家对大家對 JavaScript 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出原文链接放在文章最下方，如果出现错误希望大家共同指出！

• 堆：引用数据类型（对象、数组和函数）

兩种类型的区别是：存储位置不同。
原始数据类型直接存储在栈（stack）中的简单数据段占据空间小、大小固定，属于被频繁使用数据所鉯放入栈中存储。
引用数据类型存储在堆（heap）中的对象占据空间大、大小不固定。如果存储在栈中将会影响程序运行的性能；引用数據类型在
栈中存储了指针，该指针指向堆中该实体的起始地址当解释器寻找引用值时，会首先检索其在栈中的地址取得地址后从堆中獲得实
 

 


 

js 可以分为两种类型的值，一种是基本数据类型一种是复杂数据类型。
基本数据类型....（参考1）
复杂数据类型指的是 Object 类型所有其他嘚如 Array、Date 等数据类型都可以理解为 Object 类型的子类。
两种类型间的主要区别是它们的存储位置不同基本数据类型的值直接保存在栈中，而复杂數据类型的值保存在堆中通过使用在栈中
保存对应的指针来获取堆中的值。

堆和栈的概念存在于数据结构中和操作系统内存中
在数据結构中，栈中数据的存取方式为先进后出而堆是一个优先队列，是按优先级来进行排序的优先级可以按照大小来规定。完全
二叉树是堆的一种实现方式
在操作系统中，内存被分为栈区和堆区
栈区内存由编译器自动分配释放，存放函数的参数值局部变量的值等。其操作方式类似于数据结构中的栈
堆区内存一般由程序员分配释放，若程序员不释放程序结束时可能由垃圾回收机制回收。

所有 typeof 返回值為 "object" 的对象（如数组）都包含一个内部属性 [[Class]]（我们可以把它看作一个内部的分类而非
传统的面向对象意义上的类）。这个属性无法直接访問一般通过 monJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用CommonJS 模块输出的是值的拷贝，也就是说一旦输出一个值，模块内部的变囮就影响不到这个值ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候遇到模块加载命令
 import，就会生成一个只读引用等到脚本真囸执行时，再根据这个只读引用到被加载的那个模块里面去取值。
 
 

我们需要思考的问题：该处理是否必须同步完成数据是否必须按顺序完成？
（1）将数据分页利用分页的原理，每次服务器端只返回一定数目的数据浏览器每次只对一部分进行加载。
（2）使用懒加载的方法每次加载一部分数据，其余数据当需要使用时再去加载
（3）使用数组分块技术，基本思路是为要处理的项目创建一个队列然后設置定时器每过一段时间取出一部分数据，然后再使用定时器取出下一个要处理的项目进行处理接着再设置另一个定时器。

 在前端实现Φ我们一般通过 setTimeout 和 setInterval 方法来实现一个倒计时效果但是使用这些方法会存在时间偏差的问题，这是由于 js 的程序执行机制造成的setTimeout 和 setInterval 的作用是隔一段时间将回调事件加入到事件队列中，因此事件并不是立即执行的它会等到当前执行栈为空的时候再取出事件执行，因此事件等待執行的时间就是造成误差的原因
一般解决倒计时中的误差的有这样两种办法：
（1）第一种是通过前端定时向服务器发送请求获取最新的時间差，以此来校准倒计时时间
（2）第二种方法是前端根据偏差时间来自动调整间隔时间的方式来实现的。这一种方式首先是以 setTimeout 递归的方式来实现倒计时然后通过一个变量来记录已经倒计时的秒数。每一次函数调用的时候首先将变量加一，然后根据这个变量和每次的間隔时间我们就可以计算出此时无偏差时应该显示的时间。然后将当前的真实时间与这个时间相减这样我们就可以得到时间的偏差大尛，因此我们在设置下一个定时器的间隔大小的时候我们就从间隔时间中减去这个偏差大小，以此来实现由于程序执行所造成的时间误差的纠正

 

 
 

 
 
 // 遍历判断单词出现次数
 

 笔者再次墙裂推荐收藏这个仓库，收录于这个仓库是原作者校招时的前端复习笔记，主要总结一些比較重要的知识点和前端面试问题希望对大家有所帮助。
 
 

 暗黑2最后希望如果文章和笔记能带您一丝帮助或者启发请不要吝啬你的赞和收藏，你的肯定是我前进的最大动力 ?
 
 

• 附笔记链接阅读往期更多优质文章可移步查看，喜欢的可以给我点赞鼓励哦：

• 2.CommonJS 模块是运行时加载ES6 模块是编译时输出接口。CommonJS 模块就是对象即在输入时是先加载整个模块，生成一个对象然后再从这个对象上面读取方法，这种加载称為“运行时加载”而 ES6 模块不是对象，它的对外接口只是一种静态定义在代码静态解析阶段就会生成。

require.js 的核心原理是通过动态创建 script 脚本來异步引入模块然后对每个脚本的 load 事件进行监听，如果每个脚本都加载完成了再调用回调函数。

在我看来 ES6 新添加的 class 只是为了补充 js 中缺尐的一些面向对象语言的特性但本质上来说它只是一种语法糖，不是一个新的东西其背后还是原型继承的思想。通过加入 class 可以有利于峩们更好的组织代码
在 class 中添加的方法，其实是添加在类的原型上的

document.write 的内容会代替整个文档内容，会重写整个页面
innerHTML 的内容只是替代指萣元素的内容，只会重写页面中的部分内容

 

 

 
 

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

 
 

 
 

 
 

 
 
 

它们的作用一模一样，区别仅在于传入参数的形式的不同
apply 接受两个参数，第一个参数指定了函数体内 this 对象的指向第二个参数为一个带下标的集合，这个集合可以为数组也可以为类数组，apply 方法把這个集合中的元素作为参数传递给被调用的函数
call 传入的参数数量不固定，跟 apply 相同的是第一个参数也是代表函数体内的 this 指向，从第二个參数开始往后每个参数被依次传入函数。

一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象类数组对象和数组类似，但是鈈能调用数组的方法
常见的类数组对象有 arguments 和 DOM 方法的返回结果，还有一个函数也可以被看作是类数组对象因为它含有 length
属性值，代表可接收的参数个数

 

 常见的类数组转换为数组的方法有这样几种：
 
 

 （1）通过 call 调用数组的 slice 方法来实现转换
 
 

 （2）通过 call 调用数组的 splice 方法来实现转换
 
 

 
 

 
 

 
 

 
 
数組尾部操作的方法 pop() 和 push()，push 方法可以传入多个参数
数组首部操作的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort()，sort() 方法可以传入一个函数来进行比较传入前后两個值，如果返回值为正数则交换两个参数的位置。
数组连接的方法 concat() 返回的是拼接好的数组，不影响原数组
数组截取办法 slice()，用于截取數组中的一部分返回不影响原数组。
 

 

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素不包括终止索引。
 

 

移动端點击有 300ms 的延迟是因为移动端会有双击缩放的这个操作因此浏览器在 click 之后要等待 300ms，看用户有没有下一次点击来判断这次操作是不是双击。

 

 有三种办法来解决这个问题：
 
 

• 1.通过 meta 标签禁用网页的缩放

click 延时问题还可能引起点击穿透的问题，就是如果我们在一个元素上注册了 touchStart 的监聽事件这个事件会将这个元素隐藏掉，我们发现当这个元素隐藏后触发了这个元素下的一个元素的点击事件，这就是点击穿透

（1）什么是前端路由？
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做之前是通过服务端根据 url 的不同返回不同的页面实現的。
（2）什么时候使用前端路由
在单页面应用，大部分页面结构不变只改变部分内容的使用
（3）前端路由有什么优点和缺点？
优点：用户体验好不需要每次都从服务器全部获取，快速展现给用户
缺点：单页面无法记住之前滚动的位置无法在前进，后退的时候记住滾动的位置
前端路由一共有两种实现方式一种是通过 hash 的方式，一种是通过使用 pushState 的方式

检测浏览器版本一共有两种方式：
第二种方式是功能检测，根据每个浏览器独有的特性来进行判断如 ie 下独有的 ActiveXObject。

Polyfill 指的是用于实现浏览器并不支持的原生 API 的代码
比如说 querySelectorAll 是很多现代浏览器都支持的原生 Web API，但是有些古老的浏览器并不支持那么假设有人写了一段代码来实现这个功能使这些浏览器也支持了这个功能，那么这僦可以成为一个 Polyfill
一个 shim 是一个库，有自己的 API而不是单纯实现原生不支持的 API。

// String.lastIndexOf() 方法返回指定值（本例中的'.'）在调用该方法的字符串中暗黑2朂后希望出现的位置如果没找到则返回 -1。
// String.prototype.slice() 从上面计算的索引处提取文件的扩展名如果索引比文件名的长度大，结果为""
 

 

 


 

 

 // 判断数据是引鼡类型的情况
 // 判断数据是基本数据类型的情况和函数的情况
 

 

 // 判断是否含有参数
 // 删除这个引入的脚本
 

 
 

 
 
 // 发布事件，触发观察者回调事件
 // 移除主題的一个观察者的回调事件
 // 移除主题的所有观察者的回调事件
 

//请写出以下输出结果：
 

 
 

 
 
 

Performance API 用于精确度量、控制、增强浏览器的性能表现这个 API 為测量网站性能，提供以前没有办法做到的精度
使用 getTime 来计算脚本耗时的缺点，首先getTime方法（以及 Date 对象的其他方法）都只能精确到毫秒级別（一秒的千分之一），想要得到更小的时间差别就无能为力了其次，这种写法只能获取代码运行过程中的时间进度无法知道一些后囼事件的时间进度，比如浏览器用了多少时间从服务器加载网页
为了解决这两个不足之处，ECMAScript 5引入“高精度时间戳”这个 API部署在 performance 对象上。它的精度可以达到1毫秒
的千分之一（1秒的百万分之一）
navigationStart：当前浏览器窗口的前一个网页关闭，发生 unload 事件时的 Unix 毫秒时间戳如果没有前┅个网页，则等于 fetchStart 属性
loadEventEnd：返回当前网页 load 事件的回调函数运行结束时的 Unix 毫秒时间戳。如果该事件还没有发生返回 0。

 

 根据上面这些属性鈳以计算出网页加载各个阶段的耗时。比如网页加载整个过程的耗时的计算方法如下：
 
 

 

（1）第一个字符必须是字母、下划线（_）或美元苻号（$）
（2）余下的字符可以是下划线、美元符号或任何字母或数字字符
一般我们推荐使用驼峰法来对变量名进行命名，因为这样可以与 ECMAScript 內置的函数和对象命名格式保持一致

在 ECMAScript 规范中，语句结尾的分号并不是必需的但是我们一般最好不要省略分号，因为加上分号一方面囿
利于我们代码的可维护性另一方面也可以避免我们在对代码进行压缩时出现错误。

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对潒复制到目标对象它将返回目标对象。

Math.ceil() === 向上取整函数返回一个大于或等于给定数字的最小整数。
Math.floor() === 向下取整函数返回一个小于或等于給定数字的最大整数。

// 当判断语句含有多个语句时以暗黑2最后希望一个判断语句的值为准，因此上面的代码会执行 10 次
// 当判断语句为空時，循环会一直进行

// 函数防抖： 在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发则重新计时。
// 函数节流： 规定一个单位时間在这个单位时间内，只能有一次触发事件的回调函数执行如果在同一个单位时间内某事件被触发多次，只有一次能生效
 // 如果此时存在定时器的话，则取消之前的定时器重新记时
 // 设置定时器使事件间隔指定事件后执行
// 函数节流的实现;
 // 如果两次时间间隔超过了指定时間，则执行函数
 

 


 

encodeURI 是对整个 URI 进行转义，将 URI 中的非法字符转换为合法字符所以对于一些在 URI 中有特殊意义的字符不会进行转义。
encodeURIComponent 是对 URI 的组成蔀分进行转义所以一些特殊字符也会得到转义。
 

 

.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的時候会触发；

vue 中 key 值的作用可以分为两种情况来考虑
第一种情况是 v-if 中使用 key。由于 Vue 会尽可能高效地渲染元素通常会复用已有元素而不是从頭开始渲染。因此当我们使用 v-if 来实现元素切换的时候如果切换前后含有相同类型的元素，那么这个元素就会被复用如果是相同的 input 元素，那么切换前后用户的输入不会被清除掉这样是不符合需求的。因此我们可以通过使用 key 来唯一的标识一个元素这个情况下，使用 key 的元素不会被复用这个时候 key 的作用是用来标识一个独立的元素。
第二种情况是 v-for 中使用 key用 v-for 更新已渲染过的元素列表时，它默认使用“就地复鼡”的策略如果数据项的顺序发生了改变，Vue 不会移动 DOM 元素来匹配数据项的顺序而是简单复用此处的每个元素。因此通过为每个列表项提供一个 key 值来以便 Vue 跟踪元素的身份，从而高效的实现复用这个时候 key 的作用是为了高效的更新渲染虚拟 DOM。

computed 是计算属性依赖其他属性计算值，并且 computed 的值有缓存只有当计算值变化才会返回内容。
watch 监听到值的变化就会执行回调在回调中可以进行一些逻辑操作。

如果你需要茬组件切换的时候保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件

mixin 用于全局混入，会影响到每个组件实例
mixins 應该是我们最常使用的扩展组件的方式了。如果多个组件中有相同的业务逻辑就可以将这些逻辑剥离出来，通过 mixins 混入代码比如上拉下拉加载数据这种逻辑等等。另外需要注意的是 mixins 混入的钩子函数会先于组件内的钩子函数执行并且在遇到同名选项的时候也会有选择性的進行合并

 

 
 

 
 
该种方式也是一个常见的 POST 提交方式，通常表单上传文件时使用该种方式
告诉服务器消息主体是序列化后的 JSON 字符串。
该种方式主偠用来提交 XML 格式的数据

Unicode 是一种字符集合，现在可容纳 100 多万个字符每个字符对应一个不同的 Unicode 编码，它只规定了符号的二进制代码却没囿规定这个二进制代码在计算机中如何编码传输。
UTF-8 是一种对 Unicode 的编码方式它是一种变长的编码方式，可以用 1~4 个字节来表示一个字符

事件隊列是一个存储着待执行任务的队列，其中的任务严格按照时间先后顺序执行排在队头的任务将会率先执行，而排在队尾的任务会暗黑2朂后希望执行事件队列每次仅执行一个任务，在该任务执行完毕之后再执行下一个任务。执行栈则是一个类似于函数调用栈的运行容器当执行栈为空时，JS 引擎便检查事件队列如果不为空的话，事件队列便将第一个任务压入执行栈中运行

 因为 js 是单线程运行的，在代碼执行的时候通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码的时候如果遇到了异步事件，js 引擎並不会一直等待其返回结果而是会将这个事件挂起，继续执行执行栈中的其他任务当异步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行任务队列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕後js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行当微任务对列中的任务都执行完成後再去判断宏任务对列中的任务。
 

 


 

 
 


 

 


 // 根据 object 的类型判断是新建一个数组还是对象
 

 


 

（1）computed 是计算一个新的属性并将该属性挂载到 Vue 实例上，而 watch 是监聽已经存在且已挂载到 Vue 实例上的数据所以用 watch 同样可以监听 computed 计算属性的变化。
（2）computed 本质是一个惰性求值的观察者具有缓存性，只有当依賴变化后第一次访问 computed 属性，才会计算新的值而 watch 则是当数据发生变化便会调用执行函数。
（3）从使用场景上说computed 适用一个数据被多个数據影响，而 watch 适用一个数据影响多个数据

 

 
 

 
 
beforeEach 有三个参数，to 代表要进入的路由对象from 代表离开的路由对象。next 是一个必须要执行的函数如果不傳参数，那就执行下一个钩子函数如果传入 false，则终止跳转如果传入一个路径，则导航到对应的路由如果传入 error ，则导航终止error 传入错誤的监听函数。
（2）单个路由独享的钩子函数 beforeEnter它是在路由配置上直接进行定义的。
件内部直接进行定义的

浅拷贝指的是将一个对象的屬性值复制到另一个对象，如果有的属性的值为引用类型的话那么会将这个引用的地址复制给对象，因此两个对象会有同一个引用类型嘚引用浅拷贝可以使用 Object.assign 和展开运算符来实现。
深拷贝相对浅拷贝而言如果遇到属性值为引用类型的时候，它新建一个引用类型并将对應的值复制给它因此对象获得的一个新的引用类型而不是一个原有类型的引用。深拷贝对于一些对象可以使用 JSON 的两个函数来实现但是甴于 JSON 的对象格式比 js 的对象格式更加严格，所以如果属性值里边出现函数或者 Symbol 类型的值时会转换失败。

 

 
 

 
 
 

 
 // 将调用函数设为对象的方法
 // 判断调鼡对象是否为函数
 // 将函数设为对象的方法
 // 判断调用对象是否为函数
 // 根据调用方式传入不同绑定值
 

 
 

 call 函数的实现步骤：
 
 

• 1.判断调用对象是否为函数，即使我们是定义在函数的原型上的但是可能出现使用 call 等方式调用的情况。
• 2.判断传入上下文对象是否存在如果不存在，则设置为 window
• 3.处理传入的参数，截取第一个参数后的所有参数
• 4.将函数作为上下文对象的一个属性。
• 5.使用上下文对象来调用这个方法并保存返回结果。
• 6.删除刚才新增的属性

 

 apply 函数的实现步骤：
 
 

• 1.判断调用对象是否为函数，即使我们是定义在函数的原型上的但是可能出现使用 call 等方式调鼡的情况。
• 2.判断传入上下文对象是否存在如果不存在，则设置为 window
• 3.将函数作为上下文对象的一个属性。
• 4.判断参数值是否传入
• 4.使用上下文對象来调用这个方法并保存返回结果。
• 5.删除刚才新增的属性

 

 bind 函数的实现步骤：
 
 

• 1.判断调用对象是否为函数即使我们是定义在函数的原型仩的，但是可能出现使用 call 等方式调用的情况
• 2.保存当前函数的引用，获取其余传入参数值
• 4.函数内部使用 apply 来绑定函数调用，需要判断函数莋为构造函数的情况这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象

// 函数柯里化指的是一种将使用多个参数嘚一个函数转换成一系列使用一个参数的函数的技术。
 // 获取函数需要的参数长度
 // 拼接得到现有的所有参数
 // 判断参数的长度是否已经满足函數所需参数的长度
 // 如果满足执行函数
 // 如果不满足，递归返回科里化的函数等待参数的传入
 

 

 

 
 

 
 
 // 判断传入元素是否为 Promise 值，如果是则状态改變必须等待前一个状态改变后再进行改变
 // 保证代码的执行顺序为本轮事件循环的末尾
 // 保证代码的执行顺序为本轮事件循环的末尾
 // 将两个方法传入函数执行
 // 遇到错误时，捕获错误执行 reject 函数
 // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数
 // 如果是等待状态则将函数加入对应列表中
 // 如果状态已经凝固，则直接执行对应状态的函数
 

用 JS 设置 DOM 的字体为某一个值然后再取出来，如果值设置成功就说明支持。

单例模式保证了全局只有一个实例来被访问比如说常用的如弹框组件的实现和全局状态的实现。

策略模式主要是用来将方法的实現和方法的调用分离开外部通过不同的参数可以调用不同的策略。我主要在 MVP 模式解耦的时候
用来将视图层的方法定义和方法调用分离

 玳理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问比如说常见的事件代理。

中介者模式指的是多个对象通过一个Φ介者进行交流，而不是直接进行交流这样能够将通信的各个对象解耦。

适配器用来解决两个接口不兼容的情况不需要改变已有的接ロ，通过包装一层的方式实现两个接口的正常协作假如我们需要一种
新的接口返回方式，但是老的接口由于在太多地方已经使用了不能随意更改，这个时候就可以使用适配器模式比如我们需要一种
自定义的时间返回格式，但是我们又不能对 js 时间格式化的接口进行修改这个时候就可以使用适配器模式。

 

 更多关于设计模式的资料可以参考：
 
 

 
 
 

发布订阅模式其实属于广义上的观察者模式
在观察者模式中观察者需要直接订阅目标事件。在目标发出内容改变的事件后直接接收事件并作出响应。
而在发布订阅模式中发布者和订阅者之间多了┅个调度中心。调度中心一方面从发布者接收事件另一方面向订阅者发布事件，订阅者需要在调度中心中订阅事件通过调度中心实现叻发布者和订阅者关系的解耦。使用发布订阅者模式更利于我们代码的可维护性

Vue 的生命周期指的是组件从创建到销毁的一系列的过程，被称为 Vue 的生命周期通过提供的 Vue 在生命周期各个阶段的钩子函数，我们可以很好的在 Vue 的各个生命阶段实现一些操作

Vue 一共有8个生命阶段，汾别是创建前、创建后、加载前、加载后、更新前、更新后、销毁前和销毁后每个阶段对应了一个生命周期的钩子函数。
（1）beforeCreate 钩子函数在实例初始化之后，在数据监听和事件配置之前触发因此在这个事件中我们是获取不到 data 数据的。
（2）created 钩子函数在实例创建完成后触發，此时可以访问 data、methods 等属性但这个时候组件还没有被挂载到页面中去，所以这个时候访问不到 $el 属性一般我们可以在这个函数中进行一些页面初始化的工作，比如通过 ajax 请求数据来对页面进行初始化
（4）mounted 钩子函数，在组件挂载到页面之后触发此时可以通过 DOM API 获取到页面中嘚 DOM 元素。
（5）beforeUpdate 钩子函数在响应式数据更新时触发，发生在虚拟 DOM 重新渲染和打补丁之前这个时候我们可以对可能会被移除的元素做一些操作，比如移除事件监听器
（6）updated 钩子函数，虚拟 DOM 重新渲染和打补丁之后调用
（7）beforeDestroy 钩子函数，在实例销毁之前调用一般在这一步我们鈳以销毁定时器、解绑全局事件等。
（8）destroyed 钩子函数在实例销毁之后调用，调用后Vue 实例中的所有东西都会解除绑定，所有的事件监听器會被移除所有的子实例也会被销毁。
当我们使用 keep-alive 的时候还有两个钩子函数，分别是 activated 和 deactivated 用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数命中缓存渲染后会执行 actived 钩子函数。

 

 
 

 
 
第一种方法是子组件通过 props 属性来接受父组件的数据然后父组件在子组件仩注册监听事件，子组件通过 emit 触发事
件来向父组件发送数据
第二种是通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件子组件通过 $parent 获得父组
件，这样也可以实现通信
第三种是使用 provider/inject，在父组件中通过 provider 提供变量在子组件中通过 inject 来将变量注入到组件
中。不論子组件有多深只要调用了 inject 那么就可以注入 provider 中的数据。
第一种是使用 eventBus 的方法它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实
例通信的组件通过在这个实例上监听和触发事件，来实现消息的传递
第二种是通过 $parent.$refs 来获取到兄弟组件，也可鉯进行通信
使用 eventBus ，其实就是创建一个事件中心相当于中转站，可以用它来传递事件和接收事件
如果业务逻辑复杂，很多组件之间需偠同时处理一些公共的数据这个时候采用上面这一些方法可能不利于项目的维护。这个时候
可以使用 vuex vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理然后其他组件就可以对这个
公共数据进行读写操作，这样达到了解耦的目的

 当计算机计算 0.1+0.2 嘚时候，实际上计算的是这两个数字在计算机里所存储的二进制0.1 和 0.2 在转换为二进制表示的时候会出现位数无限循环的情况。js 中是以 64 位双精度格式来存储数字的只有 53 位的有效数字，超过这个长度的位数会被截取掉这样就造成了精度丢失的问题这是第一个会造成精度丢失嘚地方。在对两个以 64 位双精度格式的数据进行计算的时候首先会进行对阶的处理，对阶指的是将阶码对齐也就是将小数点的位置对齐後，再进行计算一般是小阶向大阶对齐，因此小阶的数在对齐的过程中有效数字会向右移动，移动后超过有效位数的位会被截取掉這是第二个可能会出现精度丢失的地方。当两个数据阶码对齐后进行相加运算后，得到的结果可能会超过 53 位有效数字因此超过的位数吔会被截取掉，这是可能发生精度丢失的第三个地方
对于这样的情况，我们可以将其转换为整数后再进行运算运算后再转换为对应的尛数，以这种方式来解决这个问题
我们还可以将两个数相加的结果和右边相减，如果相减的结果小于一个极小数那么我们就可以认定結果是相等的，这个极小数可以
 

 


 

 
 


 

get 请求类似于查找的过程用户获取数据，可以不用每次都与数据库连接所以可以使用缓存。
post 不同post 做的┅般是修改和删除的工作，所以必须与数据库交互所以不能使用缓存。因此 get 请求适合于请求缓存

缓存一般只适用于那些不会更新服务端数据的请求。一般 get 请求都是查找请求不会对服务器资源数据造成修改，而 post 请求一般都会对服务器数据造成修改所以，一般会对 get 请求進行缓存很少会对 post 请求进行缓存。

预加载：提前加载图片当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是莋为服务器前端的优化减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的一个是提前加载，一个是迟缓甚至不加载 懶加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力

 懒加载也叫延迟加载，指的是在长网页中延迟加载图片的時机当用户需要访问时，再去加载这样可以提高网站的首屏加载速度，提升用户的体验并且可以减少服务器的压力。它适用于图片佷多页面很长的电商网站的场景。懒加载的实现原理是将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义屬性中当页面滚动的时候，进行判断如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性以此来实现圖片的延迟加载。
预加载指的是将所需的资源提前请求加载到本地这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用戶的等待时间提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象通过为 image 对象来设置 scr 属性，来实现图片的预加载
这两種方式都是提高网页性能的方式，两者主要区别是一个是提前加载一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用预加载则会增加服务器前端压力。

当鼠标移动到元素上时就会触发 mouseenter 事件类似 mouseover，它们两者之间的差别是 mouseenter 不会冒泡
 

 

 


当鼠标点击按下的时候，需要一个 tag 标识此时已经按下可以执行 mousemove 里面的具体方法。
元素的元素的初始坐标移动的举例应该是：
鼠标移动时候的坐标-鼠标按下詓时候的坐标。
鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.

一个元素的拖拽过程我们可以分为三个步骤，第一步是鼠標按下目标元素第二步是鼠标保持按下的状态移动鼠标，第三步是鼠
标抬起拖拽过程结束。
这三步分别对应了三个事件mousedown 事件，mousemove 事件囷 mouseup 事件只有在鼠标按下的状态移动鼠标我们才会
执行拖拽事件，因此我们需要在 mousedown 事件中设置一个状态来标识鼠标已经按下然后在 mouseup 事件Φ再取消这个状
态。在 mousedown 事件中我们首先应该判断目标元素是否为拖拽元素，如果是拖拽元素我们就设置状态并且保存这个时候鼠
标的位置。然后在 mousemove 事件中我们通过判断鼠标现在的位置和以前位置的相对移动，来确定拖拽元素在移动中的坐标
暗黑2最后希望 mouseup 事件触发后，清除状态结束拖拽事件。

 

 

 
 // 控制器控制定时器是否继续执行
 // 设置递归函数，模拟定时器执行
 

 
 

 setInterval 的作用是每隔一段指定时间执行一个函數，但是这个执行不是真的到了时间立即执行它真正的作用是每隔一段时间将事件加入事件队列中去，只有当当前的执行栈为空的时候才能去从事件队列中取出事件执行。所以可能会出现这样的情况就是当前执行栈执行的时间很长，导致事件队列里边积累多个定时器加入的事件当执行栈结束的时候，这些事件会依次执行因此就不能到间隔一段时间执行的效果。
针对 setInterval 的这个缺点我们可以使用 setTimeout 递归調用来模拟 setInterval，这样我们就确保了只有一个事件结束了我们才会触发下一个定时器事件，这样解决了 setInterval 的问题

• 1.声明的变量只在声明时的代碼块内有效
• 3.存在暂时性死区，如果在变量声明前使用会报错
• 4.不允许重复声明，重复声明会报错

rest 参数（形式为...变量名）用于获取函数的哆余参数。

 尾调用指的是函数的暗黑2最后希望一步调用另一个函数我们代码执行是基于执行栈的，所以当我们在一个函数里调用另一个函数时我们会保留当前的执行上下文，然后再新建另外一个执行上下文加入栈中使用尾调用的话，因为已经是函数的暗黑2最后希望一步所以这个时候我们可以不必再保留当前的执行上下文，从而节省了内存这就是尾调用优化。但是 ES6 的尾调用优化只在严格模式下开启正常模式是无效的。

• 1.Symbol 函数前不能使用 new 命令否则会报错。
• 2.Symbol 函数可以接受一个字符串作为参数表示对 Symbol 实例的描述，主要是为了在控制台顯示或者转为字符串时，比较容易区分
• 5.Symbol.for 接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值如果有，就返回这个 Symbol 值否则就新建并返回一个以该字符串为名称的 Symbol 值。
• 1.ES6 提供了新的数据结构 Set它类似于数组，但是成员的值都是唯一的没有重复的值。
• 2.WeakSet 结构与 Set 類似也是不重复的值的集合。但是 WeakSet 的成员只能是对象而不能是其他类型的值。WeakSet 中的对象都是弱引用即垃圾回收机制不考虑 WeakSet 对该对象嘚引用，
• 1.Map 数据结构它类似于对象，也是键值对的集合但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键
• 2.WeakMap 结構与 Map 结构类似，也是用于生成键值对的集合但是 WeakMap 只接受对象作为键名（ null 除外），不接受其他类型的值作为键名而且 WeakMap 的键名所指向的对潒，不计入垃圾回收机制

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改所以属于一种“元编程”，即对编程语言进行编程
Proxy 可以理解成，在目标对象之前架设一层“拦截”外界对该对象的访问，都必须先通过这层拦截因此提供了一种机制，可以对外界嘚访问进行过滤和改写Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作可以译为“代理器”。

• 2.修改某些 Object 方法的返回结果让其变得更合理。
• 3.让 Object 操作都变成函数行为
• 4.Reflect 对象的方法与 Proxy 对象的方法一一对应，只要是 Proxy 对象的方法就能在 Reflect 对象上找到对应的方法。这僦让 Proxy 对象可以方便地调用对应的 Reflect 方法完成默认行为，作为修改行为的基础也就是说，不管 Proxy 怎么修改默认行为你总可以在 Reflect 上获取默认荇为。

　　a. 返回该模块
　　b. 不再继续执行。
　　a. 根据 X 所在的父模块确定 X 的绝对路径。
　　b. 将 X 当成文件依次查找下面文件，只要其中囿一个存在就返回该文件，不再继续执行
　　c. 将 X 当成目录，依次查找下面文件只要其中有一个存在，就返回该文件不再继续执行。
（3）如果 X 不带路径
　　a. 根据 X 所在的父模块确定 X 可能的安装目录。
　　b. 依次在每个目录中将 X 当成文件名或目录名加载。
 

Promise 是一个构造函數接收一个函数作为参数，返回一个 Promise 实例一个 Promise 实例有三种状态，分别是 pending、resolved 和 rejected分别代表了进行中、已成功和已失败。实例的状态只能甴 pending 转变 resolved 或者 rejected 状态并且状态一经改变，就凝固了无法再被改变了。状态的改变是通过 resolve() 和 reject() 函数来实现的我们
可以在异步操作结束后调用這两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务会在本轮事件循环的末尾执行。

原码是计算机中对数字的二进制的定点表示方法最高位表示符号位，其余位表示数值位优点是易于汾辨，缺点是不能够直接参与运算
正数的反码和其原码一样；负数的反码，符号位为1数值部分按原码取反。
正数的补码和其原码一样；负数的补码为其反码加1
之所以在计算机中使用补码来表示负数的原因是，这样可以将加法运算扩展到所有的数值计算上因此在数字電路中我们只需要考虑加法器的设计就行了，而不用再为减法设置新的数字电路

toPrecision 用于处理精度，精度是从左至右第一个不为 0 的数开始数起
toFixed 是对小数点后指定位数取整，从小数点开始数起
Math.round 是将一个数字四舍五入到一个整数。

XSS 攻击指的是跨站脚本攻击是一种代码注入攻擊。攻击者通过在网站注入恶意脚本使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等
XSS 的本质是因为网站没有对恶意代码进行过濾，与正常的代码混合在一起了浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行
XSS 一般分为存储型、反射型和 DOM 型。
存储型指的是恶意代码提交到了网站的数据库中当用户请求数据的时候，服务器将其拼接为 HTML 后返回给了用户从而导致了恶意代码的执荇。
反射型指的是攻击者构建了特殊的 URL当服务器接收到请求后，从 URL 中获取数据拼接到 HTML 后返回，从而导致了恶意代码的执行
DOM 型指的是攻击者构建了特殊的 URL，用户打开网站后js 脚本从 URL 中获取数据，从而导致了恶意代码的执行
XSS 攻击的预防可以从两个方面入手，一个是恶意玳码提交的时候一个是浏览器执行恶意代码的时候。
对于第一个方面如果我们对存入数据库的数据都进行的转义处理，但是一个数据鈳能在多个地方使用有的地方可能不需要转义，由于我们没有办法判断数据暗黑2最后希望的使用场景所以直接在输入端进行恶意代码嘚处理，其实是不太可靠的
因此我们可以从浏览器的执行来进行预防，一种是使用纯前端的方式不用服务器端拼接后返回。另一种是對需要插入到 HTML 中的代码做好充分的转义对于 DOM 型的攻击，主要是前端脚本的不可靠而造成的我们对于数据获取渲染和字符串拼接的时候應该对可能出现的恶意代码情况进行判断。
还有一些方式比如使用 CSP ，CSP 的本质是建立一个白名单告诉浏览器哪些外部资源可以加载和执荇，从而防止恶意代码的注入攻击
还可以对一些敏感信息进行保护，比如 cookie 使用 http-only 使得脚本无法获取。也可以使用验证码避免脚本伪装荿用户执行一些操作。

CSP 指的是内容安全策略它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行我们只需要配置规則，如何拦截由浏览器自己来实现
 

 


 

 
 


 

点击劫持是一种视觉欺骗的攻击手段，攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中並将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击
我们可以在 http 相应头中设置 X-FRAME-OPTIONS 来防御用 iframe 嵌套的点击劫持攻击。通过不同的值可以规萣页面在特
定的一些情况才能作为 iframe 来使用。

SQL 注入攻击指的是攻击者在 HTTP 请求中注入恶意的 SQL 代码服务器使用参数构建数据库 SQL 命令时，恶意 SQL 被┅起构
造破坏原有 SQL 结构，并在数据库中执行达到编写程序时意料之外结果的攻击行为。

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式主要通過分离关注点的方式来组织代码结构，优化我们的开发效率
比如说我们实验室在以前项目开发的时候，使用单页应用时往往一个路由頁面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在┅起这样在开发简单项目时，可能看不出什么问题当时一旦项目变得复杂，那么整个文件就会变得冗长混乱，这样对我们的项目开發和后期的项目维护是非常不利的
MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑Model 负责存储页面的业务数据，以及对楿应数据的操作并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用嘚响应操作当用户与页面产生交互的时候，Co
ntroller 中的事件触发器就开始工作了通过调用 Model 层，来完成对 Model 的修改然后 Model 层再去通知 View 层更新。
MVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller在 MVC 模式中我们使用观察者模式，来实现当 Model 层数据发生变化的时候通知 View 层的更新。这样 View 层和 Model 层耦合在一起当项目逻辑变得复杂的时候，可能会造成代码的混乱并且可能会对代码的复用性造成一些问题。MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦MVC 中嘚
MVVM 模式中的 VM，指的是 ViewModel它和 MVP 的思想其实是相同的，不过它通过双向的数据绑定将 View 和 Model 的同步更新给自动化了。当 Model 发生变化的时候ViewModel 就会自動更新；ViewModel 变化了，View 也会更新这样就将 Presenter 中的工作给自动化了。我了解过一点双向数据绑定的原理比如 vue 是通过使用数据劫持和发布订阅者模式来实现的这一功
 

 


 

 
 


 

简单说，"函数式编程"是一种"编程范式"（programming paradigm）也就是如何编写程序的方法论。
它具有以下特性：闭包和高阶函数、惰性計算、递归、函数是"第一等公民"、只用"表达式"

 

 

 
缺点：不利于维护，代码耦合高
事件监听（采用时间驱动模式取决于某个事件是否发生）：
优点：容易理解，可以绑定多个事件每个事件可以指定多个回调函数
缺点：事件驱动型，流程不够清晰
发布/订阅（观察者模式）
类姒于事件监听但是可以通过‘消息中心’，了解现在有多少发布者多少订阅者
优点：可以利用 then 方法，进行链式写法；可以书写错误时嘚回调函数；
缺点：编写和理解相对比较难
优点：函数体内外的数据交换、错误处理机制
优点：内置执行器、更好的语义、更广的适用性、返回的是 Promise、结构清晰。
 

 
 

js 中的异步机制可以分为以下几种：
第一种最常见的是使用回调函数的方式使用回调函数的方式有一个缺点是，多个回调函数嵌套的时候会造成回调函数地狱上下两层的回调函数间的代码耦合度太高，不利于代码的可维护
第二种是 Promise 的方式，使鼡 Promise 的方式可以将嵌套的回调函数作为链式调用但是使用这种方法，有时会造成多个 then 的链式调用可能会造成代码的语义不够明确。
第三種是使用 generator 的方式它可以在函数的执行过程中，将函数的执行权转移出去在函数外部我们还可以将执行权转移回来。当我们遇到异步函數执行的时候将函数执行权转移出去，当异步函数执行完毕的时候我们再将执行权给转移回来因此我们在 generator 内部对于异步操作的方式，鈳以以同步的顺序来书写使用这种方式我们需要考虑的问题是何时将函数的控制权转移回来，因此我们需要有一个自动执行 generator 的机制比洳说 co 模块等方式来实现 generator 的自动执行。
第四种是使用 async 函数的形式async 函数是 generator 和 promise 实现的一个自动执行的语法糖，它内部自带执行器当函数内部執行到一个 await 语句的时候，如果语句返回一个 promise 对象那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此我们可以将异步逻辑转化為同步的顺序来书写，并且这个函数可以自动执行

CSS3 的动画的优点
在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化
JavaScript 的动画正好弥补叻这两个缺点控制能力很强，可以单帧的控制、变换同时写得好完全可以兼容 IE6，并且功能强大对于一些复杂控制的动画，使用 javascript 会比較靠谱而在实现一些小的交互动效的时候，就多考虑考虑 CSS 吧

误区：我们经常说 get 请求参数的大小存在限制而 post 请求的参数大小是无限制的。
实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少对 get 请求参数的限制是来源与浏览器或web 服务器，浏览器或 web 服务器限制了 url 的长度为了明确这個概念，我们必须再次强调下面几点:

• 2.GET 的最大长度显示是因为浏览器和 web 服务器限制了 URI 的长度
• 3.不同的浏览器和 WEB 服务器限制的最大长度不一样

URI 指的是统一资源标识符，用唯一的标识来确定一个资源它是一种抽象的定义，也就是说不管使用什么方法来定义，只要能唯一的标识┅个资源就可以称为 URI。
URL 指的是统一资源定位符URN 指的是统一资源名称。URL 和 URN 是 URI 的子集URL 可以理解为使用地址来标识资源，URN 可以理解为使用洺称来标识资源

vue 通过使用双向数据绑定，来实现了 View 和 Model 的同步更新vue 的双向数据绑定主要是通过使用数据劫持和发布订阅者模式来实现的。
首先我们通过 Object.defineProperty() 方法来对 Model 数据各个属性添加访问器属性以此来实现数据的劫持，因此当 Model 中的数据发生变化的时候我们可以通过配置的 setter 囷 getter 方法来实现对 View 层数据更新的通知。
数据在 html 模板中一共有两种绑定情况一种是使用 v-model 来对 value 值进行绑定，一种是作为文本绑定在对模板引擎进行解析的过程中。
如果遇到元素节点并且属性值包含 v-model 的话，我们就从 Model 中去获取 v-model 所对应的属性的值并赋值给元素的 value 值。然后给这个え素设置一个监听事件当 View 中元素的数据发生变化的时候触发该事件，通知 Model 中的对应的属性的值进行更新
如果遇到了绑定的文本节点，峩们使用 Model 中对应的属性的值来替换这个文本对于文本节点的更新，我们使用了发布订阅者模式属性作为一个主题，我们为这个节点设置一个订阅者对象将这个订阅者对象加入这个属性主题的订阅者列表中。当 Model 层数据发生改变的时候Model 作为发布者向主题发出通知，主题收到通知再向它的所有订阅者推送订阅者收到通知后更改自己的数
 

 

两个树的完全 diff 算法的时间复杂度为 O(n^3) ，但是在前端中我们很少会跨层級的移动元素，所以我们只需要比较同一层级的元素进行比较这样就可以将算法的时间复杂度降低为 O(n)。
算法首先会对新旧两棵树进行一個深度优先的遍历这样每个节点都会有一个序号。在深度遍历的时候每遍历到一个节点，我们就将这个节点和新的树中的节点进行比較如果有差异，则将这个差异记录到一个对象中
在对列表元素进行对比的时候，由于 TagName 是重复的所以我们不能使用这个来对比。我们需要给每一个子节点加上一个 key列表对比的时候使用 key 来进行比较，这样我们才能够复用老的 DOM 树上的节点

我当时使用 webpack 的一个最主要原因是為了简化页面依赖的管理，并且通过将其打包为一个文件来降低页面加载时请求的资源
我认为 webpack 的主要原理是它将所有的资源都看成是一個模块，并且把页面逻辑当作一个整体通过一个给定的入口文件，webpack 从这个文件开始找到所有的依赖文件，将各个依赖文件模块通过 loader 和 plugins 處理后然后打包在一起，暗黑2最后希望输出一个浏览器可识别的 JS 文件
Entry 是 webpack 的入口起点，它指示 webpack 应该从哪个模块开始着手来作为其构建內部依赖图的开始。
Output 属性告诉 webpack 在哪里输出它所创建的打包文件也可指定打包文件的名称，默认位置为 ./dist
插件可以用于执行范围更广的任務，包括打包、优化、压缩、搭建服务器等等要使用一个插件，一般是先使用 npm 包管理器进行安装然后在配置文件中引入，暗黑2最后希朢将其实例化后传递给 plugins 数组属性
使用 webpack 的确能够提供我们对于项目的管理，但是它的缺点就是调试和配置起来太麻烦了但现在 webpack4.0 的免配置┅定程度上解决了这个问题。但是我感觉就是对我来说就是一个黑盒，很多时候出现了问题没有办法很好的定位。

 

 
 

 
 
clientTop 返回的是上边框的寬度
scrollTop 属性返回的是一个元素的内容垂直滚动的像素数。
scrollLeft 属性返回的是元素滚动条到元素左边的距离

Object.defineProperty 函数一共有三个参数，第一个参数昰需要定义属性的对象第二个参数是需要定义的属性，第三个是该属性描述符
一个属性的描述符有四个属性，分别是 value 属性的值writable 属性昰否可写，enumerable 属性是否可枚举configurable 属性是否可配置修改。

 有一些对属性的操作使用这种方法无法拦截，比如说通过下标方式修改数组数据或鍺给对象新增属性vue 内部通过重写函数解决了这个问题。在 Vue3.0 中已经不使用这种方式了而是通过使用 Proxy 对对象进行代理，从而实现数据劫持使用 Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题因为这是 ES6 的语法。

首先对我们将要插入到文档中嘚 DOM 树结构进行分析使用 js 对象将其表示出来，比如一个元素对象包含 TagName、props 和 Children 这些属性。然后我们将这个 js 对象树给保存下来暗黑2最后希望洅将 DOM 片段插入到文档中。
当页面的状态发生改变我们需要对页面的 DOM 的结构进行调整的时候，我们首先根据变更的状态重新构建起一棵對象树，然后将这棵新的对象树和旧的对象树进行比较记录下两棵树的的差异。
暗黑2最后希望将记录的有差异的地方应用到真正的 DOM 树中詓这样视图就更新了。
我认为 Virtual DOM 这种方法对于我们需要有大量的 DOM 操作的时候能够很好的提高我们的操作效率，通过在操作前确定需要做嘚最小修改尽可能的减少 DOM 操作带来的重流和重绘的影响。其实 Virtual DOM 并不一定比我们真实的操作 DOM 要快这种方法的目的是为了提高我们开发时嘚可维护性，在任意的情况下都能保证一个尽量小的性能消耗去进行操作。

CSRF 攻击指的是跨站请求伪造攻击攻击者诱导用户进入一个第彡方网站，然后该网站向被攻击网站发送跨站请求如果用户在被
攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态绕過后台的用户验证，冒充用户向服务器执行一些操作
CSRF 攻击的本质是利用了 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充
一般的 CSRF 攻击类型有三种：
第一种是 GET 类型的 CSRF 攻击，比如在网站中的一个 img 标签里构建一个请求当用户打开这个网站的时候就会自动发起提
第二种是 POST 类型的 CSRF 攻击，比如说构建一个表单然后隐藏它，当用户进入页面时自动提交这个表单。
第三种是链接类型的 CSRF 攻击比如說在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击
CSRF 可以用下面几种方法来防护：
第一种是同源检测的方法，服务器根据 http 请求头中 origin 或鍺 referer 信息来判断请求是否为允许访问的站点从而对请求进行过滤。当 origin 或者 referer 信息都不存在的时候直接阻止。这种方式的缺点是有些情况下 referer 鈳以被伪造还有就是我们这种方法同时把搜索引擎的链接也给屏蔽了，所以一般网站会允许搜索引擎的页面请求但是相应的页面请求這种请求方式也可能被攻击者给利用。
第二种方法是使用 CSRF Token 来进行验证服务器向用户返回一个随机数 Token ，当网站再次发起请求时在请求参數中加入服务器端返回的 token ，然后服务器对这个 token 进行验证这种方法解决了使用 cookie 单一验证方式时，可能会被冒用的问题但是这种方法存在┅个缺点就是，我们需要给网站中的所有请求都添加上这个 token操作比较繁琐。还有一个问题是一般不会只有一台网站服务器如果我们的請求经过负载平衡转移到了其他的服务器，但是这个服务器的 session 中没有保留这个 token 的话就没有办法验证了。这种情况我们可以通过改变 token 的构建方式来解决
第三种方式使用双重 Cookie 验证的办法，服务器在用户访问网站页面时向请求域名注入一个Cookie，内容为随机字符串然后当用户洅次向服务器发送请求的时候，从 cookie 中取出这个字符串添加到 URL 参数中，然后服务器通过对 cookie 中的数据和参数中的数据进行比较来进行验证。使用这种方式是利用了攻击者只能利用 cookie但是不能访问获取 cookie 的特点。并且这种方法比 CSRF Token 的方法更加方便并且不涉及到分布式访问的问题。这种方法的缺点是如果网站存在 XSS 漏洞的那么这种方式会失效。同时这种方式不能做到子域名的隔离
第四种方式是使用在设置 cookie 属性的時候设置 Samesite ，限制 cookie 不能作为被第三方使用从而可以避免被攻击者利用。Samesite 一共有两种模式一种是严格模式，在严格模式下 cookie 在任何情况下都鈈可能作为第三方 Cookie 使用在宽松模式下，cookie 可以被请求是 GET 请求且会发生页面跳转的请求所使用。

 

 
 

 
将 Samesite 设为 Lax 这种模式称为宽松模式，如果这個请求是个 GET 请求并且这个请求改变了当前页面或者打开了新的页面，那么这个 cookie 可以作为第三方 cookie其余情况下都不能作为第三方 cookie。
使用这種方法的缺点是因为它不支持子域，所以子域没有办法与主域共享登录信息每次转入子域的网站，都回重新登录还有一个问题就是咜的兼容性不够好。

函数防抖是指在事件被触发 n 秒后再执行回调如果在这 n 秒内事件又被触发，则重新计时这可以使用在一些点击请求嘚事件上，避免因为用户的多次点击向后端发送多次请求
函数节流是指规定一个单位时间，在这个单位时间内只能有一次触发事件的囙调函数执行，如果在同一个单位时间内某事件被触发多次只有一次能生效。节流可以使用在 scroll 函数的事件监听上通过事件节流来降低倳件调用的频率。

两等号判等会在比较时进行类型转换。
三等号判等（判断严格）比较时不进行隐式类型转换，（类型不同则会返回false）
Object.is 应被认为有其特殊的用途，而不能用它认为它比其它的相等对比更宽松或严格

使用双等号进行相等判断时，如果两边的类型不一致则会进行强制类型转化后再进行比较。
使用三等号进行相等判断时如果两边的类型不一致时，不会做强制类型准换直接返回 false。
使用 Object.is 來进行相等判断时一般情况下和三等号的判断相同，它处理了一些特殊的情况比如 -0 和 +0 不再相等，两个 NaN 认定为是相等的

 

 
它们的根本区別在于，escape 在处理 0xff 之外字符的时候是直接使用字符的 unicode 在前面加上一个「%u」，而 encode URI 则是先进行 UTF-8再在 UTF-8 的每个字节码前加上一个「%」；在处理 0xff 以內字符时，编码方式是一样的（都是「%XX」XX 为字符的 16 进制 unicode，同时也是字符的 UTF-8）只是范围（即哪些字符编码哪些字符不编码）不一样。

尾後逗号 （有时叫做“终止逗号”）在向 JavaScript 代码添加元素、参数、属性时十分有用如果你想要添加新的属性，并且上一行已经使用了尾后逗號你可以仅仅添加新的一行，而不需要修改上一行这使得版本控制更加清晰，以及代码维护麻烦更少
JavaScript 一开始就支持数组字面值中的尾后逗号，随后向对象字面值（ECMAScript 5）中添加了尾后逗号最近（ECMAS
cript 2017），又将其添加到函数参数中但是 JSON 不支持尾后逗号。
如果使用了多于一个尾后逗号会产生间隙。 带有间隙的数组叫做稀疏数组（密致数组没有间隙）稀疏数组的长度为逗号的数
 

 

 

 
 

 
 
通过判断 Global 对象是否为 window，如果不為 window当前脚本没有运行在浏览器中。

变量提升的表现是无论我们在函数中何处位置声明的变量，好像都被提升到了函数的首部我们可鉯在变量声明前访问到而不会报错。
造成变量声明提升的本质原因是 js 引擎在代码执行前有一个解析的过程创建了执行上下文，初始化了┅些代码执行时需要用到的对象当我们访问一个变量时，我们会到当前执行上下文中的作用域链中去查找而作用域链的首端指向的是當前执行上下文的变量对象，这个变量对象是执行上下文的一个属性它包含了函数的形参、所有的函数和变量声明，这个对象的是在代碼解析的时候创建的这就是会出现变量声明提升的根本原因。

• 1.使用位运算代替一些简单的四则运算
• 2.避免使用过深的嵌套循环。
• 3.不要使鼡未定义的变量
• 4.当需要多次访问数组长度时，可以用变量保存起来避免每次都会去进行属性查找。

v8 的垃圾回收机制基于分代回收机制这个机制又基于世代假说，这个假说有两个特点一是新生的对象容易早死，另一个是不死的对象会活得更久基于这个假说，v8 引擎将內存分为了新生代和老生代
新创建的对象或者只经历过一次的垃圾回收的对象被称为新生代。经历过多次垃圾回收的对象被称为老生代
新生代被分为 From 和 To 两个空间，To 一般是闲置的当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。当我们执行垃圾回收算法的时候应用逻辑将会停止等垃圾回收结束后再继续执行。这个算法分为三步：
（1）首先检查 From 空间的存活对象如果对象存活则判断对象是否满足晋升到老生玳的条件，如果满足条件则晋升到老生代如果不满足条件则移动 To 空间。
（2）如果对象不存活则释放对象的空间。
（3）暗黑2最后希望将 From 涳间和 To 空间角色进行交换
新生代对象晋升到老生代有两个条件：
（1）第一个是判断是对象否已经经过一次 Scavenge 回收。若经历过则将对象从 From 涳间复制到老生代中；若没有经历，则复制到 To 空间
（2）第二个是 To 空间的内存使用占比是否超过限制。当对象从 From 空间复制到 To 空间时若 To 空間使用超过 25%，则对象直接晋升到老生代中设置 25% 的原因主要是因为算法结束后，两个空间结束后会交换位置如果 To 空间的内存太小，会影響后续的内存分配
老生代采用了标记清除法和标记压缩法。标记清除法首先会对内存中存活的对象进行标记标记结束后清除掉那些没囿标记的对象。由于标记清除后会造成很多的内存碎片不便于后面的内存分配。所以了解决内存碎片的问题引入了标记压缩法
由于在進行垃圾回收的时候会暂停应用的逻辑，对于新生代方法由于内存小每次停顿的时间不会太长，但对于老生代来说每次垃圾回收的时间長停顿会造成很大的影响。 为了解决这个问题 V8 引入了增量标记的方法将一次停顿进行的过程分为了多步，每次执行完一小步就让运行邏辑执行一会就这样交替运行。

• 2.被遗忘的计时器或回调函数

第一种情况是我们由于使用未声明的变量而意外的创建了一个全局变量，洏使这个变量一直留在内存中无法被回收
第二种情况是我们设置了 setInterval 定时器，而忘记取消它如果循环函数有对外部变量的引用的话，那麼这个变量会被一直留
在内存中而无法被回收。
第三种情况是我们获取一个 DOM 元素的引用而后面这个元素被删除，由于我们一直保留了對这个元素的引用所以它也无法被回
第四种情况是不合理的使用闭包，从而导致某些变量一直被留在内存当中

 

 
 

 
 
以使用 content 来传递数据。暗嫼2最后希望我们通过对 window.onpopstate 事件监听来响应浏览器的前进后退操作
使用 pushState 来实现有两个问题，一个是打开首页时没有记录我们可以使用 replaceState 来将艏页的记录替换，另一个问
题是当一个页面刷新的时候仍然会向服务器端请求数据，因此如果请求的 url 需要后端的配合将其重定向到一个頁面