‘壹’ web前端开发面试流程是怎样的
首先投简历，等待hr通知面试，一般情况下先填资料，做测试题，接着开始第一面（一般问经你的个人情况，工作经历等），资料已经交给技术，等一面通过之后接着二面，二面一般是技术面试，问你开发相关的技术问题（例如布局问题，js,框架之类的），有些公司还需要上机操作（写一两个页面或者开发一个js方法等），有些公司是通过之后直接进行3面有些是改天再进行3面，3面一般就是项目经理或总经理问你一些各种各样的问题（随机应变就行，也有一些公司没有这个环节），如果3面都过了，基本上就是面试成功了，接下来就是4面，也就是人事主管和你谈工资待遇等问题了，这个谈好之后就会告诉你什么时候过来上班，要准备什么东西，当然一般还会有正式的工作邀请函发到你的邮箱。如果没有3面的公司，那人事这个环节就直接是3面了。
还有一些公司是一面之后等通知，通过的就通知你二面，然后再等通知，然后通过再三面（这样的公司我一般不会等，太浪费时间）
‘贰’ 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="
}
‘叁’ 前端开发面试回答，你怎么回答
我面试过很多 前端程序员，非常了解面试者和面试官的心理，我可以很负责的告诉你：
就算面试你的人说你只能拿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前端面试会问人事方面的内容和web前端技术的内容；
人事的面试
web前端人事面试方面，需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容；
web前端技术的面试
技术面试，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相关技术，比如tcp握手协议、网络安全、后端技术等；
对于web前端面试准备，建议你去看“决胜前端”（min app），它里面包含了很多web前端技术面试、人事面试等面试真题，而且针对面试题做了详细的分析与解答。
我给你截图看一下例子吧
‘伍’ 前端面试官常问的问题有哪些
1、重绘和重排的关系：
重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。
2、重绘的概念：
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。
但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。
3、触发重排的情况：
页面渲染初始化时；浏览器窗口改变尺寸；元素尺寸改变时；元素位置改变时；元素内容改变时；添加或删除可见的DOM元素时。
4、rex的缺点：
（1）一个组件所需要的数据，必须甶父组件传过来，而不能像flux中直接从store取。
（2）当一个组件相关数据更新吋，即使父组件不需要用到这个组件，父组件还是会重新render,可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。
5、对MVC和MVVM的理解：
（1）mvc：View传送指令到Controller Controller完成业务逻辑后，要求Model改变状态Model将新的数据发送到View，用户得到反馈所有通信都是单向的。Angular它采用双向绑定（data-binding）：View的变动，自动反映在ViewModel，反之亦然。组成部分Model、View、ViewModel
（2）View：UI界面ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；Model：数据访问层。
‘陆’ 面试Web前端需要注意什么会面试哪些问题
作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：
第一：注意自己的仪容仪表
面试之前，一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括，自己的牙缝是不是还有食物残渣，所以你需要就近找一个卫生间，如果没有卫生间就近找一个角落也是可以的，但是切记一定不要在大庭广众之下。因此，为了给自己整理出着装的时间请在约定时间前20分钟到达。
第二：再次检查面试时所需的资料是否都已带全
这些资料主要包括：身份证明、学历文凭证明、个人简历、以往作品等等，如果这些东西齐全之后，需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他，让他自己再一页一页的翻找自己需要的内容，如果说这些资料在面试官手中不小心散落一地，结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全，也不要紧张。反而你要庆幸幸亏及时检查，也有足够的时间组织语言去向面试官解释。
第三：面试之前将通信工具调成振动或关闭状态
虽然说面试者与面试官之间是一个平等的关系，但毕竟你是去人家公司求职的，始终处于一个被动的状态，所以最起码的尊重还是要做到的。曾经有调查显示，对于面试过程中接电话或是被电话打断的求职者，会被HR减分。
第四：等候面试官时，仔细观察多了解面试公司
在等候面试官时，可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等，一来可以在接下来的面试过程中表现出自己对公司的认同感，二来也可以让自己对求职公司多些了解，以确定是否要接受这里的工作。如果你身边有公司的资料宣传架，不妨取一本翻看一下，也会增加HR对你的好感。
第五：放松心情，保持自信
面试时一定要保持一定的自信，这样也会给面试官留下很好的印象。面试只是你步入工作的第一步，即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。
作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了，像以上五点细节性的东西也是一定要掌握的。
面试题系列：
网页链接
‘柒’ 前端常见面试题-hr
因为前端是用户最直观能接触和交互的地方，所有 “用户体验”最重要。
早期学习都是有点野路子，遇到问题解决问题，
后面发现有很多问题没有系统的学习 很难分析出具体的问题，
然后会开始看一下比较基本和底层一点的书或者视频，包括一些api。
有了系统的知识后，就可以去研究相关一些大神的源码，当然也借鉴了很多人的学习心的再去慢慢消化。
如果单纯看和听 其实我觉得只能吸收10%左右。
我一般会把学习的内容和工作上解决了比较难的问题都通过 掘金或者的方式记录下来。这样我觉可以消化40%的内容。
最后最好的学习方法，当然是给别人说一遍，这也是我们前端组为什么每个月做技术分享的原因。
这样我觉得可以最整个知识跟深刻的思考和别人互动互相检验学习的质量。
首先我确实挺感谢我现在公司，因为我之前去过外包公司，我深刻的感受到企业文化对公司的重要性。倡导以员工的成长为主，
公司会定期给我们请外面的老师做管理干部的培训，有管理的有经验的。确实让我学习了很多成长了很多。
不过由于我们是传统服装制造业，对于技术的迭代和要求没那么高，我在这里也工作了6年多，我自身也感觉有点 开始进入舒适区的感觉，
我想在新的环境，跟更多行业优秀的人才一起学习，让自己做一个T字型人才，把纵向的技术能力扎深扎稳。
应该就是capp项目，由于公司战略要求，要在3个月内完成原来capp工时工序客户端系统到web的切换，两个前端，两个后端，由于周期短，要在短时间交付项目成果，确实是一个很难解决的大难题。
（1）首先我觉得沟通很重要，在需求方面，我和后端组长积极与产品沟通，分析系统各个模块的使用场景和优先级。把最关键的核心模块提取出来，优先开发，并与领导协商后面再继续迭代其他基础功能。 每个功能都讨论仔细避免交付时才返工。
（2）在框架上，一个稳定的容用的框架是高效迭代开发所必须的，所以作为框架的搭建就刻不容缓，我和后端负责人也是沟通分析赶工，不断打磨一个稳定有效的框架。制定了很多约定与规范。
（3）在时间上，打包比较花时间，为了解放不必要的投入，我引进入CI/CD工具，大量的节省了前端后端的部署时间。把精力都花在刀刃上。
（4）团队的氛围， 毕竟还有很多功能要开发，加班是再所难免。
其实我觉得人加班为什么会累，一/般是一个人在奋战，会感到孤独和无助。所以我们采取在关键节点交付前集体加班的方式，由于大家都在，即保证了开发过程的效率，也可以避免007的噩梦。
（5）仪式感与明确的目标，跟上级申请项目立项，让公司发起启动会，让每一个参与开发同事有仪式感，意识自己参与项目的重要性与意义。并申请项目奖金，在每个阶段性节点按时交付，我们都给予员工及时的奖励和认可，由于有了明确的目标和方向。
整体项目最终以2个半月交付核心业务功能，4个月后完成整个系统所有功能交付，并顺利上线。
我们喜欢的运动是羽毛球，平时喜欢用碎片化的时间 听得到的一些可能，有it类的有经济学类的，可以扩充自身的视野。
还是在掘金写写博客。
‘捌’ 前端面试 问什么问题
web前端面试会问人事方面的内容和web前端技术的内容；
人事的面试
web前端人事面试方面，需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容；
web前端技术的面试
技术面试，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相关技术，比如tcp握手协议、网络安全、后端技术等；
对于web前端面试准备，建议你去看“决胜前端”（min app），它里面包含了很多web前端技术面试、人事面试等面试真题，而且针对面试题做了详细的分析与解答。
我给你截图看一下例子吧
‘玖’ 前端面试要点
想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先，我们得知道前端面试中，社招和校招究竟有啥区别？
对于前端开发来说，如果说社招更看重对前端技术体系的深入理解，以及解决问题的能力话，那校招更看重的其实是基本功和学习能力（或者说是潜力）。
但其实，无论是社招还是校招，面试的时候都会问到一些曾经操作过的项目，尤其是大厂，或者热门高薪部门，面试官除必问的技术经验外，也会对技术深度进行一个基础的考核，那在这种情况下如何hold住大厂面试呢？
前端面试三要素：简历、个人介绍、技术能力。下面，就来分别聊一聊。
1、简历筛选关：
HR一般会去看简历中所提的技术栈是否匹配，怎么看呢？我们可以抓住简历中的技术名词，一般来说如果一点技术名词都没有提到，那么大概有以下几种可能：很水、很牛但概率很小、不会写简历。所以，一部分人可能会因为简历的问题没有了面试机会，这点是需要非常注意的。
2、个人介绍关：
通过了简历筛选阶段，就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意，最多3分钟！言简意赅的说明自己的工作时间，擅长技术栈和自己的工作预期。
3、项目经验表达：
对前端开发学习者而言，JS并不陌生，但大厂的JS面试题却总是显得很“陌生”，怎么样能够真正做到深入理解与高级应用？这不仅是面试过程中对前端求职者的要求，也是大多数前端开发者的痛点。
大厂面试中，面试官除了关注你的项目经验外，还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如：模块化、异步解决方案、网络、框架及原理、线程等，但在与面试官的正面battle中，求职者总会败下阵来。
所以，建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。
‘拾’ 前端面试会提问到哪些
在面试前端的过程中，有些问题是经常会被提问到的
一、基础篇
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、平时如何管理你的项目？