前端基础常识

1.doctype（文档类型）的作用是什么？你知道多少种文档类型？

　　可告知浏览器，文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本Strict、过渡版本Transitional以及基于框架Frameset的HTML文档。不过现在基本都使用html5了，它兼容之前所有的模式。

2.HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

　　所有的 XHTML 元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。所有的 XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。

3.浏览器及对应内核

　　目前主要的内核有：Webkit内核、Gecko内核、Trident内核、Presto内核。

　　Webkit内核为代表的主要有：Safari、Chrome，国内的uc、搜狗、遨游、qq、360等都是基于webkit内核的。

　　Gecko(['gekəʊ])内核的有：Firefox火狐浏览器

　　Trident(['traɪd(ə)nt])内核的有：IE浏览器，国内傲游、世界之窗浏览器、qq。

　　Presto内核的有：opera欧朋浏览器现在改为了blink内核

　　目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

4.浏览器标准模式和怪异模式之间的区别是什么

　　W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用新的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。标准的width不包括：padding\border在js中如何判断当前浏览器正在以何种方式解析？ document对象有个属性compatMode,它有两个值：BackCompat对应quirks mode，CSS1Compat对应strict mode。

5.对网页标准和标准制定机构重要性的理解

　　w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。

6.浮动和它的工作原理

　　浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。要想使元素浮动，必须为元素设置一个宽度（width）。虽然浮动元素不是文档流之中，但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样，下面的元素填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素所遮盖，对内联元素进行定位时，这些元素会考虑浮动元素的边界，会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素，而内联元素会关注浮动元素的。

7.“reset”CSS文件的作用和使用它的好处。

　　因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。

8.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？

　　display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。visibility:hidden;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间3.overflow:hidden;一个比较合理的方法.texthidden{display:block;/统一转化为块级元素/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

9.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景(详见：http://www.cnblogs.com/dxzg/p/6429223.html)

• 使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。
• 使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。
• 使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，content属性的值设为”.”，空亦是可以的。
• 浮动外部元素 。

10.cookies，sessionStorage和localStorage的区别？

　　sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的cookies会发送到服务器端。其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。Firefox每个域名cookie限制为50个。Opera每个域名cookie限制为30个。Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

11.媒体查询，或针对移动端的布局/CSS　

　　媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。语法结构及用法：@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}。例如：

/* 当浏览器的可视区域小于980px */
  @media only screen and (min-width:500px) and (max-width:1200px){
  #wrap {width： 90%; margin:0 auto;}
  #content {width： 60%;padding： 5%;}
  #sidebar {width： 30%;}
  #footer {padding： 8% 5%;margin-bottom： 10px;}
  }
  /* 当浏览器的可视区域小于650px */
  @media screen and （max-width:650px） {
  #header {height： auto;}
  #searchform {position： absolute;top： 5px;right： 0;}
  #content {width： auto; float： none; margin： 20px 0;}
  #sidebar {width： 100%; float： none; margin： 0;}
 }

 12.如果设计中使用了非标准的字体，你该如何去实现？

　　所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体替代的字体。用图片代替web fonts在线字库，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/2012/0815/269267.shtml；@font-face，Webfonts(字体服务例如：Google Webfonts，Typekit等等。)

13.网站优化

　　文件合并文件最小化/文件压缩使用CDN托管缓存的使用（多个域名来提供缓存，压缩合并css等）网址后加斜杠（如www.baidu.com/目录，会判断这个“目录是什么文件类型，或者是目录。）标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）减少http请求（合并文件，合并图片）。利用CSS Sprites，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

14.你最喜欢的图片替换方法是什么，你如何选择使用。

　　<h2><span图片丢这里></span>Hello World</h2>把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。一般都是：alt，title，onerror。

15.讨论CSS hacks，条件引用或者其他。

　　各个浏览器都认识，这里给firefox用；background-color:red\9;\9所有的ie浏览器可识别；background-color:yellow\0;\0是留给ie8的+background-color:pink;+ie7定了；_background-color:orange;_专门留给神奇的ie6；:root#test{background-color:purple\9;}:root是给ie9的，@media all and(min-width:0px){#test{background-color:black\0;}}这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。@media screen and(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}最后这个是浏览器新贵chrome和safari的。

16.display属性的全部值

　　none    此元素不会被显示。  block    此元素将显示为块级元素，此元素前后会带有换行符。  inline    默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block    行内块元素。（CSS2.1 新增的值）    list-item    此元素会作为列表显示。    run-in    此元素会根据上下文作为块级元素或内联元素显示。    compact    CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。    marker    CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。    table    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。    inline-table    此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。    table-row-group    此元素会作为一个或多个行的分组来显示（类似 <tbody>）。    table-header-group    此元素会作为一个或多个行的分组来显示（类似 <thead>）。    table-footer-group    此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。    table-row    此元素会作为一个表格行显示（类似 <tr>）。    table-column-group    此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。    table-column 此元素会作为一个单元格列显示（类似 <col>）    table-cell    此元素会作为一个表格单元格显示（类似 <td> 和 <th>）    table-caption    此元素会作为一个表格标题显示（类似 <caption>）    inherit    规定应该从父元素继承 display 属性的值。 

17.JavaScript中this是如何工作的

　　this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。如果是call，apply,with，指定的this是谁，就是谁。普通的函数调用，函数被谁调用，this就是谁。

18.document.onload和document.ready两个事件的区别。

　　ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；onload，指示页面包含图片等文件在内的所有元素都加载完成。

19.==和===有什么不同？

　　"==="叫做严格运算符，"=="叫做相等运算符。（详见：https://www.zhihu.com/question/31442029）

20.什么是三元表达式？“三元”表示什么意思？

　　表达式 (expr1) ? (expr2) : (expr3); 在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。“三元”表示三元运算符需要三个操作数。

21.在书写高效CSS时会有哪些问题需要考虑？

• 样式是：从右向左的解析一个选择器；
• ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal（全局） ；
• 不要tag-qualify（永远不要这样做ul#main-navigation{}ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
• 后代选择器最糟糕（换句话说，下面这个选择器是很低效的：html body ul li a{}）
• CSS3的效率问题（CSS3选择器（比如:nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
• 我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性。

22.relative、fixed、absolute和static元素的区别

• static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
• relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
• absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
• fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

23.描述以下变量的区别：null，undefined或undeclared？

　　undefined是Js语言类型，虽已声明但类型未知；而undeclared却是一种Js语法错误，是说变量在使用前未声明。尝试访问一个undefined 的变量，浏览器不会报错，但会返回undefined。尝试访问一个undeclared的变量，浏览器会报错，JS执行会中断。null与undefined含义和用法几乎差不多。为什么要同时设置两个这样的值呢？这与JavaScript的历史有关。1995年JavaScript诞生时，最初像Java一样，只设置了null作为表示"无"的值。根据C语言的传统，null被设计成可以自动转为0。但是，JavaScript的设计者Brendan Eich，觉得这样做还不够，有两个原因。

• null像在Java里一样，被当成一个对象。但是，JavaScript的数据类型分成原始类型（primitive）和合成类型（complex）两大类，Brendan Eich觉得表示"无"的值最好不是对象。

• 其次，JavaScript的最初版本没有包括错误处理机制，发生数据类型不匹配时，往往是自动转换类型或者默默地失败。Brendan Eich觉得，如果null自动转为0，很不容易发现错误。因此，Brendan Eich又设计了一个undefined。

　　JavaScript的最初版本是这样区分的：null表示"没有对象"，即该处不应该有值,典型用法是,作为函数的参数，表示该函数的参数不是对象,或作为对象原型链的终点，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

24.使用CSS预处理器的优缺点有哪些？

• 优点：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
• 缺点：简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

25.两个节点之间可能存在哪些关系（原文：http://www.jianshu.com/p/e45821392c8c ）

　　DOM中两个节点存在的关系无非3种：

• 包含与被包含
• 父与子 获取父节点：node.parentNode, node.parentElement,两者的区别在于后者只能获取元素
• 同辈（兄弟节点） nextSibling，previousSibling
• Element Travel API给DOM添加的属性 childElementCount,firstElementChild,lastElementChild,nextElementSibling， previousElementSibling ,他们与之前的方法之间的区别是多了Element，保证只返回元素节点，而之前的方法普通的文本节点及注释节点也会返回,之前的方法在非IE浏览器中还会把元素间的空白符当文本节点返回。
• children属性（IE9以后） 与childNodes不同的地方在于：children只包含元素子节点(IE8及之前的版本可能会包含注释节点)。

26.怎样创建、添加、移除、移动、复制和查找节点

• 创建新节点：

  createDocumentFragment()    //创建一个DOM片段
  createElement()   //创建一个具体的元素
  createTextNode()   //创建一个文本节点

• 添加、移除、替换、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点

• 查找

getElementsByTagName()    //通过标签名称
getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById()    //通过元素Id，唯一性
getElementsByClassName()   //通过class名称

 27.请尽可能详尽的解释AJAX的工作原理

　　Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

第一步：创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

第二步：判断数据传输方式(GET/POST)

第三步：打开链接 open()

第四步：发送 send()

当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数。

   注意：检测XMLHttpRequest对象的readyState属性，该属性表示请求／响应过程的当前活动阶段，属性值如下：

0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但尚未调用send()方法

2：发送。已经调用send()方法，但尚未接收到响应

3：接收。已经接收到部分响应数据

4:   完成。已经接收到全部响应数据，而且已经可以在客户端使用了（如果写原生的js ajax请求需要等到 readyState==4的时候再做处理）其他的js库已经做好处理了

28.什么是闭包，如何使用它，为什么要使用它？（详细：http://kb.cnblogs.com/page/110782/）

　　闭包：当function里嵌套function时，内部的function可以访问外部function里的变量。即一个函数把外部的那些不属于自己的对象也包含（闭合）进来了。当你return的是内部function时，就是一个闭包。闭包是一种设计原则，它通过分析上下文，来简化用户的调用，让用户在不知晓的情况下，达到他的目的；

29.”attribute”和”property”的区别是什么？（详细：http://stylechen.com/attribute-property.html）

定义：

Property：属性，所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象，因此，他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。

Attribute：特性，区别于property，attribute只能是字符串，大小写不敏感，出现在innerHTML中，通过类数组attributes可以罗列所有的attribute。

2.相同之处

标准的 DOM properties 与 attributes 是同步的。公认的（非自定义的）特性会被以属性的形式添加到DOM对象中。如，id，align，style等，这时候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作属性。不过传递给getAttribute()的特性名与实际的特性名相同。因此对于class的特性值获取的时候要传入“class”。

3.不同之处

1).对于有些标准的特性的操作，getAttribute与点号(.)获取的值存在差异性。如href，src，value，style，onclick等事件处理程序。 
2).href：getAttribute获取的是href的实际值，而点号获取的是完整的url，存在浏览器差异。

30.针对jQuery的优化方法？（参考：http://developer.51cto.com/art/201006/204091_all.htm）

• 总是从ID选择器开始继承
• 在class前使用tag(标签名)
• 将jQuery对象缓存起来
• 对直接的DOM操作进行限制
• 冒泡
• 推迟到 $(window).load
• 压缩JavaScript
• 尽量使用ID代替Class
• 给选择器一个上下文
• 慎用 .live()方法（应该说尽量不要使用）
• 子选择器和后代选择器
• 使用data()方法存储临时变量

31.SVG样式的书写。

　　<svg>（Scalable Vector Graphics）是绘制矢量图形的HTML5的标签，它是用SVG 使用 XML 格式定义图形的。　

<svg viewBox = "0 0 1000 1000" version = "1.1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- A circle of radius 200 -->
        <circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
        <!-- An ellipse (rx=200,ry=150) -->
        <ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
    </defs>//定义图形
    <use x = "100" y = "100" xlink:href = "#s1"/>
    <use x = "100" y = "650" xlink:href = "#s2"/>//用此坐标代替上边的cx、cy坐标
</svg>

 32.JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。

33.请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

　　JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

34.请描述下事件冒泡机制

　　冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。捕获型事件：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

 35.JavaScript宿主对象和原生对象的区别

原生对象：ECMA-262 把原生对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服务器方面)、Enumerator(集合遍历类)、RegExp（正则表达式）由此可以看出，简单来说，原生对象就是 ECMA-262 定义的类（引用类型）。

宿主对象：ECMAScript中的“宿主”当然就是我们网页的运行环境，即“操作系统”和“浏览器”。所有非原生对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有的 BOM 和 DOM 对象都是宿主对象。因为其对于不同的“宿主”环境所展示的内容不同。其实说白了就是，ECMAScript官方未定义的对象都属于宿主对象，因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象。