refactor and optimize: now lazy rules are processed in chunks

This commit is contained in:
Henry Jameson 2024-02-27 00:07:45 +02:00
parent dc22386599
commit ef2c8f077d
2 changed files with 24 additions and 28 deletions

View File

@ -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()

View File

@ -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
} }
} }