前端工程师面试技巧.docx
《前端工程师面试技巧.docx》由会员分享，可在线阅读，更多相关《前端工程师面试技巧.docx（10页珍藏版）》请在冰豆网上搜索。
前端工程师面试技巧
前端工程师面试技巧
【篇一：
前端工程师入门最全面试题】
1、什么是h5？
h5=html5，指的是html超文本标记语言（html）的第五次重大修改，html的第五代。
html5具有的特点：
（1）、语义化的标签：
好处是网站加载更快；该标签举例：
header、nav、article等。
（2）、增加了音频、视频标签：
好处是取代falsh；该标签举例：
audio、video。
（3）、canvas标签：
好处在浏览器上绘制图形或动画，取代flash。
（4）、支持手机和平板的响应式布局。
html5的缺点：
低版本浏览器支持性不好，比如ie9以下的浏览器不支持html5。
2、h5为什么这么火？
h5是哪一年产生的？
h5会火多久？
（1）、因为h5的后台很硬，是谷歌（google）和苹果（apple）两大巨头公司，谷歌和苹果大力倡导h5的发展，也是h5的忠实的支持者和实践者（ios+android系统占据手机市场92.36%），h5的产生主要目的也是干掉flash，因为flash是adobe公司的，adobe不是w3c组织的成员之一，苹果和谷歌等万维网联盟也不希望在自己的产品中使用加载量过大的flash。
（2）、h5是2014年9月份w3c（万维网联盟，主要有苹果和谷歌公司）组织发布的。
（3）、刷脸时代（这里专指网站用户体验更加美观的时代）+移动端时代（手机+平板），会促使h5会在未来的有更加美好的发展前景，只要有网站，h5就会很火，ui也就很火，h5的发展会让ui更加提高用户的满意度，h5的火爆时代，会促进ui更好发展。
（4）、微信的发展，o2o的促使h5更火。
在这里不得不谈微信，如果没有微信，或许今天我们不会这样来讨论h5，微信无意中养成了用户扫码的习惯，并通过公众号的内容生产及分发，以及微信本身已有的庞大的用户群体及社交属性，使基于网页的内容可以快速传播，真正带来了app即浏览器的时代，取消了输入内容网址的麻烦。
以微信为代表的超级社交app，解决了网页内容浏览及分发的通路。
h5或许会没落，但会迎来h6、h7…，只会变得越来越好，所以没必要担心h5会不会死，当下重在实践与积累，至少现在，html5的影响力，会超出你我的想象，也就意味着h5的好闺蜜ui会一直火下去。
3、什么叫做响应式？
针对不用的屏幕显示不同的网页布局，比如说大屏幕手机、小屏幕手机、平板能够适应不同的屏幕来显示网站。
4、针对不同屏幕的响应式，ui设计师该做几套设计图？
只做一套，大多ui设计师会使用iphone5的尺寸来做一套（640x1136）。
那么这种可以适配响应式的各种屏幕的吗？
这种在html5中通过代码中的媒体查询来实现。
媒体查询怎么写？
媒体查询的具体写法如下：
@mediascreenand（max-width:
640px）{//最大宽度是640px的屏幕宽度
navli{//nav标签下的li标签设置样式
display:
inline;//转化为行元素
}
}
5、div是什么？
在div出现之前做网站用什么布局？
div是网站布局的盒子标签，div出现是table布局，因为table布局嵌套很多，网站加载慢，布局层级不清晰。
6、html是什么？
css是什么？
js是什么？
（1）、html是超文本标记语言，他是做网站时候用的一些文本标记标签，比如div、span等。
（2）、css是层叠样式表，是做网站的时候给标签来美化网站的样式，比如说background（背景）、color（字体颜色）、height（高度）、width（宽度）等。
（3）、js=javascript是网站中写前后台交互效果、网页动画效果的一种开发语言，比如鼠标点击事件（click）、前后台数据请求（ajax）等。
7、什么是前端工程师？
什么是后端工程师？
前端工程师就是指的做静态网页的工程师：
（1）、广义的前端分为三种：
安卓工程师、ios工程师、web前端工程师。
（2）、狭义的前端指的是web前端工程师，web前端工程师指的是做静态的pc端和手机端静态网页的工程师。
8、什么是静态网页？
什么叫做动态网页？
（1）、静态网页：
没有数据交互的网页，没有数据库参与，没有服务器端数据的加载。
比如静态网页就是只有html+css+javascript做成的网站。
（2）、动态网页：
有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。
比如动态网页就是jsp页面（后台语言是java）、asp页面（后台语言是）。
9、前端语言有哪些？
后端语言有哪些？
（1）、前端语言：
html、css、javascript。
（2）、后端语言（服务器端语言）：
php、java、。
最近新出的node.js
10、做一个网站的团队都需要哪些人？
（1）、产品经理：
设计这个产品，通常就是了解用户的网站需求，画原型图。
（2）、项目经理：
通常是对整个产品有一个整理管理和负责，通常是会代码技术的人来构建整个网站的代码框架，以后网站实现的全面管理。
（3）、ui设计师，通过原型图画psd设计图的。
（4）、前端工程师，根据设计图来做静态网页，可能是原生app的ios和安卓工程师，或者web端的web前端工程师。
（5）、后端工程师，通常就是做java、、php的工程师来写后端逻辑的工程师。
11、行内元素有哪些？
块级元素有哪些？
空（void）元素有那些？
（1）、css规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（2）、行内元素有：
abspanimginputselectstrong（强调的语气）
块级元素有：
divulollidldtddh1h2h3h4…p。
（3）、知名的空元素（单标签）：
brhrimginputlinkmeta。
12、css的盒子模型？
（1）、两种，ie盒子模型、标准w3c盒子模型；ie的content部分包含了border和pading;
（2）、盒模型：
内容（content）、填充（padding）、边界（margin）、边框（border）。
13、浏览器的内核分别是什么?
经常遇到的浏览器的兼容性有哪些？
*ie浏览器的内核trident、mozilla（火狐）的gecko、google（谷歌）的webkit、opera内核presto；
*png24为的图片在ie6浏览器上出现背景，解决方案是做成png8.
*浏览器默认的margin和padding不同。
解决方案是加一个全局的*{margin:
0;padding:
0;}来统一。
*ie6双边距bug:
块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
14、你怎么来实现页面设计图，你认为前端应该如何高质量完成工作?
一个满屏（品）字布局如何设计?
*首先划分成头部、body、脚部；
*实现效果图是最基本的工作，精确到2px；与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验处理hack，兼容、写出优美的代码格式针对服务器的优化、拥抱html5。
15、页面重构怎么操作？
编写css、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。
16、为什么要初始化css样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对seo有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
*最简单的初始化方法就是：
*{padding:
0;margin:
0;}。
17、doctype作用?
严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、!
doctype声明位于文档中的最前面，处于html标签之前。
告知浏览器的解析器，用什么文档类型规范来解析这个文档。
（2）、严格模式的排版和js运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。
模拟老式浏览器的行为以防止站点无法工作。
（4）、doctype不存在或格式不正确会导致文档以混杂模式呈现。
18、css选择符有哪些？
哪些属性可以继承？
优先级算法如何计算？
*
（1）、id选择器（#myid）
（2）、类选择器（.myclassname）
（3）、标签选择器（div,h1,p）
（4）、相邻选择器（h1+p）
（5）、子选择器（ulli）
（6）、后代选择器（lia）
（7）、通配符选择器（*）
（8）、属性选择器（a[rel=“external”]）
（9）、伪类选择器（a:
hover,li:
nth–child）
*可继承：
font-sizefont-familycolor,ullidldddt;
*不可继承：
borderpaddingmarginwidthheight;
*优先级就近原则，样式定义最近者为准;
*载入样式以最后载入的定位为准;
优先级为:
!
importantidclasstag
important比内联优先级高
19、如何居中div，如何居中一个浮动元素?
确定容器的宽高宽500高300的层。
设置层的外边距
.div{
width:
500px;height:
300px;//高度可以不设
margin:
-150px00-250px;
position:
relative;相对定位
background-color:
pink;//方便看效果
left:
50%;
top:
50%;
}
20、css的基本语句构成是？
选择器{属性1:
值1;属性2:
值2;?
?
}例如：
div{margin-top:
10px;border:
1pxsolid#ccc}
21、前端页面由哪三层构成，分别是什么？
作用是什么？
网页分成三个层次，即：
结构层、表示层、行为层。
网页的结构层（structurallayer）由html或xhtml之类的标记语言负责创建。
标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。
例如，p标签表达了这样一种语义：
“这是一个文本段。
”网页的表示层（presentationlayer）由css负责创建。
css对“如何显示有关内容”的问题做出了回答。
网页的行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。
这是javascript语言和dom主宰的领域。
22、你做的页面在哪些流览器测试过？
ie内核浏览器：
360，傲游，搜狗，世界之窗，腾讯tt。
非ie内核浏览器：
firefoxoperasafarichrome。
23、著名的前端框架都有哪些的呢？
布局框架：
bootstrap、easyui等。
js动效框架：
jquery、angular.js等。
24、做一个网页设计师或者前端工程师，平常访问学习的it网站都有哪些？
（1）、w3c*shool
（2）、segme*tfault
（3）、cs*n
（4）、知呼论坛
（5）、博*园
25、切图工作是ui设计师来做？
还是前端工程师来做？
对于app工程师，也就是ios和android工程师，大多由ui设计师来完成切图。
对于web前端工程师，也就是pc端、浏览端，大多有web前端工程师自己完成切图。
26、切图工程师、前端工程师、ui设计师、美工、网页设计师区别是什么？
（1）、ui设计师俗称美工，不过ui设计师工作高端、名字大气、工资上档次，不过大多公司
都称呼ui为美工，你也不要介意的，不管他们怎么称呼的，反正就是做网站设计图的就ok，别人怎么称呼不重要的了，只要你拿了高工资就是ui设计师了：
ui的主要任务是设计。
了解用户的意图，分析网站配色，基本布局。
绘制出一个网站效果图。
ui需要掌握的知识体系应该包括网页设计，ui（userinterface）用户界面人机交互、操作逻辑、界面美观的整体设计，ued（userexperiencedesign）用户体验设计–简单来说就是如何使得网站更加便于交互。
（2）、前端开发：
美工在完成设计效果图之后，由前端开发人员将其制作成为适合浏览器查看的html页面。
由于现在移动互联网的大规模流行，加上各个不同厂商的浏览器的激烈竞争，前端开发的主要任务简单来说就是使网页在不同浏览器不同分辨率不同设备上提供相似或相近的浏览体验。
前端开发需要掌握的知识体系主要是兼容性问题的解决，流畅完美的交互体验。
具体到技术细节上就是html，css，javascript，各大公司各种不同内核的浏览器、各种各样的js库、简单的与后台交互的知识。
（3）、后台开发：
前台开发完成之后，就是后台程序员的工作了，相比较前端来说，后台更像传统意义上的程
【篇二：
前端工程师面试题题及答案（全面综合）】
1.要动态改变层中内容可以使用的方法有（ab）
a）innerhtml
b）innertext
c）通过设置层的隐藏和显示来实现
d）通过设置层的样式属性的display属性
2.在javascript里，下列选项中不属于数组方法的是（b）；
a）sort（）
b）length（）
c）concat（）
d）reverse（）
3、varemp=newarray（3）;
for（variinemp）
以下答案中能与for循环代码互换的是:
（选择一项）。
（d）
afor（vari=0;iemp;i++）
bfor（vari=0;iarray（3）;i++）
cfor（vari=0;iemp.length（）;i++）
dfor（vari=0;iemp.length;i++）
4下列声明数组的语句中，错误的选项是（c）。
a）vararry=newarray（）
b）vararry=newarray（3）
c）vararry[]=newarray（3）（4）
d）vararry=newarray（?
3?
?
4?
）
5.下列哪一个选项不属于document对象的方法?
（d）
a）focus（）
b）getelementbyid（）
c）getelementsbyname（）
d）bgcolor（）
6.、display属性值的常用取值不包括（c）
a）inline
b）block
c）hidden
d）none
7.以下有关pixeltop属性与top属性的说法正确的是。
（d）
a）都是location对象的属性
b）使用时返回值都是字符串
c）都是返回以像素为单位的数值
d）以上都不对
8.使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗口，下列选项正确的是__d__a）open（x.html,hi,toolbas=1,scrollbars=1,status=1）;
b）open（hi,scrollbars=1,location=1,status=1）;
c）open（x.html,status=yes,menubar=1,location=1）;
d）open（x.html,hi,toolbas=yes,menubar=1,location=1）;
9.、javascript中表达式parseint（“x8x8”）+pasefloat（?
8?
）的结果是什么?
（c）a）8+8
b）88
c）16
d）“8”+?
8
10.关于settimeout（“check”,10）中说法正确的是（d）
a）程序循环执行10次
b）check函数每10秒执行一次
c）10做为参数传给函数check
d）check函数每10毫秒执行一次
二：
11link和@import的区别是？
12
html5有哪些新特性、移除了那些元素？
如何处理html5新标签的浏览器兼容问题？
如何区分html和html5？
13html5的离线储存？
14：
介绍一下css的盒子模型？
15css选择器有哪些？
哪些属性可以继承？
优先级算法如何计算？
css3新增伪类有那些？
优先级为:
16列出display的值，说明他们的作用。
position的值，relative和absolute定位原点是？
17介绍js的基本数据类型。
18javascript如何实现继承？
19什么是闭包（closure），为什么要用它？
【篇三：
web前端工程师面试题】
1、[5分]xhtml与html有何区别？
2、[5分]写出一个简单的文章显示页面的html代码结构。
（文章包括标题，段落）
3、[10分]如何将样式表加入到网页，请列方法。
4、[5分]在css中，盒子模型（boxmodel）是一个很重要的概念，盒子模型分为ie盒子
模型和w3c标准盒子模型，请简单画出两种盒子模型。
5、[5分]如何定义一个1px的容器，需兼容ie6。
6、[10分]请列举几个行元素和几个块元素，并说明两种元素的区别；如何能将行元素变
成块元素？
7、[5分]在css中，隐藏一个元素有几种方法；说一下这几种方法的区别。
8、[10分]css的选择器有哪些，兼容ie6的选择器又有哪些？
优先级？
9、[5分]在网站的css开发中，第一时间都先吧cssreset写上，这是为什么？
10、[5分]以下是一段菜单的html代码，请编写css，让其在页面中横向排版
ulclass=”nav”
liahref=”#”首页/a/li
liahref=”#”产品/a/li
liahref=”#”工程/a/li
/ul
11、[10分]如图：
请写出该效果的html代码结构。
12、[10分]你对html5和css3的了解
13、[5分]目前支持html5、css3的主流浏览器有哪些？
14、[5分]如果用javascript获取页面一个id为“demo”的元素，需兼容各种主流浏览器。
15、[5分]请用javascript写出一个实现两数相加的函数。
升级会员 