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/

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