HTML的Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>
<div id=”demo”></div>
#demo { width: 100px; height: 100px; background-color: #fff; position: relative; border: 2px solid #333; } #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; left: 100%; position: absolute; width: 0; } #demo:after { border-width: 10px; border-left-color: #fff; top: 20px; } #demo:before { border-width: 12px; border-left-color: #000; top: 18px; }
简述document.write和 innerHTML的区别。
document.write只能重绘整个页面,
innerHTML可以重绘页面的一部分。
你知道的，javascript语言的执行环境是"单线程模式"，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行，因此很多时候需要进行“异步模式”，请列举js异步编程的方法。
回调函数，这是异步编程最基本的方法。 事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。 发布/订阅，上一节的"事件"，完全可以理解成"信号"。 Promises对象，Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。
用户从手机的浏览器访问www.baidu.com，看到的可能跟桌面PC电脑，是不太一样的网页效果，会更适合移动设备使用。请简要分析一下，实现这种网页区分显示的原因及技术原理。
手机的网速问题、屏幕大小、内存、CPU等。通过不同设备的特征，实现不同的网页展现或输出效果。根据useragent、屏幕大小信息、IP、网速、css media Query等原理，实现前端或后端的特征识别和行为改变。
Flappy Bird是风靡一时的手机游戏，玩家要操作一只小鸟穿过无穷无尽的由钢管组成的障碍。如果要你在HTML前端开发这个游戏，为了保证游戏的流畅运行，并长时间运行也不会崩溃，请列举开发要注意的性能问题和解决的方法。
背景的卷轴效果优化。背景不能是无限长的图片拼接，必须有回收已移出的场景的方法。
将复杂运算从主UI线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等，需要在空闲时间片运算，不能和UI动画同时进行。
将比较大的运算分解成不同的时间片，防止阻塞主UI线程。最好使用webworker。
注意内存泄漏和回收。使用对象池管理内存，提高内存检测和垃圾回收。
进行预处理。将一些常用的过程进行预处理，
控制好帧率。将1秒分解成多个时间片，在固定间隔时间片进行UI动画，其他时间片用在后台运算。
通过 GPU 加速和 CSS transition 将小鸟飞行动画和背景动画分离
如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。
<table id="table" border="1"> <tr> <th id="name">姓名</th> <th id="power">力量</th> <th id="agility">敏捷</th> <th id="iq">智力</th> </tr> </table>
var data = [{ name: '德鲁伊', power: 17, agility: 24, iq: 13 }, { name: '月之骑士', power: 15, agility: 22, iq: 16 }, { name: '众神之王', power: 19, agility: 15, iq: 20 }, { name: '流浪剑客', power: 23, agility: 15, iq: 14 }]; ! function() { //初始化渲染 var table = $('table'); for (var i = 0; i < data.length; i++) { item = '<tr><td class="name">' + data[i].name + '</td><td class="power">' + data[i].power + '</td><td class="agility">' + data[i].agility + '</td><td class="iq">' + data[i].iq + '</td></tr>'; table.append(item); } }() ! function() { var count_name = 0,count_power = 0,count_agility = 0,count_iq = 0; $('#name').click(function() { count_power = 0,count_agility = 0,count_iq = 0; //将其他排序列状态置零，也就是说当点了姓名进行排序之后，若再点其它排序，那么必然是从升序开始 if (count_name % 2 === 1) { //奇数升序 data = sort(data, 'name', 'unicode,ascend'); } else { //偶数降序 data = sort(data, 'name', 'unicode,descend'); } count_name++; //视图层渲染 var area = $("tr").slice(1); for (var i = 0; i < data.length; i++) { area.eq(i).find('.name').text(data[i].name); area.eq(i).find('.power').text(data[i].power); area.eq(i).find('.agility').text(data[i].agility); area.eq(i).find('.iq').text(data[i].iq); } }) $('#power').click(function() { count_name = 0,count_agility = 0,count_iq = 0; if (count_power % 2 === 1) { data = sort(data, 'power', 'number,ascend'); } else { data = sort(data, 'power', 'number,descend'); } count_power++; var area = $("tr").slice(1); for (var i = 0; i < data.length; i++) { area.eq(i).find('.name').text(data[i].name); area.eq(i).find('.power').text(data[i].power); area.eq(i).find('.agility').text(data[i].agility); area.eq(i).find('.iq').text(data[i].iq); } }) $('#agility').click(function() { count_name = 0,count_power = 0,count_iq = 0; if (count_agility % 2 === 1) { data = sort(data, 'agility', 'number,ascend'); } else { data = sort(data, 'agility', 'number,descend'); } count_agility++; var area = $("tr").slice(1); for (var i = 0; i < data.length; i++) { area.eq(i).find('.name').text(data[i].name); area.eq(i).find('.power').text(data[i].power); area.eq(i).find('.agility').text(data[i].agility); area.eq(i).find('.iq').text(data[i].iq); } }) $('#iq').click(function() { count_name = 0,count_power = 0,count_agility = 0; if (count_iq % 2 === 1) { data = sort(data, 'iq', 'number,ascend'); } else { data = sort(data, 'iq', 'number,descend'); } count_iq++; var area = $("tr").slice(1); for (var i = 0; i < data.length; i++) { area.eq(i).find('.name').text(data[i].name); area.eq(i).find('.power').text(data[i].power); area.eq(i).find('.agility').text(data[i].agility); area.eq(i).find('.iq').text(data[i].iq); } }) }() //对数据进行排序 function sort(data, field, compareFunction) { var handler = { 'unicode,ascend': function(pre, next) { if (pre[field] > next[field]) return -1; else return 1; }, 'unicode,descend': function(pre, next) { if (pre[field] > next[field]) return 1; else return -1; }, 'number,ascend': function(pre, next) { return next[field] - pre[field]; }, 'number,descend': function(pre, next) { return pre[field] - next[field]; } } if (typeof compareFunction === 'string') { data.sort(handler[compareFunction]); } else if (typeof compareFunction === 'function') data.sort(compareFunction); else data.sort(); return data; }