New issue
Advanced search Search tips

Issue 596910 link

Starred by 2 users
Status: Fixed
Owner:
e...@chromium.org
Closed: Mar 2016
Cc:
chrome-perf-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Performance of getClientRects() 3 to 6 times slower when container has letter-spacing specified

Reported by antonio....@gmail.com, Mar 22 2016 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Copy the HTML below

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style>
      .node {
        letter-spacing: 0.5px;
      }
    </style>
  </head>
  <body>
    <div class="node">
    </div>
    <script>
      var node = document.querySelector('.node');
      var text = 'Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.\n\n'.repeat(100);

      node.innerHTML = text;

      function rect(start, end) {
        var documentRange = document.createRange();

        documentRange.setStart(node.firstChild, start);
        documentRange.setEnd(node.firstChild, end);

        return documentRange.getClientRects();
      }

      setTimeout(function () {
        var date = new Date();
        for (var i = 0; i < 100; i++) {
          rect(i * 30, i * 30 + 1);
          rect(i * 30, i * 30 + 2);
          rect(i * 30, i * 30 + 3);
          rect(i * 30, i * 30 + 4);
          rect(i * 30, i * 30 + 5);
        }
        alert(new Date() - date);
      }, 1500);
    </script>
  </body>
</html>

2. Run the page in Chrome 47 and Chrome 49 and you will see big performance difference
3. Remove the letter-spacing property and see the performance in Chrome 47 and Chrome 49 becoming equal

What is the expected behavior?
The performance in both browser version to be equal.

What went wrong?
You could expect to see between 3 to 6 times slower performance in Chrome 49.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes In Chrome 47. Haven't tested Chrome 48.

Does this work in other browsers? Yes 

Chrome version: 49.0.2623.87  Channel: stable
OS Version: OS X 10.9.5
Flash Version: Shockwave Flash 21.0 r0

Comment 1 by tkent@chromium.org, Mar 23 2016

Components: -Blink Blink>Layout
Labels: Performance

Comment 2 by e...@chromium.org, Mar 23 2016

Owner: e...@chromium.org
Status: Fixed (was: Unconfirmed)
Chrome 49 switches the default text path to the higher quality complex one which has about the same performance characteristics. The big difference though is that using letter spacing disables one of the optimizations, resulting in the performance difference you've observed.

The good news is that this has been fixed (in r381137 [1]), the bad news is that it'll be a release or two until it hits the stable channel.

1: https://blink.lc/chromium/commit/third_party/WebKit?id=dcc13470a445d27e0d1722799f8ab780be8c90a1

Thank you for your very detailed bug report, I appreciate all the work you put into it.

Comment 3 by antonio....@gmail.com, Mar 23 2016 

Thanks for the good news! I am glad this is fixed and will hit stable after some time. :)

Comment 4 by e...@chromium.org, Mar 23 2016 

Thanks! You might want to grab a canary build to verify that it performs as well as expected. Never hurts to make sure.

Comment 5 by antonio....@gmail.com, Mar 24 2016 

I have tested in Canary and everything works perfectly. Thanks!
►

Sign in to add a comment