Fatal编程技术网
  • javascript/
  • Javascript 计算所有浏览器中元素的绘制时间

Javascript 计算所有浏览器中元素的绘制时间

javascript html

Javascript 计算所有浏览器中元素的绘制时间,javascript,html,Javascript,Html,我试图计算一个元素从脚本开始绘制到DOM上所用的时间，或者是否绘制了特定的元素。我在HTML中插入了一个背景渐变，然后使用javascript在屏幕上的多个位置（一些是负数，一些是正数，一些在范围内，一些在范围外）创建随机（云，这只是一个带有文本阴影的大周期） 当前我的代码如下所示： <html> <head> <style> .container { border: 1px so

我试图计算一个元素从脚本开始绘制到DOM上所用的时间，或者是否绘制了特定的元素。我在HTML中插入了一个背景渐变，然后使用javascript在屏幕上的多个位置（一些是负数，一些是正数，一些在范围内，一些在范围外）创建随机（云，这只是一个带有文本阴影的大周期）

当前我的代码如下所示：

<html>
    <head>
        <style>
            .container {
                border: 1px solid #3b599e;
                overflow: hidden;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#315d8c', endColorstr='#84aace'); /* for IE */
                background: -webkit-gradient(linear, left top, left bottom, from(#315d8c), to(#84aace)); /* for webkit browsers */
                background: -moz-linear-gradient(top,  #315d8c,  #84aace); /* for firefox 3.6+ */ 
            }
            .cloud {
                color: #fff;
                position: relative;
                font: 100% "Times New Roman", Times, serif;
                text-shadow: 0px 0px 10px #fff;
                line-height: 0;
            }
        </style>

        <script type="text/javascript">
            function cloud(){
                var b1 = "<div class=\"cloud\" style=\"font-size: ";
                var b2 = "px; position: absolute; top: ";
                document.write(b1+"300px; width: 300px; height: 300"+b2+"34px; left: 28px;\">.<\/div>");
                document.write(b1+"300px; width: 300px; height: 300"+b2+"46px; left: 10px;\">.<\/div>");
                document.write(b1+"300px; width: 300px; height: 300"+b2+"46px; left: 50px;\">.<\/div>");
                document.write(b1+"400px; width: 400px; height: 400"+b2+"24px; left: 20px;\">.<\/div>");
            }
            function clouds(){
                var top = ['-80','80','240','400'];
                var left = -10;
                var a1 = "<div style=\"position: relative; top: ";
                var a2 = "px; left: ";
                var a3 = "px;\"><script type=\"text/javascript\">cloud();<\/script><\/div>";
                for(i=0; i<8; i++)
                {
                    document.write(a1+top[0]+a2+left+a3);
                    document.write(a1+top[1]+a2+left+a3);
                    document.write(a1+top[2]+a2+left+a3);
                    document.write(a1+top[3]+a2+left+a3); 
                    if(i==4)
                    {
                        left = -90;
                        top = ['0','160','320','480'];
                    }
                    else 
                        left += 160;
                }
            }
        </script>
    </head>

    <body style="margin:0;padding:0;">
        <div class="container" style="width: 728px; height: 90px;">
            <script>clouds();</script>
        </div>
    </body>
</html>


.集装箱{
边框：1px实心#3b599e；
溢出：隐藏；
过滤器：progid:DXImageTransform.Microsoft.gradient（用于IE的startColorstr='#315d8c'，endColorstr='#84aace'）；/**/
背景：-webkit渐变（线性、左上、左下、从（#315d8c）到（#84aace））；/*适用于webkit浏览器*/
背景：-moz线性渐变（顶部，#315d8c，#84aace）；/*适用于firefox 3.6+//
}
.云{
颜色：#fff；
位置：相对位置；
字体：100%“泰晤士报新罗马”，泰晤士报，衬线；
文本阴影：0px 0px 10px#fff；
线高：0；
}
函数云（）{
var b1=“.”；
文件。书写（b1+“300px；宽度：300px；高度：300”+b2+“46px；左侧：10px；\“>”）；
文件。书写（b1+“300px；宽度：300px；高度：300”+b2+“46px；左侧：50px；\“>”）；
书写（b1+“400px；宽度：400px；高度：400”+b2+“24px；左侧：20px；\“>”）；
}
函数云（）{
var-top=['-80'，'80'，'240'，'400']；
左var=-10；
var a1=“cloud（）；”；

对于（i=0；i我真的不确定你在这里想要什么。你说：“（基本上，广告是当前正在观看，还是已经看不到了）。”但这有点神秘……你在说什么“广告”

在试图弄清楚您想要完成什么的过程中，我几乎重写了您的脚本，使其与之前完全相同，并且它会发出一个
警报，提醒您经过的时间，并在控制台中记录每个云的时间。这不是一个计算执行时间的好方法（在我看来，这是您想要的…）

注意：我重写所有内容的唯一原因是为了让我自己能够更好地理解它，以便为您的回复做好准备。一旦我确切知道您想要什么，我将编辑我的答案


<style>
    .container {
        width: 728px;
        height: 90px;
        border: 1px solid #3b599e;
        overflow: hidden;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#315d8c', endColorstr='#84aace'); /* for IE */
        background: -webkit-gradient(linear, left top, left bottom, from(#315d8c), to(#84aace)); /* for webkit browsers */
        background: -moz-linear-gradient(top,  #315d8c,  #84aace); /* for firefox 3.6+ */ 
    }
    .cloud {
        color: #fff;
        position: absolute;
        font: 100% "Times New Roman", Times, serif;
        text-shadow: 0px 0px 10px #fff;
        line-height: 0;
    }
    .cloud-container {
        position: relative;
    }
</style>

<div class="container"></div>

<script type="text/javascript">
// for IE
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };

var pxTop  = ['34px', '46px', '46px', '24px'],
    pxLeft = ['28px', '10px', '50px', '20px'],
    size   = ['300px', '300px', '300px', '400px'];

function cloud(callback) {
    var df = document.createDocumentFragment(),
        node;
    for (var i = 0; i < 4; i++) {
        node = document.createElement('div');
        node.className = 'cloud';
        node.style.fontSize = size[i];
        node.style.width    = size[i];
        node.style.height   = size[i];
        node.style.top      = pxTop[i];
        node.style.left     = pxLeft[i];
        node.innerHTML      = '.';
        df.appendChild(node);
    }

    callback && callback();
    return df;
}

function clouds(containerId, callback) {
    var top       = ['-80','80','240','400'],
        left      = -10,
        container = document.querySelector(containerId);

    container.appendChild(document.createTextNode("\n"));

    for (i = 0; i < 8; i++) {
        var div        = document.createElement('div');
        div.className  = 'cloud-container';
        div.style.top  = top[0] + 'px';
        div.style.left = left + 'px';

        console.log('About to start making a cloud', new Date().getMilliseconds());
        div.appendChild(cloud(function() {
            console.log('Finished making cloud', new Date().getMilliseconds());
        }));
        container.appendChild(div);
        container.appendChild(document.createTextNode("\n")); // newline for view source

        if (i == 4) {
            left = -90;
            top  = ['0','160','320','480'];
        } else { 
            left += 160;
        }
    }
    callback && callback();
}

var start = new Date().getMilliseconds();
clouds('.container', (function() { 
    var end = new Date().getMilliseconds(),
       time = end - this;
    alert('Execution time: ' + time);
}).bind(start));
</script>




.集装箱{
宽度：728px；
高度：90px；
边框：1px实心#3b599e；
溢出：隐藏；
过滤器：progid:DXImageTransform.Microsoft.gradient（用于IE的startColorstr='#315d8c'，endColorstr='#84aace'）；/**/
背景：-webkit渐变（线性、左上、左下、从（#315d8c）到（#84aace））；/*适用于webkit浏览器*/
背景：-moz线性渐变（顶部，#315d8c，#84aace）；/*适用于firefox 3.6+//
}
.云{
颜色：#fff；
位置：绝对位置；
字体：100%“泰晤士报新罗马”，泰晤士报，衬线；
文本阴影：0px 0px 10px#fff；
线高：0；
}
.云容器{
位置：相对位置；
}
//对于IE
如果（！window.console）window.console={}；
如果（！window.console.log）window.console.log=function（）{}；
var pxTop=['34px'，'46px'，'46px'，'24px']，
pxleet=['28px'，'10px'，'50px'，'20px']，
大小=['300px'，'300px'，'300px'，'400px']；
函数云（回调）{
var df=document.createDocumentFragment（），
节点；
对于（变量i=0；i<4；i++）{
node=document.createElement（'div'）；
node.className='cloud'；
node.style.fontSize=大小[i]；
node.style.width=大小[i]；
node.style.height=尺寸[i]；
node.style.top=pxTop[i]；
node.style.left=pxLeft[i]；
node.innerHTML='；
追加子节点；
}
callback&&callback（）；
返回df；
}
函数云（容器ID、回调）{
变量top=['-80'，'80'，'240'，'400']，
左=-10，
container=document.querySelector（containerId）；
container.appendChild（document.createTextNode（“\n”）；
对于（i=0；i<8；i++）{
var div=document.createElement（'div'）；
div.className='云容器'；
div.style.top=top[0]+'px'；
div.style.left=左+像素；
log（'即将开始制作云'，new Date（）.getmillizes（））；
div.appendChild（云（函数（）{
log（'Finished make cloud'，new Date（）.getmillizes（））；
}));
子容器（div）；
container.appendChild（document.createTextNode（“\n”）；//视图源的换行符
如果（i==4）{
左=-90；
top=['0'、'160'、'320'、'480']；
}否则{
左+=160；
}
}
callback&&callback（）；
}
var start=new Date（）.getmillizes（）；
云（'.container'，（function（）{
var end=new Date（）.getmillizes（），
时间=结束-这个；
警报（“执行时间：”+时间）；
}).bind（start））；

您应该使用控制台API更准确地测量计时（并避免DIY意大利面）：

此功能在和中本机可用；也可以在其他浏览器（如IE）上使用，但不会那么精确

请注意：

根据浏览器和操作系统的不同，
Date
的分辨率可以低至15毫秒


Date
基于系统时间，这并不理想。大多数系统运行一个守护进程，该守护进程定期同步时间…每15-20分钟调整几毫秒。以这种速度测量的10秒间隔中约1%是不准确的

更新：

等等，你是想测量浏览器绘制的时间和顺序吗？这些不能通过js监控（好的，有可能有一个JSAPI，

console.time("Doing stuff");
/*le code*/
console.timeEnd("Doing stuff");