1.HTML的 Doctype 作用 ? 严格模式与混杂模式如何区分？它们有何意义 ?
1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.
#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: 99%;//此处99%效果更佳 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; }
背景的卷轴效果优化。背景不能是无限长的图片拼接，必须有回收已移出的场景的方法。
将复杂运算从主UI线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等，需要在空闲时间片运算，不能和UI动画同时进行。
将比较大的运算分解成不同的时间片，防止阻塞主UI线程。最好使用webworker。
注意内存泄漏和回收。使用对象池管理内存，提高内存检测和垃圾回收。
进行预处理。将一些常用的过程进行预处理，
控制好帧率。将1秒分解成多个时间片，在固定间隔时间片进行UI动画，其他时间片用在后台运算。
通过GPU 加速和CSS transition 将小鸟飞行动画和背景动画分离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表格排序</title>
</head>
<style type="text/css">
table{
width: 500px;
height: 200px;
position: relative;
border-width: 0px 0px 1px 1px;
border-style: solid;
}
tr{
height: 40px;
}
td,th{
width: 25%;
border-width: 1px 1px 0 0;
border-style: solid;
padding: 0;
margin: 0;
}
</style>
<body>
<table id="table" cellpadding="1" cellspacing="1">
<thead>
<tr bgcolor="grey">
<th>姓名</th>
<th onclick="sortTable(1)">力量</th>
<th onclick="sortTable(2)">敏捷</th>
<th onclick="sortTable(3)">智力</th>
</tr>
</thead>
<tbody>
<tr>
<th>德鲁伊</th>
<td>17</td>
<td>24</td>
<td>13</td>
</tr>
<tr>
<th>月之骑士</th>
<td>15</td>
<td>22</td>
<td>16</td>
</tr>
<tr>
<th>众神归王</th>
<td>19</td>
<td>35</td>
<td>20</td>
</tr>
<tr>
<th>流浪剑客</th>
<td>23</td>
<td>15</td>
<td>14</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var isSort = [false,false,false];//标记是否排过序
function sortTable (colNo) {
var rowsArray = [];//表格中所有行的集合
var colsArray = [];//表格中所有列的集合
var tbody = document.getElementsByTagName(‘tbody‘)[0];
//初始化行和列
for (var i = 0; i < tbody.rows.length; i++) {
rowsArray[i] = tbody.rows[i];
colsArray[i] = rowsArray[i].cells[colNo];
}
//排序
console.log(isSort[colNo])
if (!isSort[colNo]) {//isSort为false时，降序排列
isSort[colNo] = true;
colsArray.sort(function (a,b) {
return b.innerHTML - a.innerHTML;//将被点的那一列降序排序
});
}else{
//此时已经降序排序过了，对数组逆序即可
colsArray.reverse();
isSort[colNo] = false;
}
//当某一列排序后将表格所有元素的值放到新的数组中
var rowsTempArray = [];
for (var i = 0; i < rowsArray.length; i++) {
var colsTempArray = [];
for (var j = 0; j < colsArray.length; j++) {
//将i行的所有列的内容保存在colsTempArray[j]中
colsTempArray[j] = colsArray[i].parentNode.cells[j].innerHTML;
}
//将一行内容保存到rowsTempArray。
rowsTempArray[i] = colsTempArray;
}
//重绘页面
for (var i = 0; i < rowsArray.length; i++) {
for (var j = 0; j < colsArray.length; j++) {
rowsArray[i].cells[j].innerHTML = rowsTempArray[i][j];
}
}
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/liunaiming/p/13340449.html