史上最全的web前端面试题汇总及答案2
HTML&CSS
img的alt和title的异同？
**alt **是图片加载失败时，显示在网页上的替代文字；
**title **是鼠标放上面时显示的文字,title是对图片的描述与进一步说明;
这些都是表面上的区别，alt是img必要的属性，而title不是。
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。
简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
html5新元素？
HTML5 中一些有趣的新特性：
①用于绘画的 canvas 元素；
②用于媒介回放的 video 和 audio 元素；
③对本地离线存储的更好的支持；
④新的特殊内容元素，比如 article、footer、header、nav、section；
⑤新的表单控件，比如 calendar、date、time、email、url、search"
以上是w3c上的原话，简单说就是更符合标准，提供更多功能支持；更加规范，可读性更强，性能有提升，实现功能更加简单方便，就像手机一样，高版本的功能多一些。
更详细请看html5新元素
CSS层叠是什么？介绍一下
CSS就是层叠式样式表（Cascading Style Sheets）的简称,CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式，还可以多次定义自己的样式，全部样式按照从外到内、由先到后的顺序叠加起来，如果不发生冲突，则全部样式都有效，重复定义冲突时按照内层优先、后定义优先的原则进行覆盖，即内层子元素覆盖父元素样式、后定义的覆盖先定义的样式。
CSS实现垂直和水平居中
这是一道经典的问题，实现方法也有很多种，以下是其中一种实现：
具体方案说明：
①使用绝对定位left:50%与margin-left取宽度值一半的复数形式设置水平居中。
②使用绝对定位top:50%与margin-top取高度值一半的复数形式设置垂直居中
HTML结构：
<div class="box1">
<div class="content"></div>
</div>
CSS代码：
.box1 {
position: relative;
width: 600px;
height: 600px;
background-color: red;
}
.content{
background-color:pink;
width:200px;
height:200px;
position: absolute;
//父元素相对定位,使子元素相对父元素定位
top: 50%;
left: 50%;
margin-top:-100px ;
//二分之一的height，width
margin-left: -100px;
}
什么是CSS Hack?
针对不同的浏览器写不同的CSS,就是 CSS Hack。
详情请看以下链接
CSS hack大全&详解（什么是CSS hack）
你知道哪些CSS浏览器兼容性问题。
px和em的区别
px和em都是长度单位，区别是，px的值是固定的，是绝对单位，类似的还有pt（磅，1pt=1/72英寸）、pc（皮卡，1pc=12pt）、mm（毫米）、cm（厘米）、in（英寸）绝对单位指定是多少就是多少，计算比较容易。
em的值不是固定的，它是相对单位，em是指当前默认字号大小（继承父元素默认字号）的倍数，可根据父元素字号的改变而自动调整。例如2em是当前字号的2倍，若父元素或默认字号为12pt,则2em就是24pt。类似的还有ex,ex是当前字号高度值（通常是字体尺寸一半）的倍数。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
HTML5离线存储
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
说说你对语义化的理解
①去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
②有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
③方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
④便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
描述一段语义的HTML代码
（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则）
< div id="header"> < h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>
如何居中div？
给div设置一个宽度，然后添加margin:0 auto属性
div{width:200px; margin:0 auto; }
列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
①
block 像块类型元素一样显示。
none 缺省值。像行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
**list-item **像块类型元素一样显示，并添加样式列表标记。
②
absolute
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素（浏览器窗口）定位。
fixed
fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
relative生成相对定位的元素，相对于其原来所在的文档流中的位置进行定位。
static
static 默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）
对BFC规范的理解
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
描述CSS Reset的作用和用途。
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。
最简化的CSS Reset
*{
outline:0;
padding:0;
margin:0;
border:0;
}
CSS定义的权重
CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。
理解选择器的特殊性很重要，特别是在修复bug的时候，但是要尽量避免使用。
CSS选择器的权重与优先规则
CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?
在CSS中关于定位的内容是：position:relative | absolute | static | fixed
• static 自动定位，自动定位就是元素在页面普通文档流中由HTML自动定位，普通文档里中的元素也称为流动元素。不能通过z-index进行层次分级。
• relative 相对定位，相对定位不脱离文档流，参考其在原来文档流中的位置，通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
• absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位（绝对、相对或固定定位）的父元素，通过 top,bottom,left,right 定位。当父级 position 为 static 时，absolute元素将依据body根元素（浏览器窗口）进行定位，可以通过z-index进行层次分级。
• fixed 固定定位，固定定位与父元素无关（无论父元素是否定位），直接根据浏览器窗口定位，且不随滚动条拖动页面而滚动，可通过z-index进行层次分级。
CSS中margin和padding的区别
margin是外边距，属于元素之外，相邻元素的margin可以融合。
padding是内边距，在元素之内，相邻元素的padding不可融合。
使用CSS预处理器吗？喜欢哪个？
JavaScript
JS的基本数据类型
number,string,boolean,object,undefined
JavaScript中如何检测一个变量是一个String类型？请写出函数实现
function(obj)
{
return typeof(obj) == ”string”;
}
JavaScript的DOM是什么意思?
DOM是W3C的对象模型，DOM是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容结构和样式。
如何显示/隐藏一个DOM元素
更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。
JavaScript的节点是什么意思?
根据W3C的标准，HTML中文档的所有内容都是节点 ，整个文档是一个文档节点 ，每个html元素都是元素节点， Html元素中的文本是文本节点 ，每个html属性都是属性节点 ，注释是注释节点。
javascript对象的几种创建方式
1、工厂模式
2、构造函数模式
3、原型模式
4、混合构造函数和原型模式
5、动态原型模式
6、寄生构造函数模式
7、稳妥构造函数模式
javascript继承的6种方法
1、原型链继承
2、借用构造函数继承
3、组合继承(原型+借用构造)
4、原型式继承
5、寄生式继承
6、寄生组合式继承
JavaScript继承方式详解
NaN 是什么鬼？typeof 的结果是？如果一个变量的值是 NaN，怎么确定？
NaN 是 'not a number' 的缩写，表示 "不是一个数字"，通常会在运算过程中产生：
console.log('abc' / 4); console.log(4 * 'a');
虽然它 "不是一个数字"，但是 NaN 的 typeof 结果却是 number：
console.log(typeof (4 * 'a')); // number
NaN 和任何变量都不相等，包括 NaN 自己：
console.log(NaN === NaN); // false
判断一个变量是不是 NaN 可以用 isNaN()
函数，但是这并不是一个完美的函数，有些时候用value !== value似乎更准确，幸运的是，ES6 已经有Number.isNaN() 方法，将比 isNaN()准确的多。
怎样添加、移除、移动、复制、创建和查找节点？
①创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
②添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
③查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
documentload和documentready的区别
页面加载完成有两种事件
①load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行的一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
②$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行。
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件
事件绑定的几种方法？
以button的Click事件为例：
<button id="btn">click me</button>
function clickBtn() {
alert('click!');
}
1、直接在元素上绑定回调函数
<button id="btn" onclick="clickBtn()">click me</button>
2、JS获取DOM元素对象后，对onclick属性赋值，绑定事件： document.getElementById('btn').onclick=clickBtn;
3、JS获取DOM对象后，调用对象的addEventListener函数绑定事件：document.getElementById('btn').addEventListener('click',clickBtn);
事件冒泡？
在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。
典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。
可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
js将伪数组转换为标准数组的多种方法
常用JS框架都有什么？
Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
数组方法pop() push() unshift() shift()
push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除
JavaScript中数组对象详解
为什么要用IIFE
简单来说就是为了能模块化，创建私有变量等等，很多类库（比如 jQuery）都用了这样的写法。
详解javascript立即执行函数表达式（IIFE）
严格模式下进行 Javascript 开发有啥好处？
参考阮一峰老师的Javascript 严格模式详解
Javascript 严格模式详解
Node.js的适用场景
高并发、聊天、实时消息推送
描述一下cookies
web前端面试题第五道—简述Cookie，在JS中如何操作Cookie?
事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
①我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
② 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
③ ev.stopPropagation();
如何判断一个对象是否属于某个类
使用instanceof
if(a instanceof Person)
{
alert('yes');
}
Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty
js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（用得最多）、按需异步载入js
javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
手写数组快速排序
关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
快速排序（Quicksort）的Javascript实现
“快速排序”的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，选择一个元素作为”基准”（pivot）。
（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。
（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。
varstr = "aaaabbbccccddfgh";
varobj = {};
for(vari=0;istr.length;i++)
{
varv = 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 inobj)
{
document.write(obj[key].value +'='+obj[key].count+' ');
// a=4 b=3 c=4 d=2 f=1 g=1 h=1 }
写一个function，清除字符串前后的空格。（兼容所有浏览器）
functiontrim(str){
if(str&typeof str === "string")
{
returnstr.replace(/(^s*)|(s*)$/g,"");
//去除前后空白符
}
}
如何制作一个combo选项
combo选项就是可以手动输入值，也可以选择下拉列表值的选项。
思路：
①布局select和input，让input覆盖select，除了select的下拉图标，以方便select选择。
②编写js，为select添加onchange事件，onchange时将input的value置成select选中的值。
这个网上有很多成品,大家可以自己试一下，下边给出一个。
实现一个combo选项
其它
一次完整的HTTP事务是怎样的一个过程？
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
Jquery与jQuery UI 有啥区别？
jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。 提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
如何判断当前脚本运行在浏览器还是node环境中？（阿里）
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中。
你所了解到的web攻击技术
①XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
②SQL注入攻击
③CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
java的三大框架是什么,功能各是什么
三大框架是用来开发web应用程序中使用的。
Struts:基于MVC的充当了其中的试图层和控制器；
Hibernate:做持久化的,对JDBC轻量级的封装,使得我们能过面向对象的操作数据库；
Spring: 采用了控制反转的技术,管理Bean,降低了各层之间的耦合。
Jquery是什么？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：
①具有独特的链式语法和短小清晰的多功能接口；
②具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
③拥有便捷的插件扩展机制和丰富的插件。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+,Opera 9.0+等。
你知道哪些关于ES6新增的东西
如何控制网页在网络传输过程中的数据量?
最显著的方法是启用GZIP压缩。此外保持好的编码习惯，避免重复和css、JavaScript代码，多余的HTML标签和属性。
Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash的缺点是需要客户端安装Flash插件，比较大，且更改了默认的HTML页面行为；但可以方便地实现很多特效及动画，且具有较高权限。
Ajax的缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是DOM API提供的，权限很低，较难跨域；但可以显著加快页面的载入速度和用户体验。
此外，二者都不能被搜索引擎索引（Google已支持Flash文本的索引），不利于SEO。
建议:重要和关键部分直接用HTML，交互部分可以使用Ajax，复杂的动画可采用Flash。
常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
最常用的库：jquery-1.4.2.min.js
常用的前端开发工具：firebug、photoshop、editplus、取色器、色板、eclipse
说说YSlow
Yslow是雅虎开发的基于网页性能分析浏览器插件，是基于Mozilla Firefox上firebug插件的一个插件。它的出现的主要目的就是检测我们的页面性能。
它让用户可以就近取得所需的内容，解决网络拥挤的状况，提高用户访问网站的响应速度。
是否了解flex布局？
参照阮一峰老师的flex布局教程
Flex 布局教程：语法篇
Flex 布局教程：实例篇
是否了解webpack
webSocket如何兼容低浏览器？
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的XHR。
简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
异步ajax的优缺点都有什么？
优点：
• 相对于同步ajax：不会造成UI卡死，用户体验好。
• 相对于刷新页面，省流量
缺点：
• 后退按钮无效；
• 多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂的判断机制。
• 搜索引擎不友好
• 数据安全
如何提高网页运行性能？
对前端工程师这个职位你是怎么样理解的？
a.前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好;
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
最后分享一些大神建议的学习方法
最开始可以在慕课网结合着视频进行学习，或者极客网上跟着一整套前端开发的视频学习， 但是视频仅仅只能陪伴我们走到入门阶段，随后需要自己去养成一套学习方法去自主学习，所以不太建议一连串地全部学完之后再去手敲代码，而是学一点，敲一点。
视频看了之后，建议看一些原理性的书，在这里感谢@任某某大神的推荐，基础入门推荐dom编程艺术、JS高程，css哪些事儿，精通css。然后高级一些就是JS语言精髓、JS设计模式与实践、犀牛书、阮一峰的ES6
前端开发必看的14本书
GitHub是我们每一个人都需要常去的地儿，你需要知道，一切代码的来源，99%都在这儿，所以想知道些最新动态，花点时间泡在这儿准没错。
还有一些前端的公众号，比如前端圈，前端大全，前端早读课
还有很多修改简历的公众号比如乔布简历
想自学又不知道怎么学的可以看下这篇文章,可谓是前端的全景地图了。
史上最全的前端资源大汇总
更多面试题，请看上篇文章
史上最全的web前端面试题汇总及答案1
史上最全的web前端面试题汇总及答案3
前端面试题系列将会持续更新，欢迎关注
