![](/img/trans.png)
[英]Measure the time Firefox needs for rendering a page and evaluating JavaScript and CSS
[英]Measure Rendering Time of Change initiated by Javascript
我想测量显示javascript完成DOM更改所需的时间。
考虑这个示例svg文件:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1600"
height="1000"
version="1.1">
<script xlink:href="clicktest.js" />
<defs>
<filter id="filterBlur" x="-0.6" width="2.2" y="-0.6" height="2.2">
<feGaussianBlur stdDeviation="120" />
</filter>
</defs>
<rect y="50" x="50" height="100" width="200" style="fill:#ff0000" onmousedown="red()" />
<rect y="50" x="300" height="100" width="200" style="fill:#0000ff" onmousedown="blue()" />
<circle cx="800" cy="600" r="300" id="circle"
style="fill:#888888;filter:url(#filterBlur)" />
<text id="time" x="1250" y="50" style="font-size:40px">time...</text>
<rect x="900" y="300" width="600" height="600"
style="fill:#650088;fill-opacity:0.5;filter:url(#filterBlur)" />
<rect x="100" y="400" width="300" height="400"
style="fill:#999900;fill-opacity:0.5;filter:url(#filterBlur)" />
</svg>
这显示两个rect
,用作改变圆形颜色的“按钮”。 额外的rect
和模糊和不透明度使它更慢。
剧本:
function blue()
{
var startTime = performance.now();
document.getElementById('circle').style.fill = '#0000ff';
var endTime = performance.now();
document.getElementById('time').textContent = (endTime - startTime).toString();
}
function red()
{
var startTime = performance.now();
document.getElementById('circle').style.fill = '#ff0000';
var endTime = performance.now();
document.getElementById('time').textContent = (endTime - startTime).toString();
}
现在点击时,将显示小于1毫秒的时间,但是,显然需要将近一秒钟(在我的计算机上),直到实际显示更改的颜色(其中,顺便说一句,Chrome似乎比Firefox更快)。
如何在渲染完成后测量从单击开始到结束的时间?
1.打开Chrome(空白)
2.打开DevTools(F12)
3.移至“时间轴”标签
4.点击记录。
5.在Chrome中粘贴您的URL,然后单击Enter。
6.等待页面完全加载。
7.停止录制。
我想你会在那里找到答案。
以下是chrome时间轴上源结果的示例:
编辑:有关JavaScript执行和结果渲染时间的更多详细信息,您可以使用'DynaTrace'或'SpeedTracer'(如何使用这些工具之一在这里 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.