前端面试以及总结

面试提问：
浏览器兼容性；
html和html5的区别；
ie浏览器和chrome浏览器的兼容性；
学习的书；
1.HTML5 中的一些有趣的新特性：
● 用于绘画的 canvas 元素
● 用于媒介回放的 video 和 audio 元素
● 对本地离线存储的更好的支持
● 新的特殊内容元素，比如 article、footer、header、nav、section
● 新的表单控件，比如 calendar、date、time、email、url、search

2.Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
● 依赖分辨率
● 不支持事件处理器
● 弱的文本渲染能力
● 能够以 .png 或 .jpg 格式保存结果图像
● 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
● 不依赖分辨率
● 支持事件处理器
● 最适合带有大型渲染区域的应用程序（比如谷歌地图）
● 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
● 不适合游戏应用
3.H5页面的优化

4.原生js的继承问题：
通过原型链继承，将子类的原型设置为父类的实例；

5.浏览器的内核
● Trident内核（代表：Internet Explorer）
● Gecko内核（代表：Mozilla Firefox）
● WebKit内核（代表：Safari、Chrome）
● Presto内核（代表：Opera）
转载：http://tools.yesky.com/19/34456519.shtml

6.div垂直水平居中
方案一：
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，
代码两个关键点：1.上下左右均0位置定位；
　　　　　　　　2.margin: auto; 其width、height如何更改都是居中显示的，兼容性可以,IE7及之前版本不支持

方案二：
div绝对定位水平垂直居中【margin 负间距】
此方案代码关键点：1.必需知道该div的宽度和高度，
　　　　　 2.然后设置位置为绝对位置，
　　　　　　　　 3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，
　　　　　　　　　4.最后将该div分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
测试表明，这是唯一在IE6-IE7上也表现良好的方法。

方案三：
div绝对定位水平垂直居中【Transforms 变形】
这是最简单的方法，不近能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上top: 50%; left: 50%;

方案四：
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

6.png，jpg，gif区别
JPG的特性
1. 支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
2. 有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
3. JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
PNG的特性
1. 能在保证最不失真的情况下尽可能压缩图像文件的大小。
2. PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
3. 对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

7.js内置对象、本地对象、宿主对象
内置对象：
ECMA-262把内置对象定义为“由ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。”这意味着开发者不必明确实例化内置对象，它已被实例化了，可以直接引用。
ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）
本地对象：
ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
宿主对象：
由ECMAScript实现的宿主环境提供的对象，即我们网页的运行环境（操作系统和浏览器），所有的BOM和DOM都是宿主对象。
宿主环境提供的全局方法：
alert、confirm、prompt、write、writeln(后面的两种是document的方法)
内置对象是本地对象的一种，本地对象时由官方定义的，而宿主对象相当于由自己定义的对象、DOM对象和BOM对象组成的
http://blog.csdn.net/shadow_yn/article/details/47037505

8.jsonp原理
ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加