Improve rich viewer frontend rendering

Improve TBT by rendering content over bigger time span

Changelog: performance

app/assets/javascripts/vue_shared/components/blob_viewers/constants.js

 export const HIGHLIGHT_CLASS_NAME = 'hll';
+export const MARKUP_FILE_TYPE = 'markup';
+export const MARKUP_CONTENT_SELECTOR = '.js-markup-content';
+export const ELEMENTS_PER_CHUNK = 20;
+export const CONTENT_LOADED_EVENT = 'richContentLoaded';

app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue

@@ -3,7 +3,14 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import { handleBlobRichViewer } from '~/blob/viewer';
 import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
 import { handleLocationHash } from '~/lib/utils/common_utils';
+import { sanitize } from '~/lib/dompurify';
 import ViewerMixin from './mixins';
+import {
+  MARKUP_FILE_TYPE,
+  MARKUP_CONTENT_SELECTOR,
+  ELEMENTS_PER_CHUNK,
+  CONTENT_LOADED_EVENT,
+} from './constants';
 
 export default {
   components: {
@@ -16,21 +23,75 @@ export default {
   data() {
     return {
       isLoading: true,
+      initialContent: null,
+      remainingContent: [],
     };
   },
+  computed: {
+    rawContent() {
+      return this.initialContent || this.richViewer || this.content;
+    },
+    isMarkup() {
+      return this.type === MARKUP_FILE_TYPE;
+    },
+  },
+  created() {
+    this.optimizeMarkupRendering();
+  },
   mounted() {
-    window.requestIdleCallback(async () => {
+    this.renderRemainingMarkup();
+    handleBlobRichViewer(this.$refs.content, this.type);
+    handleLocationHash();
+  },
+  methods: {
+    optimizeMarkupRendering() {
+      /**
+       * If content is markup we optimize rendering by splitting it into two parts:
+       * - initialContent (top section of the file - is rendered right away)
+       * - remainingContent (remaining content - is rendered over a longer time period)
+       *
+       * This is done so that the browser doesn't render the whole file at once (improves TBT)
+       */
+
+      if (!this.isMarkup) return;
+
+      const tmpWrapper = document.createElement('div');
+      tmpWrapper.innerHTML = sanitize(this.rawContent, this.$options.safeHtmlConfig);
+
+      const fileContent = tmpWrapper.querySelector(MARKUP_CONTENT_SELECTOR);
+      if (!fileContent) return;
+
+      const initialContent = [...fileContent.childNodes].slice(0, ELEMENTS_PER_CHUNK);
+      this.remainingContent = [...fileContent.childNodes].slice(ELEMENTS_PER_CHUNK);
+
+      fileContent.innerHTML = '';
+      fileContent.append(...initialContent);
+      this.initialContent = tmpWrapper.outerHTML;
+    },
+    renderRemainingMarkup() {
       /**
-       * Rendering Markdown usually takes long due to the amount of HTML being parsed.
-       * This ensures that content is loaded only when the browser goes into idle.
+       * Rendering large Markdown files can block the main thread due to the amount of HTML being parsed.
+       * The optimization below ensures that content is rendered over a longer time period instead of all at once.
        * More details here: https://gitlab.com/gitlab-org/gitlab/-/issues/331448
        * */
-      this.isLoading = false;
-      await this.$nextTick();
-      handleBlobRichViewer(this.$refs.content, this.type);
-      handleLocationHash();
-      this.$emit('richContentLoaded');
-    });
+
+      if (!this.isMarkup || !this.remainingContent.length) {
+        this.$emit(CONTENT_LOADED_EVENT);
+        return;
+      }
+
+      const fileContent = this.$refs.content.$el.querySelector(MARKUP_CONTENT_SELECTOR);
+
+      for (let i = 0; i < this.remainingContent.length; i += ELEMENTS_PER_CHUNK) {
+        const nextChunkEnd = i + ELEMENTS_PER_CHUNK;
+        const content = this.remainingContent.slice(i, nextChunkEnd);
+        setTimeout(() => {
+          fileContent.append(...content);
+          if (nextChunkEnd < this.remainingContent.length) return;
+          this.$emit(CONTENT_LOADED_EVENT);
+        }, i);
+      }
+    },
   },
   safeHtmlConfig: {
     ADD_TAGS: ['gl-emoji', 'copy-code'],
@@ -38,9 +99,5 @@ export default {
 };
 </script>
 <template>
-  <markdown-field-view
-    v-if="!isLoading"
-    ref="content"
-    v-safe-html:[$options.safeHtmlConfig]="richViewer || content"
-  />
+  <markdown-field-view ref="content" v-safe-html:[$options.safeHtmlConfig]="rawContent" />
 </template>

app/views/projects/blob/viewers/_markup.html.haml

 - blob = viewer.blob
-.file-content.md
+.file-content.js-markup-content.md
   = markup(blob.name, blob.data, viewer.banzai_render_context)

spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js

@@ -3,6 +3,10 @@ import { shallowMount } from '@vue/test-utils';
 import { handleBlobRichViewer } from '~/blob/viewer';
 import RichViewer from '~/vue_shared/components/blob_viewers/rich_viewer.vue';
 import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue';
+import {
+  MARKUP_FILE_TYPE,
+  CONTENT_LOADED_EVENT,
+} from '~/vue_shared/components/blob_viewers/constants';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 
 jest.mock('~/blob/viewer');
@@ -10,10 +14,10 @@ jest.mock('~/lib/utils/common_utils');
 
 describe('Blob Rich Viewer component', () => {
   let wrapper;
-  const content = '<h1 id="markdown">Foo Bar</h1>';
+  const dummyContent = '<h1 id="markdown">Foo Bar</h1>';
   const defaultType = 'markdown';
 
-  function createComponent(type = defaultType, richViewer) {
+  function createComponent(type = defaultType, richViewer, content = dummyContent) {
     wrapper = shallowMount(RichViewer, {
       propsData: {
         richViewer,
@@ -23,26 +27,69 @@ describe('Blob Rich Viewer component', () => {
     });
   }
 
-  beforeEach(() => {
-    const execImmediately = (callback) => callback();
-    jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
+  beforeEach(() => createComponent());
 
-    createComponent();
-  });
+  describe('Markdown content', () => {
+    const generateDummyContent = (contentLength) => {
+      let generatedContent = '';
+      for (let i = 0; i < contentLength; i += 1) {
+        generatedContent += `<span>Line: ${i + 1}</span>\n`;
+      }
+
+      generatedContent += '<img src="x" onerror="alert(`XSS`)">'; // for testing against XSS
+      return `<div class="js-markup-content">${generatedContent}</div>`;
+    };
+
+    describe('Large file', () => {
+      const content = generateDummyContent(50);
+      beforeEach(() => createComponent(MARKUP_FILE_TYPE, null, content));
+
+      it('renders the top of the file immediately and does not emit a content loaded event', () => {
+        expect(wrapper.text()).toContain('Line: 10');
+        expect(wrapper.text()).not.toContain('Line: 50');
+        expect(wrapper.emitted(CONTENT_LOADED_EVENT)).toBeUndefined();
+      });
+
+      it('renders the rest of the file later and emits a content loaded event', () => {
+        jest.runAllTimers();
+
+        expect(wrapper.text()).toContain('Line: 10');
+        expect(wrapper.text()).toContain('Line: 50');
+        expect(wrapper.emitted(CONTENT_LOADED_EVENT)).toHaveLength(1);
+      });
 
-  it('listens to requestIdleCallback', () => {
-    expect(window.requestIdleCallback).toHaveBeenCalled();
+      it('sanitizes the content', () => {
+        jest.runAllTimers();
+
+        expect(wrapper.html()).toContain('<img src="x">');
+      });
+    });
+
+    describe('Small file', () => {
+      const content = generateDummyContent(5);
+      beforeEach(() => createComponent(MARKUP_FILE_TYPE, null, content));
+
+      it('renders the entire file immediately and emits a content loaded event', () => {
+        expect(wrapper.text()).toContain('Line: 5');
+        expect(wrapper.emitted(CONTENT_LOADED_EVENT)).toHaveLength(1);
+      });
+
+      it('sanitizes the content', () => {
+        expect(wrapper.html()).toContain('<img src="x">');
+      });
+    });
   });
 
   it('renders the passed content without transformations', () => {
-    expect(wrapper.html()).toContain(content);
+    expect(wrapper.html()).toContain(dummyContent);
   });
 
-  it('renders the richViewer if one is present', async () => {
+  it('renders the richViewer if one is present and emits a content loaded event', async () => {
     const richViewer = '<div class="js-pdf-viewer"></div>';
     createComponent('pdf', richViewer);
     await nextTick();
     expect(wrapper.html()).toContain(richViewer);
+    expect(wrapper.emitted(CONTENT_LOADED_EVENT)).toHaveLength(1);
   });
 
   it('queries for advanced viewer', () => {

spec/presenters/snippet_blob_presenter_spec.rb

@@ -38,7 +38,7 @@
         let(:blob) { blob_at(file) }
 
         it 'returns rich markdown content' do
-          expect(subject).to include('file-content md')
+          expect(subject).to include('file-content js-markup-content md')
         end
       end