前端面试题小结

以下内容为近期面试前端的小结。

1、vue和react的区别

2、vue双向数据绑定

3、组件间通信

vue组件间通信的6种方式

4、对事件轮询eventLoop的理解

一次 Eventloop 循环会处理一个宏任务和所有这次循环中产生的微任务。

• JavaScript 引擎首先从宏任务队列（macrotask queue）中取出第一个任务；
• 执行完毕后，再将微任务（microtask queue）中的所有任务取出，按照顺序分别全部执行（这里包括不仅指开始执行时队列里的微任务），如果在这一步过程中产生新的微任务，也需要执行；
• 然后再从宏任务队列中取下一个，执行完毕后，再次将 microtask queue 中的全部取出，循环往复，直到两个 queue 中的任务都取完。

5、js节流与防抖

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

//防抖debounce代码：
function debounce(fn,delay) {
    var timeout = null; // 创建一个标记用来存放定时器的返回值
    return function (e) {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 
        // 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 处理函数
function handle() {
    console.log('防抖：', Math.random());
}
        
//滚动事件
window.addEventListener('scroll', debounce(handle,500));

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

//节流throttle代码：
function throttle(fn,delay) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
        // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
 
function sayHi(e) {
    console.log('节流：', e.target.innerWidth, e.target.innerHeight);
}

window.addEventListener('resize', throttle(sayHi,500));

6、JSON.stringify第二个参数(k,v){}

语法为：语法为：JSON.stringify(value[, replacer [, space]])

value：第一个参数传入的是要转换的对象；
replacer：提供可选的 reviver 函数，用在返回之前对所得到的对象执行变换操作；
space：第三个参数用来控制结果字符串里面的间距；

第二个和第三个参数不常用，第二个参数需要注意数据类型的判断与边界条件。

7、如何对循环引用对象进行深拷贝

8、三级缓存（不缓存、强缓存、协商缓存）的使用场景

强缓存总结

cache-control: max-age=xxxx，public
客户端和代理服务器都可以缓存该资源；
客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，如果用户做了刷新操作，就向服务器发起http请求

cache-control: max-age=xxxx，private
只让客户端可以缓存该资源；代理服务器不缓存
客户端在xxx秒内直接读取缓存,statu code:200

cache-control: max-age=xxxx，immutable
客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求

cache-control: no-cache
跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的，设置了no-cache就不会走强缓存了，每次请求都回询问服务端。

cache-control: no-store
不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。

协商缓存

1、资源未过期：
发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>没过期–>返回304状态码–>客户端用缓存的老资源。
2、资源过期
发请求–>看资源是否过期–>过期–>请求服务器–>服务器对比资源是否真的过期–>过期–>返回200状态码–>客户端如第一次接收该资源一样，记下它的cache-control中的max-age、etag、last-modified等

9、实现input框只能输入数字和小数点

输入框事件监听

10、前端性能优化

11、vue扩展运算符

12、对promise的理解

13、闭包的使用

概念：通俗来讲，闭包其实就是一个可以访问其他函数内部变量的函数，即定义在函数内部的函数。
产生本质：当前环境中存在指向父级作用域的引用。
使用场景：

• 在一个函数内部返回一个函数
• 使用了回调函数的地方（定时器、事件监听、Ajax 请求、其他异步中）
• 将函数作为参数传递给另外的函数
• IIFE（立即执行函数），创建了闭包，保存了全局作用域（window）和当前函数的作用域，因此可以输出全局的变量，如下所示：

var a = 2;
(function IIFE(){
  console.log(a);  // 输出2
})();

14、浏览器渲染机制

15、http与https的区别

16、对websocket的理解