9.9 4399前端笔试

10道选择题,其中有挺多还不确定的,特别是一些语法细节
操作系统调度算法,能保证调度公平的算法
有CSS相关的,忘了考啥
<link>如何加载图片,设置src、href还是url......
Google Chrome的并发数限制,比如选项有HTTP/2对一个域名限制6个并发数..... (这个我是真没注意过,如果我对HTTP比较熟悉的话应该可以猜到,正确应该选HTTP1.1对同一域名会限制6个并发数 https://zhuanlan.zhihu.com/p/77803705)
Vue父子生命周期,考了创建、更新和销毁过程中,父子组件的生命钩子的执行顺序
Web Component 的相关特性,选项有Shadow DOM....(好像里面混了个Flask,用python写过后端,一眼认出😂)
考用JS选定DOM元素,给出的html大概是id=list的ul里面包裹着li,要选定其中class = &quot;A B&quot;的li
有Array相关的,但是忘了考啥

然后有3道简答题,挺经典的:
数组去重的(至少)3种方法
运行结果题(给出有异步的代码,也就考事件循环那些,考前几天刚看了,默念先同后异,先微后宏,保我平安)
也是运行结果题,但这个是关于var、函数作用域和闭包的。1问结果,2问解释,3问闭包的概念和用途。

3道编程题
(1)给出一段基本代码,用HTML,CSS和JS画时钟。这个我在考前特别研究过,但是由于它自己系统的IDE不支持预览HTML网页,我只是干写,没有补全,也不能调试。有些东西也不知道有没有写对,但是整体上是完整的,可能调试一下就可以跑了。CSS变量的语法似乎没写对。
(2)给出去重数组,然后进行全排列。这个不难,但是它没有核心模式,稍微调了一下搞好输入输出(之前在联想笔试也遇到过js的输入输出问题,这次吸取教训,提前把系统的输入输出研究了,可以提前测它IDE)。
(3)近似周期串。没啥难度(其实没有考到什么算法),但是它的定义没太搞清楚(把字符串划分为长度为3的子串,然后又说子串的长度大于等于2),按自己理解写了。这道题很赶,没自己测过,只剩三分钟做后面的主观题了,遂跳过)

主观题
(1)大学设立的目标,为此做了啥,认为自己有没有实现。
(2)有没有遇到难题,怎么解决
主观题实在没时间写,十分潦草,前面的题做得还行,但是主观题想挂我的话确实也有理有据😂
全部评论

相关推荐

03-20 19:09
已编辑
门头沟学院 前端工程师
面试公司:杭州某小厂面试岗位:前端这两天陆续面了两家公司,这两家公司的语气都比第一家柔和很多,难道第一家给我压力上太大了?不,肯定我是太菜了,我是菜XTUT第二份视频,第三份线下,总体答得不错,在这里继续总结答得不太好的。老样子,题目来源于公司,答案来源于ai,反思来源于自己。面试问题:【技术】1、问题:Vue&nbsp;中的常见生命周期有哪些?父子组件中,他们的加载顺序和生命周期的一个关系?一般request数据获取是放在create周期还是mount周期?为什么?答案:&nbsp;&nbsp;&nbsp;&nbsp;Vue&nbsp;中的常见生命周期包括以下几个阶段:&nbsp;&nbsp;&nbsp;&nbsp;创建阶段&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeCreate&nbsp;:在实例初始化之后、数据观测&nbsp;(data&nbsp;observer)&nbsp;和&nbsp;event/events&nbsp;事件回调的初始化之前被调用。此时,data&nbsp;和&nbsp;methods&nbsp;还未被初始化,无法访问到&nbsp;data&nbsp;中的数据和&nbsp;methods&nbsp;中的方法。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;created&nbsp;:在实例创建完成后被调用,此时&nbsp;data&nbsp;和&nbsp;methods&nbsp;已经被初始化,可以访问到&nbsp;data&nbsp;中的数据和&nbsp;methods&nbsp;中的方法,但此时页面的&nbsp;DOM&nbsp;还未生成。&nbsp;&nbsp;&nbsp;&nbsp;挂载阶段&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeMount&nbsp;:在挂载开始之前被调用,相关的&nbsp;render&nbsp;函数首次被调用,但&nbsp;DOM&nbsp;还未真正渲染到页面上。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mounted&nbsp;:在实例挂载到&nbsp;DOM&nbsp;后被调用,此时&nbsp;DOM&nbsp;已经渲染完成,可以操作&nbsp;DOM&nbsp;元素。&nbsp;&nbsp;&nbsp;&nbsp;更新阶段&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeUpdate&nbsp;:在数据更新时被调用,此时数据已经更新,但&nbsp;DOM&nbsp;还未更新。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;updated&nbsp;:在&nbsp;DOM&nbsp;更新完成后被调用。&nbsp;&nbsp;&nbsp;&nbsp;卸载阶段&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeUnmount&nbsp;:在实例卸载之前被调用。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unmounted&nbsp;:在实例卸载完成后被调用。&nbsp;&nbsp;&nbsp;&nbsp;父子组件的加载顺序是:先加载父组件,再加载子组件。这是因为子组件的挂载依赖于父组件的挂载。在父组件的挂载过程中,会解析子组件的标签,并创建子组件的实例,然后触发子组件的生命周期。&nbsp;&nbsp;&nbsp;&nbsp;父子组件生命周期的关系是:父组件的生命周期钩子会在子组件的相应钩子之前触发。例如,父组件的&nbsp;beforeMount&nbsp;钩子会在子组件的&nbsp;beforeMount&nbsp;钩子之前触发,父组件的&nbsp;mounted&nbsp;钩子会在子组件的&nbsp;mounted&nbsp;钩子之后触发。&nbsp;&nbsp;&nbsp;&nbsp;一般数据获取建议放在&nbsp;created&nbsp;周期。因为在&nbsp;created&nbsp;周期中,data&nbsp;和&nbsp;methods&nbsp;已经被初始化,可以发起网络请求获取数据,并将数据存储到&nbsp;data&nbsp;中。而如果放在&nbsp;mount&nbsp;周期,虽然也可以获取数据,但此时&nbsp;DOM&nbsp;已经渲染完成,如果数据获取失败或者耗时较长,可能会导致页面显示不完整或者出现加载中的空白状态。放在&nbsp;created&nbsp;周期可以利用&nbsp;Vue&nbsp;的响应式系统,在数据更新时自动更新&nbsp;DOM。反思:Vue生命周期就回答了create和mount相关,甚至冒出了个“delete”,回去听录音都给自己整无语了。数据获取答对了,但是对面面试官确实没问理由,要问绝对就开猜了,还好还好。2、问题:大多数前端框架循环都用到了key,这个作用是什么?底层原理是什么?答案:&nbsp;&nbsp;&nbsp;&nbsp;在前端框架中,key&nbsp;的作用是帮助框架高效地识别和更新&nbsp;DOM&nbsp;元素,特别是在列表渲染时。&nbsp;&nbsp;&nbsp;&nbsp;当使用&nbsp;key&nbsp;时,框架会将&nbsp;key&nbsp;的值作为标识符,用于区分不同的元素。在列表渲染时,如果数据发生变化,框架会通过&nbsp;key&nbsp;来判断哪些元素是新增的、哪些是删除的、哪些是更新的。如果两个元素的&nbsp;key&nbsp;相同,框架会认为这两个元素是同一个元素,只是属性发生了变化,从而进行局部更新;如果&nbsp;key&nbsp;不同,框架会认为是新的元素,需要重新创建&nbsp;DOM。&nbsp;&nbsp;&nbsp;&nbsp;底层原理与&nbsp;Diff&nbsp;算法相关。Diff&nbsp;算法是用来比较两组数据的差异的算法。在前端框架中,Diff&nbsp;算法主要用于比较虚拟&nbsp;DOM&nbsp;树的差异,以决定如何更新真实的&nbsp;DOM&nbsp;树。当列表渲染时,框架会为每个元素生成一个虚拟&nbsp;DOM&nbsp;节点,并将&nbsp;key&nbsp;作为虚拟&nbsp;DOM&nbsp;节点的属性。在&nbsp;Diff&nbsp;过程中,框架会通过&nbsp;key&nbsp;来快速定位和比较两个虚拟&nbsp;DOM&nbsp;树中的节点,从而找到需要更新的部分。如果没有&nbsp;key,框架只能通过元素的索引来进行比较,这在列表中元素的顺序发生变化时会导致错误的更新。反思:答出了提高渲染速率和鉴别元素创建。至于比较关键的术语“局部更新”“DOM重建”确实没粘边。估计大厂会问到diff算法,提前学习下。虚拟DOM也去复习复习。3、问题:防抖和节流的定义与应用场景?实现的方式?答案:&nbsp;&nbsp;&nbsp;&nbsp;防抖和节流是两种常用的优化高频触发事件的技巧。防抖(Debounce)&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;定义&nbsp;:在事件被触发后,在一定时间内如果没有再次触发该事件,就执行一次回调函数。如果在规定时间内事件再次被触发,则重新计时。&nbsp;&nbsp;&nbsp;&nbsp;应用场景&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索框的自动补全:在用户输入时,如果每次输入都发送请求,会导致频繁的网络请求。使用防抖可以在用户停止输入一定时间后,再发送请求,减少网络请求的次数。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;窗口大小改变:在窗口大小改变时,如果频繁触发回调函数,会导致性能问题。使用防抖可以在窗口大小停止改变一定时间后,再执行回调函数。&nbsp;&nbsp;&nbsp;&nbsp;实现方式&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用&nbsp;setTimeout&nbsp;函数来实现。在事件触发时,设置一个定时器,在定时器的回调函数中执行目标函数。如果在定时器执行之前,事件再次被触发,则清除定时器并重新设置。节流(Throttle)&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;定义&nbsp;:在一定时间内,只允许回调函数执行一次。如果在规定时间内事件多次被触发,只在最后一次触发时执行回调函数。&nbsp;&nbsp;&nbsp;&nbsp;应用场景&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;滚动事件:在滚动页面时,如果频繁触发回调函数,会导致性能问题。使用节流可以在滚动一定距离后,再执行回调函数。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼠标移动事件:在鼠标移动时,如果频繁触发回调函数,会导致性能问题。使用节流可以在鼠标移动一定距离后,再执行回调函数。&nbsp;&nbsp;&nbsp;&nbsp;实现方式&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用&nbsp;setTimeout&nbsp;函数和变量标记来实现。在事件触发时,检查是否已经设置定时器。如果已经设置,则不再设置;如果没有设置,则设置定时器,并在定时器的回调函数中执行目标函数。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用&nbsp;Date&nbsp;对象来记录时间。在事件触发时,获取当前时间,如果距离上一次执行回调函数的时间小于规定时间,则不执行;如果大于规定时间,则执行回调函数。反思:之前其实已经理解了相关概念,但是让自己描述确实还是描述不清楚,吱吱呜呜的,以后准备这种面试应该看着题目自己说一遍。除此之外,小厂不会考察实现,大厂应该会考察手撕,应该找时间重现。4、问题:axios,&nbsp;fetch,&nbsp;ajax&nbsp;的区别?答案:&nbsp;&nbsp;&nbsp;&nbsp;技术基础&nbsp;:axios&nbsp;是基于&nbsp;promise&nbsp;的&nbsp;HTTP&nbsp;库,fetch&nbsp;是浏览器原生支持的&nbsp;Fetch&nbsp;API,ajax&nbsp;是基于&nbsp;XMLHttpRequest&nbsp;对象的。&nbsp;&nbsp;&nbsp;&nbsp;语法&nbsp;:axios&nbsp;和&nbsp;fetch&nbsp;的语法相对简洁,ajax&nbsp;的语法相对复杂。&nbsp;&nbsp;&nbsp;&nbsp;支持浏览器&nbsp;:axios&nbsp;和&nbsp;fetch&nbsp;不支持&nbsp;IE&nbsp;浏览器,ajax&nbsp;支持&nbsp;IE&nbsp;浏览器。&nbsp;&nbsp;&nbsp;&nbsp;错误处理&nbsp;:axios&nbsp;提供了统一的错误处理方式,fetch&nbsp;的错误处理比较复杂,ajax&nbsp;的错误处理需要手动处理。&nbsp;&nbsp;&nbsp;&nbsp;功能&nbsp;:axios&nbsp;支持拦截器和自动转换数据,fetch&nbsp;和&nbsp;ajax&nbsp;不支持。反思:其实对这块并没特别注重,感觉这边一般是封装死的,不过姑且作为知识补充。【HR】1、问题:你觉得你的项目给你带来哪些成长?答案:略反思:此处当时答得有点偏,甚至说到了什么审美提高乱七八糟的,其实应该是回答团队合作能力提高,独立开发技巧和工程化能力等等。这个回答点应该注意一下,了解对方回答的用意。总结:本次面试围绕Vue技术栈、前端基础及架构方向展开,结合面试中的表现与自我反思,总结如下:一、技术能力方面Vue生命周期与优化实践:基础生命周期能准确列举,但对父子组件执行顺序及代码实现逻辑理解不够深刻,尤其是父组件mounted执行在子组件之后的实际应用场景未能举出实例。数据获取放在created阶段的理由虽然正确,但未主动结合响应式系统原理进行展开,暴露出知识点间的联结不足。需系统梳理父子组件通信与生命周期联动机制。核心概念深度不足:对key的Diff算法原理、虚拟DOM运作机制等底层知识表述不够精准。虽然能说明key的复用优化功能,但缺乏专业术语的运用。后续需重点研读Diff算法源码解析,建立虚拟DOM更新机制的体系化认知。逻辑表达能力待提升:防抖节流虽能区分概念,但在应用场景举例时存在表述冗余。建议通过实践手写实现以巩固记忆。前沿技术视野扩展:微前端概念停留在特点罗列层面,对qiankun框架的实现原理、沙箱隔离等核心技术点认知空白。需结合官方文档搭建demo项目,深入理解模块加载、样式隔离等具体解决方案。二、综合素质方面HR环节未能精准匹配技术成长与岗位需求,体现出对面试问题核心诉求的洞察不足。未来需建立结构化回答框架,将项目经验与技术能力、团队协作、工程化思维等职业素养紧密结合。总结表明,除巩固基础外,需投入精力深入框架底层原理,提升技术表述的专业性与系统性,同时持续追踪微前端、性能优化等前沿技术方向,构建完整的知识图谱。#我的面试日记# #软件开发笔面经# #面试常问题系列#
点赞 评论 收藏
分享
评论
1
2
分享

创作者周榜

更多
牛客网
牛客企业服务