“一个小面包”通过精心收集，向本站投稿了8篇web前端开发工程师面试题，下面是小编给大家带来关于web前端开发工程师面试题，一起来看看吧，希望对您有所帮助。
- 目录
篇1：web前端开发工程师面试题
一、HTML 常见题目
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的区别?
二、、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创建一个三角形的原理是什么?
11、一个满屏 品 字布局 如何设计?
12、常见兼容性问题?
13、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
14、经常遇到的浏览器的兼容性有哪些?原因，解决方法是什么，常用hack的技巧 ?
15、为什么要初始化CSS样式。
16、absolute的containing block计算方式跟正常流有什么不同?
17、CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
18、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
19、对BFC规范(块级格式化上下文：block formatting context)的理解?
20、CSS权重优先级是如何计算的?
21、请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
22、移动端的布局用过媒体查询吗?
23、使用 CSS 预处理器吗?喜欢那个?
24、CSS优化、提高性能的方法有哪些?
25、浏览器是怎样解析CSS选择器的?
26、在网页中的应该使用奇数还是偶数的字体?为什么呢?
27、margin和padding分别适合什么场景使用?
28、抽离样式模块怎么写，说出思路，有无实践经验?[阿里航旅的面试题]
29、元素竖向的百分比设定是相对于容器的高度吗?
30、全屏滚动的原理是什么?用到了CSS的那些属性?
31、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
32、视差滚动效果，如何给每页做不同的动画?(回到顶部，向下滑动要再次出现，和只出现一次分别怎么做?)
33、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
34、如何修改chrome记住密码后自动填充表单的黄色背景 ?
35、你对line-height是如何理解的?
36、设置元素浮动后，该元素的display值是多少?(自动变成display:block)
37、怎么让Chrome支持小于12px 的文字?
38、让页面里的字体变清晰，变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)
39、font-style属性可以让它赋值为“oblique” oblique是什么意思?
40、position:fixed;在android下无效怎么处理?
41、如果需要手动写动画，你认为最小时间间隔是多久，为什么?(阿里)
42、display:inline-block 什么时候会显示间隙?(携程)
43、overflow: scroll时不能平滑滚动的问题怎么处理?
44、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
45、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp?
46、什么是Cookie 隔离?(或者说：请求资源的时候不要让它带cookie怎么做)
47、style标签写在body后与body前有什么区别?
二、JavaScript类的题目
01、介绍JavaScript的基本数据类型。
02、说说写JavaScript的基本规范?
03、JavaScript原型，原型链 ? 有什么特点?
04、JavaScript有几种类型的值?(堆：原始数据类型和 栈：引用数据类型)，你能画一下他们的内存图吗?
05、Javascript如何实现继承?
06、Javascript创建对象的几种方式?
07、Javascript作用链域?
08、谈谈This对象的理解。
09、eval是做什么的?
10、什么是window对象? 什么是document对象?
11、null，undefined的区别?
12、写一个通用的事件侦听器函数(机试题)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少?
14、关于事件，IE与火狐的事件机制有什么区别? 如何阻止冒泡?
15、什么是闭包(closure)，为什么要用它?
16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么?
17、如何判断一个对象是否属于某个类?
18、new操作符具体干了什么呢?
19、用原生JavaScript的实现过什么功能吗?
20、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是?
21、对JSON的了解?
22、[].forEach.call($$(“*”),function(a){ a.style.outline=“1px solid #”+(~~(Math.random*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?
23、js延迟加载的方式有哪些?
24、Ajax 是什么? 如何创建一个Ajax?
25、同步和异步的区别?
26、如何解决跨域问题?
27、页面编码和被请求的资源编码如果不一致如何处理?
28、模块化开发怎么做?
29、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?
30、requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)
31、让你自己设计实现一个requireJS，你会怎么做?
32、谈一谈你对ECMAScript6的了解?
33、ECMAScript6 怎么写class么，为什么会出现class这种东西?
34、异步加载的方式有哪些?
35、documen.write和 innerHTML的区别?
36、DOM操作――怎样添加、移除、移动、复制、创建和查找节点?
37、.call() 和 .apply() 的含义和区别?
38、数组和对象有哪些原生方法，列举一下?
39、JS 怎么实现一个类。怎么实例化这个类
40、JavaScript中的作用域与变量声明提升?
41、如何编写高性能的Javascript?
42、那些操作会造成内存泄漏?
43、JQuery的源码看过吗?能不能简单概况一下它的实现原理?
44、jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?
45、jquery中如何将数组转化为json字符串，然后再转化回来?
46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝?
47、jquery.extend 与 jquery.fn.extend的区别?
48、jQuery 的队列是如何实现的?队列可以用在哪些地方?
49、谈一下Jquery中的bind(),live(),delegate(),on()的区别?
50、JQuery一个对象可以同时绑定多个事件，这是如何实现的?
51、是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用?
52、jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)
53、针对 jQuery性能的优化方法?
54、Jquery与jQuery UI有啥区别?
55、JQuery的源码看过吗?能不能简单说一下它的实现原理?
56、jquery 中如何将数组转化为json字符串，然后再转化回来?
57、jQuery和Zepto的区别?各自的使用场景?
58、针对 jQuery 的优化方法?
59、Zepto的点透问题如何解决?
60、jQueryUI如何自定义组件?
61、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?
62、如何判断当前脚本运行在浏览器还是node环境中?(阿里)
63、移动端最小触控区域是多大?
64、jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?
66、移动端的点击事件的有延迟，时间是多久，为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。)
67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?
69、解释JavaScript中的作用域与变量声明提升?
70、那些操作会造成内存泄漏?
71、JQuery一个对象可以同时绑定多个事件，这是如何实现的?
72、Node.js的适用场景?(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解释一下 Backbone 的 MVC 实现方式?
74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
78、简述一下 Handlebars 的基本用法?
79、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的?如何缓存的?
80、用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
81、检测浏览器版本版本有哪些方式?
82、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获。
四、面试官爱问的问题
01、原来公司工作流程是怎么样的，如何与其他人协作的?如何夸部门合作的?
02、你遇到过比较难的技术问题是?你是如何解决的?
03、设计模式 知道什么是singleton, factory, strategy, decrator么?
04、常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
05、页面重构怎么操作?
06、列举IE与其他浏览器不一样的特性?
07、99%的网站都需要被重构是那本书上写的?
08、什么叫优雅降级和渐进增强?
09、是否了解公钥加密和私钥加密。
10、WEB应用从服务器主动推送Data到客户端有那些方式?
11、对Node的优点和缺点提出了自己的看法?
12、你有用过哪些前端性能优化的方法?
13、http状态码有那些?分别代表是什么意思?
14、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么?(流程说的越详细越好)
15、部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法?
16、从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?
17、除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?
18、你用的得心应手用的熟练地编辑器&开发环境是什么样子?
19、对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
20、你怎么看待Web App 、hybrid App、Native App?
21、你移动端前端开发的理解?(和 Web 前端开发的主要区别是什么?)
22、你对加班的看法?
23、平时如何管理你的项目?
24、说说最近最流行的一些东西吧?常去哪些网站?
25、如何设计突发大规模并发架构?
26、是否了解开源的工具 bower、npm、yeoman、grunt、gulp，一个 npm 的包里的 package.json 具备的必要的字段都有哪些?(名称、版本号，依赖)
每个模块的代码结构都应该比较简单，且每个模块之间的关系也应该非常清晰，随着功能和迭代次数越来越多，你会如何去保持这个状态的?
27、Git知道branch, diff, merge么?如何设计突发大规模并发架构?
28、当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗?
29、知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?
30、移动端(Android IOS)怎么做好用户体验?
31、简单描述一下你做过的移动APP项目研发流程?
32、你在现在的团队处于什么样的角色，起到了什么明显的作用?
33、你认为怎样才是全端工程师(Full Stack developer)?
34、介绍一个你最得意的作品吧?
35、你有自己的技术博客吗，用了哪些技术?
36、对前端安全有什么看法?
37、是否了解Web注入攻击，说下原理，最常见的两种攻击(XSS 和 CSRF)了解到什么程度?
38、项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决?。
39、最近在学什么东西?
40、你的优点是什么?缺点是什么?
41、如何管理前端团队?
42、最近在学什么?能谈谈你未来3，5年给自己的规划吗?
篇2：web前端开发面试题
(答案在下一篇文章中)
1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
2. 行内元素有哪些?块级元素有哪些?CSS的盒模型?
3. CSS引入的方式有哪些? link和@import的区别是?
4. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
5. 前端页面有哪三层构成，分别是什么?作用是什么?
6. css的基本语句构成是?
7. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
8. 如何居中一个浮动元素?
9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!
10. 你怎么来实现下面这个设计图,主要讲述思路 (效果图省略)
11. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片?
12. 你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
【Javascript】
1. js是什么，js和html 的开发如何结合?
2. 怎样添加、移除、移动、复制、创建和查找节点
3. 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
4. 面向对象编程:b怎么继承a
5. 看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么?
a = 10;
alert(arguments[2] );
6. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
7. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
8. 什么是闭包?下面这个ul，如何点击每一列的时候alert其index?
这是第一条
这是第二条
这是第三条
9. 最近看的一篇Javascript的文章是?
10. 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
11.说说YSlow(可以详细一点)
[web前端开发面试题]
篇3：web前端面试题
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
字符串拼接改良方案
把要拼接的字符串写入数组arr，然后调用arr.join(“”);
title和alt的区别?
都是提示词。简单的说，title给人看，alt给引擎看
CSS选择器有哪些?
通配选择器(*)，标签选择器(tag)，类选择器(.class)，id选择器(#id)，属性选择器(selector[attr=“val”])，后代选择器(selector1 selector2)，子代选择器(selector1 >selector2)，相邻选择器(selector1 ~ selector2)，伪元素(selector:first-child等)，伪类(selector:hover等)。叫法可能不大一样，所以举出一些例子供参考。
function foo(){ console.log(this); }; foo.call(null);
window。call第一个参数为null，所以调用者为全局，也就是window，而this指向调用者
DOCTYPE作用及意义
为了告诉浏览器以什么标准来解析文档。这是因为部分网页并没有遵循标准，或者遵循的是旧版本的标准。
具体用法，可以参考：www.jb51.net/web/34217.html
readyState有哪些值?各代表什么?
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
js闭包概念
js函数里声明的局部变量会在退出函数时被销毁。而闭包则是保留对局部变量的引用，使其久居内存。
HTML5和HTML4相比多出哪些功能?CSS3和CSS2相比多出哪些功能?
HTML5：表单验证、websocket、语义化标签等等
CSS3：动画，计算，新的属性
less是什么?有什么特点?如何判断less的兼容性
less是一种CSS预编译器，在CSS原有基础上引入了变量、函数等元素，使得CSS更容易维护、扩充。
less是靠less.js来解析的，所以，与浏览器没有关系。IE6+和其他主流浏览器都可以使用less
JS的属性可以直接在构造函数中定义，也可以在原型中定义。两者有什么不同?
前者定义是写在内存中，而后者是写在硬盘中
Array(6).join('a')结果是多少?
“aaaaa”。join是指数组每一项用join的参数隔开。
123456['toString']['length'];
1。Number.toString是一个函数，长度为1
{}+'a'<{}+'b';
false。{}+“a”会转化成数字相加，结果为NaN。NaN与NaN比较永远返回false
var arr = [1,2,3,4,5,6];arr.splice(1,3);arr.toString();
156。splice(index, length)。第一个参数表示开始切割的下标，第二个是切割的长度。注意这个切割是从原数组中去除
var arr = [1,2,3,4,5,6];arr.slice(1,3)['toString']();
23。和上例不同，slice(index1, index2)第一个参数表示开始切割的下标，第二个参数是结束切割的下标(不含)。且这个切割返回切除部分。
({a:1,b:2,c:3})[['b']];
2、写一个hack样式实现 IE6、IE7、firefox 下分别使用不同颜色
以下分别用条件注释和属性前缀法实现
[css] view plaincopyprint?
[css] view plaincopyprint?
color: #67f; // firefox, IE6, IE7
*color: #667; // IE6,IE7
_color: #666; // IE6 only
/* 只在IE6下生效 */
/* 只在IE7下生效 */
color: #777;
/* 在非IE下生效 */
项目规划题：
假如你是项目负责人，你会如何规划整个项目的CSS文件?
reset.css
public.css
各模块按文件夹分配CSS，或直接以模块划分CSS
如何在项目中避免和其他小组冲突?例如类名的命名?
在类名中加模块前缀，例如登录的提交按钮命名可以为“login-btn-submit”(个人用法，不一样的欢迎提出来交流)
逻辑题：
七点四十五分的时候，时针和分针之间的角度是多少?
37.5°
给你N个苹果和一座天平，其中一个苹果比较重，其他苹果一样重。假设其他因素完全一样，假设天平两侧可以放无限个苹果。现在要找出那个较重的苹果，需要使用几次天平。求最差情况的最优解。(设计一种算法，让平均次数最少)
想说二分的都准备挂吧2333，不信想一下N=8的情况。
我能想到的最好方案是三分，即N/3并向上取整*2，剩下的作为第三堆。即每次天平称的时候两边是ceil(N/3)。例如上面说的，N=8的时候，按二分的思路，第一次称是4,4，第二次称的时候是2,2，第三次是1,1，总共三次。而用三分的思路，第一次是3,3,2，第二次(最坏)是1,1,1，只需要两次。
篇4：web前端面试题
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 i span 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浏览器)
Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== C ===)
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.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行!
14.闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
15.如何阻止事件冒泡和默认事件
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
}
篇5：前端开发面试题
前言
本文由我收集总结了一些优质的前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的!
前端还是一个年轻的行业，新的行业标准， 框架， 库都不断在更新和新增，正如赫门在深JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术, 跟上快速变化的节奏, 也是身为一个前端程序员必备的技能之一。
最近也收到许多微博私信的鼓励和更正题目信息，后面会经常更新题目和答案到github博客，但其他旧版本的分支和其他网站出现的拷贝版本上面的错误回答我也管不了嘞。希望更多的前端开发可以达到既能使用也会表达，对理论知识有自己的理解，也可根据下面的知识点一个一个去进阶学习,形成自己的职业技能链。
面试有几点需注意：
1、面试题目：根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。
2、题目类型：理论知识，算法，项目细节、技术视野、开放性题，工作案例。
3、细节追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。
4、回答问题再棒，面试官(可能是你面试职位的直接领导)，会考虑我要不要这个人做我的同事?所以态度很重要、除了能做事，还要会做人。(感觉更像是相亲( ))
5、资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能(靠谱)。
前端开发面试知识点大纲：
作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：
HTML
Doctype作用?标准模式与兼容模式各有什么区别?
HTML5 为什么只需要写 ?
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素;span默认display属性值为“inline”，是“行内”元素。
(1)行内元素有：a b span img input select strong(强调的语气)
(2)块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
(3)常见的空元素：
鲜为人知的是：
页面导入样式时，使用link和@import有什么区别?
(1)link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的，只能用于加载CSS;
(2)页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3)import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
介绍一下你对浏览器内核的理解?
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
常见的浏览器内核有哪些?
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink(WebKit的分支)]
详细文章：浏览器内核的解析和对比 - 依水间
html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websockt, Geolocation;
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes;
* 支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
* 如何区分： DOCTYPE声明新增的结构元素功能元素
简述一下你对HTML语义化的理解?
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
及时在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
HTML5的离线储存怎么使用，工作原理能不能解释一下?
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性;
2、在cache.manifest文件的编写离线存储的资源;
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
详细的使用请参考：有趣的HTML5：离线存储
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
详细的使用请参考：有趣的HTML5：离线存储
请描述一下 cookies，sessionStorage 和 localStorage 的区别?
localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 数据在浏览器关闭后自动删除。
iframe有那些缺点?
*iframe会阻塞主页面的Onload事件;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
Label的作用是什么?是怎么用的?
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
Number:
Date:
HTML5的form如何关闭自动完成功能?
给不想要提示的 form 或下某个input 设置为autocomplete=off。
请描述一下 cookies，sessionStorage 和 localStorage 的区别?
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大;
sessionStorage和localStorage有更多丰富易用的接口;
sessionStorage和localStorage各自独立的存储空间;
如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式
webSocket如何兼容低浏览器?(阿里)
Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR
CSS
介绍一下CSS的盒子模型?
(1)有两种， IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
(2)盒模型： 内容(content)、填充(padding)、边界(margin)、边框(border).
CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
* 1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul >li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = “external”])
9.伪类选择器(a: hover, li: nth - child)
* 可继承的样式： font-size font-family color, UL LI DL DD DT;
* 不可继承的样式：border padding margin width height ;
* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important >id >class >tag
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
如何居中div?如何居中一个浮动元素?
给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
列出display的值，说明他们的作用。position的值， relative和absolute定位原点是?
1、block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。list-item 象块类型元素一样显示，并添加样式列表标记。
2、*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed (老IE不支持)
生成绝对定位的元素，相对于浏览器窗口进行定位。
篇6：前端工程师面试题
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 i span 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浏览器)
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.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行!
14.闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
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[i]])
{
newArr.push(arr[i])
result[arr[i]]=1
}
}
return newArr
}
复制代码
23.排序算法
快速排序function oSort(arr)
{
if(arr.length<=1)
{
return arr
}
var left=[];
var right=[];
var oNum = Math.floor(arr.length/2);
var oNumVode = arr.splice(oNum,1);
for(var i=0;i
{
if(arr[i]
{
left.push(arr[i])
}
else
{
right.push(arr[i])
}
}
return oSort(left).concat([oNumVode],oSort(right))
}
冒泡排序 var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i < array.length; i++)
{
for (var j = 0; j < array.length - i; j++)
{
if (array[j] >array[j + 1])
{
temp = array[j + 1];
array[j + 1] = array[j];
array[j] = temp;
}
}
}
复制代码
[前端工程师面试题]
篇7：前端工程师面试题
HTML
Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
HTML5 为什么只需要写 ?
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
页面导入样式时，使用link和@import有什么区别?
介绍一下你对浏览器内核的理解?
常见的浏览器内核有哪些?
html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
简述一下你对HTML语义化的理解?
HTML5的离线储存怎么使用，工作原理能不能解释一下?
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
请描述一下 cookies，sessionStorage 和 localStorage 的区别?
iframe有那些缺点?
Label的作用是什么?是怎么用的?(加 for 或 包裹)
HTML5的form如何关闭自动完成功能?
如何实现浏览器内多个标签页之间的通信? (阿里)
webSocket如何兼容低浏览器?(阿里)
页面可见性(Page Visibility)API 可以有哪些用途?
如何在页面上实现一个圆形的可点击区域?
实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
网页验证码是干嘛的，是为了解决什么安全问题?
tite与h1的区别、b与strong的区别、i与em的区别?
CSS
介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
CSS选择符有哪些?哪些属性可以继承?
CSS优先级算法如何计算?
CSS3新增伪类有那些?
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
display有哪些值?说明他们的作用。
position的值relative和absolute定位原点是?
CSS3有哪些新特性?
请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
用纯CSS创建一个三角形的原理是什么?
一个满屏 品 字布局 如何设计?
常见兼容性问题?
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
经常遇到的浏览器的兼容性有哪些?原因，解决方法是什么，常用hack的技巧 ?
为什么要初始化CSS样式。
absolute的containing block计算方式跟正常流有什么不同?
CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
对BFC规范(块级格式化上下文：block formatting context)的理解?
CSS权重优先级是如何计算的?
请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
移动端的布局用过媒体查询吗?
使用 CSS 预处理器吗?喜欢那个?
CSS优化、提高性能的方法有哪些?
浏览器是怎样解析CSS选择器的?
在网页中的应该使用奇数还是偶数的字体?为什么呢?
margin和padding分别适合什么场景使用?
抽离样式模块怎么写，说出思路，有无实践经验?[阿里航旅的面试题]
元素竖向的百分比设定是相对于容器的高度吗?
全屏滚动的原理是什么?用到了CSS的那些属性?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
视差滚动效果，如何给每页做不同的动画?(回到顶部，向下滑动要再次出现，和只出现一次分别怎么做?)
::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
如何修改chrome记住密码后自动填充表单的黄色背景 ?
你对line-height是如何理解的?
设置元素浮动后，该元素的display值是多少?(自动变成display:block)
怎么让Chrome支持小于12px 的文字?
让页面里的字体变清晰，变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)
font-style属性可以让它赋值为“oblique” oblique是什么意思?
position:fixed;在android下无效怎么处理?
如果需要手动写动画，你认为最小时间间隔是多久，为什么?(阿里)
display:inline-block 什么时候会显示间隙?(携程)
overflow: scroll时不能平滑滚动的问题怎么处理?
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp?
什么是Cookie 隔离?(或者说：请求资源的时候不要让它带cookie怎么做)
style标签写在body后与body前有什么区别?
JavaScript
介绍JavaScript的基本数据类型。
说说写JavaScript的基本规范?
JavaScript原型，原型链 ? 有什么特点?
JavaScript有几种类型的值?(堆：原始数据类型和 栈：引用数据类型)，你能画一下他们的内存图吗?
Javascript如何实现继承?
Javascript创建对象的几种方式?
Javascript作用链域?
谈谈This对象的理解。
eval是做什么的?
什么是window对象? 什么是document对象?
null，undefined的区别?
写一个通用的事件侦听器函数(机试题)。
[“1”, “2”, “3”].map(parseInt) 答案是多少?
关于事件，IE与火狐的事件机制有什么区别? 如何阻止冒泡?
什么是闭包(closure)，为什么要用它?
javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么?
如何判断一个对象是否属于某个类?
new操作符具体干了什么呢?
用原生JavaScript的实现过什么功能吗?
Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是?
对JSON的了解?
[].forEach.call($$(“*”),function(a){ a.style.outline=“1px solid #”+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?
js延迟加载的方式有哪些?
Ajax 是什么? 如何创建一个Ajax?
同步和异步的区别?
如何解决跨域问题?
页面编码和被请求的资源编码如果不一致如何处理?
模块化开发怎么做?
AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?
requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)
让你自己设计实现一个requireJS，你会怎么做?
谈一谈你对ECMAScript6的了解?
ECMAScript6 怎么写class么，为什么会出现class这种东西?
异步加载的方式有哪些?
documen.write和 innerHTML的区别?
DOM操作怎样添加、移除、移动、复制、创建和查找节点?
.call() 和 .apply() 的含义和区别?
数组和对象有哪些原生方法，列举一下?
JS 怎么实现一个类。怎么实例化这个类
JavaScript中的作用域与变量声明提升?
如何编写高性能的Javascript?
那些操作会造成内存泄漏?
JQuery的源码看过吗?能不能简单概况一下它的实现原理?
jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?
jquery中如何将数组转化为json字符串，然后再转化回来?
jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝?
jquery.extend 与 jquery.fn.extend的区别?
jQuery 的队列是如何实现的?队列可以用在哪些地方?
谈一下Jquery中的bind(),live(),delegate(),on()的区别?
JQuery一个对象可以同时绑定多个事件，这是如何实现的?
是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用?
jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)
针对 jQuery性能的优化方法?
Jquery与jQuery UI有啥区别?
JQuery的源码看过吗?能不能简单说一下它的实现原理?
jquery 中如何将数组转化为json字符串，然后再转化回来?
jQuery和Zepto的区别?各自的使用场景?
针对 jQuery 的优化方法?
Zepto的点透问题如何解决?
jQueryUI如何自定义组件?
需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?
如何判断当前脚本运行在浏览器还是node环境中?(阿里)
移动端最小触控区域是多大?
jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?
移动端的点击事件的有延迟，时间是多久，为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。)
知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?
解释JavaScript中的作用域与变量声明提升?
那些操作会造成内存泄漏?
JQuery一个对象可以同时绑定多个事件，这是如何实现的?
Node.js的适用场景?
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
解释一下 Backbone 的 MVC 实现方式?
什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
简述一下 Handlebars 的基本用法?
简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的?如何缓存的?
用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
检测浏览器版本版本有哪些方式?
我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
篇8：web前端面试题及答案
1、怎样添加、移除、移动、复制、创建和查找节点?
1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
2、实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。
/**
* 对象克隆
* 支持基本数据类型及对象
* 递归方法
*/
function clone(obj) {
var o;
switch (typeof obj) {
case “undefined”:
break;
case “string”:
o = obj + “”;
break;
case “number”:
o = obj - 0;
break;
case “boolean”:
o = obj;
break;
case “object”: // object 分为两种情况 对象(Object)或数组(Array)
if (obj === null) {
o = null;
} else {
if (Object.prototype.toString.call(obj).slice(8, -1) === “Array”) {
o = [];
for (var i = 0; i < obj.length; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for (var k in obj) {
o[k] = clone(obj[k]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}
3、如何消除一个数组里面重复的元素?
// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6
4、想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)。
5、在Javascript中什么是伪数组?如何将伪数组转化为标准数组?
伪数组(类数组)：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
var args = Array.prototype.slice.call(arguments);
//为了使用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
};
6、Javascript中callee和caller的作用?
caller是返回一个对函数的引用，该函数调用了当前函数;
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
7、请描述一下cookies，sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
8、手写数组快速排序
关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
“快速排序”的思想很简单，整个排序过程只需要三步：
(1)在数据集之中，选择一个元素作为”基准”(pivot)。
(2)所有小于”基准”的元素，都移到”基准”的左边;所有大于”基准”的元素，都移到”基准”的右边。
(3)对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
9、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。
var str = “aaaabbbccccddfgh”;
var obj = {};
for(var i=0;i
var v = str.charAt(i);
if(obj[v] && obj[v].value == v){
obj[v].count = ++ obj[v].count;
}else{
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
}
}
for(key in obj){
document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1
}
10、写一个function，清除字符串前后的空格。(兼容所有浏览器)
function trim(str) {
if (str && typeof str === “string”) {
return str.replace(/(^s*)|(s*)$/g,“”); //去除前后空白符
}
}
★ 前端开发的简历
★ 前端开发述职报告
★ 网络工程师面试题
★ 电气工程师面试题
web前端开发工程师面试题（共8篇）
