Tweet
Tweet

Slide 1

Slide 1 text

CSS JIT: Just-in-Time Compiled CSS Selectors in WebKit Yusuke Suzuki Twitter: @Constellation

Slide 2

Slide 2 text

Outline • Motivation & Goals • Existing CSS Selector Implementation • CSS Selector JIT • Evaluation • Conclusion

Slide 3

Slide 3 text

Motivation • Web Browser is highly CPU intensive Application • CSS Selector is executed frequently – CSS Selector matching is one of the major bottleneck • 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

Slide 4

Slide 4 text

Motivation • Web Browser is highly CPU intensive Application • CSS Selector is executed frequently – CSS Selector matching is one of the major bottleneck • 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Outline • Motivation & Goals • Existing CSS Selector Implementation • CSS Selector JIT • Evaluation • Conclusion

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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 Because…

Slide 61

Slide 61 text

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 Because…

Slide 62

Slide 62 text

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 Because…

Slide 63

Slide 63 text

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 Because… Candidates become less

Slide 64

Slide 64 text

Outline • Motivation & Goals • Existing CSS Selector Implementation • CSS Selector JIT • Evaluation • Conclusion

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Observations • After moving to the next descendant selector, never return to the previous selector – Saving the current execution context over descendant selectors is not necessary • When child selector fails, always starts from the closest descendant selector – Information to perform backtracking is highly limited • DOM Node matching starts with

Slide 67

Slide 67 text

Design • Compile CSS Selector into State Machine • Move over states by x86 jmp – In C++ implementation, recursive function call is used – Avoid functions calls • Store almost all data in registers – Current Element – Backtracking target Element – Others

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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)

Slide 79

Slide 79 text

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)

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 91

Slide 91 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 92

Slide 92 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 93

Slide 93 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 94

Slide 94 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 95

Slide 95 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 96

Slide 96 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 97

Slide 97 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 98

Slide 98 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 99

Slide 99 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 100

Slide 100 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 101

Slide 101 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 102

Slide 102 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 103

Slide 103 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 104

Slide 104 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 105

Slide 105 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 106

Slide 106 text

Evaluation Flow Example Example 4: body> div> div span span FAIL div SUCCESS P unmatch div P unmatch unmatch no parent save P body no parent unmatch backtrack with saved register div div span body div div Element register Backtracking register Instruction pointer In JIT code

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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…

Slide 127

Slide 127 text

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…

Slide 128

Slide 128 text

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…

Slide 129

Slide 129 text

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…

Slide 130

Slide 130 text

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…

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

Implementation Status • Almost all selectors are already supported – Indirect/direct adjacent – ::pseudo-element – :visited – :matches(…, nested complex selector) (Selectors Level4) – :not(…, nested complex selectors) (ditto) • They are highly used in some user extensions – Etc.

Slide 134

Slide 134 text

Outline • Motivation & Goals • Existing CSS Selector Implementation • CSS Selector JIT • Evaluation • Conclusion

Slide 135

Slide 135 text

Experimental Setup • MacBook Pro Late 2011 – 4 cores Intel Core i7 2860QM CPU @ 2.50GHz – 8GB RAM • Softwares – OSX Yosemite 64bit – WebKit revision 181499 • Benchmarks – Dromaeo cssquery tests in WebKit PerformanceTests • Dromaeo/cssquery-dojo.html • Dromaeo/cssquery-jquery.html • Dromaeo/cssquery-prototype.html • Schemes – CSS JIT / baseline – To give a fair comparison, I’ve created the patch that enables some pruning paths in baseline • In the latest WebKit, there’s a little pruning path which is only enabled in CSS JIT enabled • https://bugs.webkit.org/show_bug.cgi?id=142703

Slide 136

Slide 136 text

Evaluation – cssquery-dojo – Relative improvements • Except for fast-path case, 3.071x faster on average – This result is very early report, I’ll re-investigate carefully • Some selectors doesn’t show any improvement – They’re simple enough to use specialized (non-JIT) path 1.009 3.148 2.998 3.227 1.025 3.147 0.975 3.225 2.942 3.035 3.183 3.099 3.116 1.739 0.969 3.217 4.758 3.136 0.993 3.158 3.123 1.753 4.985 1.008 3.185 0.971 3.961 1.003 1.734 1.003 1.738 0.975 3.032 0.000 1.000 2.000 3.000 4.000 5.000 6.000 body div + div div > div div div div div .dialog div[class^=dia] div.character, div.dialog div[class=dialog] #scene1 #speech1 div[class] div[class*=sce] div div div[class~=dialog] div:nth-child(odd) div.scene div.dialog div:only-child div, div, div div[class$=log] .dialog div:last-child div ~ div div:nth-child(even) div:nth-child(n) div div:first-child #speech5 div, a, span div[class|=dialog] div:nth-child(2n+1) * div:nth-child(2n) div.dialog body div cssquery-dojo Relative Improvements

Slide 137

Slide 137 text

Evaluation – cssquery-dojo – runs/s • CSS JIT shows significant improvements • Specialized (highly simple) non-JIT selectors show the same results 0 5000 10000 15000 20000 25000 30000 35000 40000 45000 50000 body div + div div > div div div div div .dialog div[class^=dia] div.character, div.dialog div[class=dialog] #scene1 #speech1 div[class] div[class*=sce] div div div[class~=dialog] div:nth-child(odd) div.scene div.dialog div:only-child div, div, div div[class$=log] .dialog div:last-child div ~ div div:nth-child(even) div:nth-child(n) div div:first-child #speech5 div, a, span div[class|=dialog] div:nth-child(2n+1) * div:nth-child(2n) div.dialog body div cssquery-dojo runs/s baseline CSSJIT

Slide 138

Slide 138 text

Evaluation – cssquery-jquery – Relative improvements • Overall significant improvements 3.965 4.064 3.541 1.862 1.807 1.005 3.650 0.949 3.929 3.692 3.571 3.980 3.926 3.567 4.046 0.972 3.850 3.935 3.892 1.809 3.945 4.228 3.716 5.594 3.976 0.967 3.947 3.660 3.616 1.802 3.955 3.939 4.004 5.471 6.118 0.987 0.000 1.000 2.000 3.000 4.000 5.000 6.000 7.000 div[class|=dialog] div#scene1 div.dialog div body div div:nth-child(2n+1) div:nth-child(2n) * div #speech5 body div + div div > div div .dialog div div div div[class$=log] #scene1 #speech1 div[class=dialog] .dialog div[class*=sce] div.dialog div[class~=dialog] div:nth-child(odd) div:only-child div, a, span div div div, div, div div[class^=dia] #speech5 div:last-child div ~ div div[class] div:nth-child(even) div:first-child div#speech5 div.scene div.dialog div.character, div.dialog div:nth-child(n) div cssquery-jquery Relative Improvements

Slide 139

Slide 139 text

Evaluation – cssquery-prototype – Relative improvements • Overall significant improvements 3.989 5.438 4.017 4.033 1.810 0.996 1.804 4.038 3.604 3.950 4.032 3.900 6.501 3.846 3.802 1.009 1.810 3.588 4.017 1.808 3.648 3.892 4.006 3.950 5.838 3.921 1.017 4.062 3.658 3.703 4.029 3.956 3.857 4.715 1.009 3.932 0.000 1.000 2.000 3.000 4.000 5.000 6.000 7.000 div:first-child div.character, div.dialog div[class~=dialog] div div div div:nth-child(even) .dialog div:nth-child(2n+1) div.scene div.dialog div .dialog div:only-child div[class|=dialog] div + div div:nth-child(n) div ~ div div[class] div div:nth-child(odd) #scene1 #speech1 div[class^=dia] div:nth-child(2n) div #speech5 div div div[class=dialog] div[class*=sce] div, div, div div#speech5 * div#scene1 div.dialog div #speech5 body div div.dialog div:last-child div > div div, a, span body div[class$=log] cssquery-prototype Relative Improvements

Slide 140

Slide 140 text

Outline • Motivation & Goals • Existing CSS Selector Implementation • CSS Selector JIT • Evaluation • Conclusion

Slide 141

Slide 141 text

Shipment Status • x64 / ARMv7s / ARMv7 / ARM64 backend • Already shipped in iOS8 – And more optimizations are coming in the next release

Slide 142

Slide 142 text

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