前端面试题（市场上流传最广的）

HTML

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

（1）<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

（2）标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2、HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

3、行内元素有哪些？块级元素有哪些？空(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）常见的空元素：

鲜为人知的是：

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

1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

5、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

6、常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

7、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;

<!--[if lt IE 9]>

<![endif]-->

* 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

8、简述一下你对HTML语义化的理解？

用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

及时在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

9、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进行需求实现。

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

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

10、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

详细的使用请参考：有趣的HTML5：离线存储

11、iframe有那些缺点？

*iframe会阻塞主页面的Onload事件；

*搜索引擎的检索程序无法解读这种页面，不利于SEO;

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript

动态给iframe添加src属性值，这样可以绕开以上两个问题。

12、Label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>

13、HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或下某个input 设置为 autocomplete=off。

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

调用localstorge、cookies等本地存储方式

15、webSocket如何兼容低浏览器？(阿里)

Adobe Flash Socket 、

ActiveX HTMLFile (IE) 、

基于 multipart 编码发送 XHR 、

基于长轮询的 XHR

16、页面可见性（Page Visibility）API 可以有哪些用途？

在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

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

1、map+area或者svg

2、border-radius

3、纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等

18、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

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

区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水；

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试；

Css:

1、介绍一下CSS的盒子模型？

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

2、CSS选择符有哪些？哪些属性可以继承？

* 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 ;

3、CSS优先级算法如何计算？ * 优先级就近原则，同权重情况下样式定义最近者为准;

* 载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag

important 比内联优先级高

4、CSS3新增伪类有那些？

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 单选框或复选框被选中。

5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

(1)给div设置一个宽度，然后添加margin:0 auto属性

div{

width:200px;

margin:0 auto;

}

(2)居中一个浮动元素

确定容器的宽高宽500 高 300 的层

设置层的外边距

.div {

width:500px ; height:300px;//高度可以不设

margin: -150px 0 0 -250px;

position:relative; //相对定位

background-color:pink; //方便看效果

left:50%;

top:50%;

}

(3)让绝对定位的div居中

position: absolute;

width: 1200px;

background: none;

margin: 0 auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

6、display有哪些值？说明他们的作用。

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

7、position的值relative和absolute定位原点是？

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

fixed （老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

relative

生成相对定位的元素，相对于其正常位置进行定位。

static

默认值。没有定位，元素出现在正常的流中

（忽略 top, bottom, left, right z-index 声明）。

inherit

规定从父元素继承 position 属性的值。

8、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

9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

应用场景:响应式设计。

10、用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

11、一个满屏品字布局如何设计?

简单的方式：

上面的div宽100%，

下面的两个div分别宽50%，

然后用float或者inline使其不换行即可

12、常见兼容性问题？

* 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

.bb{

background-color:#f1ee18;/*所有识别*/

.background-color:#00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/

}

* IE下,可以使用获取常规属性的方法来获取自定义属性,

也可以使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性。

解决方法:统一通过getAttribute()获取自定义属性。

* IE下,even对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

13、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格等等）的影响，这些空白也会被应用样式，占据空间，所以会有间隔。在ul标签中设置font-size=0,在li中设置标签文字的大小；因为空格也属于字符，把字符大小设为0，就没有空格了。

14、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。

碰到频率:100%

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

/* CSS hack*/

我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6认识的hacker是下划线_和星号 *

◆IE7 遨游认识的hacker是星号*

比如这样一个CSS设置：

height:300px;*height:200px;_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

15、为什么要初始化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; }

16、absolute的containing block(容器块)计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2、否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

2. absolute: 向上找最近的定位为absolute/relative的元素

3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

17、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

(在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。 (Seethis bug report and comments)

· 在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

)

18、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

19、对BFC规范(块级格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

20、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{

}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

21、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

Float嘛这才出现浮动,标签元素高度为0。

清除浮动可以给外面的div标签float：left;

22、移动端的布局用过媒体查询吗？

http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/

23、使用 CSS 预处理器吗？喜欢那个？

SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)

24、CSS优化、提高性能的方法有哪些？

尽量减少HTTP请求个数

一般就是把多个css用merge（后台）合并

· 把CSS放到顶部

· 避免使用CSS表达式

· 将CSS和JS放到外部文件中

· 精简CSS（主要是把空格和注释去掉，一般和第一点一起进行）

· 剔除重复的JS和CSS（一般大的工程很容易出现这样的问题）

· 高效的CSS书写规则（这点比较重要……简单讲，就是少些废话）

25、浏览器是怎样解析CSS选择器的？

从右往左。

（http://www.zhihu.com/question/20185756?rf=21310443）

26、在网页中的应该使用奇数还是偶数的字体？为什么呢？

可以这么回答，（奇偶字号的字体渲染效果似乎其实差别不大（尤其在 OS X 和 Linux 以及手持设备上）。即使在 Windows 里，微软雅黑在 11 至 17 px 之间的奇偶字号效果似乎也都差不多。目前 12、13、14、15、16 px 其实都是很不错的正文字号。知乎和豆瓣的正文字号都是 13 px，而中文维基百科的正文字号是 15 px，并没有什么不好。

）

27、margin和padding分别适合什么场景使用？

◆何时应当使用margin

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

◆何时应当时用padding

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

◆浏览器兼容性问题

在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。

28、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

我们知道，一个成熟的网站需要有统一的风格，一致的用户体验，比如：网站的配色，字体的大小，交互行为一致等应该在设计之初就得到确定，而不是由个体开发者来自由的定义。网站同时应存在可以提取出来公用的样式部分（如人人网中个人主页右侧的"最近来访"，"推荐"等处的容器和标题都是相同的展示效果）。那么我们就可以把网站的字体大小，公共控制，共用模块的样式都抽离出来，作为单独的模块来处理。这样，团队中的每个人如果需要这样的样式，都可以用这种公共样式，以此提高代码的重用率。

我认为一个项目的CSS可以拆分成2部分：公共CSS和业务CSS。我们在项目中抽出的这部分可以模块化的CSS就可以归类为公共CSS。这部分的代码命名不应涉及到具体的业务，只应对其在模块中负责的具体逻辑负责。

对于业务CSS，我们需要有统一的命名。如一个网站中有如下几个栏目：文件，社区，社交关系等，在项目规划时，就需要把这块模块的名称定好，比如文件-files,社区-cmty(community简写)，这样开发人员在写样式时，就可以使用公用的前缀，.cmty-cmtydetail，而不会根据各自的想法，写成.community或是.commu，这一点对于统一风格是尽为重要的，也方便备用人员接手工作。

关于这方面，可以看看网上关于面向对象的CSS / OOCSS。

29、元素竖向的百分比设定是相对于容器的高度吗？是宽度。

30、全屏滚动的原理是什么？用到了CSS的那些属性？

1.js动态获取屏幕的高度。

获取屏幕的高度，设置每一屏幕的高度。

2.监听mousewheel事件。

监听mousewheel事件，并判断滚轮的方向，向上或向下滚动一屏。

31、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式就是能够跨多屏。利用媒体查询。

<!--[if lt IE 9]><script src="css3-mediaqueries.js"></script><![endif]—>

32、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

设置透明度，滚动到顶部透明度变成0;

33、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。

伪元素将会在内容元素的前后插入额外的元素。

34、如何修改chrome记住密码后自动填充表单的黄色背景？

input : -webkit-autofill {

-webkit-box-shadow : 0 0 0px 1000px white inset ;

border : 1px solid #CCC !important ;

height : 27px !important ;

line-height : 27px !important ;

border-radius : 0 4px 4px 0 ;

}

35、你对line-height是如何理解的？

对高度起作用。

36、设置元素浮动后，该元素的display值是多少？（自动变成display:block）

为了方便，我们最好定义为一个类，方便我们每次调用

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

body,p{ margin:0; padding:0}

p{font-size:8px;}

.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}

</style>

</head>

<body>

<p><span class="shrink">我是一个小于12PX的字体</span></p>

</body>

</html>

37、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

38、font-style属性可以让它赋值为“oblique” oblique是什么意思？

斜体。

39、position:fixed;在android下无效怎么处理？

在<head>中，写下以下代码

<meta name="viewport" content="width=device-width; user-scalable=0;" />

40、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

41、display:inline-block 什么时候会显示间隙？(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

42、overflow: scroll时不能平滑滚动的问题怎么处理？

@media screen and (min-width: 1150px) {

.wrap-outer {

margin-left: calc(100vw - 100%);

}

43、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

</div>

html,

body { height: 100%; padding: 0; margin: 0; }

.outer { height: 100%; position: relative; }

.A { height: 100px; background: #BBE8F2; }

.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }

44、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png格式：Png是完全支持alpha透明的(透明，半透明，不透明)，尽管有两个怪异的现象在ie6(下面详细讨论)。

Jpg格式：能支持上百万种颜色，从而可以用来表现照片。此外，由于JPG图片使用更有效的有损压缩算法，从而使文件长度更小，下载时间更短。

Gif格式：.GIF格式支持背景透明。GIF图片假如背景色设置为透明，它将与浏览器背景相结合，生成非矩形的图片。

Webp格式：Google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。当然其也是一种有损压缩，其主要目的就是加快网络图片的传输效率，让图片能更快的显示在用户的眼前。目前所知道的只有高版本的W3C浏览器才支持这种格式，比如chorme39+，safari7+等等。

45、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，

所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，

这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，

提高了webserver的http请求的解析速度。

1、介绍js的基本数据类型。

Undefined、Null、Boolean、Number、String

2、介绍js有哪些内置对象？

Object 是 JavaScript 中所有对象的父对象

数据封装类对象：Object、Array、Boolean、Number 和 String

其他对象：Function、Arguments、Math、Date、RegExp、Error

3、说几条写JavaScript的基本规范？

1.不要在同一行声明多个变量。

2.请使用 ===/!==来比较true/false或者数值

3.使用对象字面量替代new Array这种形式

4.不要使用全局函数。

5.Switch语句必须带有default分支

6.函数不应该有时候有返回值，有时候没有返回值。

7.For循环必须使用大括号

8.If语句必须使用大括号

9.for-in循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污染。

4、JavaScript原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，

如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，

于是就这样一直找下去，也就是我们平时所说的原型链的概念。

关系：instance.constructor.prototype = instance.__proto__

特点：

JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，

就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。

function Func(){}

Func.prototype.name = "Sean";

Func.prototype.getInfo = function() {

return this.name;

}

var person = new Func();//现在可以参考var person = Object.create(oldObject);

console.log(person.getInfo());//它拥有了Func的属性和方法

//"Sean"

console.log(Func.prototype);

// Func { name="Sean", getInfo=function()}

5、JavaScript有几种类型的值？，你能画一下他们的内存图吗？

栈：原始数据类型（Undefined，Null，Boolean，Number、String）

堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同；

原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其

在栈中的地址，取得地址后从堆中获得实体

6、Javascript如何实现继承？

1、构造继承

2、原型继承

3、实例继承

4、拷贝继承

原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。

function Parent(){

this.name = 'wang';

}

function Child(){

this.age = 28;

}

Child.prototype = new Parent();//继承了Parent，通过原型

var demo = new Child();

alert(demo.age);

alert(demo.name);//得到被继承的属性

}

7、javascript创建对象的几种方式？

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。

1、对象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

2、用function来模拟无参的构造函数

function Person(){}

var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class

person.name="Mark";

person.age="25";

person.work=function(){

alert(person.name+" hello...");

}

person.work();

3、用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

function Pet(name,age,hobby){

this.name=name;//this作用域：当前对象

this.age=age;

this.hobby=hobby;

this.eat=function(){

alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");

}

var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象

maidou.eat();//调用eat方法

4、用工厂方式来创建（内置对象）

var wcDog =new Object();

wcDog.name="旺财";

wcDog.age=3;

wcDog.work=function(){

alert("我是"+wcDog.name+",汪汪汪......");

}

wcDog.work();

5、用原型方式来创建

function Dog(){

}

Dog.prototype.name="旺财";

Dog.prototype.eat=function(){

alert(this.name+"是个吃货");

}

var wangcai =new Dog();

wangcai.eat();

5、用混合方式来创建

function Car(name,price){

this.name=name;

this.price=price;

}

Car.prototype.sell=function(){

alert("我是"+this.name+"，我现在卖"+this.price+"万元");

}

var camry =new Car("凯美瑞",27);

camry.sell();

8、Javascript作用链域?

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。

当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，

直至全局函数，这种组织形式就是作用域链。

9、谈谈This对象的理解。

this关键字引用的是包含它的那个函数作为某个对象的方法被调用时所属的那个对象

10、eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

11、什么是window对象? 什么是document对象?

简单来说，document是window的一个对象属性。
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame或iframe 标签），浏览器会为HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window对象。
所有的全局函数和对象都属于Window对象的属性和方法。
document 对Document对象的只读引用。

12、null，undefined 的区别？

null 表示一个对象被定义了，值为“空值”；

undefined 表示不存在这个值。

typeof undefined

//"undefined"

undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined；

例如变量被声明了，但没有赋值时，就等于undefined

typeof null

//"object"

null : 是一个对象(空对象, 没有任何属性和方法)；

例如作为函数的参数，表示该函数的参数不是对象；

注意：

在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined

再来一个例子：

null

Q：有张三这个人么？

A：有！

Q：张三有房子么？

A：没有！

undefined

Q：有张三这个人么？

A：没有！

13、写一个通用的事件侦听器函数

// event(事件)工具集，来源：github.com/markyun

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.removeEventListener) {

element.removeEventListener(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;

}

};

14、["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)，

其中 radix 表示解析时用的基数。

map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。

15、事件是？IE与火狐的事件机制有什么区别？如何阻止冒泡？

1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

2. 事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；

3. ev.stopPropagation();（旧ie的方法 ev.cancelBubble = true;）

16、什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性：

1.函数内再嵌套函数

2.内部函数可以引用外层的参数和变量

3.参数和变量不会被垃圾回收机制回收

//li节点的onclick事件都能正确的弹出当前被点击的li索引

<li> index = 0</li>

<li> index = 1</li>

<li> index = 2</li>

<li> index = 3</li>

</ul>

var nodes = document.getElementsByTagName("li");

for(i = 0;i<nodes.length;i+= 1){

nodes[i].onclick = function(){

console.log(i+1);//不用闭包的话，值每次都是4

}(i);

}

</script>

执行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

17、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,

使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。

默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;

全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；

消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;

提高编译器效率，增加运行速度；

为未来新版本的Javascript标准化做铺垫。

18、如何判断一个对象是否属于某个类？

使用instanceof （待完善）

if(a instanceof Person){

alert('yes');

}

19、new操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var obj = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

20、用原生JavaScript的实现过什么功能吗？

21、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。

使用方法：

object.hasOwnProperty(proName)

其中参数object是必选项。一个对象的实例。

proName是必选项。一个属性名称的字符串值。

如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

22、JSON 的了解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

如：{"age":"12", "name":"back"}

23、[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 能解释一下这段代码的意思吗？

24、js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

25、Ajax 是什么? 如何创建一个Ajax？

jax的全称：Asynchronous Javascript And XML。

异步传输+js+xml。

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

26、同步和异步的区别?

同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。

异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

27、如何解决跨域问题?

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

28、页面编码和被请求的资源编码如果不一致如何处理？

String str1 = new String(str.getBytes("你的编码方式"),"它的编码方式");

29、模块化开发怎么做？

立即执行函数,不暴露私有成员

var module1 = (function(){

var _count = 0;

var m1 = function(){

//...

};

var m2 = function(){

//...

};

return {

m1 : m1,

m2 : m2

};

})();

（待完善）

30、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

AMD 规范在这里：https://github.com/amdjs/amdjs-api/wiki/AMD

CMD 规范在这里：https://github.com/seajs/seajs/issues/242

Asynchronous Module Definition，异步模块定义，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。

区别：

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.

2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：

// CMD

define(function(require, exports, module) {

var a = require('./a')

a.doSomething()

// 此处略去 100 行

var b = require('./b') // 依赖可以就近书写

b.doSomething()

// ...

})

// AMD 默认推荐

define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好

a.doSomething()

// 此处略去 100 行

b.doSomething()

// ...

})

31、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）

32、谈一谈你对ECMAScript6的了解？

33、ECMAScript6 怎么写class么，为什么会出现class这种东西?

34、异步加载JS的方式有哪些？

(1) defer，只支持IE

(2) async：

(3) 创建script，插入到DOM中，加载完毕后callBack

35、documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

（1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById() //通过元素Id，唯一性

37、.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);

38、数组和对象有哪些原生方法，列举一下？

http://www.jb51.net/article/34711.htm

39、JS 怎么实现一个类。怎么实例化这个类。

40、JavaScript中的作用域与变量声明提升？

http://blog.csdn.net/sunxing007/article/details/9034253

41、如何编写高性能的Javascript？

http://www.jb51.net/article/53623.htm

42、那些操作会造成内存泄漏？

1．常发性内存泄漏。发生内存泄漏的代码会被多次执行到，每次被执行的时候都会导致一块内存泄漏。

2．偶发性内存泄漏。发生内存泄漏的代码只有在某些特定环境或操作过程下才会发生。常发性和偶发性是相对的。对于特定的环境，偶发性的也许就变成了常发性的。所以测试环境和测试方法对检测内存泄漏至关重要。

3．一次性内存泄漏。发生内存泄漏的代码只会被执行一次，或者由于算法上的缺陷，导致总会有一块且仅一块内存发生泄漏。比如，在一个Singleton类的构造函数中分配内存，在析构函数中却没有释放该内存。而Singleton类只存在一个实例，所以内存泄漏只会发生一次。

4．隐式内存泄漏。程序在运行过程中不停的分配内存，但是直到结束的时候才释放内存。严格的说这里并没有发生内存泄漏，因为最终程序释放了所有申请的内存。但是对于一个服务器程序，需要运行几天，几周甚至几个月，不及时释放内存也可能导致最终耗尽系统的所有内存。所以，我们称这类内存泄漏为隐式内存泄漏。

43、JQuery的源码看过吗？能不能简单概况一下它的实现原理？

44、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

45、jquery中如何将数组转化为json字符串，然后再转化回来？

JSON.stringify 把一个对象转换成json字符串，
JSON.parse 把一个json字符串解析成对象。

46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

http://www.jb51.net/article/60689.htm

47、jquery.extend 与 jquery.fn.extend的区别？

http://www.cnblogs.com/Dlonghow/p/4142034.html

48、jQuery 的队列是如何实现的？队列可以用在哪些地方？

http://www.jb51.net/article/50913.htm

49、谈一下Jquery中的bind(),live(),delegate(),on()的区别？

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

$("a").bind("click",function(){alert("ok");});

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

$("a").live("click",function(){alert("ok");});

delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$("#container").delegate("a","click",function(){alert("ok");})

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

差别：

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理，性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

50 . JQuery一个对象可以同时绑定多个事件，这是如何实现的？
51 . 是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
52 . jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
53 . 针对 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++) {}

54 . Jquery与jQuery UI有啥区别？

*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

55 . JQuery的源码看过吗？能不能简单说一下它的实现原理？
56 . jquery 中如何将数组转化为json字符串，然后再转化回来？
57 . jQuery和Zepto的区别？各自的使用场景？
58 . 针对 jQuery 的优化方法？
59 . Zepto的点透问题如何解决？
60 . jQueryUI如何自定义组件?
61 . 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
63 . 移动端最小触控区域是多大？
64 . jQuery 的 slideUp动画，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
65 . 把 Script 标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？
移动端的点击事件的有延迟，时间是多久，为什么会有？怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
66 . 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
67 . Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
68 . 解释JavaScript中的作用域与变量声明提升？
69 . 那些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

70 . JQuery一个对象可以同时绑定多个事件，这是如何实现的？

71 . Node.js的适用场景？

高并发、聊天、实时消息推送

72 . (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
解释一下 Backbone 的 MVC 实现方式？
73 . 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
74 . 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
75 . 如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
76 . 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
77 . 简述一下 Handlebars 的基本用法？
78 . 简述一下 Handlerbars 的对模板的基本处理流程，如何编译的？如何缓存的？
79 . 用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
80 . 检测浏览器版本版本有哪些方式？
81 . 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获？
82 . 如何判断当前脚本运行在浏览器还是node环境中？（阿里）

通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中。

其他问题

1 . 原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？
2 . 你遇到过比较难的技术问题是？你是如何解决的？
3 . 设计模式知道什么是singleton, factory, strategy, decrator么?
4 . 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
5 . 页面重构怎么操作？
6 . 列举IE与其他浏览器不一样的特性？
7 . 99%的网站都需要被重构是那本书上写的？
8 . 什么叫优雅降级和渐进增强？
9 . 是否了解公钥加密和私钥加密。
10 . WEB应用从服务器主动推送Data到客户端有那些方式？
11 . 对Node的优点和缺点提出了自己的看法？

*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

12 . 你有用过哪些前端性能优化的方法？

（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布局慢。

13 . http状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
400 语义有误，当前请求无法被服务器理解。
401 当前请求需要用户验证
403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。
503 – 服务不可用

14 . 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
服务器回馈报头(响应报头)
html文档开始下载
文档树建立，根据标记请求所需指定MIME类型的文件
文件显示
[
浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
}

https://segmentfault.com/q/1010000000489803
http://www.cnblogs.com/yuezk/archive/2013/01/11/2855698.html

15 . 部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？
16 . 从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?
17 . 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？
18 . 你用的得心应手用的熟练地编辑器&开发环境是什么样子？
19 . 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
20 . 你怎么看待Web App 、hybrid App、Native App？
21 . 你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？）
22 . 你对加班的看法？
23 . 平时如何管理你的项目？
先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如页面模块开始和结束）；
CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
JS 分文件夹存放命名以该JS功能为准的英文翻译。
图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理

24 . 说说最近最流行的一些东西吧？常去哪些网站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js
25 . 如何设计突发大规模并发架构？
26 . 说说最近最流行的一些东西吧？常去哪些网站？
27 . 是否了解开源的工具 bower、npm、yeoman、grunt、gulp，一个 npm 的包里的 package.json 具备的必要的字段都有哪些？（名称、版本号，依赖）
28 . 每个模块的代码结构都应该比较简单，且每个模块之间的关系也应该非常清晰，随着功能和迭代次数越来越多，你会如何去保持这个状态的？
29 . Git知道branch, diff, merge么?
30 . 如何设计突发大规模并发架构？
31 . 当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？

33 . 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?
34 . 移动端（Android iOS）怎么做好用户体验?
35 . 简单描述一下你做过的移动APP项目研发流程？
36 . 你在现在的团队处于什么样的角色，起到了什么明显的作用？
37 . 你认为怎样才是全端工程师（Full Stack developer）？
38 . 介绍一个你最得意的作品吧？
39 . 你有自己的技术博客吗，用了哪些技术？
40 . 对前端安全有什么看法？
41 . 是否了解Web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度？
42 . 项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？。
43 . 最近在学什么东西？
44 . 你的优点是什么？缺点是什么？
45 . 如何管理前端团队?
46 . 最近在学什么？能谈谈你未来3，5年给自己的规划吗？
47 .移动端（Android IOS）怎么做好用户体验?

清晰的视觉纵线、信息的分组、极致的减法、
利用选择代替输入、标签及文字的排布方式、
依靠明文确认密码、合理的键盘利用

48.想问公司的问题？
目前关注哪些最新的Web前端技术（未来的发展方向）？
前端团队如何工作的（实现一个产品的流程）？
公司的薪资结构是什么样子的？

49.优质网站推荐
极客标签： http://www.gbtags.com/
码农周刊： http://weekly.manong.io/issues/
前端周刊： http://www.feweekly.com/issues
极客头条： http://geek.csdn.net/
Startup News：http://news.dbanotes.net/
Hacker News： https://news.ycombinator.com/news
InfoQ： http://www.infoq.com/
w3cplus： http://www.w3cplus.com/
Stack Overflow： http://stackoverflow.com/
Atp： http://atp-posts.b0.upaiyun.com/posts/

-END-

参考：http://sparselight.cn/

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

双眼皮后眼睛皮肤发黄
...
2024/4/21 11:06:45
双眼皮后消炎药吃多久
...
2024/4/21 14:45:45
ionic ion-infinite-scroll 下拉加载
app使用ionc ion-infinite-scroll时的问题 1.下拉加载无效，不触发方法，下拉后屏幕留白下拉加载无效有两种情况，①控件失效（前段时间发现之前还正常的加载忽然失效了），切换angular/ionic版本 ②ion-infinit…...
2024/4/25 3:03:13
前端下拉选择字体加载字体
当我们选择字体后加载对应字体我这里是用angular写的，用的是ng-zorro组件，vue，react都一样，上代码改变事件时，我们可以用此方法来打印出字体加载到页面的时长先看前面这个描述，再看这个，…...
2024/4/21 14:45:43
ionic下拉加载自动触发
ionic提供的下拉加载，是要滑动去下拉加载，没有提供api自动触发下拉加载，比如刚进页面，或者切换tab时想触发一次下拉加载。添加如下service: angular.module(YourApp).service(utilities, function() {this.triggerScrollViewPull…...
2024/4/21 14:45:42
双眼皮后热敷还是冷敷
...
2024/4/28 12:54:56
双眼皮后热敷
...
2024/4/21 14:45:41
双眼皮后脸变胖啦
...
2024/4/29 5:27:01
双眼皮后可以吃鸡蛋吗
...
2024/4/27 13:44:58
双眼皮后忌口多久
...
2024/4/27 17:00:16
angularJs 笔记(一)
一、模块的依赖与注入(官方推荐方式) 把myApp设置为启动点，同时把多个模块注入到myApp里面。 var myAppanglar.moudle(app,[myController,myDirective,myService]);var myControlleranglar.moudle(controller,[]); var myDirectiveanglar.moudle(directive,[]); va…...
2024/4/27 15:53:21
ng animate
要在angular中加入动画必须引入angular.animate.js插件，然后就可以在module中引入ngAnimate模块。如： var module1 angular.module(myApp,[ngAnimate]); 指令对动画支持情况如下 Directive Supported Animations ngRepeat enter, leave and move …...
2024/4/27 17:26:34
如果我有jQuery背景，那么“ AngularJS中的思考”吗？ [关闭]
已关闭。这个问题需要更加集中。它当前不接受答案。想改善这个问题吗？ 更新问题，使其仅通过编辑此帖子来关注一个问题。 4年前关闭。已锁定。该问题及其答案被锁定，因为该问题是题外话，但具有历史意义。它目前不接受新…...
2024/4/27 18:02:24
AngularJS--ngRoute模块
ngRoute 使用步骤： (1)创建index.html，引入css/js，声明ngView (2)创建模板页面 (3)创建模块，配置路由字典 module.config(function($routeProvider){ $routeProvider. when(/start, {templateUrl: xxx.html}) }) (4)测试&#xff…...
2024/4/27 14:14:59
AngularJS--ngAnimate模块
1.ngRoute模块的使用使用步骤： (1)创建index.html，引入css/js，声明ngView (2)创建模板页面 (3)创建模块，配置路由字典 module.config(function($routeProvider){ $routeProvider. when(/start, {templateUrl: xxx.html}) }) (4)测…...
2024/4/27 14:20:26
AngularJS开发指南-Animations
pre：本文翻译自官方文档，AngularJS版本为v1.3.0-beta.8。欢迎分享，转载请注明。 Animations AngularJS自1.2版本起，可以在一些常用的directive上绑定animation，比如ngRepeat, ngSwitch和ngView，也可以在自定…...
2024/4/27 18:05:43
AngularJS 常用模块书写建议
本文是依据 Angular Style Guide 对 Angular 常用模块书写建议的翻译和总结，仅供参考。 IIFE 使用立即执行函数表达式（Immediately Invoked Function Expression）将 Angular 组件包裹起来，防止污染全局作用域 Style Y010 。 1234…...
2024/4/27 18:54:59
[AngularJS] AngularJS系列(5) 中级篇之动画
目录 CSS定义JS定义ng动画实际帮我们在状态切换的时候添加特定的样式从而实现动画效果. 一般我们会通过C3来实现具体的动画. CSS定义 ng-if 图(实际上,图并不能展现出什么): HTML <body ng-app"myApp"><button ng-click"show!show">Toggle&l…...
2024/4/27 17:41:36
AngularJs学习笔记-第六章-动画(ngAnimate)
Angular动画执行过程: .class.ng-animate-class支持ngAnimate的基本指令 ngShow ngHide ngIf ngRepeat ngView ngClass ngInclude ngSwitch 怎样自定义动画 app.animation(.className,function(){//定义一个classNamereturn{handle:function(element,className,done){//element…...
2024/4/27 19:52:41
双眼皮后几天用疤克
...
2024/4/27 14:33:26

前端面试题（市场上流传最广的）

HTML

相关文章

最新文章