Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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/

09b5a917b6ea8928e0d5bf8a432412fe?s=128

Yusuke SUZUKI

July 14, 2014
Tweet

Transcript

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

    Suzuki Twitter: @Constellation <utatane.tea@gmail.com>
  2. Outline • Motivation & Goals • Existing CSS Selector Implementation

    • CSS Selector JIT • Conclusion
  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
  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
  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
  6. Goals • Provide faster selector matching – Make style resolution

    faster – Make JS code using QuerySelector faster
  7. Outline • Motivation & Goals • Existing CSS Selector Implementation

    • CSS Selector JIT • Conclusion
  8. Existing CSS Selector Implementation • Highly tuned C++ implementation (WebKit/Blink)

    • SelectorChecker::match • SelectorChecker::matchRecursively • SelectorChecker::checkOne • … recursively call markRecursively (backtracking is needed)
  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
  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
  11. Evaluation Example: Matched • body div span case span div

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    body section div span p h3 section body section div p span div Failed
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  64. Outline • Motivation & Goals • Existing CSS Selector Implementation

    • CSS Selector JIT • Conclusion
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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)
  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)
  78. Compiling machine code • Storing backtracking element to one register

    Example 2: div> div> div span
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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…
  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…
  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…
  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…
  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…
  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
  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
  114. Outline • Motivation & Goals • Existing CSS Selector Implementation

    • CSS Selector JIT • Conclusion
  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!
  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