前端面试笔试题总结解析.docx

前端面试笔试题总结解析.docx

《前端面试笔试题总结解析.docx》由会员分享，可在线阅读，更多相关《前端面试笔试题总结解析.docx（42页珍藏版）》请在冰豆网上搜索。

前端面试笔试题总结解析

JavaScript类库：

jQuery、Prototype

JavaScript框架：

BackBone、Vuejs、Angular.js、React.js

CSS预编译器：

LessCss、Sass

JavaScript模块加载器：

RequireJS、Browserify

项目构建工具：

Grunt、Gulp

项目管理和协同工具的使用：

SVN、Git

前端测试框架以及工具：

Jasmine、Mocha

基本后端开发：

NodeJS、Python

web相关技术：

MongoDB、CoffeeScript、SEO、Socket.io、Express、Tornado等

1、谈谈cookie的弊端：

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：

每个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie

2.IE7和之后的版本最后可以有50个cookie。

3.Firefox最多50个cookie

4.chrome和Safari没有做硬性限制

IE和Opera会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE提供了一种存储可以持久化用户数据，叫做uerData，从IE5.0就开始支持。

每个数据最多128K，每个域名下最多1M。

这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：

极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。

偷盗者很可能拿到一个过期的cookie。

缺点：

1.`Cookie`数量和长度的限制。

每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。

如果cookie被人拦截了，那人就可以取得所有的session信息。

即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。

例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。

如果我们把这个计数器保存在客户端，那么它起不到任何作用。

二、浏览器本地存储：

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。

在HTML5中提供了localStorage来取代globalStorage。

html5中的WebStorage包括了两种存储方式：

sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

三、webstorage和cookie的区别

WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。

Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：

Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持（ie及FF需在web服务器里运行），值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。

通过简单的代码封装可以统一到所有的浏览器都支持webstorage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

四、display:

none和visibility:

hidden的区别？

display:

none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:

hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

五、CSS中link和@import的区别是？

（1）link属于HTML标签，而@import是CSS提供的; 

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

（3）import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 

（4）link方式的样式的权重高于@import的权重.

六、position的absolute与fixed共同点与不同点

A：

共同点：

1.改变行内元素的呈现方式，display被置为block；

2.让元素脱离普通流，不占据空间；

3.默认会覆盖到非定位元素上

B不同点：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

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

参考答案

1）盒模型：

内容（content）、填充（padding）、边界（margin）、边框（border）

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

3）

八、CSS选择符有哪些？

哪些属性可以继承？

优先级算法如何计算？

CSS3新增伪类有那些？

参考答案

CSS选择符：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.相邻选择器（h1+p）

5.子选择器（ul>li）

6.后代选择器（lia）

7.通配符选择器（*）

8.属性选择器（a[rel="external"]）

9.伪类选择器（a:

hover,li:

nth-child）

可继承的样式：

1.font-size

2.font-family

3.color

4.text-indent

不可继承的样式：

1.border

2.padding

3.margin

4.width

5.height

优先级算法：

1.优先级就近原则，同权重情况下样式定义最近者为准;

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

3.!

important> id>class>tag 

4.important比内联优先级高，但内联比id要高

CSS3新增伪类举例：

p:

first-of-type选择属于其父元素的首个

元素的每个

元素。

p:

last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:

only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:

only-child  选择属于其父元素的唯一子元素的每个

元素。

p:

nth-child

（2） 选择属于其父元素的第二个子元素的每个

元素。

:

enabled:

disabled控制表单控件的禁用状态。

:

checked    单选框或复选框被选中。

九、列出display的值，说明他们的作用。

position的值，relative和absolute分别是相对于谁进行定位的？

参考答案

display的值的作用：

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

2.inline缺省值。

象行内元素类型一样显示。

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

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

position的值的定位区别：

1.absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位。

2.fixed生成绝对定位的元素，相对于浏览器窗口进行定位（老IE不支持）。

3.relative生成相对定位的元素，相对于其在普通流中的位置进行定位。

4.static默认值。

没有定位，元素出现在正常的流中（忽略top,bottom,left,rightz-index声明）。

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

十、CSS3有哪些新特性？

参考答案

1.CSS3实现圆角（border-radius），阴影（box-shadow），

2.对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3.transform:

rotate（9deg）scale（0.85,0.90）translate（0px,-30px）skew（-9deg,0deg）;//旋转,缩放,定位,倾斜

4.增加了更多的CSS选择器 多背景rgba 

5.在CSS3中唯一引入的伪元素是:

:

selection.

6.媒体查询，多栏布局

7.border-image

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

十二、对BFC规范的理解？

参考答案

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。

在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

W3CCSS2.1规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

十三、解释下CSSsprites，以及你要如何在页面或网站中使用它。

参考答案

CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的"background-image"，"background-repeat"，"background-position"的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。

对于未来而言，就不需要这样做了，因为有了http2。

十四、说说你对语义化的理解？

参考答案

1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2.有利于SEO：

和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：

爬虫于标签来确定上下文和各个关键字的依赖权重；

3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

十五、Doctype作用?

严格模式与混杂模式如何区分？

它们有何意义?

参考答案

1.

DOCTYPE>声明位于文档中的最前面，处于标签之前。

告知浏览器以何种模式来渲染文档。

2.严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3.在混杂模式中，页面以宽松的向后兼容的方式显示。

模拟老式浏览器的行为以防止站点无法工作。

4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

十六、你知道多少种Doctype文档类型？

参考答案

1.该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。

2.HTML4.01规定了三种文档类型：

Strict、Transitional以及Frameset。

3.XHTML1.0规定了三种XML文档类型：

Strict、Transitional以及Frameset。

4.Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

十七、HTML与XHTML——二者有什么区别

参考答案

1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写

3.所有的XML标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<和&特殊符号用编码表示

6.给所有属性赋一个值

7.不要在注释内容中使用"--"

8.图片必须有说明文字

十八、html常见兼容性问题？

参考答案

1.png24位的图片在iE6浏览器上出现背景

解决方案：

做成PNG8，也可以引用一段脚本处理.

2.浏览器默认的margin和padding不同

解决方案：

加一个全局的*{margin:

0;padding:

0;}来统一。

3.IE6双边距bug：

在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。

#box{float:

left;width:

10px;margin:

00010px;} 

这种情况之下IE会产生20px的距离

解决方案：

在float的标签样式控制中加入_display:

inline;将其转化为行内属性。

（_这个符号只有ie6会识别）

4.渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb{

  background-color:

#f1ee18;/*所有识别*/

  .background-color:

#00deff\9;/*IE6、7、8识别*/

  +background-color:

#a200ff;/*IE6、7识别*/

  _background-color:

#1e0bd1;/*IE6识别*/ 

} 

5.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute（）获取自定义属性；Firefox下,只能使用getAttribute（）获取自定义属性

解决方法：

统一通过getAttribute（）获取自定义属性

十九、解释下浮动和它的工作原理？

清除浮动的技巧

参考答案

浮动元素脱离文档流，不占据空间。

浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义cssclear:

both.弊端就是增加了无意义标签。

2.使用overflow。

给包含浮动元素的父标签添加css属性overflow:

auto;zoom:

1;zoom:

1用于兼容IE6。

3.使用after伪对象清除浮动。

该方法只适用于非IE浏览器。

具体写法可参照以下示例。

使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:

0，否则该元素会比实际高出若干像素；

6.IE下，event对象有x、y属性，但是没有pageX、pageY属性;Firefox下，event对象有pageX、pageY属性，但是没有x、y属性

解决方法：

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

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

解决方法：

可通过加入CSS属性-webkit-text-size-adjust:

none;解决

8.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了

解决方法：

改变CSS属性的排列顺序L-V-H-A

a:

link{}

a:

visited{}

a:

hover{}

a:

active{}

9.怪异模式问题：

漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。

为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。

现在可以使用[html5]（http:

//www.w3.org/TR/html5/single-page.html）推荐的写法：

``

10.上下margin重合问题：

ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

解决方法：

养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

11.ie6对png图片格式支持不好

解决方案：

引用一段脚本处理

二十、浮动元素引起的问题和解决办法？

参考答案

浮动元素引起的问题：

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;}/*forIE/Mac*/

清除浮动的几种方法：

1.额外标签法，

both;">