Use transparent PNG instead of opacity for overlay background to gain rendering performance

Tagging.

@Dries :

1/ I hesitated, but seems logical.

2/ Let's do this.

3/ As I explained, this is not an IE6 hack. This affects all browsers performances.
And in fact, using background image can feel less hacky in a way, since instead of :

  // Standard browsers
  opacity: 0.85;
  // IE6, IE7 and IE8 hack :
  filter: alpha(opacity=85);

We do :

  // All browsers
  background: transparent url(images/background.png) repeat;

The only "hack" is to support IE6 specifically :

* html .ui-widget-overlay {
  // IE6 specific
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='modules/overlay/images/background.png', sizingMethod='scale');
  background: none;
}

I have numbers. Using a rough testing snippet (Sorry it's ugly, but useful) :

(function ($) {
Drupal.behaviors.testOverlay = {
  attach: function (context, settings) {
    if (this.processed) {
      return;
    }
    this.processed = true;
    
    // Window resizing
    var testResize = function() {
      window.resizeTo(300, 300);
      window.scroll(0, 0);
      var start = (new Date).getTime();
      var size = 300;
      var interval = setInterval(function() {
        if (size >= 800) {
          clearInterval(interval);
          var diff = (new Date).getTime() - start;
          alert(diff);
        }
        size = size + 10;
        window.resizeTo(size,size);
      }, 10);
    };
    
    // Window scrolling
    var testScroll = function() {
      window.resizeTo(1000, 1000);
      window.scroll(0, 0);
      var start = (new Date).getTime();
      var size = 0;
      var interval = setInterval(function() {
        if (size >= 1200) {
          clearInterval(interval);
          var diff = (new Date).getTime() - start;
          alert(diff);
        }
        size = size + 10;
        window.scroll(0, size);
      }, 10);
    };
    
    // Launch test
    $('#toolbar').click(function() {
      //testResize();
      testScroll();
    });
  }
};
})(jQuery);

I got these results :

Results pattern :

Browser :
WITH PATCH or WITHOUT PATCH : min value / max value = average value
GAIN / LOSS difference in percentage

- Window resizing :

Firefox :
WITHOUT : 2155 / 2452 = 2303,5
WITH : 1760 / 2060 = 1910
GAIN : 120%

IE8 :
WITHOUT : 5668 / 5978 = 5823
WITH : 2634 / 2864 = 2749
GAIN : 211%

IE6 :
WITHOUT : 12828 / 13209 = 13018,5
WITH : 3795 / 3905 = 3850
GAIN : 338%

- Scrolling results :

Firefox :
WITHOUT : 2113 / 2090 = 2104,5
WITH : 1501 / 1509 = 1505
GAIN : 139%

Safari :
WITHOUT : 8554 / 8615 = 8584,5
WITH : 5850 / 5864 = 5857
GAIN: 146%

IE8 :
WITHOUT : 6779 / 6830 = 6804,5
WITH : 8422 / 8943 = 8682,5
GAIN : 78% (performance loss)

IE7 :
WITHOUT : 7330 / 7350 = 7340
WITH : 9794 / 9814 = 9804
GAIN : 75% (performance loss)

IE6 :
WITHOUT : 1322 / 1352 = 1337
WITH : 1482 / 1513 = 1497,5
GAIN : 89% (performance loss)

I could not test resize in IE7 from IETester and Safari since they both do not allow window resizing using javascript.

So overall this is a performance gain, although it seems to impact performance negatively for IE on scrolling.
Otherwise, all browsers see performance improvements in all situations.

At least we have concrete data !

I attached an updated patch according to Dries suggestions and a minimized png image.
background.png should go in modules/overlay/images.

@jbrown, about #6 :

In our case, this affects only IE6, since we use a regular background for other IEs.
And performance benchmarks show better results than with opacity.

This background image will disappear if we continue to shrink it down :)

I updated the test snippet :

(function ($) {
Drupal.behaviors.test = {
  attach: function (context, settings) {
    if (this.processed) {
      return;
    }
    this.processed = true;
    
    var diffResize;
    var diffScroll; 
    
    // Window scrolling
    var testResize = function() {
      var start = (new Date).getTime();
      var size = 0;
      var interval = setInterval(function() {
        if (size >= 1000) {
          clearInterval(interval);
          diffResize = (new Date).getTime() - start;
          testScroll();
        }
        size = size + 10;
        window.resizeTo(size, size);
      }, 1);
    };
    
    // Window scrolling
    var testScroll = function() {
      var start = (new Date).getTime();
      var size = 0;
      var interval = setInterval(function() {
        if (size >= 1000) {
          clearInterval(interval);
          diffScroll = (new Date).getTime() - start;
          alert('resize: '+diffResize+' scroll: '+diffScroll);
        }
        size = size + 10;
        window.scrollTo(0, size);
      }, 1);
    };
    
    // Launch tests
    $('#toolbar').click(function() {
      testResize();
    });
  }
};
})(jQuery);

And updated results :

WITH PATCH :

IE8 : resize: 5107 scroll: 6499
IE8 compat 7 : resize: 4696 scroll: 6610
IE6: resize : 6740 scroll: 1191
FF: resize: 4094 scroll: 1307
Safari: resize: N/A scroll: 4983
Chrome: resize: N/A scroll: 4048

WITHOUT PATCH :

IE8 : resize: 12057 scroll: 6519
IE8 compat 7 : resize: 11657 scroll: 6229
IE6: resize: 23223 scroll: 1512
FF: resize: 4862 scroll: 1765
Safari: resize: N/A scroll: 5009
Chorme: resize: N/A scroll: 6702

Forgot to set this back to CNR.

Just to clarify, window resizing is awfully slow in all versions of IE and this patch addresses this issue. This is very annoying for IE users, and unfortunately, there are still a lot of them ;)

If we want to have a good user experience out of the box, I think this patch is a good thing.

Moreover, all browsers benefit from these performance gains and CSS is cleaner, apart from the IE6 specific CSS rule.

@Dries : Yes, more testing would be nice, particularly for IE.

@jbrown : Cannot hurt to try, I'll give it a shot.

And... yes ! it does render faster with a bigger image, at least on IE8.
My first tests show improvements until around 250x250 pixels, above it decreases.

I'll make some more robust and complete tests later.

Hmmm, finally, changing image size is not so much faster.

Here are new tests for different image sizes (what a PITA to run those).
Each row represents an image size (50 means 50x50 pixels).
10 pixels seems the most optimal size, so I ran test twice for 1 pixel image and 10 pixels image on IE 6, 7 and 8.
Does not seem to affect performance in other cases.

FF: No visible change
1/ resize: 3992 scroll: 1335
10/ resize: 3964 scroll: 1337
50/ resize: 3861 scroll: 1326
100/ resize: 3906 scroll: 1383
200/ resize: 3994 scroll: 1321
250/ resize: 3838 scroll: 1332
300/ resize: 3886 scroll: 1324
500/ resize: 3907 scroll: 1333

IE8: 10px image is faster
1/ 4537 6259 - 2nd pass : 4606 6370
10/ 4217 4897 - 2nd pass : 4186 4877 - is faster than 1px
50/ 4146 4987
100/ 4146 4897
200/ 4206 4888
250/ 4396 4717
300/ 4115 4707
500/ 4417 4857

IE8 compat 7: 10px image is faster
1/ 4416 6339 - 2nd pass : 4366 6319
10/ 3906 4867 - 2nd pass : 3936 4696 - is faster than 1px
50/ 3965 4867
100/ 4016 4777
200/ 3946 4697
250/ 3925 4717
300/ 3986 4607
500/ 3876 4766

IE6: No visible change
1/ 6670 1202 - 2nd pass : 6359 1212
10/ 6890 1152 - 2nd pass : 6549 1172
50/ 7040 1162
100/ 7300 1212
200/ 7471 1191
250/ 7491 1202
300/ 7701 1192
500/ 7851 1172

Setting this back to CNR, since bot is wrong I think.

Thanks Dries.

Here is an updated image, I upload it here first and will pass it through smushit in the next comment.

Here is the image shrinked down through smushit.

@jbrown : Some more bytes to knock off ?

Patch from #5 still applies.

I'm totally out of core issues right now because of work, but I saw the issue about the rewrite of the overlay without jquery ui.

Anyway, does the patch use opacity for the semi-transparent background ? In this case, performance is still to be considered and a PNG background will most probably be faster than opacity, so this should be considered.