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
网友评论