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

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