Opened 6 months ago

Closed 6 months ago

Last modified 2 weeks 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 6 months ago by mjethani

  • Description modified (diff)

comment:2 Changed 6 months ago by abpbot

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

comment:3 Changed 6 months ago by mjethani

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

comment:4 Changed 6 months ago by mjethani

  • Blocking 7000 added

comment:5 Changed 6 weeks ago by abpbot

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

comment:6 Changed 2 weeks ago by ukacar

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