当前位置:首页 » 网页前端 » 前端工程师面试问题
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端工程师面试问题

发布时间: 2023-05-03 16:23:19

㈠ 阿里p6前端面经

本科毕业,学校既不是211也不是985,我也没有一毕业就进入大厂工作的经历。我的职业生涯里一共有10多次面试经历,阿里我面试了5次,失败了4次,屡战屡败,屡败屡战。每当我听到别人传奇的经历,会羡慕别人开挂的人生,也会有小失落,感叹自己当初没有做太多的努力,甚至自我怀疑和自我否定。人生中主动裸辞,被动裁员的经历,曾经让我在无数的黑夜里,真的以为人生就这样了。

在第四次面试阿里失败后,我开启了为期2年的自我重塑计划,梳理 体系化的知识结构 、刻意练习 知识结构化表达 ,学习参考了吸引力法则完善自己的 简历人设 。最后在2020.1入职阿里巴巴,成为AE国际体验技术团队的P6前端工程师。
在这一段经历中,我梳理了当时自己的几个问题,大家看看是否有跟我相似的处境呢?

自我重塑的前提是自我觉醒,意识到自己存在问题,再让自己走出舒适区,不断地打碎自己,然后在这个过程中把碎掉的东西重新收拾起来,变成身体的一部分。 这个过程会让你很痛苦,但如果你克服了,你就蜕变了。薛兆丰教授说过一句话,“生活不会在你都准备好了以后才开始”。面试也一样,面试考验的不是那几轮的面试表现,而是你在长期生活、工作中积累的 硬技能和软技能 ,这些包括:你的专业能力,框架能力,思维能力,性格和心态,沟通能力,价值观等等。你只是刚好在这几轮的面试里表现出了你的这些积累,吸引到了对方,最后拿到了Offer。如果临时抱佛脚,光背概念和知识点,没有结合项目深入思考,那么面试的时候会表现的很空洞,给人的印象只是在堆砌一些关键词,这样面试挂掉的可能性就很高。

传说有人问泰勒斯:“何事最难为?” 泰勒斯回答说:“认识你自己。” 随着年龄的增长,阅历的丰富,你会渐渐发现,无论是生活还是工作,很多的事情本质是与自己相处,了解自己的性格,发现自己的优缺点,知道自己从哪来,到哪去,最后想成为一个什么样的人。

举个例子,我了解自己的性格是内向性格,而且原生家庭在我童年成长的过程中,让我有些自卑,甚至我一度怀疑内向是一种性格缺陷。直到我看了一本书,书名叫《内向性格的竞争力》,开始渐渐明白我 自卑的点,来源于我根本不了解自己是什么 。我也不了解外向性格、内向性格的优势。外向性格的优势在于它性格非常开朗,很容易给人一种亲和力,自来熟。内向的性格优势在于它的敏感度,洞察他人情绪,感知他人情绪的能力。内向性格的人都有一个共同的特点,叫做你需要提前充电。比如我们去参加一个面试,内向性格的人像一块电池,需要提前充电,然后呢,这块电池只能维持大概1个小时,但是一旦过了1个小时,电池电量用完,你就受不了,你在后半程的面试会感受不太舒服,因为你的性格里就是不太喜欢这样的环境。

如果大家意识到这一点,在面试的时候你可以更好的去利用。

胆怯的心态,这个是最难克服的。我曾经是胆怯的人,我会把自己包裹起来,裹上一层坚硬的外壳。

这些会直接影响你在他人心中的形象,像阿里P6前端工程师,是一个独挡一面的角色。如果自己性格胆怯,表现出畏缩畏尾的样子,那么即使进阿里了,你在推进项目的时候,会遇到很大的阻碍。这个阻碍一方面来自于你内心的胆怯,另一方面来自于外部压力。所以这个是必须要克服的。

我克服胆怯的方法很粗暴。利用周末的时间刷了杭州城20多个恐怖密室(漆黑的密室环境,而且有NPC出来吓人),慢慢把胆子练起来。后来我胆子大到什么程度呢,我一个人跑到临安挑战极限,坐上飞机从10000英尺的高度自由降落,高空跳伞。

所以性格它不是一成不变的,你发现了,克服了,最后你的心态会越来越好,这个就是我想分享的。

这个是最核心的一个能力,同时也是可以让你快速进入一门新领域的方法。以我现在的认知水平, 知识可以分为三层:知识点、理论、体系。 我们需要可以通过学习知识点 -> 整理理论 -> 形成体系。

输入: 我们平时信息输入的渠道,可以是通过看源码、看书、他人分享的得到关键词,通过关键词搜索可以让我们更广泛地获取信息。在搜索关键词的过程中,我们往往会得到更多的关键词,它可以是A、是B、是C。

构建: 我们需要这些ABC进行分类,构建我们的思维导图。如果你没有自己的思维导图,网上有很多前端的知识图谱,可以照着学习和搜索,理解每一个知识节点承载的内容,慢慢去构建属于你自己的思维导图。前期构建脑图的过程挺痛苦的,意味你要把每一个知识点去摸清楚,但是一旦你建立好了,往后只需要在现有的脑图里添加你新的知识节点,学习会越来越轻松。

解释: 思维导图构建好了以后,就是输出,如何向别人解释一个知识。

以上学习的方法,是我对费曼技巧的个人实践,费曼技巧也被称作是终极的学习方法。简单说它是 “以教为学”,在学习的知识的时候,以别人听得懂为目标,用最简单的话把自己的意思表达出来。

关于学习的方法,我还要分享的是,在构建脑图知识点的时候,我们不妨问自己5个问题?

理清楚了这5个问题,相信你会对这块知识了解的很全面了。往往在面试的时候,面试官不会这么一板一眼的提问,有时候会问一些开放式的题目,或者一些刁钻的技术问题,不要慌,他有可能是考察是否能用学到的知识来解释一下新的例子。所以我们学习还要做最后一步, 把所学的知识都忘掉,剩下的思维能力才是你的。

掌握学习的方法还不够,我们还要常常做一些阶段性回顾,以一个项目为周期或者以半年为周期(周期时间可以自己把握),把人生当中的关键节点梳理出来,这不只是为了面试时快速反应,也是为了更加帮助你认识自己。

我们投递简历失败,有一部分原因在于,我们对自己定位不够清晰。当前 P6 水平投递 P7 岗位,那么挂掉的概率就更高了。我们需要了解阿里岗位职级是怎么样的。阿里巴巴社招一般层级是从P6开始,往往工作经验3年是一个分界点。

了解岗位职级,可以帮助我们认清当前水平处在哪一个层次,知道通往一下层次需要掌握哪些技能。比如我是P6,那么我在写简历或者面试的时候,尽可能在展示当前层次水平之外,会额外展示掌握的P7的一些能力,让面试官看到你的潜力和亮点,你是具备快速通往下一层次的能力的。

阿里的面试按流程来的,你开始面试就会进入流程,在流程里的简历,除了面试官其他人是看不到。每个流程通常有5轮面试,4轮技术面和1轮HR面,面试官会根据你的水平层级和个人情况,决定要不要安排笔试和交叉面。面试的前两轮是电话面试,后几轮是现场面试。在投递的简历的时候,尽量找人内推,内推的优势在于内推人可以给你做信用背书,查看你的面试进度。如果不是走内推渠道,是阿里员工主动采蜜打电话邀请你面试,说明你的简历或者过去的历史评价,是具有一定吸引力的,不然也不会打电话给你。接到电话后,可以跟面试官确认电话面试的时间,你可以在这段时间内,开始面试前的准备。

面试前需要做哪些准备呢?

形象建设分为 声音形象、外在形象、内在形象

声音形象: 为什么我要讲声音形象呢?因为前几轮的面试都是电话面试,面试官看不到你,你的语速、语调、语气,都会影响电话那头对你的判断。

声音影响面试的问题有哪些呢?

那我们要做的是尽可能的让我们的语速保持匀速的水平,一分钟200字左右,然后用胸腔偏下的位置发声,用气息推动喉咙,这样的发出的声音雄浑有力,不会显得沉闷,反而有些磁性。

外在形象: 针对现场面试的,简单、干练、不邋遢就好。

内在形象: 声音形象,外在形象都是浅层的吸引,最致命的吸引是人格吸引,是你的内在形象。我们在自我认识的环节,梳理过了“关键”信息,在面试的时候,就派上用场了,把那些能够呈现你内在形象的案例展示给面试官,通过例子证明自己,你就是这样的一个人,简单说就是:“ 我不要我觉得,我要你觉得 ”。内在形象有哪些呢?自信、踏实、皮实、乐观等等

简历为避免排版混乱,使用PDF格式。书写原则: 可以适度包装,但是不要造假 。造假涉及到诚信问题,你在技术面混过去了,后面第三方背景调查的时候,会验证你说的情况,一旦打上不诚信的标签,你就永远进不了阿里了。在写简历的时候,多关注一下对方招聘岗位的JD,岗位职责和需要的技术栈是什么。了解这些后,尽可能在书写简历的时候,展示你和招聘岗位所需重合的技能。如果当前掌握的技能和目标岗位有一定差距,那需要花时间提升不足,补齐这块差距。不同公司的前端岗位的职责或技术方向不同,往往要准备多份简历去匹配不同公司岗位的情况。

我的简历的内容排版很简洁,写了基本信息,专业技能、项目经历,最后才是教育背景。对于社招来说,你在大学期间发生的事情已经不是那么重要了。重要的是你目前 掌握的技能和项目经历 ,这两块是要重点描写的。专业技能按掌握、熟悉、了解程度依次罗列。亮点项目是之前你梳理过的,详细写,附带数据描述成果更具说服力。其他不重要的项目可以简单描述技术栈,一笔带过。这么做的目的就是一眼让面试官看到你的优势和核心竞争力。推荐一些好的简历模板,比如 WonderCV、五百丁。简历不用太花里胡哨,简单明了,能够清晰的表达你的内容即可。

面试前自我模拟面试可以增加你的自信心,自我介绍、面试的一些的话术都可以提前准备好,然后可以讲给别人听、讲给自己听。或者找一个水平在你之上的前辈对你进行一次模拟面试,收集面试反馈,针对模拟面试时卡顿、忘词的知识点,重新记忆和解释,然后不断的重复上面步骤,直到你能可以用自己的话说出知识点的核心内容。

沟通的原则: 客观描述事实,不做主观臆断 。具体有哪些情况呢?三说和三不说。

面试的时候,可以尝试引导面试官。 每个面试官的喜好,出题的角度都不一样,这个我们是无法预测的,但是我们可以去引导对方问一些问题。比如他问到某一个知识点A的时候,我们在回答A的同时,引申出和A有联系的知识点B或C。回答的重心放在知识点A上,B或C是你在回答A的时候顺带那么一提,它就像一个鱼钩,来引导面试官来问我们擅长的、准备好的知识。

渲染情绪: 在面试的时候多感知对方的情绪,在适当的时候,用一些你准备好的事迹,引发对方共情。之前我们梳理过一些“关键信息”,有一些失败经历或高光时刻是很容易让人产生共鸣的。

反问阶段:如果你不知道问些什么,有保守一点的问法是,去问问对方团队的情况,团队在组织定位是怎么样的、技术栈是什么、有哪些人员梯度,当前遇到什么痛点问题等等。这些问题你传递出来的信息是,我对当前岗位所处的团队,所做的事情非常感兴趣。之前我在一家公司现场面试的时候,就主动提出带我在公司转转,了解公司的产品形态。这也是一个向对方表达兴趣的技巧。

面试的时候考察什么?技术一面,重点考察基础和知识广度,上探你的技术天花板,下探计算机底层原理。一面常见的考察点有哪些呢?

技术一面专业能力占了80%,软素质占了20%。如果过了技术一面,说明你的基础各方面是很不错的。接下来技术二面会重点考察你的工程能力、设计能力、规划能力。二面通常会从你的项目开始问,这个时候你梳理的亮点项目就派上用场了。二面常见的考察点有哪些呢?

这些都是考察范围,技术二面专业占了60%,软素质占了40%。到了技术三面的时候,会聊一聊技术格局、视野、人生规划、软技能考察,这部分多展示你的大局观,比如业务上的大图,技术上的大图,你长期或短期的人生规划等等。

2.2.6 描述项目(STAR法则)

我分享一个描述的、项目的方法,叫做STAR法则,他有五个要素,情境(situation)、目标(target)、行动(action)、结果(result),我把他扩展了一下,技术面或者hr面的时候描述项目的时候,可以按这个套路来。

2.2.6 面试复盘

面试后记得主动添加面试官的微信,这是免费的性价比很高的人脉。加完微信能做哪些事?

面试后还需要复盘, 复盘结果和情绪 。拿一张白纸记录你在面试中答好的/不好的知识点,还有你的在情绪占比,紧张、开心、严肃是不是占了面试中大部分情绪。每一次面试都像一面镜子,照出你的短板,然后你把短板改掉,就离目标越来越近了。拥有这种面试意识,面试的次数多了,你会从害怕面试变得爱上面试。

分享一本软件能的书 《金字塔原理》 ,是麦肯锡咨询公司第一位女性顾问:芭芭拉·明托,写的一本关于逻辑思路的书。里面介绍了一些方法,帮助我们怎么去 自下而上的构建逻辑金字塔 ,或者是 自上而下的表达金字塔

书的内容介绍我不做具体的描述了,感兴趣的同学可以自行搜索。

我们在提升硬技能的同时,也要注重提升软技能。技术很重要,但是它是我们实现想法的语言工具。在这之上, 使用工具的方法,比工具本身更关键 ,我们要清楚真正的修炼是什么? 永远都是内在的东西,软性的东西 。比如说你的思维能力,耐心,聪明,情商,遇到挫折时的内心复原力。这些技能是可以伴随你漫长的一生的,终身受用的,那么我们就应该为此投资。

我在工作前2年是处于一个迷茫的状态,没有自己的规划。真正让我发生改变的是,突然有一天我回家,父母的头发都白了,那一刻我意识到自己该学会长大,该为未来做点什么了。从那以后,我每天的状态就是,白天公司工作谋生存,晚上自我提升谋发展。在工作第3年的时候,自我感觉准备差不多了,开始去阿里面试,所以才有了那段裸辞的经历。当然我摔的很惨,也重新认识了自己。

我们做一个时间切片,把过去的自己和现在的自己对比,你会我发现当时所经历的,觉得很困难的事,现在看来都不是事。给自己的人生列个目标,知道自己想成为什么样的人,实现目标,自己的差距就会越来越小。
还有什么想了解的可以
有想了解更多的小伙伴可以加Q群 链接 里面看一下,应该对你们能够有所帮助

㈡ 前端工程师面试题vue2知识整理

⾸先呢,所谓的插槽就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显
示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤ slot 的插槽.
⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有 slot 标签上指定
name 属性,⽽在对应标签上添加# 属性指定名字.
在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽,以上就是我对插槽的理解.

作用域插槽
是把子组件里的数据传到父组件的插槽里使用

什么是跨域
跨域是浏览器的跨域 不符合 域名 协议 端口号一样(同源策略) 的请求都会出现跨域的问题
跨域的解决方法
最多的情况是后端处理跨域
前端的跨域
服务器代理
jsonp
vue 中是 proxy 代理实现跨域

vue 的跨域
用 proxy 实现

拦截器有两种 一个是请求拦截一个是响应拦截
拦截器不需要手动调用而是每次发送 http 请求的时候都会自动触发
我们一般在请求拦截中 放全局的 loading 和 token
在响应拦截中关闭全局的 loading 和对 token 进行过期处理 还可以处理错误编码字典

⾸先呢 jquery 他是⽤ js 封装的⼀个类库,主要是为了⽅便操作 dom 元素,⽽ vue 他是⼀个框架,并且呢,他会从真实 dom 构建出⼀个
虚拟的 dom 树,通过 di!算法渲染只发⽣改变的 dom 元素,其他的相同的 dom 元素不⽤在重新渲染. ⽽使⽤ jquery 去改变 dom 元素
的时候,即使有相同的 dom 元素也会重新渲染, jq 重点操作 dom,而 vue 重点操作数据。以上就是我对 vue 和 jquery 区别的理解.

在 vue2 中 vue 实例的 data 数据是响应式 的 就是数据变了 视图也会跟着变,如果给某一个 data 新添加了一个字段 这个新添加的字段因为 js 的限制不响应,需要使用 this.$set 方法代替原本的普通添加方法 就能实现响应,这个方法的三个参数 是给谁添加 添加的字段 初始值 如果不是在组件中 用这个方法 那么就用 Vue.set

根实例对象data可以是对象也可以是函数(根实例是单例),不会产生数据污染情况
如果不是一个函数,每个组件实例的data都是同一个引用数据,当该组件作为公共组件共享使用,一个地方的data更改,所有的data一起改变,如果data是一个函数,每个实例的data都在闭包中,就不会各自影响了。

query可以使用name和path而params只能使用name
使用params传参刷新后不会保存,而query传参刷新后可以保存
Params在地址栏中不会显示,query会显示
Params可以和动态路由一起使用,query不可以

同步更改mutations
异部更改action,action中通过commit触发mutations进行state数据更改
页面中触发action中函数

㈢ 如何面试前端工程师

随着时代的发展,很多新兴的就业职位随之产生。前端工程师将就是随着互联网的快速发展而产生的。其实在很多人的观念里,前端工程师也就是一个切页面的而已,他们也就是会html、css、javascript这些没有任何技术含量的网页制作而已。然而随着技术飞速发展,人们对这些技术的要求也是越来越高,如果只凭着一个人来把所有的事情都解决是很困难的,所以这个时候前端工程师就开始发挥着他们很大的作用了。

那我们应该如何来面试前端工程师呢?

  • 谈吐要大方得体

在我们在面对面试官时我们千万不要紧张。在进行自我介绍时我们要努力做到自信大方、吐字清晰。我们在自我介绍时要用简明扼要的话语来介绍自己,突出自己的优点表明自己的求职意向。你要通过寥寥数语把自己的优势都向面试官介绍清楚。记住不必要的话语要少说。

好了关于如何面试前端工程师这个话题我就聊到这了。希望我的回答能对你有所帮助。

㈣ 前端hr面试常问的问题

面试其实就是一个不断选择与被选择的过程(不知道说的对不对)。不同公司的面试方式都有所不同,大多数人都有过多次面试的经历,前端面试也不外乎那么一些啦(好像有些废话的感觉)。

面试之前的小故事

HR会打电话过来我是××公司的,在××上看到你投到我们公司的简历,问你何时候有空约一个呗,然后说就星期*吧,既然都打电话请我面试了,好吧,那就约一个!

然后有些人会精心准备,不停刷面试题,整夜整夜的看着HTML/JS/CSS知识点,还有那些最新的、时髦的技术,看看到时候能不能唬住面试官;而有些人对自己胸有成竹,哥那么多年的前端经验了,啥项目没有经历过,不就一个面试,怕啥呢。

很快或者很慢的来到那天。你打扮的清清爽爽漂漂亮亮的,打扮的好会有加分不,没错,第一印象也是挺重要的。途中有些人可能会还一直想着面试官会问啥题目呢,那啥**属性是什么来着呢,再次拿出手机默默的看起资料;有些人可能就会想着公司不知道妹子多不多漂亮不呢,环境和福利不知道咋样,最好别碰到傻逼一样的面试官哎,不然这以后咋相处好呢。

来到公司,大小公司大家都见多了嘛,也是得看发展是吧,我们也不是肤浅的人,见到前台妹妹,哟,还不错哦。领你进会议室里,让你稍等一下,她去通知面试官,过了一会儿,不是面试官进来,那就是前台妹妹给您送来一杯水。面试官踱步向前,咦~,我是继续坐着呢,还是站着呢,还是站起来显礼貌一些嗯。

给面试的一般会是Team Leader或者非常资深的工程师。首先会让你自我介绍下,然后巴拉巴拉介绍自己,途中或者聊到面试官喜欢的`部分那就会中断问几个问题吧,介绍完自己,就进入正式的战斗了吧,一般会有2-3轮的回合。遇知战斗详情,请听下回分解。

哈哈, 开玩笑。以上瞎编胡造,如有雷同,纯属巧合。

这里就只谈谈前端技术的战斗回合吧,写的不好,请多见谅。

普通型

面试中问题会比较的零碎,html/js/css肯定都会有涉及。知识点不会有太大的规律,可能几个公司面试下来你遇到的问题一个都不带重复的。哎,前端的知识点就是乍一看深似海,仔细一看深似黑洞啊。问题好的话,一方面考察了面试人对前端接触的广度,深度的话也可以从中接触到一些。因为面试的时间有限,其实也非常考验面试官对一个人的洞察能力。

一般如果不是应届生的话,也就是会跟你交流你之前的项目,你担当的角色,你遇到的难题,怎么解决问题,用的框架,与其他工程师的交流沟通协作等等。 这些其实你心里肯定是有答案的(可能也有懵逼的),就看你的表达,能不能对上面试官的胃口。

进阶型

除了基本的问题,面试中会有一些明显设计过的题目。针对某几个知识点,或让你手写代码,或让你提供算法或思路。如果之前没有遇到过这类问题的话其实一下子真的挺难回答,或者直接懵逼了,或者回答不出面试官满意的答案。这其实对工程师的要求也是比较的高,不能只是单纯的切切页面,用用插件,需要对某一类问题或者模式或者算法有深入的了解,对问题的解决思路有很好的把握。

算法可能不是前端工程师的长项,但作为优秀的工程师,对算法的了解应该会只深不浅。

这种面试的题目既提现了公司对面试者的要求,也相对而言的会有所体现公司的水平。

出题型

题目比较的综合,会通过邮件发给你,或者有专门的页面提供,在面试之前让你2-3天的时间做完。题目可能是很有名的某一类交互,或游戏,或页面,或公司自己出的一类小东西。

因为非当场面试,所有有比较充足的时间来思考,来写一些代码。一般都会完成,所以其实比较的关注点就是对代码的质量,通过代码来考察面试者的思路以及代码**惯等等。

其未知性也比较多,可能因为有些东西可能没法通过代码来传递,沟通,其他的思路,或者题目的缺陷等等。所以这只是面试途中的一个小部分,大多数人其实都会能做的很好。

直接上机型

还有的就会直接给你某一个交互,或者一张静态页面,或者一个布局等等,直接给你台电脑让你当场写出来。写完之后再有所交流,说说自己的想法或者接着谈其他的。

当你写代码时候,其实暴露的东西也挺多的。你写的**惯,思路清晰不清晰,对代码的熟悉程度,可能你平时都是ctrl C + V的,这时候你咋办呢。

这个可能遇到的比较少,但也会是有的。

结束语

许多面试可能都会结合以上的几种类型,多方面的考察面试者,其实,大家都懂的。

㈤ 面试java开发工程师一般会提什么问题

首先都是问工作经历,上一家公司的工作情况(应届生会问些学校表现、毕业设计之类的)。然后问些技术问题,JAVA基础的概念,线程、并发、网络、文件操作、数据库操作之类等等。学习java推荐选择千锋教育,千锋教育拥有国内一体化教学管理及学员服务,助力更多学员实现高薪梦想。

java开发工程师的就业方向有:
1.Android开发
Android是世界上最大的智能手机操作系统。根据Strategyalytics的最新研究报告,2016年第三季度全球智能手机出货量达到3.75亿台。Android操作系统获得了创纪录的88%全球市场份额,挤压了苹果IOS等平台。Java是Android应用的主要开发语言。
2.web开发
Web开发语言很多,Java就是其中之一。Java在开发高访问、高并发、集群的大型网站方面有很大的优势,比如去哪儿网、美团等。
3.客户端开发
Java客户端开发主要针对政府、事业单位和大型企业,如医疗、学校、OA、邮箱、投票、财务、考试、物流、矿山等信息系统。然而,客户端开发只是为了帮助自己企业的主营业务。

想要了解更多关于java的相关信息,推荐咨询千锋教育。千锋教育成立教研学科中心,推出贴近企业需求的线下技能培训课程。课程包含HTML5大前端培训、JavaEE+分布式开发培训、Python人工智能+数据分析培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、网络安全培训、区块链培训、影视剪辑包装培训、游戏原画培训、全媒体运营培训。

㈥ 面试Web前端需要注意什么会面试哪些问题

作为一名HTML5前端工程师,为了工作,为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项:

第一:注意自己的仪容仪表

面试之前,一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括,自己的牙缝是不是还有食物残渣,所以你需要就近找一个卫生间,如果没有卫生间就近找一个角落也是可以的,但是切记一定不要在大庭广众之下。因此,为了给自己整理出着装的时间请在约定时间前20分钟到达。

第二:再次检查面试时所需的资料是否都已带全

这些资料主要包括:身份证明、学历文凭证明、个人简历、以往作品等等,如果这些东西齐全之后,需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他,让他自己再一页一页的翻找自己需要的内容,如果说这些资料在面试官手中不小心散落一地,结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全,也不要紧张。反而你要庆幸幸亏及时检查,也有足够的时间组织语言去向面试官解释。

第三:面试之前将通信工具调成振动或关闭状态

虽然说面试者与面试官之间是一个平等的关系,但毕竟你是去人家公司求职的,始终处于一个被动的状态,所以最起码的尊重还是要做到的。曾经有调查显示,对于面试过程中接电话或是被电话打断的求职者,会被HR减分。

第四:等候面试官时,仔细观察多了解面试公司

在等候面试官时,可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等,一来可以在接下来的面试过程中表现出自己对公司的认同感,二来也可以让自己对求职公司多些了解,以确定是否要接受这里的工作。如果你身边有公司的资料宣传架,不妨取一本翻看一下,也会增加HR对你的好感。

第五:放松心情,保持自信

面试时一定要保持一定的自信,这样也会给面试官留下很好的印象。面试只是你步入工作的第一步,即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。

作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了,像以上五点细节性的东西也是一定要掌握的。

面试题系列:

网页链接

㈦ 面试问为什么选择前端工程师这个岗位

我感觉主要还得从兴趣方面回答:
1、前端所需要的技术方面,简单描述下用了哪些技术,然后表明自己有多喜欢这些技术。
2、呈现的效果方面,简单描述下页面特效,布局,这样也能从侧面说明自己的美感好。
等等吧,有什么问题还可以追问,希望能帮到你

㈧ web前端的面试自我介绍解析

web前端的面试自我介绍解析

自我介绍这个问题,不用多说了,面试必定会问!接下来我为你带来web前端的面试自我介绍解析,希望对你有帮助。

【如何进行自我介绍】

如果想要在自我介绍的时候就能够打动面试官,吸引面试官对我们的兴趣,那么像我们这种接受过PHP培训的程序员的自我介绍当然不能和应届生或者其他非技术岗位一样。如何进行自我介绍比较好?有没有什么套路呢?当然有。

如何进行自我介绍?看看老师是怎么建议大家的`!

1、我叫xxx,来自于吉林敦化,从网上看得到公司招聘的这个职位,觉得非常适合自己的发展。所以来这里争取下这份工作。

2、接下来可以讲解自己的核心竞争力(最强的技能、最深入研究的知识领域、个性中最积极的部分)和闪光点(做过的最成功的事,主要的成就)。核心就是要体现自己胜任这份工作(介绍时候要自然有底气,合情合理,面试前要充分准备好)。

3、先介绍到这里,面试官看看有什么问题,我可以再补充。

4、最后要说谢谢,任何HR都喜欢有礼貌的人!

注意:自曝其短(说自己的缺点)没有必要,自我介绍的时候千万不要和简历有冲突!

【你有什么优劣势】

这个问题是企业面试过程中被问到的概率很大的! 面试官想通过这一类问题的解答了解到: 1、这个人能否对自己做出正确的估价;2、主试人最关注的是该人的缺点、弱点,如这方面的问题比较突出,那就不适合做某项工作。作为前端工程师,我们应该如何巧妙的答这道题,给自己加分呢?

你有什么优劣势?请看前端老师的是怎么教我们答的:

1

作为程序员,最重要的能够给企业做好事(包括与人合作一起干事),能解决问题。所以我们可以这样说:

1、优点往狠里说 (技术狂热、学习能力强、为人谦和)

2、劣势可以提自己不是(本专业出身), 但是(对技术很狂热)

【你为什么选择我们公司】

1

你为什么选我择们的公司,对于这个问题,其实是面试官试图从中了解你求职的动机、愿望以及对此项工作的态度。这个问题,也是经常会被面试官问到的,所以各位面试的时候,一定要有所准备!

;

㈨ 2020年Web前端面试题汇总(一)

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍,今天首先来和小编一起看一看第一部分的内容,希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。

1.说几条写JavaScript的基本规范?


1)不要在同一行声明多个变量;


2)请使用===/!==来比较true/false或者数值;


3)使用对象字面量替代newObject这种形式;


4)减少使用全局函数,全局变量;


5)switch语句必须带有default分支;


6)if语句必须使用大括号;


7)for-in循环中的变量;


应该使用var关键字明确限定作用域;


从而避免作用域全局污染。


2.说说平衡二叉树?


平衡二叉搜索树(Self-balancingbinarysearchtree)


又被称为AVL树。


具有以下渣瞎性质:


1)它是一棵空树或它的左右两个子树


的高度差的绝对值不超过1,


并且左右两个子树都是一棵平衡二叉树。


2)平衡二叉树必定是二叉搜索树,反之则不一定。


3)平衡二叉树的常用实现方法有红黑树、AVL、


替罪羊树、Treap、伸展树等。


最小二叉平衡树的节点的公式如下:


F(n)=F(n-1)+F(n-2)+1备注:1是根节点,


F(n-1)是左子树的节点数量,


F(n-2)是右子树的节点数量。


3.清除浮动和解决垂直外边距重叠的解决方案?


问题描述:


1)父元素没有设置宽高,尺寸由子元素撑起;


子元素一旦浮动,父元素高度会发生塌陷。


2)子元素设置margin-top会作用的父元素的margin-top;


此时会造成垂直外边距重叠。


.clearfix::after,.clearfix::before{


content:''


display:table;


clear:both;


}


4.sessionStorage、localStorage和cookie?


相同点:


都用于浏览器端存储缓存数据;


不同点:


1)存储内容是否发送到服务器端


当设置了Cookie后,数据会发送到服务器端,


造成一定的宽带浪费;xxxstorage则会将数据保存


到本地,不会造成宽带浪费;


2)数据存储大小不同


Cookie数据不能超过4K,适用于会话标识;


xxxstorage数据存储可以达到5M;


3)数据存储的有效期限不同


cookie只在设置了Cookid过期时间


之前一直有效,即使关闭窗口或者浏览器;


sessionStorage,仅在关闭浏览器之前有效;


localStorage,数据存储永久有效;


4)作用域不同


cookie和localStorage是在同源同窗口中


都是共享的;


sessionStorage不在不同的浏览器窗口


中共享,即使是同一个页面;


5.判断一个单词是否是回文?


回文是指把相同的词汇或句子,


在下文中调换位置或颠倒过来,


产生首尾回环的情景,


叫做回文,也叫回环。


比如cacac,redivider。


letcheckPalindrom=(str)=>{


returnstr===


str.split('').reverse().join('');


}


6.不借助临时变量,进行两个整数的交换?


输入a=3,b=1,


输出a=1,b=3


letswap=(a,b)=>{


b=b-a;


a=a+b;


b=a-b;


return[a,b];


}


7.请写如芦空出至少5个html5新增的标签,并说明其语义和应用场景?


section:定义文档中的一个章节;


nav:定义只包含导航链接的章节;


header:定义页面或章节的头部;


它经常包含logo、页面标题和导航性的目录。


footer:定义页面或章节的尾部;


它经常包含版权信息、法律信息链接和反馈建议用的地址。


aside:定义和页面内容关联度较低的内容,


如果被删除,剩下的内容仍然很合理。


8.get和post请求在缓存方面的区别?


get请求类似于查找的过程,用户获取数据,


可以不用每次都与数据库连接,所以可以使用缓存。


post不同,post做的一般是修改和删除的工作,


所以必须与数据库交互,所以不能使用缓存。


因此get请求适合于请求缓存。


9.如哗漏何解决异步回调地狱?


promise、generator、async/await


10.图片的懒加载和预加载?


预加载:提前加载图片,


当用户需要查看时可直接


从本地缓存中渲染。


懒加载:懒加载的主要目的


是作为服务器前端的优化,


减少请求数或延迟请求数。


两种技术的本质:


两者的行为是相反的,


一个是提前加载,


一个是迟缓甚至不加载。


懒加载对服务器前端有一定


的缓解压力作用,


预加载则会增加服务器前端压力。


11.bind,apply,call的区别?


通过apply和call改变函数的this指向,


这两个函数的第一个参数都是一样的,


表示要改变指向的那个对象,


第二个参数,apply是数组,


而call则是arg1,arg2...这种形式。


通过bind改变this作用域


会返回一个新的函数,


这个函数不会马上执行。


12.js怎么控制一次加载一张图片,加载完后再加载下一张?


方法一:





varobj=newImage();


obj.src="#/21.jpg";


obj.onload=function(){


document.getElementById("pic")


.innnerHTML="";


}


加载中

㈩ Web前端面试的常见面试题汇总

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧,希望则宽本篇文章能够对大家有所帮助。

1.渐进增强与优雅降级


渐进增强
并不是一种技术,而是一种设计思想。各个浏览器的渲染能力各不相同,要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性,保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等),并为他们提供当前条件下最好的体验,这就是渐进增强得核心思想。


优雅降级也是一种设计思想,为了保证在高版本浏览器中提供最好的体验,碰到低版本浏览器再降级进行兼容处理,使其能正常浏览。


这两种思想的区别在于:


1.渐进增强是向上兼容,优雅降级是向下兼容;


2.渐进增强是从简单到复杂,优雅降级是从复杂到简单;


3.渐进增强关注的是内容(保证核心内容),优雅降级关注的是浏览体验(为了兼容低版本浏览器)


2.DOCTYPE














作用


DTD(DocumentTypeDefinition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型,决定何种协议来解析,以及切换浏览模式。


DOCTYPE是用来声明文档类型和DTD
规范的,一个主要的用途便是文件的合法性验证。如果文档代码不合法,那么浏览器解析时便会出现一些差错。


HTML5的文档类型声明:





HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性,但不包括展示性的和弃用的元素(如font),它的文档类型声明:


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


标准模式与怪异模式


怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规好卜范,随着浏览器支持越来越多的规范,在那些旧的浏览器中开发的页面在显示时会友盯穗被破坏。为了向后兼容,浏览器发明了怪异模式,一行错误或无效的
DOCTYPE都会触发怪异模式。


浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档,以及执行相同的渲染模式。


怪异模式与标准模式的主要区别:


1.怪异模式的宽度和高度会包含padding和border。标准模式不包含,标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。


2.怪异模式下,当内容超出容器高度时,会将容器拉伸,而不是溢出。


3.怪异模式下,在表格中的字体样式(如font-size)不会继承。


4.怪异模式下颜色值必须使用十六进制标记法。


3.语义化


HTML5
中的语义化就是让元素、属性或属性值有含义,更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离,元素只负责文档内容的结构与含义,而CSS
样式控制内容的呈现,像元素,没有语义但却能将字体变粗,这类元素违背了语义化的目的,将会被废弃。


优点


·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。


·有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。


·方便其他设备解析,如盲人阅读器根据语义渲染网页。


·有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。


语义化标签


·
定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;


·footer内容的页脚,通常包含该章节作者、版权数据或者与文档相关的链接等信息;


·article
文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目;


·nav描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表;


·section表示文档中的一个区域(或节),比如,内容中的一个专题组;


·main定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站
logo,搜索框(搜索框作为文档的主要内容);


·aside
表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。


4.超链接伪类


:link、:visited、:active和:hover的声明顺序是怎样的?


:link表示未访问的链接状态;


:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。


推荐顺序是LVHA,即:link:visited:hover:active。理由如下:


·当鼠标悬停在未访问的链接上时,:link和:hover都会命中,如果:hover在:link
之前声明,那么(:hover)就会被覆盖;


·当鼠标悬停在已访问的连接上时,:visited和:hover都会命中,如果:hover在:visited
之前声明,那么(:hover)就会被覆盖;


·当鼠标单击链接时,:active和:hover都会命中,我们大多是想让:hover只在悬停时展示样式,按下鼠标时使用:active
样式,因此:active在:hover之后声明;


·综上,:hover应在:link和:visited之后,在:active之前,因此active在最后。而:link和
:visited两者的顺序无所谓,互不影响。


5.CSS常见的长度单位


CSS中除了px长度单位之外,还有下面几个长度单位:


·pc六分之一英寸,1pc=12pt=1/6*1in=16px;


·pt一磅,72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;


·in一英寸,1in=2.54cm=96px;


·ex在含有“X”字母的字体中,它是该字体的小写字母的高度。对于很多字体来说,1ex≈0.5em;


·em1em等于父级元素的字体大小,2em就是父级元素字体大小的二倍;


·rem当用在根元素()的font-size上面时,它代表了它的初始值;


·ch代表元素所用字体font中“0”这一字形的宽度;


·vh1vh相当于视口高度的1%,100vh就是视口的高度;


·vw1vw相当于视口宽度的1%,100vw就是视口的宽度;


·vmax视口高度vw和宽度vh两者中的最小值


·vmin视口高度vw和宽度vh两种中的最大值;


·%相对于父级元素的大小来确定;


参考:CSS[1]


CSSpercentage[2]


6.事件对象


冒泡与捕获


事件冒泡与捕获是事件处理的两种机制,主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。


在点击子元素时,浏览器运行了两种不同的阶段:捕获阶段和冒泡阶段。捕获阶段的行为:


·浏览器检查元素的最外层祖先,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它;


·
然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作,然后是单击元素再下一个祖先元素,依此类推,直到到达实际点击的元素;


而冒泡与捕获恰恰相反:


·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序,如果是,则运行它;


·然后它移动到下一个直接的祖先元素,并做同样的事情,然后是下一个,等等,直到它到达元素;


而现代浏览器在默认情况下,所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件,然后向上冒泡,触发父元素绑定的事件。


addEventListener函数的第三个参数是个布尔值。含义:


·当布尔值是false时(这也是默认值),表示向上冒泡触发事件;


·当布尔值是true时,表示向下捕获触发事件;


不能冒泡的事件


有些事件是不会冒泡的。比如:


·blur元素失去焦点时触发,focusout事件也是失去焦点时触发,但可以冒泡;


·focus元素获取焦点时触发;


·mouseenter鼠标移动到元素上时会触发该事件,与之对应的是mouseover事件,但会冒泡;


·mouseleave鼠标离开元素时触发,与之对应的是mouseout,但会冒泡;


事件冒泡可以让我们利用事件委托,尤其是处理大量子元素时,如果给每个子元素都绑定事件,这是不优雅的,可以将事件绑定到父元素上,并让子节点上发生的事件冒泡到父节点上,利用
e.target属性可以获取到当前触发事件的子元素。


事件对象中的方法


·stopPropagation()阻止事件冒泡,当设置后,点击该元素时父元素绑定的事件就不会再触发;


·preventDefault()阻止默认事件的发生;


·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡,比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个),当在第二个事件函数中调用
stopImmediatePropagation方法时,点击div元素时,后面注册的click将不会被触发,而且还会阻止事件冒泡;


比如下面的例子,给p绑定多个click事件,在第二个事件函数中调用stopImmediatePropagation,第三个click
事件就不会触发,因为也阻止了冒泡,因此父元素的click事件也不会触发。





paragraph