Вычисление времени красок элементов во всех браузерах

Ответ 1

Я действительно не уверен, что ты здесь. Вы сказали: "(в значительной степени, это объявление, которое сейчас просматривается, или это не видно" ). Но это немного загадочно. О каком "объявлении" вы говорите?

В попытке выяснить, что вы пытались выполнить, я в значительной степени переписал ваш script, чтобы сделать то же самое, что и раньше, и он выполняет alert прошедшего времени, а также записывает время для каждого облака в консоль. Это не очень хороший способ вычислить время выполнения (это то, что мне казалось так, как будто вы были..).

ПРИМЕЧАНИЕ. Единственная причина, по которой я переписал все, чтобы я сам мог лучше понять это, готовясь к ответу от вас. Как только я точно знаю, что вы хотите, я отредактирую свой ответ.

<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>

Ответ 2

Вы должны использовать консольный API для более точного измерения таймингов (и избегать спагетти DIY):

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

Эта функциональность доступна в Chrome и Firefox; он также может быть polyfilled в других браузерах, таких как IE, но не будет таким точным.

Обратите внимание, что с использованием Date не подходит/предназначено для бенчмаркинга:

В зависимости от браузера и ОС разрешение Date может достигать 15 миллисекунд.

Date на основе системного времени, не является идеальным. В большинстве систем работает демон, который регулярно синхронизирует время... tweaked несколько миллисекунд каждые 15-20 минут. При такой скорости измерения приблизительно 1% из 10 секундных интервалов были бы неточными.

Update:

Держите, пытаетесь ли вы измерить время и порядок браузера? Они не могут контролироваться через js (хорошо, возможно иметь js API, но в конечном счете он должен быть проверен в движке браузера, поэтому нет js polyfills).

Правило большого пальца - это элементы, которые будут раскрашены в порядке сортировки, с повторными красками/повторными потоками, вызванными стилем контента - например, загружаемыми фонами, добавлением дополнительных правил CSS или добавлением содержимого в размер столбца таблицы.

Html5rocks при профилировании длинных красок может помочь вам начать работу в нужном направлении.