2

For CSS filters, would there be any difference is the browser's speed to process saturate(2) as compared to any of the following:

saturate(100)
saturate(1000)
saturate(9999)
saturate(56.789)
saturate(0.001)
saturate(0.1)
saturate(0.5)
saturate(0.6789)

I am just using saturate as an example here. Interested in learning the answer for all CSS filters.

RockPaperLz- Mask it or Casket
  • 5,361
  • 10
  • 45
  • 69
  • I don't think so, at the end its a matrix calculation and not a loop based on the number so the complexity should be O(1) – Temani Afif Dec 23 '20 at 19:38
  • @TemaniAfif When I wrote this question, I was thinking you would likely be the best person to provide a quality answer! As you mention, if it's just a matrix calculation, the values shouldn't impact performance. But from you answer to my other CSS filter question, I quickly learned that you know much more about CSS filters than I do... at least at this moment! ;) – RockPaperLz- Mask it or Casket Dec 23 '20 at 20:08
  • 1
    Well, we all start somewhere and we learn for each others ;) – Temani Afif Dec 23 '20 at 20:11
  • @TemaniAfif Exactly... which is why I appreciate your help and insight so much. You really blew me away with your answer to my other question. I learned so much from it. – RockPaperLz- Mask it or Casket Dec 23 '20 at 20:12

1 Answers1

1

I would say no since a filter is a matrix multiplication that transform RGB values so its complexity is O(1) considering the filter setting as a variable (applied to the same image)

Only the size of the image should affect the speed since we need to proceed all the pixels so the more pixel we have the more time we need. In this case we have a complexity of O(n)

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • The sentence you wrote regarding the size of the image is an unexpected bonus. Thank you so much! It indicates that it is best to apply filters to smaller elements. What's interesting, is that some popular browser extensions, like Dark Reader, have modes in which they apply a filter to the entire HTML page. I wonder if the browser has some way to optimize for this type of case, as performance is not impacted as much as one would expect. – RockPaperLz- Mask it or Casket Dec 27 '20 at 14:37
  • @RockPaperLz-MaskitorCasket there is for sure some optimization but we need to dig more in depth to understand. Actually I wrote a very simplified answer and I am pretty sure it's more complex behind. If you want to gather more answers, you may consider adding a bounty ;) – Temani Afif Dec 27 '20 at 15:16