先说说HTTP3.0HTTP/3是基于UDP协议实现类似TCP的数据流复用、传输可靠性等功能。这组函数称为QUIC协议。流量控制、传输可靠性功能：QUIC在UDP的基础上增加了一层保证数据传输的可靠性。它提供数据包重传、拥塞控制和TCP中的一些其他功能。集成TLS加密功能：目前QUIC使用TLS1.3，减少了握手时花费的RTT次数。多路复用：同一个物理连接上可以有多个独立的逻辑数据流，实现了数据流的分离传输，解决了TCP的队头阻塞问题。快速握手：因为是基于UDP的，所以可以使用0~1个RTT建立连接。前端高级面试题详解箭头函数和普通函数的区别（1）箭头函数比普通函数更简洁。如果没有参数，就写一个空括号。如果只有一个参数，可以省略参数的括号。参数，以逗号分隔。如果函数体的返回值只有一句话，大括号可以省略。如果函数体不需要返回值，而且只有一句话，可以在这句语句前加一个void关键字。最常见的是调用函数：letfn=()=>voiddoesNotReturn();复制代码（2）箭头函数没有自己的this箭头函数不会创建自己的this，所以它没有自己的this，只会在自己作用域的上层继承this。所以箭头函数中this的指向在定义的时候就已经确定了，以后不会改变。(3)箭头函数继承的this点永远不会改变varid='GLOBAL';varobj={id:'OBJ',a:function(){console.log(this.id);},b:()=>{console.log(this.id);}};obj.a();//'OBJ'obj.b();//'GLOBAL'newobj.a()//undefinednewobj.b()//UncaughtTypeError:obj.bisnotaconstructor复制代码对象obj的方法b是使用箭头函数定义的，这个函数中的this在定义的全局执行环境中始终指向this。即使这个函数作为对象obj的方法被调用，this仍然指向Window对象。需要注意的是，定义对象的大括号{}不能形成单独的执行环境，它仍然处于全局执行环境中。(4)call()、apply()、bind()等方法不能改变箭头函数中this的方向varid='Global';letfun1=()=>{console.log(this.id)};乐趣1（）;//'Global'fun1.call({id:'Obj'});//'Global'fun1.apply({id:'Obj'});//'Global'fun1.bind({id:'Obj'})();//'Global'copycode(5)箭头函数不能用作构造函数。上面新步骤中已经提到了构造函数。其实第二步就是在函数中用this指向这个对象。但是由于箭头函数没有自己的this，而this指向外层的执行环境，不能改变指向，所以不能作为构造函数使用。(6)箭头函数没有自己的arguments箭头函数没有自己的arguments对象。访问箭头函数中的参数实际上是获取其外部函数的参数值。(7)箭头函数没有原型(8)箭头函数不能作为Generator函数使用，不能使用yeild关键字。Loader和Plugin有什么区别？Loader：直译为“装载机”。Webpack将所有文件都视为模块，但Webpack只能原生解析js文件。如果你想打包其他文件，你将使用加载器。所以Loader的作用就是赋予webpack加载和解析非JavaScript文件的能力。插件：直译为“插件”。Plugin可以扩展webpack的功能，使webpack更加灵活。在Webpack运行的生命周期中，会广播很多事件。Plugin可以监听这些事件，并适时通过Webpack提供的API改变输出结果。setTimeout、Promise、Async/Await的区别(一)setTimeoutconsole.log('scriptstart')//1.printscriptstartsetTimeout(function(){console.log('settimeout')//4.打印settimeout})//2.调用setTimeout函数，并定义完成后执行的回调函数console.log('scriptend')//3。printscriptstart//输出顺序：scriptstart->scriptend->settimeoutcopycode(2)PromisePromise本身是一个同步立即执行函数。在executor中执行resolve或reject时，此时是异步操作，然后/catch会先执行。主栈完成后，会调用resolve/reject中存储的方法，执行时打印p，就是打印的返回结果，一个Promise实例。console.log('scriptstart')letpromise1=newPromise(function(resolve){console.log('promise1')resolve()console.log('promise1end')}).then(function(){console.log('promise2')})setTimeout(function(){console.log('settimeout')})console.log('scriptend')//输出顺序：scriptstart->promise1->promise1end->scriptend->promise2->settimeoutcopycode当JS主线程执行到Promise对象时：promise1.then()的回调是一个taskpromise1被resolved或rejected：那么这个task会被放入当前的microtask队列eventloop.promise1ispending：该任务将被放入未来（可能是下一轮）事件循环的微任务队列中。setTimeout的回调也是一个task，即使是0ms也会被放入macrotask队列（3）async/awaitasyncfunctionasync1(){console.log('async1start');等待async2()；console.log('async1end')}asyncfunctionasync2(){console.log('async2')}console.log('scriptstart');async1();console.log('scriptend')//输出顺序：scriptstart->async1start->async2->scriptend->async1end复制代码async函数返回一个Promise对象，当函数执行时，一旦遇到await，它会先返回，等待触发的异步操作完成，然后在函数体中执行下面的语句，可以理解为放弃线程，跳出async函数体。例如：asyncfunctionfunc1(){return1}console.log(func1())复制代码func1的结果实际上是一个Promise对象。所以也可以使用then来处理后续的逻辑。func1().then(res=>{console.log(res);//30})复制代码await表示等待，即async函数需要等待await之后的函数完成并返回结果（Promiseobject)在继续执行下面的代码之前。await通过返回一个Promise对象来实现同步的效果。浏览器如何管理和加载HTML5离线存储资源？上网时，浏览器发现html头有manifest属性，就会去请求manifest文件。如果是第一次访问该页面，浏览器会根据manifest文件的内容下载相应的资源并离线存储。如果页面被访问过并且资源已经离线存储，浏览器将使用离线资源加载页面，然后浏览器将新的清单文件与旧的清单文件进行比较，如果文件没有改变，donothing操作，如果文件发生变化，会重新下载文件中的资源并离线存储。离线时，浏览器会直接使用离线存储的资源。vuexvuex是专门为vue.js应用开发的状态管理器。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。state：vuex使用单个状态树，其中包含所有应用程序级别的状态和一个对象。mutation：在vuex中改变state状态的唯一方法就是提交mutationaction：action提交mutation，而不是直接改变state。Action可以包含任意异步操作getter：相当于vue中的computed计算属性复制代码代码输出结果constfirst=()=>(newPromise((resolve,reject)=>{console.log(3);letp=newPromise((resolve,reject)=>{console.log(7);setTimeout(()=>{console.log(5);resolve(6);console.log(p)},0)resolve(1);});resolve(2);p.then((arg)=>{console.log(arg);});}));first().then((arg)=>{console.log(arg);});console.log(4);复制代码输出如下：374125Promise{
