getBoundingClientRect and getComputedStyle performance issues

Issue #15695897 • Assigned to Travis L.

Details

Author
Antanas
Created
Jan 30, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

MS Edge performance of getBoundingClientRect and getComputedStyle
methods is significantly worse compared to other browsers. This is visible on heavily styled and complex DOM structure sites e.g. Facebook which is really important to the browser extensions.

// following test code can be used in facebook login/registration page
// and any other sites by changing document.getElementById("email") part
// to select any other element
 
var element = document.getElementById("email");
var now, then, time, min, max, i;

min = 0;  max = 0;  i = 1000;
time = performance.now();
while (i--) {
  then = performance.now();
  element.getBoundingClientRect();
  now = performance.now() - then;
  min = now < min || min === 0 ? now : min;
  max = now > max ? now : max;
}
time = performance.now() - time;

console.log(`
  getBoundingClientRect
  whole time:   ${time}
  average time: ${time / 1000}
  minimum time: ${min}
  maximum time: ${max}
`); 

min = 0;  max = 0;  i = 1000;
time = performance.now();
while (i--) {
  then = performance.now();
  getComputedStyle(element);
  now = performance.now() - then;
  min = now < min || min === 0 ? now : min;
  max = now > max ? now : max;
}
time = performance.now() - time;

console.log(`
  getComputedStyle
  whole time:   ${time}
  average time: ${time / 1000}
  minimum time: ${min}
  maximum time: ${max}
`);
MICROSOFT EDGE 41.16299.15.0
MICROSOFT EDGEHTML 16.16299
getBoundingClientRect
whole time:   197.43988302225443
average time: 0.19743988302225443
minimum time: 0.07986926016383222
maximum time: 23.860173500608653

getComputedStyle
whole time:   37.00020274504459
average time: 0.03700020274504459
minimum time: 0.01996731504186755
maximum time: 2.1399585908602603


OPERA Verison 50.0.2762.67
getBoundingClientRect
whole time:   17.60000002104789
average time: 0.01760000002104789
minimum time: 0
maximum time: 0.4000000189989805

getComputedStyle
whole time:   4.799999878741801
average time: 0.004799999878741801
minimum time: 0
maximum time: 0.2999999560415745

FIREFOX Version 58.0.1
getBoundingClientRect
whole time:   9.019999999998618
average time: 0.009019999999998618
minimum time: 0
maximum time: 0.040000000000873115

getComputedStyle
whole time:   6.819999999999709
average time: 0.006819999999999709
minimum time: 0
maximum time: 0.07999999999992724


GOOGLE CHROME Version 64.0.3282.119
getBoundingClientRect
whole time:   9.799999999813735
average time: 0.009799999999813735
minimum time: 0
maximum time: 0.20000000949949026

getComputedStyle
whole time:   3.8999998942017555
average time: 0.0038999998942017555
minimum time: 0
maximum time: 0.19999989308416843

This might not look like a big difference as it’s milliseconds however on overage these methods are about 10 times slower compared to other browsers and when it comes to browser extensions which use these methods they can drastically reduce page performance which is not the case on other browsers.

Tested on virtual machine: Windows Pro 10
Intel® Xeon® X5650 @ 2.67 GHz, 4 GB RAM

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Steps to Reproduce

      Changed Assigned To to “Travis L.”

    • Has this ever been resolved? We rely heavily on this functionality and we can’t show our svgs to edge users.

    You need to sign in to your Microsoft account to add a comment.

    Sign in