### the branch: pefrormance-analysis but we have a short summary, with open conclusion, basically the ground to discussion the main suspect is `elementFromHtml` module. we assumed that the main user of these module is `particleContent`, coz this guy calls other transformations. so we decided to wrap every call of `particleContent` by improvised `measurer` function: ``` const measurer = (fn, name) => (...args) => { if (__BROWSER__) { performance.mark(`${name}-a`) const result = fn(...args) performance.mark(`${name}-b`) performance.measure(`${name}`, `${name}-a`, `${name}-b`) return result } else return fn(...args) } ``` these measurer provide us some information, which can be extracted by `performance.getEntriesByType('measure')` # now the facts. #### in the diabetes article we mostly parse spans ``` res = {} performance.getEntriesByType(`measure`).forEach(({name}) =>{ res[name] = (res[name]||0) + 1 }) console.log(res) ``` ![](https://i.imgur.com/mCUzsIj.png) #### if we sort it by duration we can see that span`s are in the top ``` performance.getEntriesByType(`measure`).sort((a,b) => b.duration-a.duration) ``` ![](https://i.imgur.com/2vuIFih.jpg) #### let's calculate how much time tool all transformations ``` performance.getEntriesByType(`measure`).reduce((acc, item) => {return acc += item.duration}, 0) ``` ![](https://i.imgur.com/Yk7RMAM.png) #### if we remove all transformation logic from `span` we have drastically smaller number ![](https://i.imgur.com/6jKQAmV.png) # but #### if we get the time of the whole process (roughly) of parcing the article, and see how long it takes *with* `span` ``` var a = performance.getEntriesByType(`measure`).sort((a,b) => a.startTime-b.startTime) console.log(a[a.length-1].startTime - a[0].startTime) ``` ![](https://i.imgur.com/fdwv2W3.png) #### compare with same process but w/o `span` ![](https://i.imgur.com/T43uYwe.png) as you can see it's only twice faster. so the dependency is not linear ## lets compare amount of calls to our main suspect - `elementFromHtml` and the time of whole process ``` a - is the summ amount of calls lol - object with all the callers (the first function in the call stack) ``` #### this is with the `span` ![](https://i.imgur.com/nnoHGom.png) #### this is without ![](https://i.imgur.com/zkt5Nfe.png) as you can see we drastically reduced a load from the `elementFromHtml` but time wasn't reduced accordingly. ``` 288/36 = 8 4756/2266 = 2 ``` ## those were the facts, we'd like to discuss the conclusion together or spend more time on it