mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-19 17:55:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: add performance marker to monitor the needed time for rendering

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-07-05 21:30:13 +02:00
parent a303bb261f
commit 354700e973
4 changed files with 83 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/common/html-to-react/html-to-react.tsx
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { measurePerformance } from '../../../utils/measure-performance'
import type { ParserOptions } from '@hedgedoc/html-to-react'
import { convertHtmlToReact } from '@hedgedoc/html-to-react'
import type DOMPurify from 'dompurify'
@ -24,8 +25,12 @@ export interface HtmlToReactProps {
*/
export const HtmlToReact: React.FC<HtmlToReactProps> = ({ htmlCode, domPurifyConfig, parserOptions }) => {
const elements = useMemo(() => {
const sanitizedHtmlCode = sanitize(htmlCode, { ...domPurifyConfig, RETURN_DOM_FRAGMENT: false, RETURN_DOM: false })
return convertHtmlToReact(sanitizedHtmlCode, parserOptions)
const sanitizedHtmlCode = measurePerformance('html-to-react: sanitize', () => {
return sanitize(htmlCode, { ...domPurifyConfig, RETURN_DOM_FRAGMENT: false, RETURN_DOM: false })
})
return measurePerformance('html-to-react: convertHtmlToReact', () => {
return convertHtmlToReact(sanitizedHtmlCode, parserOptions)
})
}, [domPurifyConfig, htmlCode, parserOptions])
return <Fragment>{elements}</Fragment>

11
frontend/src/components/markdown-renderer/markdown-to-react/markdown-to-react.tsx
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { measurePerformance } from '../../../utils/measure-performance'
import { HtmlToReact } from '../../common/html-to-react/html-to-react'
import type { MarkdownRendererExtension } from '../extensions/_base-classes/markdown-renderer-extension'
import { useCombinedNodePreprocessor } from './hooks/use-combined-node-preprocessor'
@ -43,7 +44,9 @@ export const MarkdownToReact: React.FC<MarkdownToReactProps> = ({
}, [nodeToReactTransformer, markdownRenderExtensions])
useMemo(() => {
nodeToReactTransformer.setLineIds(lineNumberMapper.updateLineMapping(markdownContentLines))
measurePerformance('markdown-to-react: update-line-mapping', () => {
nodeToReactTransformer.setLineIds(lineNumberMapper.updateLineMapping(markdownContentLines))
})
}, [nodeToReactTransformer, lineNumberMapper, markdownContentLines])
const nodePreProcessor = useCombinedNodePreprocessor(markdownRenderExtensions)
@ -60,7 +63,11 @@ export const MarkdownToReact: React.FC<MarkdownToReactProps> = ({
[nodeToReactTransformer, nodePreProcessor]
)
const html = useMemo(() => markdownIt.render(markdownContentLines.join('\n')), [markdownContentLines, markdownIt])
const html = useMemo(() => {
return measurePerformance('markdown-to-react: markdown-it', () =>
markdownIt.render(markdownContentLines.join('\n'))
)
}, [markdownContentLines, markdownIt])
const domPurifyConfig: DOMPurify.Config = useMemo(
() => ({
ADD_TAGS: markdownRenderExtensions.flatMap((extension) => extension.buildTagNameAllowList())