Amy*_*y B 5 html performance drawing html-table
因此,我正在观看Google的Marissa Mayer关于加速谷歌网页的演讲.他们发现购物车图标的加载时间增加了2%,然后用户搜索量减少了2%.他们设法用HTML表替换图标.
这是我尝试绘制购物车:( 实时示例页面)
<html>
<head>
<style>
table {border-collapse: collapse;}
th, td {width: 8px; height: 8px;}
th {background-color: blue;}
td {background-color: white;}
</style>
</head>
<body>
<table>
<!-- this row is just to see alignment -->
<tr>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<!-- handle -->
<tr>
<td colspan="14"></td>
<th colspan="3"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="13"></td>
<th colspan="2"></th>
<td colspan="1"></td>
<th colspan="2"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="13"></td>
<th colspan="2"></th>
<td colspan="1"></td>
<th colspan="2"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="14"></td>
<th colspan="3"></th>
<td colspan="3"></td>
</tr>
<!-- main body -->
<tr>
<td colspan="5"></td>
<th colspan="13"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<td colspan="1"></td>
<th colspan="1"></th>
<th colspan="1"></th>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="5"></td>
<th colspan="13"></th>
<td colspan="2"></td>
</tr>
<!-- wheels -->
<tr>
<td colspan="7"></td>
<th colspan="2"></th>
<td colspan="4"></td>
<th colspan="2"></th>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="6"></td>
<th colspan="4"></th>
<td colspan="2"></td>
<th colspan="4"></th>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="7"></td>
<th colspan="2"></th>
<td colspan="4"></td>
<th colspan="2"></th>
<td colspan="5"></td>
</tr>
</table>
</body>
</html>
可什么你在表中抽取？打动我们.
哦是的,所以你认为你可以用HTML绘制？;-)
http://www.youtube.com/watch?v=FpRcbVXnrds
WTF http://img.skitch.com/20100411-dun3ip59xx5j7pcws3cp86xi54.png
(嗯,这不是我,但它仍然令人惊讶.)
