1、js继承的几种方式 优缺点
特别清楚
https://www.cnblogs.com/cjr001/p/7241553.html

2、call apply bind的区别
都是可以使用不在自己作用域的函数，也就是扩大函数的作用域
区别：
call和apply是扩充之后马上就执行，bind是之后执行 返回一个函数
call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。
apply接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。
和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。

3、this对象的指向
this对象总是指向调用它的对象。

4、闭包是什么，好处，坏处
闭包是一个可以访问到局部变量的一个函数，通过这个函数可以在外面访问到另一个函数内部的变量，由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“。
好处：它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。
坏处：
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
实际应用场景：计算f(1)(2)(6) = 9需要的吧
网上的有点看不懂？
https://www.cnblogs.com/xdouby/p/6421936.html

5、强制转换和隐式转换的区别
强制转换就是各种基本类型之间的转换，(parseInt parseFloat Number)
隐式转换就是在操作的时候（+ - ==)等转换成同一种类型 方便计算

6、数组的迭代方法五六种
every() some() filter() map() foreach();reduce();
https://www.cnblogs.com/qiaoyun/p/7601172.html

7、promise对象的用法

image.png

8、事件流 事件冒泡和捕获 事件代理的几种方式
事件冒泡是从子元素到父元素
事件捕获是从父元素到子元素
防止冒泡和捕获：
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true；
阻止事件默认行为：
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
事件代理：
把事件绑定在元素的父元素上，多个元素都能对应 还方便管理。
9、 javascript的本地对象，内置对象和宿主对象
https://blog.csdn.net/weiyastory/article/details/52837466

10、正则表达式
https://www.cnblogs.com/Hcjer/p/5254362.html

11、解释清楚 null 和 undefined
null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
还有取一个对象没有的属性会得到undefined

12、原型链的指向
三角关系 省略， 最后Object.prototype是一个对象(就是上面的一些常用的方法啥的那个对象) 这个对象的prototype是null

13、几大常用算法写出来 以及时间复杂度和空间复杂度
https://blog.csdn.net/a3192048/article/details/80269862

14、js深拷贝
①、首推的方法简单有效，JSON.stringfy()和JSON.parse()即可搞定。但是这种简单粗暴的方法有其局限性。当值为undefined、function、symbol 会在转换过程中被忽略。。。所以，对象值有这三种的话用这种方法会导致属性丢失。
②、

function deepCopy(obj) {
      var result = Array.isArray(obj) ? [] : {};
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === 'object') {
            result[key] = deepCopy(obj[key]);   //递归复制
          } else {
            result[key] = obj[key];
          }
        }
      }
      return result;
    }

15、创建对象的时候的new关键词经过哪些步骤
①、创建一个空对象
②、新对象的proto属性指向构造函数的原型对象
③、将构造函数的作用域赋给新对象（this对象指向新对象）
④、执行构造函数内部的代码，将属性添加给新创建的对象。
⑤、返回新对象

16、es6的箭头函数
https://www.jianshu.com/p/e3af91d61102

17、JavaScript的基本规范（减少全局污染 变量提升等）
https://blog.csdn.net/sinat_36841379/article/details/69831202

18、JavaScript异步加载方式
①、在html5中，script新增了async的属性，script添加了该属性之后，下载脚本时将可以与页面其他内容并行下载，但是该属性必须在ie9以上的浏览器中才可以使用，并且只能用于加载外部js脚本。
②、同样，在html4中也有一个defer属性，该属性的兼容性更好一点，但是与async一样，可以让js脚本实现异步加载，同样只能用于加载外部js脚本。
asyc与defer属性的不同点是，async会让脚本在加载完可用时立即执行，而defer脚本则会在dom加载完毕后执行，defer脚本的执行会在window.onload之前，其他没有添加defer属性的script标签之后。显示顺序：normal defer window.onload
③、利用XHR异步加载js内容并执行
④、动态创建script标签
https://www.cnblogs.com/Belial1209/p/5894600.html

19、rem布局的原理
根元素的font-size 来根据屏幕的大小而变化 1rem根元素的px，这样就在不同的屏幕下显示的大小不一样
①、网易用的 自己计算根元素的font-size的值，然后赋值到根元素上面，假如根元素为100px的时候

 document.documentElement.style.fontSize =document.documentElement.clientWidth / （设计稿宽度/100） + ‘px’

②、引入淘宝的flexible
https://segmentfault.com/a/1190000007526917

20、函数执行顺序
同步>异步>回调
怎么区分异步和回调？不太明白？
https://www.jianshu.com/p/c19b348e6608

21、操作DOM为什么会消耗性能
①、会穿越层层的DOM树
②、浏览器的重绘和重排
重绘：就是指页面某些部分需要重新绘制，由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，而元素的位置和尺寸并没有改变。
重排：元素的位置或尺寸发生了改变，浏览器需 要重新计算渲染树，导致渲染树的一部分或全部发生变化。渲染树重新建立后，浏览器会重新绘制页面上受影响的元素。
也就是说，重排，改变的是dom文档的结构，例如dom元素的位置或者尺寸发生了变化，需要重新布局，就会发生重排。

22、浏览器优化性能的办法
1、资源压缩合并，减少http请求
2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别
3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理 缓存是所有性能优化的方式中最重要的一步
4、使用CDN
5、减少浏览器DOM的访问
6、按需加载 比如图片的懒加载。

23、定义变量的几种方式的区别 （var let const）

24、for...in和for...of的区别
25、es6熟练吗？
26、浏览器执行的顺序和机制
浏览器都是从上到下执行的，onLoad事件是最后所有js以及文档加载完之后才执行的

浏览器页面的渲染流程
 经过以上的学习，我们可以清楚浏览器的渲染过程了：
 1. 解析html得到DOM树
 2. 解析css得到CSS树
 3. 合并得到render树
 4. 布局，当页面有元素的尺寸、大小、隐藏有变化或增加、删除元素时，重新布局计算，并修改页面中所有受影响的部分
 5. 绘制，当页面有元素的外观发生变化时，重新绘制
 6. GUI线程将得到的各层的位图（每个元素对应一个普通图层）发送给Browser进程，由Browser进程将各层合并，渲染在页面上
css的堵塞情况
 首先，是在Browser进程中下载css文件，当下载完成后，发送给GUI线程。
 其次，是在GUI线程中解析html及css，不过这两者是并行的。
 由于css的下载和解析不会影响DOM树，所以不会堵塞html文件的解析，但会堵塞页面渲染。
 这样的设计是非常合理的，如果css文件的下载和解析不会堵塞页面渲染，那么在页面渲染的途中或结束后发现元素样式有变化，则又需要回流和重绘。
js的堵塞情况
 明确的是，js文件的下载和解析执行都会堵塞html文件的解析及页面渲染。
 因为js脚本可能会改变DOM结构，若是其不堵塞html文件的解析及页面渲染的话，那么当js脚本改变DOM结构或元素样式时，会引发回流和重绘，会造成不必要的性能浪费，不如等待js执行完，在进行html解析和页面渲染。
 如果你不想js堵塞的话，则使用async属性，这样就可以异步加载js文件，加载完成后立即执行。
事件循环机制
宏任务和微任务
宏任务（macrotask）：
 - 主代码块和任务队列中的回调函数就是宏任务。
 - 为了使js内部宏任务和DOM任务能够有序的执行，每次执行完宏任务后，会在下一个宏任务执行之前，对页面重新进行渲染。（宏任务 -> 渲染 -> 宏任务）
微任务（microtask）：
 - 在宏任务执行过程中，执行到微任务时，将微任务放入微任务队列中。
 - 在宏任务执行完后，在重新渲染之前执行。
 - 当一个宏任务执行完后，他会将产生的所有微任务执行完。
分别在什么场景下会产生宏任务或微任务呢：
宏任务：主代码块，setTimeout，setInterval（任务队列中的所有回调函数都是宏任务）
微任务：Promise

27、输入URL到返回页面经历了哪些步骤
①通过DNS服务器查找域名IP地址 返回给电脑
②服务器和客户端进行建立TCP连接
③浏览器发送http请求
④服务器响应请求 并返回结果
⑥四次挥手关闭TCP连接
⑦浏览器绘制页面
扩充：
DNS服务器查找方式
递归查询
---当局部DNS服务器自己不能回答客户机的DNS查询时，它就需要向其他DNS服务器进行查询。局部DNS服务器自己负责向其他DNS服务器进行查询，一般是先向该域名的根域服务器查询，再由根域名服务器一级级向下查询。最后得到的查询结果返回给局部DNS服务器，再由局部DNS服务器返回给客户端。
迭代查询
---当局部DNS服务器自己不能回答客户机的DNS查询时，也可以通过迭代查询的方式进行解析，局部DNS服务器不是自己向其他DNS服务器进行查询，而是把能解析该域名的其他DNS服务器的IP地址返回给客户端DNS程序，客户端DNS程序再继续向这些DNS服务器进行查询，直到得到查询结果为止。也就是说，迭代解析只是帮你找到相关的服务器而已，而不会帮你去查。
TCP三次握手
在网上看的比较好的图

三次握手过程

四次挥手

28、+号是 拼接还是运算符。
看了一篇文章 没怎么懂 感觉很全 先放着吧 等真面试再理解
https://www.cnblogs.com/MasterYao/p/7783004.html

29、绑定事件的几种方式，哪些能重复绑定事件 哪些会覆盖事件
在DOM元素中直接绑定；
<input type=’button’ onclick=’display()’ />：在JavaScript代码中绑定；
dom对象.事件 = 事件的处理程序（通常是一个匿名函数：onclick只能绑定一个函数 后面的函数会覆盖前面的 如果想绑定多个事件 则需要使用attachEvent方法绑定多个
绑定事件监听函数：addEventListener 可以绑定多个函数

30、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示
31、瀑布流
这个文章写得很好 试了一下挺好的
https://segmentfault.com/a/1190000012621936#comment-area

32、BOM对象有哪些，列举window对象的常用方法？

image.png

document:关于文档的一些方法
location：对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
navigation:对象提供了与浏览器有关的信息。userAgent是最常用的属性，用来完成浏览器判断。
creen:主要用来获取用户的屏幕信息
history :对象包含浏览器的历史。

33、去掉一个数组的重复元素的几种方法
①：遍历数组：使用indexOf方法
②：排序后相邻去除法
③：es6数据Set数据结构去重
34、如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
判断是数组类型：
a:JS的isArray方法 b：instanceof instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型 c: Object.prototype.toString.call()该方法可以很好地区分各种类型，甚至是 null 和 undefined , 除了自定义对象类型 d: constructor:和instanceof原理差不多。 let arr=[1,2,4];
判断number类型：
a:Object.prototype.toString.call()
alert(arr.constructor===Array); // true
b:typeof
35、懒加载，预加载，原理和区别
懒加载就是按需加载，对没有看见的内容需要的时候再加载
预加载就是提前加载，相当于不是首屏需要展示得时候提前加载，需要的时候直接从本地读取https://blog.csdn.net/AHRL__/article/details/80207605

36、js 模块化开发，require和import的区别
https://www.cnblogs.com/sunshq/p/7922182.html

37、cookie/locastorage/sessionstorage区别
https://www.cnblogs.com/pengc/p/8714475.html

38、对象转基本类型：
首先会调用valueOf 然后调用 toString 。 （或者重写 Symbol.toPrimitive ，该方法在转基本类型时调用优先级最高。）
39、js实现上拉加载，下拉刷新
40、什么是函数的抖动和节流？
去抖就是在结束执行这个操作的n秒后采取执行函数 典型例子：resize和搜索输入联想
节流就是在规定的时间内执行一次 ，比如下拉的时候每过100ms执行一次函数 例子：scroll tochmove 比如画画
https://blog.csdn.net/duola8789/article/details/78871789

41、toString和的的的valueOf有什么区别？
共同点：在的的JavaScript中，的的toString（）方法和的的valueOf（）方法，在输出对象时会自动调用。
不同点：二者并存的情况下，在数值运算中，优先调用了的的的valueOf，字符串运算中，优先调用了的的的toString。
用法英语谚语详细看这篇文章：HTTPS：//blog.csdn.net/Web_J/article/details/84106129
42、浏览器中哪些事件冒泡，哪些不冒泡？
https://segmentfault.com/q/1010000000687977

43、xss和csrf的区别 怎么防范
xss跨站脚本攻击:在网站中可以输入和嵌入的地方嵌入恶意JS代码，用户输入的代码会被执行。比如我们打开网站中旁边的一些小广告 就是XSS插入的
防范方法就是对用户输入或者嵌入的内容进行过滤，防止直接插入页面
csrf跨站请求攻击：点击虚假链接 借用用户之手点击购物占便宜链接 ，实际则是进入需要攻击的页面 页面以为正常 从而进行操作
防范方式：token放在请求头中 根据浏览器请求中的refer字段判断是否是本页面进来的 不是则不予处理。
44、跨域是什么？解决跨域的方法：
浏览器同源策略，
域名相同, 协议相同, 端口号相同
浏览器只能访问当前域名下的资源 注意：一级域名相同，二级域名不相同也是不能互相访问的例如：a.baidu.com和b.baidu.com不可直接访问
解决策略：
jsonp
iframe跨域
html5中的postMessage（）方法
服务器代理
设置cors
①、JSONP：用于解决主流浏览器的跨域数据访问的问题

 function findWeather () {
       var city = document.getElementById('city').value;
       var src = "http://api.jisuapi.com/weather/query?appkey=21f4782df8c57e19&city=" + city + "&callback=getData";
       addScriptTag(src);
  }
  function getData (data) {
      console.log(data);
  }
  function addScriptTag(src){
      var script = document.createElement('script');
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
 }

然后再服务端调用这个callback把数据当成参数传过来，这边接受就好
②iframe方式：这种方法用于主域名相同而父域名不同的情况

   //http://www.a.com/a.html
   document.domain = 'a.com';
   var ifr = document.createElement('iframe');
   ifr.src = 'http://script.a.com/b.html';
   ifr.style.display = 'none';
   document.boody.appendChild(ifr);
   ifr.onload = function(){
       var doc = ifr.contentDocument || ifr.contentWindow.document;
       console.log(doc);//获取到的页面数据

就是在a页面引入b页面，不显示 就可以访问里面的数据
③postMessage()
postMessage（）允许来自不同源的脚本采用异步方式进行通信，可以实现跨域消息传递。
postMessage（data，origin）
data：要传递的数据
origin：指明目标窗口的源。协议主机端口号
接收消息：监听window的message事件，包括
data——传递过来的message
source——发送消息的窗口对象
origin——发送消息窗口的源
④服务器代理
相当于在后端将我们想要的数据获取下来至代理服务器上，然后传给前端，因为http请求是在服务器端进行的而服务端是不受同源策略的限制的
⑤设置cors
在服务端利用Access-Control-Allow-Origin响应头解决。
设置Access-Control-Allow-Origin：*，允许所有域名的脚本访问该资源。
设置Access-Control-Allow-Origin：…允许特定域名访问。

缺点
JSONP只能使用get
iframe只能用于同一主域名下的不同域名
cors兼容性不好 不支持老式浏览器，这时可用JSONP

45、 for in和for of怎么用 有什么区别

for in是用来遍历对象的属性的（一般不用来遍历数组 ）
for of是用来迭代数据的

image.png

for in不能保证以特定的顺序返回可枚举属性
for of 和iterator对应 ，凡是有iterator的属性都可以用for of 来迭代
原生具备 Iterator 接口的数据结构如下。
Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

除此之外，其他数据结构（主要是对象）的 Iterator 接口，都需要自己在Symbol.iterator属性上面部署，这样才会被for...of循环遍历。
对象（Object）之所以没有默认部署 Iterator 接口，是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定
有些数据结构是在现有数据结构的基础上，计算生成的。比如，ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象。

entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map 结构的 Iterator 接口，默认就是调用entries方法。
keys() 返回一个遍历器对象，用来遍历所有的键名。
values() 返回一个遍历器对象，用来遍历所有的键值。
这三个方法调用后生成的遍历器对象，所遍历的都是计算生成的数据结构。

image.png