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

待我称王封你为后i 2022-09-24 01:20 178阅读 0赞

**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元素（对象）仅仅是在**视觉上看不见（完全透明）**，而它所占据**的空间位置仍**然存在，也即是说它仍具有高度、宽度等属性值。

效果如图：  
![这里写图片描述][20160722100842408]

引用一段网上的总结：

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;  
![这里写图片描述][20160722102538917]

\*\*标准的盒子模型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:last-of-type 选择属于其父元素的最后 元素的每个 元素。
 p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
 p:only-child 选择属于其父元素的唯一子元素的每个 元素。
 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。
 :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有哪些新特性？**

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

**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 说说你对语义化的理解？**

1.  去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2.  有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3.  方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4.  便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循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（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

[20160722100842408]: /images/20220720/6932038e080542d4ae455dfe5c15c67a.png
[20160722102538917]: /images/20220720/70e009e91ded4f58be6c5e0125356749.png