Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

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 • 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

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

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

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

Slide 64

Slide 64 text

Outline • Motivation & Goals • Existing CSS Selector Implementation • CSS Selector JIT • 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

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 67

Slide 67 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 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 span FAIL SUCCESS unmatch

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 unmatch Parent

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 no parent Parent

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 div SUCCESS unmatch no parent 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 div SUCCESS unmatch no parent Parent unmatch

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 unmatch 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 no parent Parent unmatch Parent

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 no parent Parent unmatch Parent div

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 div unmatch (current register is already suitable)

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 unmatch (current register is already suitable)

Slide 78

Slide 78 text

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

Slide 79

Slide 79 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 80

Slide 80 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 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 save P

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 P no parent

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 div no parent

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 div no parent unmatch backtrack with saved register

Slide 85

Slide 85 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 86

Slide 86 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 87

Slide 87 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 88

Slide 88 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 89

Slide 89 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 90

Slide 90 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 91

Slide 91 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 92

Slide 92 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 93

Slide 93 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 94

Slide 94 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 95

Slide 95 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 96

Slide 96 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 97

Slide 97 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 98

Slide 98 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 99

Slide 99 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 100

Slide 100 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 101

Slide 101 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 102

Slide 102 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 103

Slide 103 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 104

Slide 104 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 105

Slide 105 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 106

Slide 106 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 107

Slide 107 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 108

Slide 108 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 109

Slide 109 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 110

Slide 110 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 111

Slide 111 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 112

Slide 112 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 113

Slide 113 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 114

Slide 114 text

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

Slide 115

Slide 115 text

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!

Slide 116

Slide 116 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