2017web前端面试题及参考答案（实用七篇）

面试题在web前端求职者的求职面试中发挥着重大的作用。下面是读文网小编为大家带来的2017web前端面试题及参考答案，相信对你会有帮助的。

web前端开发面试的注意事项

1、时间观念

公司有自己的规章制度，首先时间观念是每一个公司的先决条件，所以请绝对不要迟到(提前15~30min到达)，你可以有各种理由，无论是堵车，还是不熟悉地形找不到公司，但，结果就是结果，迟到就是迟到，别人也不会因为你的理由而觉得就可以原谅(毕竟归根到底就是没有提前规划好)，如果到达公司比较早，则在周围熟悉一下环境，可以提前15分钟左右的时间进入公司。另外，不要在公司的休息时间进入(公司休息时间：中午12:00-13:00/14:00)。注意，我这里说的是进入，而不是面试。换句话说，不要在休息室等着人家。

2、对自己的简历要足够了解

自己的简历，一定要做到真正的了然于心，原因很简单，对于没有专门准备面试题的公司，大部分是依照着简历来问面试题的。因此在书写的时候也要注意，不会的东西不要随意的搬上简历。而对于自己简历中书写的一些技术、词语(英文拼写和发音)、个人经历等都要足够熟悉。如果让对方觉得你的简历是马马虎虎随意对待的，被录用的可能性自然会降低啦~

3、面试过程的小细节

坐姿首先要端正，这是对面试官最起码的尊重。回答问题时，思考之后再作答，防止出现结巴等问题。另外，在观点与对方冲突的时候，即便是对方的观点让自己很难忍受，大不了就是不来这家公司，但是不要和对方吵起来。对于人事方面的问题，不要直接回答表面上的东西，思考问这个问题的原因和目的，之后本着实事求是的原则，合理回答问题。最好是在去面试之前做足人事面试题的准备工作。

4、面试不求助

作为讲师，我们也是这么告诉我们的学生的。应该说，在面试/笔试过程中，求助网络或者别人是很多人会选择的方法。创客学院就业辅导老师并不建议大家这样做，原因很简单，面试是自己的，当面试没有实事求是时，虽然可能能够拿到更高的薪水，但是进入公司之后很有可能无法hold住其工作，毕竟工作的难度是由面试结果而定的(特别是大公司，有技术分级)。

5、面试是双方的

面试是双方的，而不是单方面面试。公司会通过问题考量面试者，看面试者是否符合公司的标准和要求。与此同时，也是面试者在考量公司是否符合自己的心意，因此在面试的过程中，双方是平等的，面试者也需要去了解公司的一些具体情况(可以通过向面试官提出问题或者通过观察细节等)。

创客学院web前端开发就业指导老师建议，可以主要需要了解如下情况：公司的基本情况，公司的基本架构，团队的规模以及前端人员数量和基本水平，公司的企业文化和工作氛围，进入公司的主要工作以及未来可能的工作。

看过“2017web前端面试题及参考答案”

2017web前端面试题及参考答案：Javascript

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,number)

隐式(== – ===)

3.split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

7.IE和标准下有哪些兼容性的写法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别

一个在url后面 一个放在虚拟载体里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

9.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

13.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行!

?p=78 例子可见此链接

14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

http://blog.CSdn.net/gaoshanwudi/article/details/7355794 此链接可查看(问这个问题的不是一个公司)

15.如何阻止事件冒泡和默认事件

canceBubble return false

16.添加 删除 替换 插入到某个接点的方法

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

17.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

19.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20.”==”和“===”的不同

前者会自动转换类型

后者不会

21.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

22.编写一个数组去重的方法

function oSort(arr)

{

var result ={};

var newArr=[];

for(var i=0;i

{

if(!result[arr])

{

newArr.push(arr)

result[arr]=1

}

}

return newArr

}

↓↓↓↓↓点击下页还有更多 2017web前端面试常见问题↓↓↓↓↓#p#副标题#e#

web前端面试自我介绍范文3

我叫xx-x，毕业于xx大学的软件工程专业，通过半年的ios软件开发工作，培养了我全面和较强的开发能力,工作认真负责,有团队合作精神,具备较强的组织、沟通能力和进取心强;坚持原则,工作作风严谨、高度的责任意识。

我乐观向上，大方开朗，热情务实;待人诚恳;工作认真负责，具有吃苦耐劳、艰苦奋斗的精神;适应能力强，具备良好的组织协调能力;善于不断学习及总结，吸收能力强;拥有积极向上的生活态度和广泛的兴趣爱好;注重团队合作精神和集体观念，我希望能到贵公司，与公司同发展共命运。

web前端面试自我介绍范文4

大家好，我是xxxx职业学院信息电子系计算机硬件专业的一名应届毕业生，衷心感谢您抽出宝贵时间审阅我的简历。在三年的学习生活中,我牢固地掌握了计算机硬件与电子专业的基础知识，精通数电与模电，熟练office办公软件,对计算机组装与维护把握深刻，并在各种实践中获得了一定的实际运用能力。并利用课余时间进行了汉语言文学自学考试，通过科目过半。在自考期间不但提高了文学功底，而且培养了我坚强的意志。课余时间我还广泛阅读各方面书籍，积极参加各种集体活动和社会实践活动，扩展了知识面，培养了团队精神，增强了组织交际能力，提升了综合素质。

虽然缺少工作经验和社会阅历，但我会在实践工作中勤奋学习，弥补不足，积极进步。或许我应聘的职位和计算机硬件专业并不对口，但我认为人的才能并不仅局限于所学的专业，在其他领域同样有可挖掘的潜力!

2017web前端面试题及参考答案：HTML+CSS

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.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br iSPAn input select

Css盒模型:内容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

7.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

10.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的 使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 !Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)

11.标签上title与alt属性的区别是什么?

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

13.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16.什么是语义化的HTML?

直观的认识标签 对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，，，增加无意义的标签)

2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)

3.是用afert伪元素清除浮动(用于非IE浏览器)

web前端面试自我介绍范文6

你好，我叫xxx，我的上一家公司是做XXX。，所以我们公司做的项目都是和XXX相关的。

刚进公司的那时候，什么交互啊，项目需求，测试，代码编写，优化，我都有是积极的参与，因为是新人，所以好好把握住每个学习的机会，我的本职工作，前端这块，我都是认真负责完成。那时候虽然很忙，压力很大，但真的是学到了不少东西，后期项目都不断的在完善，我也不断的在参与。

在上一家公司中，我最的收获不单单是技术方面，主要还有业务能力，自学能力和同事的沟通能力，这都是我学到的，而且我认为很重要的。

技术方面我一直从事于web方面的工作，掌握的前端技术有ajax，js，div+css，html css，同事我也了解java语言和数据库表结构这块，更后台人员能更有效的沟通。

我的性格方面不算外向，也不算内向，跟朋友，同事相处，比较外向，在工作中，代码开发时，我是比较内向的，我喜欢全心全意的投入工作中。我也喜欢交朋友，偶尔跟朋友聚聚，聊聊。对于工作我总是抱着认真负责，有责任心，吃苦耐劳的态度工作。

谢谢，以上是我的自我介绍。

2017web前端面试常见问题

01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

02、HTML5 为什么只需要写 ?

03、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

04、页面导入样式时，使用link和@import有什么区别?

05、介绍一下你对浏览器内核的理解?

06、常见的浏览器内核有哪些?

07、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?

08、如何区分 HTML 和 HTML5?

09、简述一下你对HTML语义化的理解?

10、HTML5的离线储存怎么使用，工作原理能不能解释一下?

11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

12、请描述一下 cookies，sessionStorage 和 localStorage 的区别?

13、iframe有那些缺点?

14、Label的作用是什么?是怎么用的?(加 for 或 包裹)

15、HTML5的form如何关闭自动完成功能?

16、如何实现浏览器内多个标签页之间的通信? (阿里)

17、webSocket如何兼容低浏览器?(阿里)

18、页面可见性(Page Visibility)API 可以有哪些用途?

19、如何在页面上实现一个圆形的可点击区域?

20、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

21、网页验证码是干嘛的，是为了解决什么安全问题?

22、tite与h1的区别、b与strong的区别、i与em的区别?

除了要清楚web前端面试过程中会被问到的面试题之外，web前端面试者还需要事先准备好面试的自我介绍以及web前端面试过程中的一些注意事项。