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

2019前端面试题(持续更新中)

时间:2023-04-02 20:03:36 HTML

最近也是准备跳槽,然后收集了一些我觉得今年面试会遇到的常见问题。有机会记得分享给我哦。2019年的市场真的很糟糕。看到那么多收藏和点赞。我的心也凉了。我也说说面试题以外的一些经验吧。我认为,低迷也是相对的,自我提升也是必要的。让我告诉你我最近在做什么。首先优化您的博客。有技术博客的求职者在筛选简历时,肯定会给面试官留下好印象。针对你想应聘的公司规模,花时间深入了解一些源代码。例如,大多数中型企业更喜欢vue。我最近也在研究源代码。大一点的,可以通过研究框架的源码得到一些经验,自己写一套框架。我目前也在准备中。还有它自己的npm组件包。1.说说浅拷贝和深拷贝的区别。核心:引用类型和非引用类型的拷贝结果是不一样的。浅拷贝只是复制基本类型的数据。如果父对象的属性等于一个数组或另一个对象,那么实际中子对象一般只获取一个内存地址,所以存在父对象被篡改的可能。浅拷贝只复制指向对象的指针,而不是对象本身。新老对象仍然共享内存//简单的浅拷贝vara=1;varb=a;//赋值console.log(b)//1a=2;//改变一个console.log的值(b)//1如果要实现深拷贝,用什么方法ImplementJSON.parse()+JSON.stringify()(缺点:只处理可枚举属性);forin循环递归遍历;深拷贝能够实现真正意义上的数组和对象的拷贝。递归调用“浅拷贝”。(深拷贝会创建一个相同的对象,新对象不与原对象共享内存,修改新对象不会改变原对象。)如果要实现支持setter和getter特性的拷贝,如何实现这一目标?Object.defineproperties(定义属性),Object.getOwnPropertyDescriptors(es2017,获取对象的多个属性),Object.getOwnPropertyDescriptor(比较旧,获取对象单个属性的属性),但是babel可以解决。2、原型链的prototype和__proto__的区别;prototype将在新示例非标准化后转换为__proto____proto__;一切的原型链向上延伸到原型链的顶端,它是什么;Object.prototype.__proto__,结果为null。Function本身就是一个函数,Function.__proto__是一个标准的内置对象Function.prototype,Function.prototype.__proto__是一个标准的内置对象Object.prototype3,如果你想实现继承,先说几个你知道的方法?原型链继承、构造继承、实例继承、复制继承、组合继承、寄生组合继承原型链继承3、var、let、const的区别;var将提升变量;let声明的变量只在它所在的代码块中有效;声明const后,它指向的目标就不能再修改了。如果const指向一个对象/数组,那么虽然不能改变目标,但是可以改变对象和数组内部的值;进阶1:说到变量提升,class声明一个class的时候,有没有变量提升?为什么?不存在。为了方便类的继承,先声明子类,再声明父类;进阶二:const声明对象时,如何让对象内部属性的值不可变?使用Object.freeze()来加锁(es5新特性);数组等引用类型的值仍然可以修改;进阶三:全局范围?功能范围?块范围?范围链?js的基本数据类型有哪些?布尔值、空值、未定义、数字、字符串、对象;Symbol(es6new)进阶:es6新原型数据类型Symbol,有什么特点;它代表了一个独特的价值;声明时不能使用newSymbol(),而是Symbol();声明时可以加参数进行描述;作为key,不可遍历;进阶二:如何声明两个相等的Symbol变量?使用Symbol.for,当参数相同时;让a=Symbol.for('a');让b=Symbol.for('a');一个===乙;//true####什么是Promise?*是异步编程的解决方案;*所谓Promise,简单来说就是一个容器,里面装的是将来会结束的事件(通常是异步操作)的结果。从语法上讲,Promise是一个对象,可以从中获取异步操作的消息。你通常什么时候使用它?*处理异步请求时使用,比如ajax请求;有哪些州?*状态有pending、resolved、rejected;如何捕捉他的错误?*最后写catch;*then中的第二个参数可以被捕获;如果抛出一个内部错误但没有被捕获,那么在未捕获的错误之后会发生什么?*冒泡;trycatch能抓到吗?为什么?*不是,因为是异步编程。能被window.onerror捕获吗?*不能newPromise((resolve,reject)=>thrownewError('a')).then(fn1).then(fn2,fn3).catch(fn4)这个函数,会执行哪些函数*fn3,gone4.从输入URL到浏览器显示页面发生了什么。(特别注意)你可以理解这道题。虽然采访的时候造了飞船,但真正的作品可能还是搞砸了。1.在浏览器中输入url(解析IP地址)2.应用层DNS解析域名3.应用层客户端发送HTTP请求4.传输层TCP传输报文(3次握手)5.网络层IP协议查询MAC地址6.数据到达数据链路层7.服务器接收数据8.服务器响应请求9.服务器返回相应的文件2.页面渲染:现代浏览器渲染一个页面的过程是这样的:解析HTML构建DOM树-->构建RenderTree-->LayoutRenderTree-->DrawRenderTree。在浏览器接收到完整的HTML文件之前,它开始渲染页面。当遇到外部链接的script标签或style标签或图片时,它会再次发送HTTP请求,重复上述步骤。接收到CSS文件后,会重新渲染已经渲染过的页面,添加合适的样式,图片文件加载后会立即显示在相应位置。此过程可能会触发页面的重绘或回流。5、async和await的使用场景有哪些?对于连续的异步请求,下一次异步请求取决于上一次异步请求的结果;进阶1:如果有A、B、C三个异步请求,异步请求C依赖于异步请求A和B的结果(即A和B在发起C之前完成),那么你会如何实现呢?承诺.all();设置状态分别标记为A和B。A和B完成后,会修改自己的完成标记,然后检查所有的状态标记。如果都完成了,则执行异步请求C。6.什么是承诺?它是异步编程的解决方案;所谓Promise,简单来说就是一个容器,里面装的是将来会结束的事件(通常是异步操作)的结果。从语法上讲,Promise是一个对象,可以从中获取异步操作的消息。你通常什么时候使用它?处理异步请求时使用,比如ajax请求;有哪些州?这些状态是未决的、已解决的和被拒绝的;如何捕捉他的错误?最后写catch;then中的第二个参数可以被捕获;如果在内部抛出一个错误但没有被捕获,那么在未捕获的错误之后会发生什么?冒泡;trycatch能抓到吗?为什么?不是,因为是异步编程。能被window.onerror捕获吗?不是newPromise((resolve,reject)=>thrownewError('a')).then(fn1).then(fn2,fn3).catch(fn4)这个函数,会执行哪些函数*fn3,没有7,数计算:在js中,输入表达式0.1+0.2的结果是什么?0.30000000000000004(不是0.3,是0的个数和0.3后面的一个数)进阶1:为什么?原因是浮点数和整数的存储方式不同,所以加法规则也不同;进阶2:浮点数是如何存储的(这道题比较难)(可以跳到进阶3,比较这道题简单)double类型是双精度浮点数,指的是用64位位(8字节)存储浮点数。按照规定,64位的bit分为三部分:第一部分(1bit):符号位,表示正负,正数为0,负数为1。第二部分(11bit):阶码位,也可称为指数位。第三部分(52bit)尾数位代表实际数。如果正负号的值为S,则正数S为1,负数S为-1;若指数所代表的值为E(计算后),则指数所代表的值为2的E次方;如果尾数表示的值为M,则尾数表示的值为M;按照科学计数法,一个范围内的任意浮点数都可以用下面的方法来表示:(别问我为什么,我没去谷歌过。。。)浮点数=S*Math.pow(2,E)*M;进阶三:在我们实际开发中,如果遇到这种浮点计算的情况,如何处理比较合适呢?8.在移动端开发时,如何实现自适应?remvw和vh媒体查询(引导程序);进阶一:它们有什么特点?或者实现原理是什么?rem是基于html的font-size;vw是浏览器窗口的宽度,vh是高度;媒体查询是基于浏览器窗口的宽度或高度,以响应式方式显示的CSS;进阶二:弹出输入框会导致定位错误,固定布局,如何解决?9、我们把开发好的页面放到线上环境的时候,一定要最大限度的进行性能优化,那么我们一般的做法是什么?https://csspod.com/frontend-performance-best-practices/gzip,sprite,减少http请求,减少DNS请求,避免重定向,缓存ajax请求,延迟加载,预加载,减少DOM数量,使用框架比如React的虚拟DOM树,减少DOM操作,使用CDN,减少css中@import的写法,10,图片使用sprite图片或者base64字符串,你觉得哪个更好?为什么?可以缓存精灵图片;base64可以减少请求次数;进阶1:如果你决定使用sprite图片/base64字符串,你会怎么做?带有url-loader(base64)的webpack;webpack的精灵插件webpack-spritesmith;