refactor and optimize: now lazy rules are processed in chunks
This commit is contained in:
parent
dc22386599
commit
ef2c8f077d
@ -4,6 +4,7 @@ import { init } from '../theme_data/theme_data_3.service.js'
|
|||||||
import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
|
import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
|
||||||
import { getCssRules } from '../theme_data/css_utils.js'
|
import { getCssRules } from '../theme_data/css_utils.js'
|
||||||
import { defaultState } from '../../modules/config.js'
|
import { defaultState } from '../../modules/config.js'
|
||||||
|
import { chunk } from 'lodash'
|
||||||
|
|
||||||
export const applyTheme = async (input) => {
|
export const applyTheme = async (input) => {
|
||||||
let extraRules
|
let extraRules
|
||||||
@ -43,15 +44,17 @@ export const applyTheme = async (input) => {
|
|||||||
|
|
||||||
body.classList.remove('hidden')
|
body.classList.remove('hidden')
|
||||||
|
|
||||||
setTimeout(() => {
|
// Optimization - instead of processing all lazy rules in one go, process them in small chunks
|
||||||
themes3.lazy().then(lazyRules => {
|
// so that UI can do other things and be somewhat responsive while less important rules are being
|
||||||
const t2 = performance.now()
|
// processed
|
||||||
getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
|
chunk(themes3.lazy, 5).forEach(chunk => {
|
||||||
styleSheet.insertRule(rule, 'index-max')
|
setTimeout(() => {
|
||||||
|
Promise.all(chunk.map(x => x())).then(result => {
|
||||||
|
getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
|
||||||
|
styleSheet.insertRule(rule, 'index-max')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
const t3 = performance.now()
|
}, 50)
|
||||||
console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
return Promise.resolve()
|
return Promise.resolve()
|
||||||
|
@ -148,10 +148,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
|
|||||||
const staticVars = {}
|
const staticVars = {}
|
||||||
const stacked = {}
|
const stacked = {}
|
||||||
const computed = {}
|
const computed = {}
|
||||||
|
const rules = []
|
||||||
const eagerRules = []
|
|
||||||
const lazyRules = []
|
|
||||||
const lazyPromises = []
|
|
||||||
|
|
||||||
const rulesetUnsorted = [
|
const rulesetUnsorted = [
|
||||||
...Object.values(components)
|
...Object.values(components)
|
||||||
@ -188,11 +185,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
|
|||||||
|
|
||||||
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
|
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
|
||||||
|
|
||||||
const processCombination = (combination, rules) => {
|
const processCombination = (combination) => {
|
||||||
const addRule = (rule) => {
|
|
||||||
rules.push(rule)
|
|
||||||
}
|
|
||||||
|
|
||||||
const selector = ruleToSelector(combination, true)
|
const selector = ruleToSelector(combination, true)
|
||||||
const cssSelector = ruleToSelector(combination)
|
const cssSelector = ruleToSelector(combination)
|
||||||
|
|
||||||
@ -377,12 +370,15 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
addRule({
|
const rule = {
|
||||||
dynamicVars,
|
dynamicVars,
|
||||||
selector: cssSelector,
|
selector: cssSelector,
|
||||||
...combination,
|
...combination,
|
||||||
directives: computedDirectives
|
directives: computedDirectives
|
||||||
})
|
}
|
||||||
|
|
||||||
|
rules.push(rule)
|
||||||
|
return rule
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -449,22 +445,19 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
|
|||||||
const t1 = performance.now()
|
const t1 = performance.now()
|
||||||
console.debug('Tree tranveral took ' + (t1 - t0) + ' ms')
|
console.debug('Tree tranveral took ' + (t1 - t0) + ' ms')
|
||||||
|
|
||||||
combinations.forEach((combination) => {
|
const result = combinations.map((combination) => {
|
||||||
if (combination.lazy) {
|
if (combination.lazy) {
|
||||||
lazyPromises.push(async () => processCombination(combination, lazyRules))
|
return async () => processCombination(combination)
|
||||||
} else {
|
} else {
|
||||||
processCombination(combination, eagerRules)
|
return processCombination(combination)
|
||||||
}
|
}
|
||||||
})
|
}).filter(x => x)
|
||||||
const t2 = performance.now()
|
const t2 = performance.now()
|
||||||
console.debug('Eager processing took ' + (t2 - t1) + ' ms')
|
console.debug('Eager processing took ' + (t2 - t1) + ' ms')
|
||||||
|
|
||||||
return {
|
return {
|
||||||
lazy: async () => {
|
lazy: result.filter(x => typeof x === 'function'),
|
||||||
await Promise.all(lazyPromises.map(x => x()))
|
eager: result.filter(x => typeof x !== 'function'),
|
||||||
return lazyRules
|
|
||||||
},
|
|
||||||
eager: eagerRules,
|
|
||||||
staticVars
|
staticVars
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user