web前端基础面试85题（一）

柯晓楠

于 2024-07-18 13:52:01 发布

阅读量212

点赞数 8

分类专栏：前端面试题文章标签：前端面试

本文链接：https://blog.csdn.net/p445098355/article/details/140521283

版权

前端面试题专栏收录该内容

26 篇文章 9 订阅

订阅专栏

1. 浏览器渲染原理，回流，重绘的概念和原理？

参考回答：

(1) 浏览器的渲染机制
1：浏览器的渲染机制一般分为以下几个步骤:
2：处理 HTML 并构建 DOM 树。
3：处理 CSS 构建 CSSOM 树。
4：将 DOM 与 CSSOM 合并成一个渲染树。
5：根据渲染树来布局，计算每个节点的位置。
6：调用 GPU 绘制，合成图层，显示在屏幕上。

(2) 重绘与回流
1：重绘：
当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少
2：回流：
当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。会触发回流的操作:
– 页面初次渲染 – 浏览器窗口大小改变 – 元素尺寸、位置、内容发生改变 – 元素字体大小变化 – 添加或者删除可见的 dom 元素 – 激活 CSS 伪类（例如：:hover） – 查询某些属性或调用某些方法： – clientWidth、clientHeight、clientTop、clientLeft – offsetWidth、offsetHeight、offsetTop、offsetLeft – scrollWidth、scrollHeight、scrollTop、scrollLeft – getComputedStyle() – getBoundingClientRect() – scrollTo()

总结:
回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。所以尽量减少触发回流的操作, 以达到更好的性能

2. 对WEB标准以及W3C的理解与认识？

参考回答：

Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成

W3C，全称：world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准的制定有很多好处，比如说：

1：可以统一开发流程，统一使用标准化开发工具(VSCode、WebStorm、Sublime)，方便多人协作
2：学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
3：跨平台，方便迁移都不同设备
4：降低代码维护成本

3. XHTML和HTML有什么区别？

参考回答：

xhtml和html的区别

一、其基础语言不同
1、XhtmL是基于可扩展标记语言（XmL）。
2、htmL是基于标准通用标记语言（sgmL）。

二、语法严格程度不同
1、XhtmL语法比较严格，存在dtd定义规则。
2、htmL语法要求比较松散，这样对网页编写者来说，比较方便。

三、可混合应用不同
1、XhtmL可以混合各种XmL应用，比如mathmL、sVg。
2、htmL不能混合其它XmL应用。

四、大小写敏感度不同
1、XhtmL对大小写敏感，标准的XhtmL标签应该使用小写。
2、htmL对大小写不敏感。

五、公布时间不同
1、XhtmL是2000年w3c公布发行的。
2、htmL4.01是1999年w3c推荐标准。

4. Doctype? 严格模式与混杂模式-如何触发这两种模式？

参考回答：

严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
在标准模式中，浏览器根据规范呈现页面；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

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

1. 浏览器模式
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。

Mozilla和Safari还有第三种模式，称为”几乎标准的模式（almost standards mode）”，除了在处理表格的方式上有一些细微的差异之外，这种模式与标准模式相同。
在Firefox中，可以使用Web Developer Extension查看页面的呈现模式。如果网站以标准模式呈现，工具栏上会显示一个绿色的钩；若以混杂模式呈现，则显于红色的叉。IE 8中的开发工具也显示浏览器使用的模式。

差异：
对于这两种模式之间的差异，最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。

呈现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。

2：如何触发这两种模式:
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。并非所有浏览器都采用这些规则，但是这些规则很好地说明了DOCTYPE切换的工作方式。要了解更全面的内容，可查阅网站http://hsivonen.iki.fi/doctype/，这里的图表说明了不同浏览器如何根据DOCTYPE声明来选择呈现方法。

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS，如果选择了错误的DOCTYPE，那么页面就将以混杂模式呈现，其行为就可能会有错误或不可预测。因此，一定要在站点的每个页面上包含形式完整的DOCTYPE声明，并且在使用HTML时选择严格的DTD。

5. 写出几种IE6 BUG的解决方法？

参考回答：

1. 强制浏览器是用Web标准解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br />
<html xmlns=" http://www.w3.org/1999/xhtml">

2. Set Position: relative
给元素指定Position: relative能够解决很多奇怪的问题，比如对齐和显示不正确等。对于Position的属性要小心设置，特别是设为absolute。
3. 给Float的元素加上inline属性避免双倍margin
这大概是最著名的一个bug了，IE6下对于浮动元素，会莫名其妙的双倍空白边，解决的方法也很莫名，设上display:inline属性就好了，对于float元素这个属性本身没有任何意义。
4. 给特定元素加上hasLayout属性
很多IE6（甚至是IE7）的问题可以通过设置hasLayout这个ie only的内部属性来解决，比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有 hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候，你不能显示的为其设定高度，可以使用设置高度为1%，而其父元素如果没有确定的高度时，该设置不会被应用到实际的高度上，但是hasLayout会被激活。
5. Fix字符重复bug
这是IE6上面一个非常奇怪的BUG，他的触发条件也是相当诡异，在浮动元素间如果有

这样的普通的HTML注释的话，会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中，具体的介绍大家可以看这里 positioniseverything 。
解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 Put your commentary in here…
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)
6. 需要悬浮效果的地方，尽量使用
<a>
标签
IE6中只能对
<a>
应用css hover效果，所以尽可能使用
<a>
标签来获取最大的兼容性。
7. 使用!important或者高级选择器来兼容IE6
使用!important和高级选择器来兼容IE6，可以避免使用那些通不过校验的非常规hack，比如所谓的_width这样的东西。我们来看个简单的例子。
<br />
#element {<br />
	min-height: 20em;<br />
	height: auto !important;<br />
	/* understood by all browsers */<br />
	height: 20em;<br />
	/* IE6 incorrectly uses this value /*<br />
}<br />
IE6是不能正确解读!important这个修饰符的，所以他会错误的使用height:20em这个属性来实现最小高度。（IE6下容器会自动扩展）<br />
#element {<br />
   min-height: 20em;<br />
   height: 20em;<br />
}<br />
/* ignored by IE6 */<br />
	#element[id] {<br />
		height: auto;<br />
	}<br />
	或者使用高级选择器，同样也能实现该目的，这样代码既能保持合法性，也能很好的去兼容IE6这个诡异的产品。<br />
	针对各版本IE和FF的css hack<br />
	#element {<br />
		/*顺序是FF&IE8,IE7,IE6 不能颠倒！*/<br />
		color:red <br />
		/* 只对FF*/<br />
		color:<br />
		/*\**/<br />
		black\9 <br />
		/*只对IE8有效**/<br />
		*color:gray<br />
		/*只对IE7有效*/<br />
		_color:blue <br />
		/*只对IE6有效*/<br />
	}<br />
	8. 避免在IE6下使用百分比尺寸<br />
	body {<br />
		margin: 2% 0 !important;<br />
		margin: 20px 0;<br />
		/* IE6 only */<br />
	}<br />

IE6下是用百分比的尺寸是件非常让人头疼的事情，尽可能避免这样的使用，而是采用结合!important和精确尺寸来明确元素的大小。
9. 频繁测试，尽早测试
和其他编程一样，现在编程提倡持续测试，尽早测试，甚至可以测试驱动，在CSS开发过程中也要尽可能的频繁测试，可以参看我之前介绍的一些测试工具。
IE: IE developer toolbar, debug bar ,IETester(ie5-8)
FF: firebug
10. 重构你的代码
在任何浏览器中，需要获得鼠标hover效果，都建议尽量采用A标签，可以先将A标签强制转化为block块级元素（display:block），然后就可以为其设定宽度和高度，但是它也具有了块级元素自动换行的属性，所以麻烦的是如果要其横排还要为其指定float:left，并且在应用完成后及时的清除浮动，这样就可以得到
或者
效果，而且获得了最大兼容性。在任何浏览器中，需要获得鼠标hover效果，都建议尽量采用A标签，可以先将A标签强制转化为block块级元素（display:block），然后就可以为其设定宽度和高度，但是它也具有了块级元素自动换行的属性，所以麻烦的是如果要其横排还要为其指定float:left，并且在应用完成后及时的清除浮动，这样就可以得到
或者
效果，而且获得了最大兼容性。

6. 标签上title与alt属性的区别是什么?

参考回答：

Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息

7. 前端页面有哪三层构成，分别是什么?作用是什么?

参考回答：

结构层 Html 表示层 CSS 行为层 js;

8. 解释什么是语义化的HTML?

参考回答：

1、什么是HTML语义化？

<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>

　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3、写HTML代码时应注意什么？

尽可能少的使用无语义的标签p和span；
在语义不明显时，既可以使用p或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

9. Doctype作用？标准模式与兼容模式各有什么区别?

参考回答：

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

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

10. 如何实现浏览器内多个标签页之间的通信?

参考回答：

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。通信方法如下：

使用 websocket 协议，因为 websocket 协议可以实现服务器推送，所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。
使用 ShareWorker 的方式，shareWorker 会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个共享的线程来实现数据的交换。
使用 localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。
使用 postMessage 方法，如果我们能够获得对应标签页的引用，就可以使用postMessage 方法，进行通信

11. Http状态码有那些？

参考回答：

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

12. 常用那几种浏览器测试？有哪些内核(Layout Engine)?

参考回答：

(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2)内核：Trident，Gecko，Presto，Webkit。

13. 简述什么叫优雅降级和渐进增强？

参考回答：

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

14. 解释什么是盒子模型？

参考回答：

盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。除去内容部分，其余每个部分又分别包含上、下、左和右4个方向，方向既可以分别定义也可以统一定义。

我们生活中常见的手机盒子就可以看作一个盒子模型，完整的手机盒子通常包含手机、内填充物和盛装手机的外壳。如果把手机想象成HTML标记，那么手机盒子就是一个CSS盒子模型。内容就是盒子里装的手机；内边距就是怕手机损坏得填充物：边框就是盒子本身外部的壳；外边距就是多个手机盒子排放时空的缝隙。

标记

div英文全称为division，译为中文是“分割、区域”。标记简单而言就是一个块标记，可以实现网页的规划和布局。在HTML文档中，页面会被划分为很多区域，不同区域显示不同的内容，如导航栏、banner、内容区等，这些区块一般都通过标记可以在div标记中设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在标记中，中还可以嵌套多层。标记非常强大，通过与id、class等属性结合设置CSS样式，可以替代大多数的块级文本标记。

盒子的宽与高

网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性widh和高度属性height控制盒子的大小。widh和height属性值可以是不同单位的数值或相对于父标记的百分比，实际工作中，最常用的属性值是像素值。

相关阅读：什么是实体化三属性？

实体化是指给标记划分区域(画盒子)，并通过宽度、高度、背景色这三种属性，让标记形态化，成为一个盒子。需要注意的是，宽度属性wdh和高度属性height仅适用于块级元素，对行内元素无效（和标记除外）。

15. 前端标准 px和em的区别？

参考回答：

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

16. XML和JSON的区别？

参考回答：

(1).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。JSON对数据的描述性比XML较差。
(4).传输速度方面。JSON的速度要远远快于XML。

17. Web Worker 和WebSocket的含义解释？

参考回答：

worker主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。

2.通过worker.postMessage( data ) 方法来向worker发送数据。

3.绑定worker.onmessage方法来接收worker发送过来的数据。

4.可以使用 worker.terminate() 来终止一个worker的执行。

WebSocket是Web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个Html5协议，WebSocket的连接是持久的，他通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询。

18. 简述对前端模块化的认识？

参考回答：

模块化的概念
模块化是一种处理复杂系统分解成为更好的可管理模块的方式，它可以把系统代码划分为一系列职责单一，高度解耦且可替换的模块，系统中某一部分的变化将如何影响其它部分就会变得显而易见，系统的可维护性更加简单易得。

模块化是一种分治的思想，通过分解复杂系统为独立的模块实现细粒度的精细控制，对于复杂系统的维护和管理十分有益。模块化也是组件化的基石，是构成现在色彩斑斓的前端世界的前提条件。

为什么需要模块化
前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统。

模块化的好处
可维护性。 因为模块是独立的，一个设计良好的模块会让外面的代码对自己的依赖越少越好，这样自己就可以独立去更新和改进。

命名空间。 在 JavaScript 里面，如果一个变量在最顶级的函数之外声明，它就直接变成全局可用。因此，常常不小心出现命名冲突的情况。使用模块化开发来封装变量，可以避免污染全局环境。

重用代码。 我们有时候会喜欢从之前写过的项目中拷贝代码到新的项目，这没有问题，但是更好的方法是，通过模块引用的方式，来避免重复的代码库。我们可以在更新了模块之后，让引用了该模块的所有项目都同步更新，还能指定版本号，避免 API 变更带来的麻烦。

19. 简述 Expires和Cache-Control？

参考回答：

浏览器缓存Expires属性和Cache-Control属性都属于强缓存策略。

什么是强缓存策略？

使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。

http 头信息中的 Expires 属性

服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使用，不必再向服务器发送请求。这个时间是一个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不一致，或者用户可以对客户端时间进行修改的情况，这样就可能会影响缓存命中的结果。

http 头信息中的 Cache-Control 属性

Expires 是 http1.0 中的方式，因为它的一些缺点，在 http 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更精确的控制。它有很多不同的值，常用的比如：

通过设置 max-age 来指定资源能够被缓存的时间的大小，这是一个相对的时间，它会根据这个时间的大小和资源第一次请求时的时间来计算出资源过期的时间，因此相对于 Expires 来说，这种方式更加有效一些。

private，用来规定资源只能被客户端缓存，不能够代理服务器所缓存。

no-store ，用来指定资源不能够被缓存。

no-cache 代表该资源能够被缓存，但是立即失效，每次都需要向服务器发起请求。

一般来说只需要设置其中一种方式就可以实现强缓存策略，当两种方式一起使用时，Cache-Control 的优先级要高于 Expires 。

20. 关于HTTP2.0 的概念和描述？

参考回答：

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。

它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽

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

22. Web storage和cookie的区别？

参考回答：

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

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

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

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

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

23. Cookie 和Session 的区别？

参考回答：

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中

24. display:none和visibility:hidden的区别？

参考回答：

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间

25. 阐述对前端BFC规范的理解和应用模式？

参考回答：

1：概念 在⻚⾯布局的过程中，我们经常会遇到⼀些奇怪的情况，⽐如元素的⾼度消失了、两栏布局⽆法⾃适应、元素间距出现异常等等。这些问题往往是由于元素之间相互影响⽽导致的。在这⾥，就涉及到了BFC（BlockFormattingContext）的概念。
BFC（块级格式化上下⽂）是⻚⾯中⼀块独⽴的渲染区域，具有⼀套独⽴的渲染规则：内部的盒⼦会在垂直⽅向上⼀个接⼀个地放置。
同⼀个BFC的相邻盒⼦的margin会发⽣重叠，与⽅向⽆关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。BFC的区域不会与float的元素区域重叠。
计算BFC的⾼度时，浮动⼦元素也参与计算。
BFC是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然。
BFC的⽬的是形成⼀个相对于外界完全独⽴的空间，使内部的⼦元素不会影响到外部的元素

2：触发条件
触发BFC的条件包含但不限于：
根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为visible，为auto、scroll、hidden
display的值为inline-block、inline-table、table-cell、table-caption、flex、inline-flex、grid、inline-gridposition的值为absolute或fixed


利⽤BFC的特性，我们可以在以下场景中应⽤BFC：


"container">
Haha
Hehe


在没有触发BFC的情况下，两个p元素之间的距离为100px，发⽣了margin重叠（塌陷）。通过给包含
p元素的容器触发BFC，两个p元素不再属于同⼀个BFC，从⽽避免了margin重叠。


"parent">
"child">

"child">


通过触发parent元素⽣成BFC，可以清除内部浮动的影响，从⽽使parent元素具有⾼度。
1. 防⽌margin重叠（塌陷）
2. 清除内部浮动
.parent {
overflow: hidden; /* 触发BFC */
}


"wrapper">
"aside">
"main">


在不触发BFC的情况下，.main元素的左边会与.wrapper元素的左边界相接触，从⽽⽆法实现两栏布
局。
通过触发.main元素⽣成BFC，.main元素的左边不再与.wrapper元素的左边界相接触，从⽽实现⾃适
应多栏布局。
.main {
overflow: hidden; /* 触发BFC */
}
通过上⾯的例⼦，我们可以看到BFC的实际效果就是形成⼀个⻚⾯中的独⽴容器，⾥⾯的⼦元素不影响
外部的元素，反之亦然。BFC为我们解决了很多布局上的问题，提供了更灵活和可靠的布局⼿段

柯晓楠

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端基础面试85题（一）

1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
复制链接

扫一扫