$30 off During Our Annual Pro Sale. View Details »

CSS JIT: Optimizing CSS Selector Matching with Just-in-Time Compilation

CSS JIT: Optimizing CSS Selector Matching with Just-in-Time Compilation

CSS Selector matching is used for Style Resolution and SelectorQuerying.
We describe CSS Selector JIT in WebKit, optimizing CSS Selector Matching with Just-in-Time compilation techniques.
NOTE: http://constellation.github.io/blog/2014/07/14/webkit-css-jit-internals/

Yusuke SUZUKI

July 14, 2014
Tweet

More Decks by Yusuke SUZUKI

Other Decks in Programming

Transcript

  1. CSS JIT: Optimizing CSS Selector Matching
    with Just-in-Time Compilation
    Yusuke Suzuki
    Twitter: @Constellation

    View Slide

  2. Outline
    • Motivation & Goals
    • Existing CSS Selector Implementation
    • CSS Selector JIT
    • Conclusion

    View Slide

  3. Motivation
    • CSS Selector is executed frequently
    • Style Resolution / QuerySelector
    – For each node, check selector match/fail over node
    • Speed of selector matching is important
    for Rendering / JS (Selectors API)
    .rabbit.house {

    }
    CSS StyleSheet

    View Slide

  4. Motivation
    • CSS Selector is executed frequently
    • Style Resolution / QuerySelector
    – For each node, check selector match/fail over node
    • Speed of selector matching is important
    for Rendering / JS (Selectors API)
    .rabbit.house {

    }
    CSS StyleSheet
    Selector Matching

    View Slide

  5. QuerySelector implementation
    • root.querySelectorAll(/* selector */)
    1. For each element under root
    1. Do selector matching with selector and element
    (SelectorChecker in WebKit / Blink)
    2. if matched
    1. result.append(element)
    2. Return result
    • querySelectorAll executes selector matching the
    number of elements times

    View Slide

  6. Goals
    • Provide faster selector matching
    – Make style resolution faster
    – Make JS code using QuerySelector faster

    View Slide

  7. Outline
    • Motivation & Goals
    • Existing CSS Selector Implementation
    • CSS Selector JIT
    • Conclusion

    View Slide

  8. Existing CSS Selector Implementation
    • Highly tuned C++ implementation (WebKit/Blink)
    • SelectorChecker::match
    • SelectorChecker::matchRecursively
    • SelectorChecker::checkOne
    • … recursively call markRecursively (backtracking is needed)

    View Slide

  9. CSS Selector Structure & Terminology
    • Composed of compound selectors
    – simple selector (e.g. div) + combinator (e.g. >)
    • Selector is evaluated from-right-to-left
    span
    div >
    div + div
    compound selectors (div+ div~ div div> span)
    div ~
    descendant child
    following-
    sibling
    next-
    sibling
    rightmost
    http://dev.w3.org/csswg/selectors4/#structure

    View Slide

  10. Evaluation Example
    • body div span case
    span
    div
    body
    section
    div
    span
    p
    h3
    section
    body
    section
    div div
    p
    span
    Matching starts with this span

    View Slide

  11. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  12. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  13. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  14. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  15. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  16. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  17. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  18. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  19. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  20. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  21. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  22. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  23. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  24. Evaluation Example: Matched
    • body div span case
    span
    div
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div
    Matched

    View Slide

  25. Evaluation Example: Failed
    • body div> span case
    span
    div>
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  26. Evaluation Example: Failed
    • body div> span case
    span
    div>
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  27. Evaluation Example: Failed
    • body div> span case
    span
    div>
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  28. Evaluation Example: Failed
    • body div> span case
    span
    div>
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  29. Evaluation Example: Failed
    • body div> span case
    span
    div>
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div

    View Slide

  30. Evaluation Example: Failed
    • body div> span case
    span
    div>
    body
    section div span
    p
    h3
    section
    body
    section
    div
    p
    span
    div
    Failed

    View Slide

  31. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  32. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  33. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  34. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  35. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  36. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  37. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  38. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  39. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  40. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  41. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  42. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  43. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div

    View Slide

  44. Evaluation Example: Backtracking
    • body> div> div span case
    • When child(xxx>) is failed,
    backtracking with the closest descendant(xxx)
    span
    div>
    body>
    div div span
    body div
    div
    div
    Matched

    View Slide

  45. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  46. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  47. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  48. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  49. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  50. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  51. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  52. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  53. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  54. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  55. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  56. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  57. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  58. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  59. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div

    View Slide

  60. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div
    Failed
    Completely

    View Slide

  61. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div
    Failed
    Completely

    View Slide

  62. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div
    Failed
    Completely

    View Slide

  63. Evaluation Example: Backtracking
    • section> div div span case
    • When descendant(xxx) is failed,
    selector matching completely failes.
    span
    div
    section>
    div div span
    body div
    div
    div
    Failed
    Completely
    Candidates
    become less

    View Slide

  64. Outline
    • Motivation & Goals
    • Existing CSS Selector Implementation
    • CSS Selector JIT
    • Conclusion

    View Slide

  65. CSS Selector JIT
    • Just-in-Time compile Selector Matching predicate
    – Provide faster selector matching
    • Leverage selector’s static data
    to generate highly optimized machine code

    View Slide

  66. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span

    View Slide

  67. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    SUCCESS

    View Slide

  68. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    SUCCESS
    unmatch

    View Slide

  69. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    SUCCESS
    unmatch
    Parent

    View Slide

  70. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    SUCCESS
    unmatch
    no parent
    Parent

    View Slide

  71. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    div SUCCESS
    unmatch
    no parent
    Parent

    View Slide

  72. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    div SUCCESS
    unmatch
    no parent
    Parent
    unmatch

    View Slide

  73. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    div SUCCESS
    unmatch
    no parent
    Parent
    unmatch
    Parent

    View Slide

  74. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    div SUCCESS
    unmatch
    no parent
    no parent
    Parent
    unmatch
    Parent

    View Slide

  75. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    div SUCCESS
    unmatch
    no parent
    no parent
    Parent
    unmatch
    Parent div

    View Slide

  76. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    div SUCCESS
    unmatch
    no parent
    no parent
    Parent
    unmatch
    Parent div
    unmatch
    (current register is
    already suitable)

    View Slide

  77. Compiling machine code
    • Represent CSS Selector Matching with code & jumps
    – Avoid recursive function call (NO CALLS!)
    – Storing current element to register
    Example 1: div> div span
    span
    FAIL
    div SUCCESS
    unmatch
    no parent
    no parent
    Parent
    unmatch
    Parent div
    unmatch
    (current register is
    already suitable)

    View Slide

  78. Compiling machine code
    • Storing backtracking element to one register
    Example 2: div> div> div span

    View Slide

  79. Compiling machine code
    • Storing backtracking element to one register
    Example 2: div> div> div span
    span
    FAIL
    div
    P
    unmatch
    div
    P
    unmatch
    unmatch
    no parent

    View Slide

  80. Compiling machine code
    • Storing backtracking element to one register
    Example 2: div> div> div span
    span
    FAIL
    div
    P
    unmatch
    div
    P
    unmatch
    unmatch
    no parent
    save

    View Slide

  81. Compiling machine code
    • Storing backtracking element to one register
    Example 2: div> div> div span
    span
    FAIL
    div
    P
    unmatch
    div
    P
    unmatch
    unmatch
    no parent
    save P

    View Slide

  82. Compiling machine code
    • Storing backtracking element to one register
    Example 2: div> div> div span
    span
    FAIL
    div
    P
    unmatch
    div
    P
    unmatch
    unmatch
    no parent
    save P
    no parent

    View Slide

  83. Compiling machine code
    • Storing backtracking element to one register
    Example 2: div> div> div span
    span
    FAIL
    div
    P
    unmatch
    div
    P
    unmatch
    unmatch
    no parent
    save P div
    no parent

    View Slide

  84. Compiling machine code
    • Storing backtracking element to one register
    Example 2: div> div> div span
    span
    FAIL
    div
    P
    unmatch
    div
    P
    unmatch
    unmatch
    no parent
    save P div
    no parent
    unmatch
    backtrack with
    saved register

    View Slide

  85. Compiling machine code
    • Storing backtracking element to one register
    Example 2: div> div> div span
    span
    FAIL
    div SUCCESS
    P
    unmatch
    div
    P
    unmatch
    unmatch
    no parent
    save P div
    no parent
    unmatch
    backtrack with
    saved register

    View Slide

  86. Compiling machine code
    • Storing backtracking element to one register
    – Since only one descendant should be considered
    Example 3: div> div> div div> div> div span
    span
    FAIL
    div
    P div
    P
    unmatch
    save P div
    unmatch with saved

    View Slide

  87. Compiling machine code
    • Storing backtracking element to one register
    – Since only one descendant should be considered
    Example 3: div> div> div div> div> div span
    span
    FAIL
    div
    P div
    P
    unmatch
    save P div
    unmatch with saved
    div
    P div
    P save P div
    unmatch with saved
    SUCCESS

    View Slide

  88. div> div span Code
    Generated JIT code for CSS Selector JIT
    for "div > div span":
    Code at [0x7fd031187000, 0x7fd0311870a0):
    0x7fd031187000: push %rbp
    0x7fd031187001: mov 0x58(%rdi), %rax
    0x7fd031187005: mov $0x7fd08c30ec50, %rcx
    0x7fd03118700f: cmp %rcx, 0x18(%rax)
    0x7fd031187013: jnz 0x7fd031187081
    0x7fd031187019: mov 0x20(%rdi), %rdi
    0x7fd03118701d: test %rdi, %rdi
    0x7fd031187020: jz 0x7fd031187081
    0x7fd031187026: test $0x4, 0x1c(%rdi)
    0x7fd03118702a: jz 0x7fd031187081
    0x7fd031187030: mov 0x58(%rdi), %rdx
    0x7fd031187034: mov $0x7fd08c30f670, %rsi
    0x7fd03118703e: cmp %rsi, 0x18(%rdx)
    0x7fd031187042: jnz 0x7fd031187019
    0x7fd031187048: mov 0x20(%rdi), %rdi
    0x7fd03118704c: test %rdi, %rdi
    0x7fd03118704f: jz 0x7fd031187081
    0x7fd031187055: test $0x4, 0x1c(%rdi)
    0x7fd031187059: jz 0x7fd031187081
    0x7fd03118705f: mov 0x58(%rdi), %r8
    0x7fd031187063: mov $0x7fd08c30f670, %r9
    0x7fd03118706d: cmp %r9, 0x18(%r8)
    0x7fd031187071: jnz 0x7fd031187019
    0x7fd031187077: mov $0x1, %eax
    0x7fd03118707c: jmp 0x7fd031187083
    0x7fd031187081: xor %eax, %eax
    0x7fd031187083: pop %rbp
    0x7fd031187084: ret

    View Slide

  89. div> div span Code
    Generated JIT code for CSS Selector JIT
    for "div > div span":
    Code at [0x7fd031187000, 0x7fd0311870a0):
    0x7fd031187000: push %rbp
    0x7fd031187001: mov 0x58(%rdi), %rax
    0x7fd031187005: mov $0x7fd08c30ec50, %rcx
    0x7fd03118700f: cmp %rcx, 0x18(%rax)
    0x7fd031187013: jnz 0x7fd031187081
    0x7fd031187019: mov 0x20(%rdi), %rdi
    0x7fd03118701d: test %rdi, %rdi
    0x7fd031187020: jz 0x7fd031187081
    0x7fd031187026: test $0x4, 0x1c(%rdi)
    0x7fd03118702a: jz 0x7fd031187081
    0x7fd031187030: mov 0x58(%rdi), %rdx
    0x7fd031187034: mov $0x7fd08c30f670, %rsi
    0x7fd03118703e: cmp %rsi, 0x18(%rdx)
    0x7fd031187042: jnz 0x7fd031187019
    0x7fd031187048: mov 0x20(%rdi), %rdi
    0x7fd03118704c: test %rdi, %rdi
    0x7fd03118704f: jz 0x7fd031187081
    0x7fd031187055: test $0x4, 0x1c(%rdi)
    0x7fd031187059: jz 0x7fd031187081
    0x7fd03118705f: mov 0x58(%rdi), %r8
    0x7fd031187063: mov $0x7fd08c30f670, %r9
    0x7fd03118706d: cmp %r9, 0x18(%r8)
    0x7fd031187071: jnz 0x7fd031187019
    0x7fd031187077: mov $0x1, %eax
    0x7fd03118707c: jmp 0x7fd031187083
    0x7fd031187081: xor %eax, %eax
    0x7fd031187083: pop %rbp
    0x7fd031187084: ret
    span

    View Slide

  90. div> div span Code
    Generated JIT code for CSS Selector JIT
    for "div > div span":
    Code at [0x7fd031187000, 0x7fd0311870a0):
    0x7fd031187000: push %rbp
    0x7fd031187001: mov 0x58(%rdi), %rax
    0x7fd031187005: mov $0x7fd08c30ec50, %rcx
    0x7fd03118700f: cmp %rcx, 0x18(%rax)
    0x7fd031187013: jnz 0x7fd031187081
    0x7fd031187019: mov 0x20(%rdi), %rdi
    0x7fd03118701d: test %rdi, %rdi
    0x7fd031187020: jz 0x7fd031187081
    0x7fd031187026: test $0x4, 0x1c(%rdi)
    0x7fd03118702a: jz 0x7fd031187081
    0x7fd031187030: mov 0x58(%rdi), %rdx
    0x7fd031187034: mov $0x7fd08c30f670, %rsi
    0x7fd03118703e: cmp %rsi, 0x18(%rdx)
    0x7fd031187042: jnz 0x7fd031187019
    0x7fd031187048: mov 0x20(%rdi), %rdi
    0x7fd03118704c: test %rdi, %rdi
    0x7fd03118704f: jz 0x7fd031187081
    0x7fd031187055: test $0x4, 0x1c(%rdi)
    0x7fd031187059: jz 0x7fd031187081
    0x7fd03118705f: mov 0x58(%rdi), %r8
    0x7fd031187063: mov $0x7fd08c30f670, %r9
    0x7fd03118706d: cmp %r9, 0x18(%r8)
    0x7fd031187071: jnz 0x7fd031187019
    0x7fd031187077: mov $0x1, %eax
    0x7fd03118707c: jmp 0x7fd031187083
    0x7fd031187081: xor %eax, %eax
    0x7fd031187083: pop %rbp
    0x7fd031187084: ret
    span
    FAIL

    View Slide

  91. div> div span Code
    Generated JIT code for CSS Selector JIT
    for "div > div span":
    Code at [0x7fd031187000, 0x7fd0311870a0):
    0x7fd031187000: push %rbp
    0x7fd031187001: mov 0x58(%rdi), %rax
    0x7fd031187005: mov $0x7fd08c30ec50, %rcx
    0x7fd03118700f: cmp %rcx, 0x18(%rax)
    0x7fd031187013: jnz 0x7fd031187081
    0x7fd031187019: mov 0x20(%rdi), %rdi
    0x7fd03118701d: test %rdi, %rdi
    0x7fd031187020: jz 0x7fd031187081
    0x7fd031187026: test $0x4, 0x1c(%rdi)
    0x7fd03118702a: jz 0x7fd031187081
    0x7fd031187030: mov 0x58(%rdi), %rdx
    0x7fd031187034: mov $0x7fd08c30f670, %rsi
    0x7fd03118703e: cmp %rsi, 0x18(%rdx)
    0x7fd031187042: jnz 0x7fd031187019
    0x7fd031187048: mov 0x20(%rdi), %rdi
    0x7fd03118704c: test %rdi, %rdi
    0x7fd03118704f: jz 0x7fd031187081
    0x7fd031187055: test $0x4, 0x1c(%rdi)
    0x7fd031187059: jz 0x7fd031187081
    0x7fd03118705f: mov 0x58(%rdi), %r8
    0x7fd031187063: mov $0x7fd08c30f670, %r9
    0x7fd03118706d: cmp %r9, 0x18(%r8)
    0x7fd031187071: jnz 0x7fd031187019
    0x7fd031187077: mov $0x1, %eax
    0x7fd03118707c: jmp 0x7fd031187083
    0x7fd031187081: xor %eax, %eax
    0x7fd031187083: pop %rbp
    0x7fd031187084: ret
    span
    FAIL
    parent
    parent

    View Slide

  92. div> div span Code
    Generated JIT code for CSS Selector JIT
    for "div > div span":
    Code at [0x7fd031187000, 0x7fd0311870a0):
    0x7fd031187000: push %rbp
    0x7fd031187001: mov 0x58(%rdi), %rax
    0x7fd031187005: mov $0x7fd08c30ec50, %rcx
    0x7fd03118700f: cmp %rcx, 0x18(%rax)
    0x7fd031187013: jnz 0x7fd031187081
    0x7fd031187019: mov 0x20(%rdi), %rdi
    0x7fd03118701d: test %rdi, %rdi
    0x7fd031187020: jz 0x7fd031187081
    0x7fd031187026: test $0x4, 0x1c(%rdi)
    0x7fd03118702a: jz 0x7fd031187081
    0x7fd031187030: mov 0x58(%rdi), %rdx
    0x7fd031187034: mov $0x7fd08c30f670, %rsi
    0x7fd03118703e: cmp %rsi, 0x18(%rdx)
    0x7fd031187042: jnz 0x7fd031187019
    0x7fd031187048: mov 0x20(%rdi), %rdi
    0x7fd03118704c: test %rdi, %rdi
    0x7fd03118704f: jz 0x7fd031187081
    0x7fd031187055: test $0x4, 0x1c(%rdi)
    0x7fd031187059: jz 0x7fd031187081
    0x7fd03118705f: mov 0x58(%rdi), %r8
    0x7fd031187063: mov $0x7fd08c30f670, %r9
    0x7fd03118706d: cmp %r9, 0x18(%r8)
    0x7fd031187071: jnz 0x7fd031187019
    0x7fd031187077: mov $0x1, %eax
    0x7fd03118707c: jmp 0x7fd031187083
    0x7fd031187081: xor %eax, %eax
    0x7fd031187083: pop %rbp
    0x7fd031187084: ret
    span
    FAIL
    div
    parent
    parent

    View Slide

  93. div> div span Code
    Generated JIT code for CSS Selector JIT
    for "div > div span":
    Code at [0x7fd031187000, 0x7fd0311870a0):
    0x7fd031187000: push %rbp
    0x7fd031187001: mov 0x58(%rdi), %rax
    0x7fd031187005: mov $0x7fd08c30ec50, %rcx
    0x7fd03118700f: cmp %rcx, 0x18(%rax)
    0x7fd031187013: jnz 0x7fd031187081
    0x7fd031187019: mov 0x20(%rdi), %rdi
    0x7fd03118701d: test %rdi, %rdi
    0x7fd031187020: jz 0x7fd031187081
    0x7fd031187026: test $0x4, 0x1c(%rdi)
    0x7fd03118702a: jz 0x7fd031187081
    0x7fd031187030: mov 0x58(%rdi), %rdx
    0x7fd031187034: mov $0x7fd08c30f670, %rsi
    0x7fd03118703e: cmp %rsi, 0x18(%rdx)
    0x7fd031187042: jnz 0x7fd031187019
    0x7fd031187048: mov 0x20(%rdi), %rdi
    0x7fd03118704c: test %rdi, %rdi
    0x7fd03118704f: jz 0x7fd031187081
    0x7fd031187055: test $0x4, 0x1c(%rdi)
    0x7fd031187059: jz 0x7fd031187081
    0x7fd03118705f: mov 0x58(%rdi), %r8
    0x7fd031187063: mov $0x7fd08c30f670, %r9
    0x7fd03118706d: cmp %r9, 0x18(%r8)
    0x7fd031187071: jnz 0x7fd031187019
    0x7fd031187077: mov $0x1, %eax
    0x7fd03118707c: jmp 0x7fd031187083
    0x7fd031187081: xor %eax, %eax
    0x7fd031187083: pop %rbp
    0x7fd031187084: ret
    span
    FAIL
    div
    div
    parent
    parent

    View Slide

  94. div> div span Code
    Generated JIT code for CSS Selector JIT
    for "div > div span":
    Code at [0x7fd031187000, 0x7fd0311870a0):
    0x7fd031187000: push %rbp
    0x7fd031187001: mov 0x58(%rdi), %rax
    0x7fd031187005: mov $0x7fd08c30ec50, %rcx
    0x7fd03118700f: cmp %rcx, 0x18(%rax)
    0x7fd031187013: jnz 0x7fd031187081
    0x7fd031187019: mov 0x20(%rdi), %rdi
    0x7fd03118701d: test %rdi, %rdi
    0x7fd031187020: jz 0x7fd031187081
    0x7fd031187026: test $0x4, 0x1c(%rdi)
    0x7fd03118702a: jz 0x7fd031187081
    0x7fd031187030: mov 0x58(%rdi), %rdx
    0x7fd031187034: mov $0x7fd08c30f670, %rsi
    0x7fd03118703e: cmp %rsi, 0x18(%rdx)
    0x7fd031187042: jnz 0x7fd031187019
    0x7fd031187048: mov 0x20(%rdi), %rdi
    0x7fd03118704c: test %rdi, %rdi
    0x7fd03118704f: jz 0x7fd031187081
    0x7fd031187055: test $0x4, 0x1c(%rdi)
    0x7fd031187059: jz 0x7fd031187081
    0x7fd03118705f: mov 0x58(%rdi), %r8
    0x7fd031187063: mov $0x7fd08c30f670, %r9
    0x7fd03118706d: cmp %r9, 0x18(%r8)
    0x7fd031187071: jnz 0x7fd031187019
    0x7fd031187077: mov $0x1, %eax
    0x7fd03118707c: jmp 0x7fd031187083
    0x7fd031187081: xor %eax, %eax
    0x7fd031187083: pop %rbp
    0x7fd031187084: ret
    span
    FAIL
    div
    div
    parent
    parent
    SUCCESS

    View Slide

  95. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  96. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  97. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  98. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  99. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  100. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  101. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  102. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  103. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  104. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  105. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul

    View Slide

  106. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul
    Done

    View Slide

  107. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul
    But Ideal
    Backtracking
    is…

    View Slide

  108. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul
    But Ideal
    Backtracking
    is…

    View Slide

  109. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul
    But Ideal
    Backtracking
    is…

    View Slide

  110. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul
    But Ideal
    Backtracking
    is…

    View Slide

  111. More intelligent backtracking
    • Leveraging this static information, provide more
    intelligent backtracking
    – This is my largest contribution to WebKit CSS JIT
    Example 4: ul> li> p span
    span
    li>
    ul>
    p ol span
    li li
    p
    p
    ul
    But Ideal
    Backtracking
    is…

    View Slide

  112. Computing Backtracking height
    • Pre-compute appropriate backtracking height
    Example 4: ul> li> p span
    span
    li>
    ul> p
    pre-tag
    height 0
    2 1 0
    1
    2
    span
    FAIL
    p SUCCESS
    P
    unmatch
    li
    P
    unmatch
    unmatch
    no parent
    save P ul
    no parent
    unmatch
    backtrack with
    saved register

    View Slide

  113. Computing Backtracking height
    • Pre-compute appropriate backtracking height
    Example 4: ul> li> p span
    span
    li>
    ul> p
    pre-tag
    height 0
    2 1 0
    1
    2
    span
    FAIL
    p SUCCESS
    P
    unmatch
    li
    P
    unmatch
    unmatch
    no parent
    P ul
    no parent
    unmatch

    View Slide

  114. Outline
    • Motivation & Goals
    • Existing CSS Selector Implementation
    • CSS Selector JIT
    • Conclusion

    View Slide

  115. Status
    • x64 / ARMv7s / ARMv7 / ARM64 backend
    • More intelligent backtracking is now planned
    – Most of implementation is done
    – Before implementing it, I’ll instrument/profile the
    impact of this
    • Seeing the Safari release branch…
    – Maybe shipped with the next OSX
    – not in iOS8… See you next year, CSS Selector JIT!
    – In iOS 8 beta3! Hello CSS Selector JIT in your iPhone!

    View Slide

  116. Conclusion
    • Selector matching is crucial
    • CSS Selector JIT brings up to the next stage
    – Avoid function calls
    – Store almost all to the registers
    – Provide faster performance
    • Intelligent backtracking
    – Reduces register pressure
    – Avoid unnecessary backtraking

    View Slide