Opened 13 months ago

Closed 13 months ago

Last modified 8 months ago

#6989 closed change (fixed)

Optimize CSS rule generation

Reported by: mjethani Assignee: mjethani
Priority: P2 Milestone:
Module: Core Keywords:
Cc: Blocked By:
Blocking: #7000 Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Unknown Verified working: yes
Review URL(s):

https://codereview.adblockplus.org/29892563/

Description (last modified by mjethani)

Background

I ran the profiler in DevTools, opened 50 tabs with example.com, and looked at the results. The extension is spending up to 20% of its time in the createStyleSheet function. This is one of the hottest hotspots right now.

After digging a little deeper, I found that most of the time is in fact spent in joining the array of selectors. We should just stop using Array.prototype.join and build the CSS rule ourselves using string concatenation. In my tests, with an alternative implementation, I was able to reduce the amount of time spent in the createStyleSheet function by approximately one-third.

What to change

Reimplement createStyleSheet without using Array.prototype.join.

Hints for testers

The change here is covered by unit tests, there should be nothing to test in the extension.

Change History (6)

comment:1 Changed 13 months ago by mjethani

  • Description modified (diff)

comment:2 Changed 13 months ago by abpbot

A commit referencing this issue has landed:
Issue 6989 - Optimize CSS rule generation

comment:3 Changed 13 months ago by mjethani

  • Description modified (diff)
  • Resolution set to fixed
  • Status changed from new to closed

comment:4 Changed 13 months ago by mjethani

  • Blocking 7000 added

comment:5 Changed 9 months ago by abpbot

A commit referencing this issue has landed:
Issue 6989 - Optimize CSS rule generation

comment:6 Changed 8 months ago by ukacar

  • Verified working set
Note: See TracTickets for help on using tickets.