❶ 如何面试一个前端开发者
1.明确一下,很多面试因公司、公司规模、面试官以及你获得面试资格的渠道而不同。我曾经经历过这样的面试,在面试官坐下前,他显然并没有看过(或者记得)我的简历内容。另一方面,我也经历过其他一些面试,面试官在面试前已经事先了解了关于我的一切。因此,你对前端开发者面试准备,在实际面试前开始。
2,面试前,应该假设一下面试官将会深入调查你。确保你的网上作品集和相关的社会关系网络内容都是最新的。无论是个人网站、Behance、还是Dribbble,确保给人的第一印象是好的。这一点甚至可以在你踏入房间之前就能影响到面试官对你的看法。
3 世事多变,这种准备并非包罗万象的。将这些问题作为参考,同时一定记得:面试要放松。
❷ 前端面试会提问到哪些
在面试前端的过程中,有些问题是经常会被提问到的
一、基础篇
1. 在不使用第三个变量的情况下,如何调换a与b的值?
2. px与em的区别
3. 简述一下盒模型
4. 页面导入样式时,使用link和@import有什么区别?
5. 简述一下事件代理
二、HTML常见题目
01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
02、HTML5为什么只需要写?
03、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?
04、页面导入样式时,使用link和@import有什么区别?
05、介绍一下你对浏览器内核的理解?
06、常见的浏览器内核有哪些?
07、html5有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?
08、如何区分HTML和HTML5?
09、简述一下你对HTML语义化的理解?
10、HTML5的离线储存怎么使用,工作原理能不能解释一下?
三、CSS类的题目
01、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
02、CSS选择符有哪些?哪些属性可以继承?
03、CSS优先级算法如何计算?
04、CSS3新增伪类有哪些?
05、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
06、display有哪些值?说明他们的作用。
07、position的值relative和absolute定位原点是?
08、CSS3有哪些新特性?
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
10、用纯CSS创建一个三角形的原理是什么?
四、JavaScript类的题目
01、JavaScript中this是如何工作的
02、请解释原型继承的原理。
03、什么是闭包(closure),如何使用它,为什么要使用它?
04、.call 和.apply的区别是什么?
05、请指出JavaScript 宿主对象(host objects) 和原生对象(native objects) 的区别?
06、请指出以下代码的区别:function Person(){}、var person = Person()、var person = new Person()?
07、请解释变量声明提升(hoisting)。
08、什么是 “use strict”; ? 使用它的好处和坏处分别是什么?
09、什么是事件循环 (event loop)?
10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
五、开发及性能优化类题目
01、如何规避javascript多人开发函数重名问题?
02、请说出三种减低页面加载时间的方法.
03、说说你所了解到的Web攻击技术。
04、说说你说了解的前端性能优化方法?
05、前端开发中,如何优化图像?图像格式的区别?
06、浏览器是如何渲染页面的?
07、页面重构怎么操作?
08、什么叫优雅降级和渐进增强?
09、前端需要注意哪些SEO?如何做SEO优化?
10、平时如何管理你的项目?
❸ 面试Web前端需要注意什么会面试哪些问题
作为一名HTML5前端工程师,为了工作,为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项:
第一:注意自己的仪容仪表
面试之前,一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括,自己的牙缝是不是还有食物残渣,所以你需要就近找一个卫生间,如果没有卫生间就近找一个角落也是可以的,但是切记一定不要在大庭广众之下。因此,为了给自己整理出着装的时间请在约定时间前20分钟到达。
第二:再次检查面试时所需的资料是否都已带全
这些资料主要包括:身份证明、学历文凭证明、个人简历、以往作品等等,如果这些东西齐全之后,需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他,让他自己再一页一页的翻找自己需要的内容,如果说这些资料在面试官手中不小心散落一地,结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全,也不要紧张。反而你要庆幸幸亏及时检查,也有足够的时间组织语言去向面试官解释。
第三:面试之前将通信工具调成振动或关闭状态
虽然说面试者与面试官之间是一个平等的关系,但毕竟你是去人家公司求职的,始终处于一个被动的状态,所以最起码的尊重还是要做到的。曾经有调查显示,对于面试过程中接电话或是被电话打断的求职者,会被HR减分。
第四:等候面试官时,仔细观察多了解面试公司
在等候面试官时,可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等,一来可以在接下来的面试过程中表现出自己对公司的认同感,二来也可以让自己对求职公司多些了解,以确定是否要接受这里的工作。如果你身边有公司的资料宣传架,不妨取一本翻看一下,也会增加HR对你的好感。
第五:放松心情,保持自信
面试时一定要保持一定的自信,这样也会给面试官留下很好的印象。面试只是你步入工作的第一步,即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。
作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了,像以上五点细节性的东西也是一定要掌握的。
面试题系列:
网页链接
❹ 如何面试前端工程师
随着时代的发展,很多新兴的就业职位随之产生。前端工程师将就是随着互联网的快速发展而产生的。其实在很多人的观念里,前端工程师也就是一个切页面的而已,他们也就是会html、css、javascript这些没有任何技术含量的网页制作而已。然而随着技术飞速发展,人们对这些技术的要求也是越来越高,如果只凭着一个人来把所有的事情都解决是很困难的,所以这个时候前端工程师就开始发挥着他们很大的作用了。
那我们应该如何来面试前端工程师呢?
谈吐要大方得体
在我们在面对面试官时我们千万不要紧张。在进行自我介绍时我们要努力做到自信大方、吐字清晰。我们在自我介绍时要用简明扼要的话语来介绍自己,突出自己的优点表明自己的求职意向。你要通过寥寥数语把自己的优势都向面试官介绍清楚。记住不必要的话语要少说。
好了关于如何面试前端工程师这个话题我就聊到这了。希望我的回答能对你有所帮助。
❺ 前端开发面试回答,你怎么回答
我面试过很多 前端程序员,非常了解面试者和面试官的心理,我可以很负责的告诉你:
就算面试你的人说你只能拿8K,但是你完全可以通过各种方法去拿到10K以上的薪资!
面试的时候面试官都是什么样的心理?
大多数公司的领导都会通过给你构造一个宏伟的蓝图以及对你进行技术打击,来让你降低标准,因为任何一家公司都希望花最少的钱请到最NB的技术人才,其实双方就是一个周旋的过程,看谁的情商更高一些,但往往都是面试者被面试官拿下的情况比较多。
我给面试经验不多的 前端程序员4个建议:
1、说工资时千万不要说自己的理想工资,在这个之上虚高一点!
假设你预期的薪资是10k,你很实在的说要10k,那么按照常理来说,你的工资标准是一定会被往下进行打压的。
你可以先说自己以前的工作的薪资在11K左右,现在换份工作想要13K的薪资,这个时候面试官就会想,这个人以前的工资是11k,现在给他10k他肯定是不会来的,但他还是会跟你进行压价,但是压价肯定都是在10k以上的,所以你和面试官谈判的时候,如果他认可你,那么你的薪资应该就会在10k-13k之间,无论最终是10k还是11k或者12k,我们的目标都已经达到了。你可以进行一番思考,最终同意对方的开价。
但是你不要跟轻易的答应,一定要拿捏一下,让对方觉得你也在考虑,最终你选择了他们公司,要表达出对他们公司的愿景,自己中意的是职业发展,喜欢的是公司氛围等等因素,这样对方才会认为你是看重公司的发展,而不是因为工资。关于这点我只能说,华夏民族的人和人交流的关系是世界最微妙的,这些套路大家心知肚明,但是你用和不用还真的是两种效果。
2、设置一个自己的心理价位
如果对方说的薪资低于这个心理价位,我们一定要果断拒绝,保持我们的原则性,不要因为对方说了而让你降低了自己的心理价位,这样也会让面试官觉得你非常的有原则,非常自信,人们都尊重这样的人,如果你一味的做舔狗,下场会非常悲惨。
根据我十年多的IT从业经验来看,即使是做同样的工作,也会存在着很多工资高低差距较多的情况,所以不要掉在一棵树上,现在社会工作机会这么多,只要有实实在在的技术,工作是很容易找的,一定要多去尝试。
3、凸显自己的价值,让对方觉得你是个人才
如果之前两点没有达到预期成效,但你又非常看好这家公司,就该尽力争取了;
用自己之前做成的事情说事情,最好是用数据给面试官说明,表达清楚自己为什么要这样的薪资,让对方感觉到你值这么多钱,如果对方公司现在比较缺人,而且你要的薪资没有特别离谱,还有有希望拿下的。
4、公司一般都有奖金福利可以弥补工资的欠缺
大多数人都想不到那么远,都是盯着眼前的薪资,但其实很多公司都有项目提成、奖金,这也是钱啊,有一些不错的公司都是14薪往上,所以在跟公司谈的时候,一定要去问他们是否有奖金、年终奖之类的福利。
除了被压榨薪资的问题,还有以下几点是必须要注意的!
1、项目作品
面试的时候,除了基础的知识技术外,一个项目经验是非常重要的,面试官会着重去问你的项目过程,所以准备好一份好的项目实战,不只是证明你对这次面试的重视,更是证明你有能力胜任这份工作的利器。
2、去背那些常问的面试题
面试题对于以下几个问题都会问:
·自我介绍(建议30s-60s)
·了解我们公司的基本情况吗?
·你上家公司离职的原因是什么?
·你自己的职业规划是什么?
·自我评价一下自己的优缺点?
以上问题都是大部分公司都会问到的,其实面试官只是想多了解你一些,而这些回答在网上有非常标准的答案,如果你觉得自己回答不好,你可以去网上找一些标准的答案背一下,还是非常有必要的,做到万无一失。
3、假设面试官没有跟你说薪资的问题,那么我们也不要主动去提及,这样会显得你非常的着急,最好是先拿到offer之后再去谈薪资,这样对于我们来说是非常有利的,经验之谈。
4、面试的时候不要对方问一句你就答一句,你一定要明白面试的本质是什么,在短时间内展示你的才华,方方面面的才能,给对方留下一个好的印象。
5、面试的过程中,是你展现的时候,所以80%的时间都应该你来主导,你来展示自己的才能,一定要非常着重的表现自己。
6、在回答面试官时,换位思考几秒钟:
·他为什么要问这个问题?
·他想知道什么答案?
·他想通过这个答案判断出什么?
所谓知己知彼才能百战不殆,你一定要换位思考对方问的问题,想要知道什么,从你的回答中他是否可以得到他想要的答案,所以面试是一门非常深的学问,人与人之间心理的博弈。
总结:
以上全部都是面试技巧方面,这属于细活,而真正掌握技术才是根本,如果你没有掌握良好的技术,技巧也帮助不了你找到一份工作,当你的技术达标,在加上好的面试技巧,就是如虎添翼,工作随便你选择。
常在这里回答问题,热爱技术,喜欢帮别人解答行业技术问题和行业知识。
如果大家对于学习前端有任何不懂的可以随时来问我,我给你提供一个非常不错的前端交流学习qun:前面是二九六,中间是二一二,后面是五六二。有问题就在里面问我,这样你可以少走很多弯路,做起来有效率,记得多跟有经验的人交流,别闭门造车。如果没有比较好的教程,也可以管我要。
❻ web前端开发面试流程是怎样的
首先投简历,等待hr通知面试,一般情况下先填资料,做测试题,接着开始第一面(一般问经你的个人情况,工作经历等),资料已经交给技术,等一面通过之后接着二面,二面一般是技术面试,问你开发相关的技术问题(例如布局问题,js,框架之类的),有些公司还需要上机操作(写一两个页面或者开发一个js方法等),有些公司是通过之后直接进行3面有些是改天再进行3面,3面一般就是项目经理或总经理问你一些各种各样的问题(随机应变就行,也有一些公司没有这个环节),如果3面都过了,基本上就是面试成功了,接下来就是4面,也就是人事主管和你谈工资待遇等问题了,这个谈好之后就会告诉你什么时候过来上班,要准备什么东西,当然一般还会有正式的工作邀请函发到你的邮箱。如果没有3面的公司,那人事这个环节就直接是3面了。
还有一些公司是一面之后等通知,通过的就通知你二面,然后再等通知,然后通过再三面(这样的公司我一般不会等,太浪费时间)
❼ 如何面试前端开发
自我介绍,可以简单介绍你毕业什么学校,什么专业,工作经历简明扼要的说出来就可以了,不要详细到你哪年进入公司,哪年离开公司,负责项目做什么的,说一大通。这个对面试官来说,想让你自我简单介绍,其实考察点有两方面:1面试者的表达能力和概括能力,2面试者目前掌握什么技术,做过什么项目,在项目中的角色来初步判定这个人的能力
有些面试者回答问题,在介绍项目的时候,很大概的说,或者一句话前端都是我做的,这些都是我设计的;这样肯定是不行的,面试官让你介绍项目的时候肯定是希望你详细介绍你的项目,这个项目使用者是谁,让我知道谁在使用这个项目;你负责哪些模块,哪些组件,那些模块实现什么业务逻辑,用到什么技术,这个能让面试官更加知道你项目的业务,才能从你描述中知道这类的业务会遇到什么问题,以及你使用的技术是否合理,能更加判定你的能力,才能更好的提出问题,才能更好的面试下去。
前端技能在问到很多面试者的时候感觉自己都懂前端,其实他们只是懂使用js敲代码而已,很多前端知识,以及前端原理都不懂,只会使用的话,那么永远只会走来人家的后面。就那一个比喻来说吧,如果你只是一个会开车的司机,不会修车或者造车,那么如果哪天车出了毛病,你都不知道,到时候才去学习车的构造原理。或者你会说我直接给维修厂不就可以了,如果维修厂关门了呢怎么办。所以我们前端开发人员还是要脚踏实地,不要说我会使用vuejs,react前端框架,问你一个mvvm模式是什么,你都说不知道,怎么实现mvvm框架,在不使用别人开发mvvm框架,自己可以开发一个简单的mvvm框架?
❽ 如何面试Web前端工程师
Web前端工程师面试主要就是问你对前端工程师有何认识,你最满意是做了什么项目,详细介绍这个项目的背景过程。你对于我们公司有没有了解,你对我们公司的项目有什么意见看法等等。更多前端工程师如何面试你可以到问问我建筑求职网了解相关面试技巧。
❾ 前端面试要点
想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先,我们得知道前端面试中,社招和校招究竟有啥区别?
对于前端开发来说,如果说社招更看重对前端技术体系的深入理解,以及解决问题的能力话,那校招更看重的其实是基本功和学习能力(或者说是潜力)。
但其实,无论是社招还是校招,面试的时候都会问到一些曾经操作过的项目,尤其是大厂,或者热门高薪部门,面试官除必问的技术经验外,也会对技术深度进行一个基础的考核,那在这种情况下如何hold住大厂面试呢?
前端面试三要素:简历、个人介绍、技术能力。下面,就来分别聊一聊。
1、简历筛选关:
HR一般会去看简历中所提的技术栈是否匹配,怎么看呢?我们可以抓住简历中的技术名词,一般来说如果一点技术名词都没有提到,那么大概有以下几种可能:很水、很牛但概率很小、不会写简历。所以,一部分人可能会因为简历的问题没有了面试机会,这点是需要非常注意的。
2、个人介绍关:
通过了简历筛选阶段,就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意,最多3分钟!言简意赅的说明自己的工作时间,擅长技术栈和自己的工作预期。
3、项目经验表达:
对前端开发学习者而言,JS并不陌生,但大厂的JS面试题却总是显得很“陌生”,怎么样能够真正做到深入理解与高级应用?这不仅是面试过程中对前端求职者的要求,也是大多数前端开发者的痛点。
大厂面试中,面试官除了关注你的项目经验外,还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如:模块化、异步解决方案、网络、框架及原理、线程等,但在与面试官的正面battle中,求职者总会败下阵来。
所以,建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。
❿ Web前端最全面试宝典- Html篇
HTML
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
5.HTML全局属性(global attribute)有哪些
参考资料:MDN: html global attribute或者W3C HTML global-attributes
accesskey
:设置快捷键,提供快速访问元素如aaa在windows下的firefox中按alt + shift + a
可激活元素
class
:为元素设置类标识,多个类名用空格分开,CSS和javascript可通过class属性获取元素
contenteditable
: 指定元素内容是否可编辑
contextmenu
: 自定义鼠标右键弹出菜单内容
data-*
: 为元素增加自定义属性
dir
: 设置元素文本方向
draggable
: 设置元素是否可拖拽
dropzone
: 设置元素拖放类型: , move, link
hidden
: 表示一个元素是否与文档。样式上会导致元素不显示,但是不能用这个属性实现样式效果
id
: 元素id,文档内唯一
lang
: 元素内容的的语言
spellcheck
: 是否启动拼写和语法检查
style
: 行内css样式
tabindex
: 设置元素可以获得焦点,通过tab可以导航
title
: 元素相关的建议信息
translate
: 元素和子孙节点内容是否需要本地化
6.什么是web语义化,有什么好处
web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 css命名的语义化是指:为html标签添加有意义的class,id补充未表达的语义,如Microformat通过添加符合规则的class描述信息 为什么需要语义化:
去掉样式后页面呈现清晰的结构
盲人使用读屏器更好地阅读
搜索引擎更好地理解页面,有利于收录
便团队项目的可持续运作及维护
7.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
新特性:
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签(header,nav,footer,aside,article,section)
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
表单控件,calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
支持HTML5新标签:
IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架):
如何区分:
DOCTYPE声明新增的结构元素、功能元素
8. HTML5 存储类型有什么区别?
HTML5 能够本地存储数据,在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案:
localStorage - 没有时间限制的数据存储,数据永远不会过期,关闭浏览器也不会丢失
sessionStorage - 针对一个 session 的数据存储,同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
9. HTML5 标准提供了哪些新的API?
1:canvas,不用多说,可以画出很多绚丽的图形,甚至可以直接做出伪3D游戏。
2:媒体控制,也很好理解(直译就是回放功能,假如只用html5.0以下的标签写,以前的音乐播放是不可能实现滚动条的。)
3:离线网页程序,可以把资源文件完全缓存在客户端,并且通过js的一些方法清空缓存
4:文档编辑,应该是更好的支持对文档的编辑。
5:拖动,可以将文件拖动到某些区域上传
6:跨文档请求,websocket,一种更加高效的通讯方式
7:历史管理,可以通过js管理和插入历史记录
8:MIME头自定义
9:客户端数据存储,localstoage sessionstoage
10:地理位置共享
11:本地数据库
12:索引数据库
10.HTML5 应用程序缓存和浏览器缓存有什么区别?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
11.常用那几种浏览器测试?有哪些内核(Layout Engine)?
(Q1)浏览器:IE,Chrome,FireFox,Safari,Opera。
(Q2)内核:Trident,Gecko,Presto,Webkit。
12.请描述一下 cookies,sessionStorage 和 localStorage 的区别?
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大;
sessionStorage和localStorage有更多丰富易用的接口;
sessionStorage和localStorage各自独立的存储空间;
13.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
14.请写出localStorage对象的常用方法。
存储 - localStorage.setItem(key, value) - 如果key存在,更新value
获取 - localStorage.getItem(key) - 如果key不存在,返回null
删除 - localStorage.removeItem(key) - 删除key对应的数据
全部清除 - localStorage.clear() - 清空localStorage中所有数据
遍历 - localStorage.length
遍历 - localStorage.key(index)
15.如何在HTML5中启用应用程序缓存?
<html manifest="fileName.appcache">
每个指定了manifest的页面在用户对其访问时都会被缓存。
.appcache是manifest文件的扩展名
16.html5 离线存储
Html5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新、删除离线存储等操作。
Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 <html manifest='offline.manifest'> 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中管理manifest文件,那么静态文件服务器是个不错的选择。
17.HTML5 Canvas 元素有什么用?
Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作