前端面试常见题整理----第一篇

1.谈谈Cookie的认识

（1）总数的限制：每个特定的域名下最多生成20个cookie

（2）尺寸的限制：每个cookie长度不能超过4KB，否则会被截掉。cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做userData，每个数据最多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.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

2 浏览器本地存储

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

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage**不是一种持久化的本地存储**，仅仅是会话级别的存储。

globalStorage跨越会话存储数据，但是有特定的访问限制。对globalStorage空间的访问，是依据发起请求的页面的域名，协议和端口限制的。数据保存到javascript删除或者用户清除浏览器缓存，适合客户端存储文档或者长期保存用户偏好设置。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。不能指定任何访问规则，规则是事先设定好的，页面必须来自同一个域名，使用同一个协议，在同一端口上。

3 web storage和cookie的区别

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

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

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

4 display:none和visibility:hidden的区别？

CSS display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”，视为不存在，不加载;

一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见 。

隐藏产生reflow和repaint(回流与重绘)

visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

效果如图：



引用一段网上的总结：

display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。

visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

5 CSS中 link 和@import 的区别是？

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

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

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

(4) link方式的样式的权重 高于@import的权重.

6 position的absolute与fixed共同点与不同点

A：共同点：

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

2.让元素脱离普通流，不占据空间，元素原本占据的空间不保留。

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

B不同点：

绝对定位使元素的位置和文档流无关，文档中普通的文档流当绝对定位的元素不存在一样。absolute的”根元素“是可以设置的，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

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

注意：

static：元素原来的空间保留。

相对定位是相对于它在文档流中的位置，相对定位实际上被看作普通流定位模型的一部分。

7 css中的盒子模型

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

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



**标准的盒子模型width只包括content，

IE的盒子的width包括content，padding和border。**

8 CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

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)

可继承的样式：

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> 元素的每个 <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        单选框或复选框被选中。

9 列出display的值，说明他们的作用。position的值， relative和absolute分别是相对于谁进行定位的？

display 的值的作用：

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

2.inline 缺省值。像行内元素类型一样显示。

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

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

position 的值的定位区别：

1.absolute 生成绝对定位的元素，absolute的”根元素“是可以设置的，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

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

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

4.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

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

10 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

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

12 解释下 CSS sprites，以及你要如何在页面或网站中使用它

CSS Sprites：把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的”background-image”，”background-repeat”，”background-position” 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了 http2。

13 说说你对语义化的理解？

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

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

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

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

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

1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
2. 严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。
3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

15 你知道多少种Doctype文档类型？

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

2. HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

3. XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

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