Avoid XHR when possible for faster raster tile loading

src/source/raster_dem_tile_source.js

@@ -1,9 +1,7 @@
 // @flow
 
-import { getImage, ResourceType } from '../util/ajax';
 import { extend } from '../util/util';
 import { Evented } from '../util/evented';
-import { normalizeTileURL as normalizeURL } from '../util/mapbox';
 import browser from '../util/browser';
 import { OverscaledTileID } from './tile_id';
 import RasterTileSource from './raster_tile_source';
@@ -40,54 +38,33 @@ class RasterDEMTileSource extends RasterTileSource implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = normalizeURL(tile.tileID.canonical.url(this.tiles, this.scheme), this.url, this.tileSize);
-        tile.request = getImage(this.map._transformRequest(url, ResourceType.Tile), imageLoaded.bind(this));
-
         tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
-        function imageLoaded(err, img) {
-            delete tile.request;
-            if (tile.aborted) {
-                tile.state = 'unloaded';
-                callback(null);
-            } else if (err) {
-                tile.state = 'errored';
-                callback(err);
-            } else if (img) {
-                if (this.map._refreshExpiredTiles) tile.setExpiryData(img);
-                delete (img: any).cacheControl;
-                delete (img: any).expires;
-
-                const rawImageData = browser.getImageData(img);
-                const params = {
-                    uid: tile.uid,
-                    coord: tile.tileID,
-                    source: this.id,
-                    rawImageData: rawImageData,
-                    encoding: this.encoding
-                };
-
-                if (!tile.workerID || tile.state === 'expired') {
-                    tile.workerID = this.dispatcher.send('loadDEMTile', params, done.bind(this));
-                }
-            }
-        }
+        super.loadTile(tile, callback);
+    }
+
+    onTileLoad(tile: Tile, img: HTMLImageElement, callback: Callback<void>) {
+        if (tile.workerID && tile.state !== 'expired') return;
 
-        function done(err, dem) {
+        tile.workerID = this.dispatcher.send('loadDEMTile', {
+            uid: tile.uid,
+            coord: tile.tileID,
+            source: this.id,
+            rawImageData: browser.getImageData(img),
+            encoding: this.encoding
+        }, (err, dem) => {
             if (err) {
                 tile.state = 'errored';
                 callback(err);
-            }
 
-            if (dem) {
+            } else if (dem) {
                 tile.dem = dem;
                 tile.needsHillshadePrepare = true;
                 tile.state = 'loaded';
                 callback(null);
             }
-        }
+        });
     }
 
-
     _getNeighboringTiles(tileID: OverscaledTileID) {
         const canonical = tileID.canonical;
         const dim = Math.pow(2, canonical.z);

src/source/raster_tile_source.js

@@ -38,6 +38,7 @@ class RasterTileSource extends Evented implements Source {
     tiles: Array<string>;
 
     _loaded: boolean;
+    _avoidXHR: boolean;
     _options: RasterSourceSpecification | RasterDEMSourceSpecification;
     _tileJSONRequest: ?Cancelable;
 
@@ -56,6 +57,7 @@ class RasterTileSource extends Evented implements Source {
         this._loaded = false;
 
         this._options = extend({}, options);
+        this._avoidXHR = false;
         extend(this, pick(options, ['url', 'scheme', 'tileSize']));
     }
 
@@ -114,25 +116,36 @@ class RasterTileSource extends Evented implements Source {
                 delete (img: any).cacheControl;
                 delete (img: any).expires;
 
-                const context = this.map.painter.context;
-                const gl = context.gl;
-                tile.texture = this.map.painter.getTileTexture(img.width);
-                if (tile.texture) {
-                    tile.texture.update(img, { useMipmap: true });
-                } else {
-                    tile.texture = new Texture(context, img, gl.RGBA, { useMipmap: true });
-                    tile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
-
-                    if (context.extTextureFilterAnisotropic) {
-                        gl.texParameterf(gl.TEXTURE_2D, context.extTextureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT, context.extTextureFilterAnisotropicMax);
-                    }
+                // if the tiles have aggressive caching (retained for at least 1 hour),
+                // switch to faster image loading technique for subsequent tile loads
+                const timeout = tile.getExpiryTimeout();
+                if (timeout === undefined || timeout > 1000 * 60 * 60) {
+                    this._avoidXHR = true;
                 }
 
-                tile.state = 'loaded';
+                this.onTileLoad(tile, img, callback);
+            }
+        }, this._avoidXHR);
+    }
 
-                callback(null);
+    onTileLoad(tile: Tile, img: HTMLImageElement, callback: Callback<void>) {
+        const context = this.map.painter.context;
+        const gl = context.gl;
+        tile.texture = this.map.painter.getTileTexture(img.width);
+        if (tile.texture) {
+            tile.texture.update(img, { useMipmap: true });
+        } else {
+            tile.texture = new Texture(context, img, gl.RGBA, { useMipmap: true });
+            tile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+
+            if (context.extTextureFilterAnisotropic) {
+                gl.texParameterf(gl.TEXTURE_2D, context.extTextureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT, context.extTextureFilterAnisotropicMax);
             }
-        });
+        }
+
+        tile.state = 'loaded';
+
+        callback(null);
     }
 
     abortTile(tile: Tile, callback: Callback<void>) {

src/util/ajax.js

@@ -130,8 +130,22 @@ function sameOrigin(url) {
 
 const transparentPngUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=';
 
-export const getImage = function(requestParameters: RequestParameters, callback: Callback<HTMLImageElement>): Cancelable {
-    // request the image with XHR to work around caching issues
+export const getImage = function(requestParameters: RequestParameters, callback: Callback<HTMLImageElement>, avoidXHR?: boolean): Cancelable {
+    // if we know for sure that the tile is cached for a long time, avoid XHR for better performance
+    // https://github.com/mapbox/mapbox-gl-js/issues/6643
+    if (avoidXHR && requestParameters.headers === undefined && requestParameters.credentials === undefined) {
+        const img: HTMLImageElement = new window.Image();
+        const url = requestParameters.url;
+        if (!sameOrigin(url)) {
+            img.crossOrigin = 'Anonymous';
+        }
+        img.onerror = () => callback(new Error(`Could not load image: ${url}`));
+        img.onload = () => callback(null, img);
+        img.src = url;
+        return {cancel: () => { img.onload = null; img.src = transparentPngUrl; }};
+    }
+
+    // otherwise request the image with XHR to work around caching issues
     // see https://github.com/mapbox/mapbox-gl-js/issues/1470
     return getArrayBuffer(requestParameters, (err, imgData) => {
         if (err) {