当前位置: 首页 > Web前端 > HTML

前端面试回顾

时间:2023-03-28 13:37:38 HTML

1、defer&&async是并行加载的,不会阻塞html解析和渲染后立即执行,不能保证按照script标签的顺序执行。脚本之间存在顺序依赖时如何选择defer,否则使用async。实际生产中,第三方库叫vendor,pdd基础库叫common,页面叫一个js,顺序依赖,使用defer。2.原型理解Instance对象有一个隐含的原型__proto__,函数方法有一个原型对象prototype。当函数作为构造函数构造实例对象时,实例对象的__proto__会指向构造函数的原型。在读取对象属性和方法时,当不存在时,会在原型中查找,实现原型对象属性和方法的继承。3.作用域的理解->变量和函数存储和读取的规则变量声明,编译器会在当前作用域中声明一个变量,并为引擎生成运行时代码,以便引擎后续对该变量进行操作。范围读取规则:当引擎执行代码对某个变量进行操作时,会询问它是否存在于当前范围内,存在则使用。否则,它会在上层作用域中查找,直到找到,而在全局作用域中还没有找到。然后抛出错误。4.HTTP协议5.同源策略,跨域,跨站浏览器安全策略access-control-allow-origin告诉浏览器允许哪个域;access-control-allow-credential告诉浏览器是否带cookies一篇文章1.typeof的原理js在底层存储变量时,会在其机器码的低1-3位存储其类型信息多变的。typeof是通过机器码判断类型2.浏览器缓存的位置及其区别serviceworker缓存独立于js主线程,可以自定义缓存规则内存缓存存储,读取效率高,但空间有限,一般在缓存一些小的资源文件或者内存利用率低的时候使用,进程结束时会释放磁盘缓存存储空间大,读取效率比较慢,不会释放。1、对于大文件,大概率不会存入内存,反之亦然。2.当系统内存占用高时,先将文件保存到硬盘http/2.0pushcache3,xssandcsrfxss(https://tech.meituan.com/2018...)typereflectiontype->submitxss代码到一个变量,前端直接将该变量插入到html中;取决于用户输入,用户不输入恶意代码一般是没有问题的。一般发生在搜索框存储型->攻击者在留言板上提交恶意代码给服务器,服务器持久化存储。当被攻击者访问时,会注入攻击dom类型->当前页面脚本修改dom树,在dom树中引入恶意xss。前端行为不与服务端交互,服务端无法防御构造script标签a标签的javascript协议img标签加载错误。回调防御输入过滤数据杀毒【实体逃逸,黑白名单】react底层forxss防御csrf4,axios库理解axios和axios的关系axios是axios.prototype.request绑定context返回的函数方法。axios原型对象上的method和instance属性挂在函数上,函数实现axios的实例化;instance和axiosaxios.create创建一个axios,和默认的axios一样,可以作为一个函数,也可以作为一个对象来使用执行过程request->dispatchRequest->xhrAdapter请求响应拦截器axios可以使用newaxios的形式实例。原理是什么?axios是一个函数,其中axios原型对象中的request方法绑定了一个实例对象,将axios类的所有实例属性和方法绑定到函数对象上。axios调用的本质是调用axios类的实例方法,但是Extendeduse,axios既可以作为函数使用,也可以作为对象使用。直接new一个axios对象也可以通过对象调用request方法,但是不能作为函数使用。一段时间内不再触发则执行原函数,否则刷新定时器)throttling(返回一个新的函数,此函数在一段时间内连续触发后只会在第一次执行)//anti-shake实现:functiondebounce(fn,delay){vartimer=null;返回函数(){if(timer){clearTimeout(timer);}timer=setTimeout(()=>{fn.apply(this,arguments);},delay)}}//部分Stream-Timestamp实现函数throttle(fn,interval){varstart=0;返回函数(){if(Date.now()-start{fn.apply(this,arguments);timer=null;},间隔);}}}6.手写快速队列7.手写事件发射器实现思路:classEventEmitter{constructor(){this.eventBus={};}subscribe(event,callback){if(!this.eventBus[event]){this.eventBus[事件]=[];}this.eventBus[event].push(callback);}emit(event,...rest){this.eventBus[event].forEach(cb=>{cb.apply(this,rest);});}8、http/1.1和http/2.0的区别http/0.9请求行只支持gethttp/1.0http版本请求/响应头连接:需要手动设置keep-alive实现连接复用http/1.1支持连接复用通过默认,支持支持管道机制同时发送多个请求,但只能一个一个响应,存在“队头阻塞问题”,content-length,streamingtransfer-encodinghttp/2.0多任务通信(双向、实时通信)、数据流(响应ID、数据流id)、头信息压缩(压缩、索引表索引替换)、服务器推送