前端面试题（四）

一、简单介绍下CDN的用途和原理？

在cdn中实现原理是：给源站域名添加CNMAE,别名为加速节点的域名。当用户向源站发起请求时，dns服务器解析源站域名时会发现有CNMAE记录，这时dns服务器会向CNAME域名发起请求，请求会被调度至加速节点的域名。

二、说下你对浏览器缓存的理解？

• 强缓存
  用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。

• 协商缓存
  用户发送的请求，发送到服务器后，由服务器判定是否从缓存中获取资源。

  两者共同点：客户端获得的数据最后都是从客户端缓存中获得。
  两者的区别：从名字就可以看出，强缓存不与服务器交互，而协商缓存则需要与服务器交互。

  from disk cache
  从磁盘中获取缓存资源，等待下次访问时不需要重新下载资源，而直接从磁盘中获取。它的直接操作对象为CurlCacheManager。

  from memory cache
  从内存中获取资源，等待下次访问时不需要重新下载资源，而直接从内存中获取。Webkit早已支持memoryCache。
  目前Webkit资源分成两类，一类是主资源，比如HTML页面，或者下载项，一类是派生资源，比如HTML页面中内嵌的图片或者脚本链接，分别对应代码中两个类：MainResourceLoader和SubresourceLoader。虽然Webkit支持memoryCache，但是也只是针对派生资源，它对应的类为achedResource，用于保存原始数据（比如CSS，JS等），以及解码过的图片数据。

  区别
  当退出进程时，内存中的数据会被清空，而磁盘的数据不会，所以，当下次再进入该进程时，该进程仍可以从diskCache中获得数据，而memoryCache则不行。

  相似
  diskCache与memoryCache相似之处就是也只能存储一些派生类资源文件。它的存储形式为一个index.dat文件，记录存储数据的url，然后再分别存储该url的response信息和content内容。Response信息最大作用就是用于判断服务器上该url的content内容是否被修改。

三、js有哪些判断数组的方法，请分别介绍他们的区别和优劣？

1. instanceof
   instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
   使用 instanceof判断一个对象是否为数组，instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型，找到返回 true，否则返回 false。
   [] instanceof Array; // true
   优点：instanceof可以弥补Object.prototype.toString.call()不能判断自定义实例化对象的缺点。
   缺点： instanceof 只能用来判断对象类型，原始类型不可以。并且所有对象类型 instanceof Object 都是 true，且不同于其他两种方法的是它不能检测出iframes。

2. constructor

   let arr= [1,2]
   arr.constructor === Array //true
   

3. Object.prototype.toString.call()
   优点：这种方法对于所有基本的数据类型都能进行判断，即使是 null和defined,且和下面的Array.isArray方法一样都能检测出 iframes；
   缺点：不能精准判断自定义对象，对于自定义对象只会返回[object Object]

   Object.prototype.toString.call([1, 2, 3]); // “[object Array]”
   Object.prototype.toString.call('An') // "[object String]"
   Object.prototype.toString.call(1) // "[object Number]"
   Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
   Object.prototype.toString.call(null) // "[object Null]"
   Object.prototype.toString.call(undefined) // "[object Undefined]"
   Object.prototype.toString.call(function(){}) // "[object Function]"
   Object.prototype.toString.call({name: 'An'}) // "[object Object]"
   Object.prototype.toString.call() // 常用于判断浏览器内置对象时。
   

4. Array.isArray()
   优点：当检测Array实例时，Array.isArray 优于 instanceof ，因为 Array.isArray 和Object.prototype.toString.call可以检测出 iframes，而instanceof不能
   缺点：只能判别数组

四、实现数组扁平化？

例如：给定的两个数组为[1, [2, 3], [[4], 5]], 函数返回[1, 2, 3, 4, 5]
答案：数组扁平化代码实现

五、vue父子组件生命周期的执行顺序？

答案：

父组件的beforeCreate     
父组件的created
父组件的beforeMount
子组件的beforeCreate     
子组件的created
子组件的beforeMount
子组件的mounted
父组件的mounted

六、防抖和截流？

[防抖节流代码实现]
https://blog.csdn.net/weixin_46531935/article/details/104858799