Вопросы Теги

Скорость CSS

Guice's Just-In-Time binding делает именно то, что вы хотите. Учитывая ваши Door, Window и Roof соответствуют следующим требованиям (цитируется в документации Guice ):

либо публичный конструктор без аргументов, или конструктор с аннотацией @Inject

blockquote>

будет достаточной пустая реализация модуля: 

public class HouseModule extends AbstractModule {
    @Override
    protected void configure() {
    }
}

16
задан Ólafur Waage 11 February 2009 в 10:02
поделиться

4 ответа

Две вещи помнить:

  • Это собирается зависеть от синтаксического анализатора CSS / механизм визуализации: т.е. это варьируется от браузера до браузера.

  • CSS действительно, действительно, действительно быстр так или иначе, даже в он является самым медленным, человеческое наблюдение не было должно уведомление

В целом, самые простые вещи являются самыми быстрыми (поскольку Гамбо приятно иллюстрирует), но потому что мы уже находимся в такой быстрой среде, не думают, что необходимо пожертвовать ясностью, и соответствующий обзор (низкая специфика похожа на создание всего общедоступный вид). Просто избегайте * везде, где Вы можете :)

13
ответ дан annakata 11 February 2009 в 20:02
поделиться
  • 1
    Спасибо, эта фиксация работала на меня. – Judd Lyon 6 June 2012 в 18:41

Я сказал бы, что это зависит от браузера. Ничто не бьет эксперимент, в этом случае простой JavaScript, вероятно, сделал бы.

Обновление: я означал делать что-то вроде этого: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Speed Test</title>
    <style type="text/css">
    .first { color: red; }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        var container = document.getElementById("container");
        var totalTime = 0;
        var passes = 100;
        for (var p=1; p<=passes; p++)
        {
            var startTime = new Date();
            for (var i=0; i<1000; i++)
            {
                var outerDiv = document.createElement("div");
                var innerDiv = document.createElement("div");
                var span = document.createElement("span");
                outerDiv.className = "first";
                innerDiv.className = "second";
                span.appendChild(document.createTextNode("Hello, world!"));
                outerDiv.appendChild(innerDiv);
                innerDiv.appendChild(span);
                container.appendChild(outerDiv);
            }                       
            var endTime = new Date();
            totalTime += (endTime - startTime);
        }                           
        alert("Average time: " + totalTime/passes);
    }
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

†¦, но разница во времени, вызванная различными селекторами, кажется, являются слишком маленькими для измерения, как сказал annakata.

0
ответ дан zoul 11 February 2009 в 20:02
поделиться
  • 1
    Голосование, хотя я don' t рекомендуют этот ответ. Я думаю однажды you' ve определил элемент, необходимо измерить его соответственно, возможно, с помощью мультимедийных запросов. overflow: hidden чувства немного hacky мне. – John H 21 July 2013 в 23:34

Необходимо понять, как селекторы обрабатываются:

  • .third: получают каждый элемент и проверку на имя класса third,
  • div.third: получают каждый DIV элемент и проверка на имя класса third,
  • div.second div.third: получают каждый DIV элемент, проверяют на имя класса second, пробегают их и находят каждого потомка DIV элемент и проверка на имя класса third,
  • div.first div.second div.third: получают каждый DIV элемент, проверяют на имя класса first, пробегают их и находят каждого потомка DIV элемент, проверяют на имя класса second, пробегают их и наконец проверяют на имя класса third.
<час>

Редактирование я должен признать, что процедура выше была бы наивным подходом и не обычно эффективна. На самом деле существуют реализации, которые идут от нижней части до вершины вместо этого сверху донизу:

  • div.first div.second div.third: получают каждый DIV элемент, проверяют на имя класса third, получают первое DIV предок, который имеет имя класса second, получите первое DIV предок, который имеет имя класса first.
7
ответ дан Gumbo 11 February 2009 в 20:02
поделиться
  • 1
    Если Вы используете переполнение: скрытый (без x) это фиксирует странную прокрутку и добавленные полосы прокрутки (в моем случае). Надежда, которая помогает кому-либо еще, кто может столкнуться с нею. – Jason 13 December 2012 в 21:57

Согласно Mozilla Developer Center, наиболее эффективным селектором для этого случая будет просто .third

Фактически, там прямо говорится: "Не определяйте правила классов именами тегов". В общем, для наибольшей эффективности используйте самый простой селектор, который подходит. Вот почему .third побеждает span.third побеждает .second span.third и т.д.

Я не могу сказать, какой вывод подразумевает Gumbo, но Олафур, похоже, делает из этого вывод, что использование большего количества элементов в селекторе делает разбор CSS более эффективным, хотя на самом деле все как раз наоборот (если предположить, что другие механизмы разбора CSS работают аналогично Mozilla)

.
8
ответ дан 30 November 2019 в 21:11
поделиться
Другие вопросы по тегам:

Похожие вопросы: