使用Javascript Raytracer可以测试出浏览器的JavaScript渲染性能,测试分为基本渲染和完全渲染,基本渲染测试时Javascript Raytracer会以三个像素为一组进行渲染,因此所需时间通常比较快。本项测试没有封顶数值,单位秒,分值越小越好;而完全渲染测试也是通过Javascript Raytracer进行的,与基本渲染的不同之处在于需要逐个像素的进行渲染。
完全渲染所得到的最终效果
基本渲染和完全渲染测试 | ||
软件名称 | 基本渲染测试(S) | 完全渲染(S) |
QQ浏览器 | 0.885 | 13.376 |
Chrome浏览器 | 0.747 | 21.089 |
IE11 | 0.930 | 15.832 |
Firefox | 2.828 | 35.215 |
猎豹浏览器 | 0.816 | 19.577 |
搜狗浏览器 | 0.684 | 15.197 |
傲游云浏览器 | 0.729 | 14.360 |
360极速浏览器 | 0.548 | 14.297 |
百度浏览器 | 0.717 | 20.799 |
测试分析:当引用了JS时候,浏览器在原理上会先发送1个jsrequest,一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构。浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。这个过程,反应的时间虽然比较快,但却经历了大量的逻辑运算。因此,对于浏览器本身来说,不同的浏览器在应对一系列下载、加载以及呈现的运算时,需要的时间不一样,这样也就出现了最终测试结果的快慢不同。