Changeset 225752 in webkit


Ignore:
Timestamp:
Dec 11, 2017 11:41:46 AM (6 years ago)
Author:
Antti Koivisto
Message:

StyleBench improvements
​https://bugs.webkit.org/show_bug.cgi?id=180646

Reviewed by Geoffrey Garen.

  • Remove :empty rule from global stylesheet. It caused all tests to hit positional pseudo-class code paths.
  • Instead use min-width to create easy flexible layout. Use it for ::before/::after too.
  • Add :empty to positional pseudo-class test.
  • Include some id attributes and id selectors
  • Chance to have more than 1 classes per compound selector
  • Change distribution of elements and classes to be non-uniform
  • Other bug fixes
  • StyleBench/resources/style-bench.js:

(Random.prototype.numberSquareWeightedToLow):
(Random):
(defaultConfiguration):
(prototype.randomElementName):
(prototype.randomId):
(prototype.makeCompoundSelector):
(prototype.makeSelector):
(prototype.makeElement):

Location:
trunk/PerformanceTests
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/PerformanceTests/ChangeLog

    r225698 r225752  
     12017-12-11  Antti Koivisto  <antti@apple.com>
     2
     3        StyleBench improvements
     4        https://bugs.webkit.org/show_bug.cgi?id=180646
     5
     6        Reviewed by Geoffrey Garen.
     7
     8        - Remove :empty rule from global stylesheet. It caused all tests to hit positional pseudo-class code paths.
     9        - Instead use min-width to create easy flexible layout. Use it for ::before/::after too.
     10        - Add :empty to positional pseudo-class test.
     11        - Include some id attributes and id selectors
     12        - Chance to have more than 1 classes per compound selector
     13        - Change distribution of elements and classes to be non-uniform
     14        - Other bug fixes
     15
     16        * StyleBench/resources/style-bench.js:
     17        (Random.prototype.numberSquareWeightedToLow):
     18        (Random):
     19        (defaultConfiguration):
     20        (prototype.randomElementName):
     21        (prototype.randomId):
     22        (prototype.makeCompoundSelector):
     23        (prototype.makeSelector):
     24        (prototype.makeElement):
     25
    1262017-12-08  Konstantin Tokarev  <annulen@yandex.ru>
    227

  • trunk/PerformanceTests/StyleBench/index.html

    r225324 r225752  
    33<head>
    44    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5     <title>StyleBench 0.1</title>
     5    <title>StyleBench 0.2</title>
    66    <link rel="stylesheet" href="../Speedometer/resources/main.css">
    77    <script src="../Speedometer/resources/main.js" defer></script>

  • trunk/PerformanceTests/StyleBench/resources/style-bench.js

    r225324 r225752  
    1313    }
    1414
     15    underOne()
     16    {
     17        return (this.next % 1048576) / 1048576;
     18    }
     19
    1520    chance(chance)
    1621    {
    17         return this.next % 1048576 < chance * 1048576;
     22        return this.underOne() < chance;
    1823    }
    1924
    … …  
    2126    {
    2227        return this.next % under;
     28    }
     29
     30    numberSquareWeightedToLow(under)
     31    {
     32        const random = this.underOne();
     33        const random2 = random * random;
     34        return Math.floor(random2 * under);
    2335    }
    2436}
    … …  
    3648            name: 'Default',
    3749            elementTypeCount: 10,
     50            idChance: 0.05,
    3851            elementChance: 0.5,
    3952            classCount: 200,
    … …  
    8699                'last-of-type',
    87100                'only-of-type',
     101                'empty',
    88102            ],
    89103        });
    … …  
    111125    {
    112126        this.configuration = configuration;
     127        this.idCount = 0;
    113128
    114129        this.baseStyle = document.createElement("style");
    … …  
    120135            #testroot * {
    121136                display: inline-block;
    122             }
    123             #testroot :empty {
    124                 width:10px;
    125137                height:10px;
     138                min-width:10px;
    126139            }
    127140        `;
    … …  
    138151    {
    139152        const elementTypeCount = this.configuration.elementTypeCount;
    140         return `elem${ this.random.number(elementTypeCount) }`;
     153        return `elem${ this.random.numberSquareWeightedToLow(elementTypeCount) }`;
    141154    }
    142155
    … …  
    144157    {
    145158        const classCount = this.configuration.classCount;
    146         return `class${ this.random.number(classCount) }`;
     159        return `class${ this.random.numberSquareWeightedToLow(classCount) }`;
    147160    }
    148161
    … …  
    150163    {
    151164        const maximum = Math.round(range * this.configuration.classCount);
    152         return `class${ this.random.number(maximum) }`;
     165        return `class${ this.random.numberSquareWeightedToLow(maximum) }`;
    153166    }
    154167
    … …  
    159172    }
    160173
    161     randomPseudoClass()
     174    randomPseudoClass(isLast)
    162175    {
    163176        const pseudoClasses = this.configuration.pseudoClasses;
    164         return pseudoClasses[this.random.number(pseudoClasses.length)]
    165     }
    166 
    167     makeSimpleSelector(index, length)
    168     {
     177        const pseudoClass = pseudoClasses[this.random.number(pseudoClasses.length)]
     178        if (!isLast && pseudoClass == 'empty')
     179            return this.randomPseudoClass(isLast);
     180        return pseudoClass;
     181    }
     182
     183    randomId()
     184    {
     185        const idCount = this.configuration.idChance * this.configuration.elementCount ;
     186        return `id${ this.random.number(idCount) }`;
     187    }
     188
     189    makeCompoundSelector(index, length)
     190    {
     191        const isFirst = index == 0;
    169192        const isLast = index == length - 1;
    170193        const usePseudoClass = this.random.chance(this.configuration.pseudoClassChance) && this.configuration.pseudoClasses.length;
    171         const useElement = usePseudoClass || this.random.chance(this.configuration.elementChance); // :nth-of-type etc only make sense with element
    172         const useClass = !useElement || this.random.chance(this.configuration.classChance);
     194        const useId = isFirst && this.random.chance(this.configuration.idChance);
     195        const useElement = !useId && (usePseudoClass || this.random.chance(this.configuration.elementChance)); // :nth-of-type etc only make sense with element
     196        const useClass = !useId && (!useElement || this.random.chance(this.configuration.classChance));
    173197        const useBeforeOrAfter = isLast && this.random.chance(this.configuration.beforeAfterChance);
    174198        let result = "";
    175199        if (useElement)
    176200            result += this.randomElementName();
     201        if (useId)
     202            result += "#" + this.randomId();
    177203        if (useClass) {
    178             // Use a smaller pool of class names on the left side of the selectors to create containers.
    179             result += "." + this.randomClassNameFromRange((index + 1) / length);
     204            const classCount = this.random.numberSquareWeightedToLow(2) + 1;
     205            for (let i = 0; i < classCount; ++i) {
     206                // Use a smaller pool of class names on the left side of the selectors to create containers.
     207                result += "." + this.randomClassNameFromRange((index + 1) / length);
     208            }
    180209        }
    181210        if (usePseudoClass)
    182             result +=  ":" + this.randomPseudoClass();
     211            result +=  ":" + this.randomPseudoClass(isLast);
    183212        if (useBeforeOrAfter) {
    184213            if (this.random.chance(0.5))
    … …  
    193222    {
    194223        const length = this.random.number(this.configuration.maximumSelectorLength) + 1;
    195         let result = this.makeSimpleSelector(0, length);
    196         for (let i = 0; i < length; ++i) {
     224        let result = this.makeCompoundSelector(0, length);
     225        for (let i = 1; i < length; ++i) {
    197226            const combinator = this.randomCombinator();
    198227            if (combinator != ' ')
    199228                result += " " + combinator;
    200             result += " " + this.makeSimpleSelector(i, length);
     229            result += " " + this.makeCompoundSelector(i, length);
    201230        }
    202231        return result;
    … …  
    213242
    214243        if (selector.endsWith('::before') || selector.endsWith('::after'))
    215             declaration += " content: '\xa0';";
     244            declaration += " content: ''; min-width:5px; display:inline-block;";
    216245
    217246        return declaration;
    … …  
    245274        const hasClasses = this.random.chance(0.5);
    246275        if (hasClasses) {
    247             const count = this.random.number(3) + 1;
     276            const count = this.random.numberSquareWeightedToLow(3) + 1;
    248277            for (let i = 0; i < count; ++i)
    249278                element.classList.add(this.randomClassName());
     279        }
     280        const hasId = this.random.chance(this.configuration.idChance);
     281        if (hasId) {
     282            element.id = `id${ this.idCount }`;
     283            this.idCount++;
    250284        }
    251285        return element;
Note: See TracChangeset for help on using the changeset viewer.