rendering slowed down by `<script type="text/html">` elements
Reported by
f...@gmx.net,
Aug 13
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 Steps to reproduce the problem: 1. create a large number of HTML elements with `<script type="text/html">` elements as child elements (see attached `testcase_script.html`) 2. observe noticeable rendering delay in Chrome (not in other browsers though) 3. replace `<script>` elements with corresponding `<div>` elements 4. observe rendering no longer being noticeably delayed Profiling with Chrome's own dev tools, rendering takes 450 ms (`testcase_script.html`) vs. 150 ms (`testcase_div.html`). The effect appears to be exacerbated by more complex DOM structures: In our application, the rendering delay amounted to 1.5 s with only 500 elements, though I have been unable to create a reduced test case for this. What is the expected behavior? What went wrong? rendering is unexpectedly slow Did this work before? N/A Does this work in other browsers? Yes Chrome version: 68.0.3440.106 Channel: stable OS Version: OS X 10.13.6 Flash Version:
,
Aug 14
,
Aug 16
,
Aug 17
assign kouhei@ as a loading && script expert. I do not think <script type="text/html"> is a practical use-case, but if the same issue happens on other types, that can be a real problem. It's very common to write GL shaders in a script tag that has a non-standard type, because we can easily embed shader source code in such a way and pass it as a string to the WebGL to compile it. See https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ But, I think this is still a low-priority issue.
,
Aug 17
FWIW, `<script type="text/html">` originated in the pre-HTML5 era: https://www.html5rocks.com/en/tutorials/webcomponents/template/#toc-overloadingscript It's still being used for browsers that don't support `<template>`.
,
Sep 27
From my analysis, this is primarily caused by script start tokens causing a background tokenizer flush and parser yield, which does a lot of thrashing on the message loop. This makes sense for JavaScript, but not for script elements which won't be executed in the first place (and thus don't require a yield for quicker renders). I've posted a patch that avoids this behaviour for script types that ScriptLoader deems invalid for execution via HTMLTreeBuilderSimulator. This reduces the amount of time it takes for DOMContentLoaded in the script attachment from 367ms to 208ms, similar to the div attachment's 209ms on my machine. https://chromium-review.googlesource.com/c/chromium/src/+/1247230 Thanks!
,
Oct 2
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/174813503285a1ff88efe4fcb8775df6663fa371 commit 174813503285a1ff88efe4fcb8775df6663fa371 Author: Andrew Comminos <acomminos@fb.com> Date: Tue Oct 02 04:16:23 2018 Only flush tokenized chunks to the HTML parser for valid script types. Having a large amount of <script> tags on a page with an invalid type for execution (e.g. text/html) triggers the same path for event loop yielding as JavaScript tags, causing slowness due to parser yields and unnecessarily aggressive chunking. Avoid performing this logic if the ScriptLoader can't recognize the script type. This reduces the amount of time it takes for DOMContentLoaded in the script attachment for issue 873648 from 367ms to 208ms, similar to the div attachment's 209ms. R=kouhei@chromium.org Bug: 873648 Change-Id: I4c7ea76feb2034f5ff97fe08b481c790b9a35122 Reviewed-on: https://chromium-review.googlesource.com/1247230 Reviewed-by: Kouhei Ueno <kouhei@chromium.org> Commit-Queue: Kouhei Ueno <kouhei@chromium.org> Cr-Commit-Position: refs/heads/master@{#595719} [modify] https://crrev.com/174813503285a1ff88efe4fcb8775df6663fa371/third_party/blink/renderer/core/html/parser/background_html_parser.cc [modify] https://crrev.com/174813503285a1ff88efe4fcb8775df6663fa371/third_party/blink/renderer/core/html/parser/html_tree_builder_simulator.cc [modify] https://crrev.com/174813503285a1ff88efe4fcb8775df6663fa371/third_party/blink/renderer/core/html/parser/html_tree_builder_simulator.h [modify] https://crrev.com/174813503285a1ff88efe4fcb8775df6663fa371/third_party/blink/renderer/core/html/parser/html_tree_builder_simulator_test.cc
,
Oct 16
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by swarnasree.mukkala@chromium.org
, Aug 13