Reduce the number of clip operations

src/ol/renderer/canvas/TileLayer.js

@@ -20,6 +20,7 @@ import {
   equals,
   getIntersection,
   getTopLeft,
+  intersects,
 } from '../../extent.js';
 import {cssOpacity} from '../../css.js';
 import {fromUserExtent} from '../../proj.js';
@@ -463,14 +464,24 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
 
         const inTransition =
           transition && tile.getAlpha(getUid(this), frameState.time) !== 1;
+        let contextSaved = false;
         if (!inTransition) {
           if (clips) {
             // Clip mask for regions in this tile that already filled by a higher z tile
-            context.save();
             currentClip = [x, y, x + w, y, x + w, y + h, x, y + h];
             for (let i = 0, ii = clips.length; i < ii; ++i) {
               if (z !== currentZ && currentZ < clipZs[i]) {
                 const clip = clips[i];
+                if (
+                  intersects(
+                    [x, y, x + w, y + h],
+                    [clip[0], clip[3], clip[4], clip[7]]
+                  )
+                ) {
+                  if (!contextSaved) {
+                    context.save();
+                    contextSaved = true;
+                  }
                   context.beginPath();
                   // counter-clockwise (outer ring) for current tile
                   context.moveTo(currentClip[0], currentClip[1]);
@@ -485,6 +496,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
                   context.clip();
                 }
               }
+            }
             clips.push(currentClip);
             clipZs.push(currentZ);
           } else {
@@ -502,7 +514,9 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
           transition
         );
         if (clips && !inTransition) {
+          if (contextSaved) {
             context.restore();
+          }
           this.renderedTiles.unshift(tile);
         } else {
           this.renderedTiles.push(tile);