前端面试知识2

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

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML4.01规定了三种文档类型：Strict、Transitional 以及 Frameset。 XHTML1.0规定了三种XML文档类型：Strict、Transitional 以及 Frameset。Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

2.常见兼容性问题？

1).浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

2).IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大

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

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

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

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

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

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

5).上下margin重合问题

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

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

3.浮动元素引起的问题和解决办法？

浮动元素引起的问题：

（1）父元素的高度无法被撑开，影响与父元素同级的元素

（2）与浮动元素同级的非浮动元素会跟随其后

（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法： 使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式

4.JSON 的了解？

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小,例子：

{'food':'rice','drink':'cola'}

5.哪些操作会造成内存泄漏？

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

6.HTTP状态码有哪些？分别什么意思

这个我之前的简书有写过，我就不详细介绍了：

100-199 用于指定客户端相应的某些动作。

200-299 用于表示请求成功

300-399 用于已经移动的文件并且常被包含在轻微头信息中指定新的地址信息

400-499 用于指出客户端的错误

500-599 用于指出服务器错误

7.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：  

（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。    

（2）， 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。    

（3），一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。    

（4），此时，Web服务器提供资源服务，客户端开始下载资源

请求返回后，浏览器会解析HTML生成DOM Tree，然后会根据CSS生成CSS Rule Tree,

而js根据DOM API操作DOM

8.浏览器是怎样解析CSS选择器的？

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。

只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

9.JS有几种类型的值？请画一下内存图

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

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

内存图

10.页面重构怎么操作？

网站重构：在不改变外部行为的前提下，简化结构，添加可读性。而在网站前端保持一致的行为。也就是说在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI

对于传统的网站来说重构通常是：

(1.表格布局改为DIV+CSS

(2.让网站前端兼容于现代浏览器

(3.对于移动平台的优化

(4.对于SEO进行优化

深层次的网站重构应该考虑的方面：

(1.减少代码间的耦合

(2.代码保持弹性

(3.严格规范代码

(4.设计可扩展的API

(5.增强用户体验

(6.增强速度的优化

(7.压缩JS、CSS、image等前端资源(通常是由服务器来解决)

(8.程序的性能优化(如数据读写)

(9.采用CDN来加速资源加载

(10.对于JS DOM的优化

(11.HTTP服务器的文件缓存