Web前端面试集锦
前端面试问题集锦
作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：
1、DOM结构—— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest—— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
10、JSON —— 作用、用途、设计结构。
CSS部分：
前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
写出几种IE6 BUG的解决方法
l 双边距BUGfloat引起的 使用display
l 3像素问题 使用float引起的使用dislpay:inline -3px
l 超链接hover点击后失效 使用正确的书写顺序 link visited hover active
l Ie z-index问题 给父级添加position:relative
l Png 透明 使用js代码改
l Min-height 最小高度！Important解决
l select 在ie6下遮盖使用iframe嵌套
l 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一.
你如何对网站的文件和资源进行优化?期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
JavaScript部分：
IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的
call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
如何阻止事件冒泡和默认事件
canceBubblereturn false
解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
”==”和“===”的不同
前者会自动转换类型
后者不会
javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
JavaScript原型，原型链 ? 有什么特点？
每一个对象都有原型，使用 __proto__ 标记，原型是一个对象的引用或 null（ Object.prototype 的原型为 null ），允许对象使用其原型所引用的对象中的变量。
eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
null，undefined 的区别？
undefined表示变量声明但未初始化时的值，
null表示准备用来保存对象，还没有真正保存对象的值。从逻辑角度看，null值表示一个空对象指针。
Javascript如何实现继承？
通过原型和构造器
谈谈This对象的理解。
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象
什么是闭包（closure），为什么要用它？
执行闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回所占用的资源，因为内部函数的执行需要依赖外部中的变量。这是对闭包作用的非常直白的描述.
JSON 的了解？
JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
如何解决跨域问题?
jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面
模块化怎么做？
立即执行函数,不暴露私有成员
documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
JQuery的源码看过吗？能不能简单说一下它的实现原理？
JavaScript中的作用域与变量声明提升？
如何编写高性能的Javascript？
那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
HTML5部分：
HTML5中如何嵌入音频？
HTML5支持 MP3、Wav 和 Ogg 格式的音频
HTML5存储类型有什么区别？
HTML5能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：
localStorage用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
HTML5 有哪些新增的表单元素？
datalist、datetime、date、month、week、time、color、number、email、url
HTML5 标准提供了哪些新的 API？
HTML5提供的应用程序 API 主要有：
MediaAPI
TextTrack API
ApplicationCache API
UserInteraction
DataTransfer API
CommandAPI
ConstraintValidation API
HistoryAPI
HTML5应用程序缓存和浏览器缓存有什么区别？
应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件，与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。
前端框架部分：
AngularJS
AngularJS是一款非常强大的前端MVC框架。介绍Directive（指令）、Controller（控制器）、Service （服务）、依赖注入
SERVICES（服务）
Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西（指单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，这一点和工厂模式不同。基于这种思想，单例对象让我们可以实现一些相当酷的功能，它可以让很多controller和directive访问内部的数值。
CONTROLLERS（控制器）
在 Angular中，controller自身并不会处理"request"，除非它是用来处理路由(route)的（很多人把这种方式叫做创建route controller---路由控制器），更明确地说，尤其是你的应用里面那些作为界面的一部分的controller，它们只会管理非常小的一段代码。
DIRECTIVES（指令）
Angular对directive的定义是一段代码片段，你可以用它来操作DOM，但是我觉得directive也是进行用户交互的很好选择。通过直接构建一个指令的方式，我们以后就没有必要担心这种事情了---同时下次再需要实现相同功能的时候完全不需要花任何时间。通过构建指令的方式来进行DOM交互和修改，随着业务需求的不断介入，我们就可以立即腾出手来处理复杂性不断增加的应用了。
介绍Backbone.js
Backbone为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESTful JSON接口连接到应用程序。
介绍下Underscore.js
Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。Underscore提供了100多个函数,包括常用的: map,filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等.
介绍下Bootstrap
Bootstrap是基于 HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。
介绍下Sass
Sass是一种CSS预处理器，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
有没有用过前端构建工具
如Grunt/Gulp等
其他部分：
你有哪些性能优化的方法？
1. 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
2. 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
3. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
4. 当需要设置的样式很多时设置className而不是直接操作style。
5. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
6. 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
7. 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
8. 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
http状态码有那些？分别代表是什么意思？
100-199用于指定客户端应相应的某些动作。
200-299用于表示请求成功。
300-399用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
500-599用于支持服务器错误。 503 – 服务不可用
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
l 查找浏览器缓存
l DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
l 进行HTTP协议会话
l 客户端发送报头(请求报头)
l 服务器回馈报头(响应报头)
l html文档开始下载
l 文档树建立，根据标记请求所需指定MIME类型的文件
l 文件显示
l 浏览器这边做的工作大致分为以下几步：
l 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
l 解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）