Speed up job log rendering
What does this MR do?
Speed up job log rendering when job_log_json feature enabled (it defaults to true).
Sample with 6000 lines showed improvement from 20s to <2s!
| before | after |
|---|---|
 |
 |
Previously we used the job_log.vue component, which had a single v-html for the code block.
Perf test
Measured with 4x CPU slowdown, checked the large JS block starting after FCP (where there's layout shift block in red) and the layout after it has finished (purple block on the right)
Added this to add some lines to local:
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index 6193d8d34ab..5aca5c2b549 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -24,6 +24,12 @@ export default {
state.traceState = log.state;
}
+ Array(10)
+ .fill()
+ .forEach(() => {
+ log.lines.push(...log.lines);
+ });
+
if (log.append) {
if (isNewJobLogActive()) {
state.trace = log.lines ? updateIncrementalTrace(log.lines, state.trace) : state.trace;Then loaded http://127.0.0.1:3000/flightjs/flight/-/jobs/475 (job originally had 6 lines, after this it had a few thousand). Using the vue template it did have thousands of 'missing key' warnings though, which could possibly affect the results. I don't think it should have a very major effect though.