New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 873648 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Oct 16
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Task



Sign in to add a comment

rendering slowed down by `<script type="text/html">` elements

Reported by f...@gmx.net, Aug 13

Issue description

UserAgent: 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:
 
testcase_script.html
306 KB View Download
testcase_div.html
302 KB View Download
Labels: Needs-Triage-M68
Components: Blink>HTML
Cc: hirosh...@chromium.org kouhei@chromium.org
Components: -Blink>HTML Blink>HTML>Script Blink>Loader
Labels: -Type-Bug -Pri-2 -OS-Mac Pri-3 Type-Task
Owner: kouhei@chromium.org
Status: Assigned (was: Unconfirmed)
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.

Comment 5 by f...@gmx.net, 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>`.
Cc: d...@fb.com
Owner: acomminos@fb.com
Status: Started (was: Assigned)
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!
Project Member

Comment 7 by bugdroid1@chromium.org, 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

Status: Fixed (was: Started)

Sign in to add a comment