最近想玩一玩HTML5, 特别是canvas和CSS3的3D transform. 不过3D transform貌似只有Safari支持比较正常, 之前的Chrome也可以, 现在不知道怎么的好像不行了. 那自然就把重心落到了canvas上.
想用canvas实现一些3D的效果, 但却无从下手. 一方面是因为自己算法方面的知识匮乏, 另一方面, 则是不清楚JavaScript究竟能有多快. 毕竟一牵涉到图形处理, 计算量就摊在了那里.
各大浏览器都陆陆续续地支持硬件加速了, 所以渲染应该不是问题, 今天便做了个小测试, 想看看JS的效率. 内容比较简单:
//JavaScript:
var l = 100000000;
var o = [];
for (var i = 0; i < l; i++) {
if (o.length == 100000)
o.length = 0;
o.push(i);
}//C++ (vector)
int l = 100000000;
for (int i = 0; i < l; i++) {
if (vct.size() == 100000)
vct.clear();
vct.push_back(i);
}//C++ (原生数组)
int vct[100000];
int vi = 0;
int l = 100000000;
for (int i = 0; i < l; i++)
{
if (vi == 100000)
{
vi = 0;
memset(vct, 0, sizeof(int) * 10000);
}
vct[vi] = i;
}
最后, C++ vector耗费的时间最长, 接近一分钟; JavaScript Array在Chrome 10中耗时3s多一点; C++原生数组最快, 不到1s.
当然, 我也不指望JavaScript的Array能快过C++的原生数组, 但取得了这样的成绩也是令人惊讶的. 原来一直觉得脚本语言和被编译为机器码的语言速度上肯定不在一个数量级, 而且可能会差很多个数量级, 现在看来, 似乎并非如此. 虽然可能一个for循环和一个数组操作没有暴露JavaScript速度上的弱点, 但也足以改变我的看法. JavaScript速度的提升, 也意味着Web与我们生活的又一次靠近!