web前端面试题（二）：H5新特性及性能优化相关

1、如何理解HTML结构的语义化？

重点：语义化、对搜索引擎友好、有助于SEO
所谓标签语义化，就是指标签的含义。语义化的主要目的就是让大家直观的认识标签(markup)和
属性(attribute)的用途和作用，对搜索引擎友好，有了良好的结构和语义我们的网页内容便自然
容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少的功夫，
而且可维护性更高，因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO重要的一步。

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

绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，
比如 calendar、date、time、email、url、search

localStorage 长期存储数据，浏览器关闭后数据不丢失；

移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
    IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些
    浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：

    当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 
    <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
    如何区分： DOCTYPE声明\新增的结构元素\功能元素

3、常见兼容性问题？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。

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

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

浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了
margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——
_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从
所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; 
+background-color:#a200ff; _background-color:#1e0bd1; }

IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; 
Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性。

IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,
但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了，
解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

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

上下margin重合问题：ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，
但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

ie6对png图片格式支持不好：引用一段脚本处理

4、前端优化的方式 旧的雅虎34条|h5新添加的方式

尽量减少HTTP请求次数：防抖和节流
减少DNS查找次数
可缓存的AJAX
推迟加载内容
预加载
减少DOM元素数量
使iframe的数量最小
不要出现404错误
配置ETag
尽早刷新输出缓冲
使用GET来完成AJAX请求
把样式表置于顶部
避免使用CSS表达式（Expression）
使用外部JavaScript和CSS
削减JavaScript和CSS
用<link>代替@import
避免使用滤镜
把脚本置于页面底部
剔除重复脚本

5、如何对CSS进行优化

压缩打包，图片整合，避免使用Hack，解决兼容问题，使用简写，让CSS能保证日后的维护。

6、讲下组件和模块化编程

组件化编程: 将js css html包装一起提供方法和效果；
模块化: 将相同的功能抽取出来 存放在一个位置进行编程

7、a标签中 active hover link visited 正确的设置顺序

link、visited、hover、active

8、a标签中 如何禁用href 跳转页面 或 定位链接

禁止默认事件：e.preventDefault();
href="javascript:void(0);

9、手机端上 图片长时间点击会选中图片，如何处理?

onselect=function() {return false}

10、常见的视频编码格式有几种?视频格式有几种?

视频格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式
视频编码格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1

11、渐进增强和优雅降级

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，
然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常
基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

12、说一下标签的用法

label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验

13、页面渲染html的过程？

浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个
HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的
根节点就是 documentElement，对应的是html标签。

浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接
忽略掉。解析CSS的时候会按照如下顺序来定义优先级：
浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如
head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。
渲染树中的每一个节点都存储有对应的css属性。

一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。
实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

14、说一下CORS

CORS是一种新标准，支持同源通信，也支持跨域通信。fetch是实现CORS通信的

15、如何中断ajax请求

一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象
的abort方法，ajax.abort()