前端面试宝典（1）——来自cnblog
本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！
面试有几点需注意：(来源程劭非老师 github:@wintercn)
(1)面试题目： 根据你的等级和职位变化，入门级到专家级：范围、深度、方向。
题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。
(2)进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。
(3)回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）
(4)资深的工程师能把 absolute 和 relative 弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。
前端开发面试知识点大纲：HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript：
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
10、JSON —— 作用、用途、设计结构。HTML
【1】Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
HTML5 为什么只需要写 < Doctype html>？
如果浏览器基于SGML，需要对DTD引用；H5不基于它，HTML4.01基于它
doctype用于规范浏览器行为，H5需要引入它以受控
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
【2】行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：水平排列，不能包含块级页面；width/height无效，margin/padding无效
块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
比如div默认display属性值为“block”，成为“块级”元素；块级元素独占一行。
span默认display属性值为“inline”，是“行内”元素。 行内元素处于同一行。
（2）行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p 等
（3）知名的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source>
<track> <wbr>【3】link 和@import 的区别是？
（1）link属于XHTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.
【4】浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
【5】常见兼容性问题？
png24位的图片在iE6浏览器上出现背景，解决方案是做成png8.
浏览器默认的margin和padding不同。解决方案是加一个全局的 *{margin:0;padding:0;} 来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。( 这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
1 .bb{
2 background-color:#f1ee18; /*所有识别*/
3 .background-color:#00deff\9; /*IE6、7、8识别*/
5 +background-color:#a200ff; /*IE6、7识别*/
6 _background-color:#1e0bd1; /*IE6识别*/
7 }1.IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
2.IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
3.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
4.超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了,
解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link { } ,a:visited { } ,a:hover { } ,a:active { } ;
【6】HTML5有哪些新特性、移除了那些元素？如何处理html5新标签的浏览器兼容问题？如何区分 HTML 和 Html5？
1.HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
2.绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除.
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
3.移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架
<!--[if lt IE 9]>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/html5shiv.js"></script>
<![endif]-->如何区分： DOCTYPE声明\新增的结构元素\功能元素
【7】语义化的理解？
1.用正确的标签做正确的事情！
2.html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
3.在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
4.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
【8】HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）
就是基于语义化设计原则
< div id="header">
< h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>【9】iframe有那些缺点？
*iframe会阻塞主页面的onload事件；
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
【10】请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
cookies:浏览器端存储数据，内存比较小，并且有条数限制，会被发往服务器端，用于验证用户身份等操作，
sessionStorage:浏览器端存储数据，内存比较大，只存储在本地不发往服务端，当本地浏览器窗口被关闭，就会被删除
localStorage：同上。但是浏览器关闭不会被删除，除非手动删除
【11】浏览器内核
内核分类
浏览器 内核
Chrome,Safari WebKit
Opera Presto=>Blink
FF Gecko
IE Trident
内核分类
渲染引擎和JS引擎
渲染引擎
负责取得网页的内容（HTML、XML、图像...）+整理讯息（CSS...）+计算网页的显示方式，
然后输出(显示器/打印机)。
浏览器的内核决定其渲染的效果。
适用范围：所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则
解析和执行js的引擎。
起初js引擎并不独立于渲染引擎，随着web技术的发展逐渐独立出来(chrome的V8引擎)
【1】介绍一下CSS的盒子模型？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
【2】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 元素的每个 p 元素。
p:last-of-type 选择属于其父元素的最后 p>元素的每个 p 元素。
p:only-of-type 选择属于其父元素唯一的 p元素的每个 p 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
:enabled 控制表单控件的启用状态。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
【3】如何居中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%;
}【4】列出display的值，说明他们的作用。列出position的值， relative和absolute定位原点是？
1.display的值
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2.position的值
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继承 position 属性的值。
position:absolute和float属性的异同
共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。
【5】CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px）
阴影（box-shadow:10px）
对文字加特效（text-shadow）
线性渐变（gradient）
旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image
CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，
几种盒模型计算元素宽高的区别如下：
content-box（默认）
布局所占宽度Width：
Width = border-left + padding-left +width + padding-right + border-right
布局所占高度Height:
Height = border-top+ padding-top +height + padding-bottom + border-bottom
padding-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
看着很麻烦，我就丢个图，只画content和border，感觉padding-box没多大意义：
图片描述
![图片描述][1]
看图还不明白的话，不要学前端了。
【6】一个满屏 品 字布局 如何设计?
【7】经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？
【8】为什么要初始化CSS样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法就是： {padding: 0; margin: 0;} （不建议）
淘宝的样式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd,
ul, ol, li, pre,form, fieldset, legend, button, input,
textarea, th, td { margin:0;padding:0; }
body,button, input, select, textarea { font:12px/1.5tahoma,arial, \5b8b\4f53; }
h1, h2,h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code,kbd, pre, samp { font-family:couriernew,courier,monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a{ text-decoration:none;}
a:hover { text-decoration:underline; }
sup { vertical-align:text-top;}
sub{vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse;border-spacing:0; } 【9】css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
div{}
/*权重为10*/
.class1{}
/*权重为100*/
#id1{}
/*权重为100+1=101*/
#id1 div{}
/*权重为10+1=11*/
.class1 div{}
/*权重为10+10+1=21*/
.class1 .class2 div{} 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
【10】解释下浮动和它的工作原理？清除浮动的技巧
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
设置overflow为hidden或者auto，给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
【11】**浮动元素引起的问题和解决办法
浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} / for IE/Mac /清除浮动的几种方法：
1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
2，使用after伪类
parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}3,浮动外部元素
4,设置overflow为hidden或者auto
谈谈浮动和清除浮动
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像
浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。
常用清除方法（供参考）：
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}其中的"clearfix"是父容器的class名称，"content:"\0020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，
"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。
IE 6会读取这条命令，其他浏览器则会直接忽略它。
最后的生产代码
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}上面都是废话啦，现在最通用做法：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }【12】 display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
【13】什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：
// 1、条件Hack
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
// 2、属性Hack
.test{
color:#090\9; / For IE8+ /
color:#f00; / For IE7 and earlier /
_color:#ff0; / For IE6 and earlier */
}
// 3、选择符Hack
html .test{color:#090;} / For IE6 and earlier /
html .test{color:#ff0;} / For IE7 /
【14】 box-sizing常用的属性
属性：box-sizing: content-box|border-box|inherit;
作用：
content-box:宽高度分别对应到元素的content，内边距和边框在宽高之外渲染(默认)。
border-box:宽高度分别对应到元素的border,任何内边距和边框都将在已设定的宽高内渲染。
总结：x-box=>元素宽高对应到x
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content。
【14】 CSS sprites
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了http2。
【1】eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。
【2】null，undefined 的区别？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
写一个通用的事件侦听器函数。
markyun.Event = {
//页面加载完成后
readyEvent : function(fn) {
if(fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
}
else {
window.onload= function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数： 操作的元素,事件名称 ,事件处理程序
addEvent: function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type,handler, false);
}
else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
}
else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
}
else if (element.datachEvent) {
element.detachEvent('on' +type, handler);
}
else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
}
else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
},
//获取事件目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev= c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
【3】Node.js的适用场景？
高并发、聊天、实时消息推送
【4】介绍js的基本数据类型。
number,string,boolean,object,undefined
【5】javascript如何实现继承？
通过原型和构造器
【6】["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) 但 map 传了 3 个 (element, index, array)
【7】如何创建一个对象?
function Person(name, age) {
this.name = name;
this.age = age;
this.sing = function() {
alert(this.name);
}
}
【8】谈谈This对象的理解。
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象
【9】事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
1.我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
1.事件处理机制：IE是事件冒泡、火狐是 事件捕获；
2.ev.stopPropagation();
【10】什么是闭包（closure），为什么要用它？
执行say667()后,say667()内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.
function say667(){
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert();//执行结果应该弹出的667 说说你对闭包的理解
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内
存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念
闭包有三个特性：
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
【11】new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
【12】Javascript中，有一个函数，执行对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty
【13】对JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
{"age":"12", "name":"back"}
【14】js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（用得最多）、按需异步载入js
【15】ajax 是什么?
【16】同步和异步的区别?
【17】如何解决跨域问题?
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
【18】模块化怎么做？
立即执行函数,不暴露私有成员
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
【19】AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？
【20】异步加载的方式有哪些？
(1) defer，只支持IE
(2) async：
(3) 创建script，插入到DOM中，加载完毕后callBack
【21】documen.write和 innerHTML的区别？
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
【22】.call() 和 .apply() 的区别？
例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
function add(a,b){
alert(a+b);
}
function sub(a,b){
alert(a-b);
}
add.call(sub,3,1);
【23】jQuery与jquery UI 有啥区别？
jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
【24】JQuery的源码看过吗？能不能简单说一下它的实现原理？
【25】jquery 中如何将数组转化为json字符串，然后再转化回来？
jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：
$.fn.stringifyArray = function(array)
{
return JSON.stringify(array)
}
$.fn.parseArray = function(array)
{
return JSON.parse(array)
}
然后调用：
$("").stringifyArray(array)【26】针对 jQuery 的优化方法？
基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
比如：var str=$("a").attr("href");
for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}
【27】那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
【28】JQuery一个对象可以同时绑定多个事件，这是如何实现的？
【29】DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //并没有insertAfter()
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，
会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
共同学习，写下你的评论
评论加载中...
作者其他优质文章
