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.对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

W3C CSS 2.1规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

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

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

14.说说你对语义化的理解？

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

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

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

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

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

1. 声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。

2.严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3.在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

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

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

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

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

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

17.HTML与XHTML——二者有什么区别

1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写

3.所有的XML标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<和&特殊符号用编码表示

6.给所有属性赋一个值

7.不要在注释内容中使用"--"

8.图片必须有说明文字

18.html常见兼容性问题？

1. png24位的图片在iE6浏览器上出现背景

解决方案：做成PNG8，也可以引用一段脚本处理.

2.浏览器默认的margin和padding不同

解决方案：加一个全局的*{margin:0;padding:0;}来统一。

3. IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。

#box{ float:left; width:10px; margin:0 0 0 10px;}

这种情况之下IE会产生20px的距离

解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。( _这个符号只有ie6会识别)

4.渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb{

background-color:#f1ee18; /*所有识别*/

.background-color:#00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff; /*IE6、7识别*/

_background-color:#1e0bd1; /*IE6识别*/

}

5.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox下,只能使用getAttribute()获取自定义属性

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

6. IE下，event对象有x、y属性，但是没有pageX、pageY属性; Firefox下，event对象有pageX、pageY属性，但是没有x、y属性

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

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

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

8.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了

解决方法：改变CSS属性的排列顺序L-V-H-A

a:link {}

a:visited {}

a:hover {}

a:active {}

9.怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：

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

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

11. ie6对png图片格式支持不好

解决方案：引用一段脚本处理

19.解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。

2.使用overflow。

给包含浮动元素的父标签添加css属性overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

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

浮动元素引起的问题：

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

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

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

解决方法：

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

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法：

1.额外标签法，

（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

2.使用after伪元素

#parent:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

3.浮动外部元素

4.设置overflow为hidden或者auto

21.IE 8以下版本的浏览器中的盒模型有什么不同

IE8以下浏览器的盒模型中定义的元素的宽高包括内边距和边框

22.DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1.创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2.添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

Insefore() //在已有的子节点前插入一个新的子节点

3.查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById() //通过元素Id，唯一性

23.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

新特性：

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

1.拖拽释放(Drag and drop) API

2.语义化更好的内容标签（header,nav,footer,aside,article,section）

3.音频、视频API(audio,video)

4.画布(Canvas) API

5.地理(Geolocation) API

6.本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；

7. sessionStorage的数据在浏览器关闭后自动删除

8.表单控件，calendar、date、time、email、url、search

9.新的技术webworker, websocket, Geolocation

移除的元素：

1.纯表现的元素：basefont，big，center，font, s，strike，tt，u；

2.对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

1. IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

如何区分：

DOCTYPE声明新增的结构元素、功能元素

24.iframe的优缺点？

优点：

1.解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3.并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件

2.即时内容为空，加载也需要时间

3.没有语意

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

调用localstorge、cookies等本地存储方式

26.webSocket如何兼容低浏览器？

Adobe Flash Socket、ActiveX HTMLFile (IE)、 基于multipart编码发送XHR、 基于长轮询的XHR

27.线程与进程的区别

1.一个程序至少有一个进程,一个进程至少有一个线程

2.线程的划分尺度小于进程，使得多线程程序的并发性高

3.另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率

4.线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制

5.从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别

28.你如何对网站的文件和资源进行优化？

期待的解决方案包括：

1.文件合并

2.文件最小化/文件压缩

3.使用CDN托管

4.缓存的使用（多个域名来提供缓存）

5.其他

29.请说出三种减少页面加载时间的方法

1.优化图片

2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3.优化CSS（压缩合并css，如margin-top, margin-left...)

4.网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。）

5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了）

6.减少http请求（合并文件，合并图片）

30.你都使用哪些工具来测试代码的性能？

1. Profiler

2. JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）

3. Dromaeo