openlayers Web 应用程序在移动设备（Android Chrome）上运行速度非常慢

Question

我知道这听起来像是一个应该关闭的典型问题，但我碰壁了，不知道在哪里寻找解决方案，所以希望我能提供足够的细节，使这个问题可以被SO接受。

我正在开发一个 OpenLayers Web 应用程序，可以在此处访问。

它的源代码位于此 github 存储库中。

如果您在计算机上尝试该应用程序，用户体验应该很好（至少，这是我个人的体验）。

然而，当我从移动浏览器（Chrome，我的手机是 Google Pixel 2）尝试时，速度非常慢。

特别是，每次我尝试通过触摸屏幕与应用程序交互以（例如）导航地图时，我触摸屏幕的时间和应用程序的响应之间存在相当大的滞后。

我什至尝试使用 ChromeDevTools 控制台来检查我的手机通过 USB 线插入的网络控制台，但无法理解导致这种缓慢的原因是什么。

一些细节：

1. 我使用的是 OpenLayers 版本 6.2.1
2. 我正在使用 TypeScript 来开发这个应用程序
3. 我正在使用包裹捆绑器将其捆绑在 dist 文件夹中
4. 我将构建的文件复制到服务器来为应用程序提供服务

我唯一注意到的是构建的文件有奇怪的名称，例如src.9f4704d2.css.

我猜这是由捆绑程序（包裹）引起的，当我运行命令时npm run build。

但我真诚地不知道这是否是一个问题。

然而，如果有人能帮助我阐明这一点，我将非常感激。另外，如果需要，我可以提供更多详细信息，但我的主要问题是我不知道到底在哪里寻找解决问题的方法。

---

编辑1

我@import在 CSS 中使用规则，我在这里读到

@import 规则可以嵌套，因此浏览器必须连续加载和解析每个文件。

我不知道这是否是问题所在，但我会尝试使用多个<link>标签，看看性能是否会变得更好......

---

编辑2

更换@import多个<link>标签并没有解决问题。

---

编辑3（可能找到了问题）

好的，我将问题范围缩小到我正在创建的图层上。

我实际上正在解析三个 WMS url，从中提取每个图层，并将每个图层的源添加ImageLayer到ImageWMS地图中。

我为加快应用程序速度所做的第一件事是使用TileImageandTileWMS而不是ImageLayerand ImageWMS。

相关代码如下：

import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

export class OperationalLayer{
    private operationalLayer: TileLayer;
    id: String;
    
    constructor(url: string, name: string, id: string) {
        const source = new TileWMS({
            params: {'LAYERS': name},
            url: url,
        });

        this.id = id;

        this.operationalLayer = new TileLayer({
            source: source,
        })
    }

    getLayer() {
        return this.operationalLayer;
    }
}

尽管如此，该应用程序仍然非常滞后。

然后我尝试只使用一个 url，这样我的地图总共只添加了 3 层。

现在它运行得可以接受。

我认为主要的一点是，我需要关注将图层添加到地图的最佳策略：是同时使用一个包含所有 WMS 图层的 ImageWMS，还是每层一个 ImageWMS。

后者（这就是我正在做的），将使我能够轻松地打开/关闭每一层；我想前者会更快。

还是有我没有考虑过的替代方案？

Answer 1

您应该在页面上使用视口元。
就像是：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这将修复页面大小并防止调整整个页面的大小。这也将减少页面大小和视口中处理的像素。

您还可以查看移动网络应用程序的元数据来增强您的应用程序，例如web-app-capable标签。

尝试对地图和菜单栏（以及可能覆盖地图的所有页面）使用固定位置以增强渲染效果。

使用 TileWMS：图块将被缓存，并且不会在每次移动时请求（仅请求新图块）。图层定义中还有一个hdpi选项，可以使图像更精细，但会放大画布尺寸（和绘图操作），尝试将其设置为 false 并查看结果以做出选择。