Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

提升瓦片图层性能 #2258

Merged
merged 3 commits into from
Jan 17, 2024
Merged

提升瓦片图层性能 #2258

merged 3 commits into from
Jan 17, 2024

Conversation

xiaoiver
Copy link
Contributor

@xiaoiver xiaoiver commented Jan 17, 2024

[English Template / 英文模板]

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 工作流程
  • 版本更新
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

在 Tile / vector 这个例子中开启全部 layer 后,度量性能发现 getProgramParameter 这个方法耗时很高:

截屏2024-01-17 下午4 56 10

本意是用作 ShaderDebug,底层会调用 gl.getProgramParameter(prog, gl.LINK_STATUS) 查询 Shader 编译状态,出错展示详细信息。

另外在创建 Program 转译 Shader 时需要做缓存(ReglModel 和 DeviceModel 中都可以),否则在多个瓦片中多个同类图层都会重复进行处理。

💡 需求背景和解决方案

在 g-device-api 中提供开关关闭,仅在 Debug 时使用。升级到 1.6.1 即可:
https://github.com/antvis/g-device-api/releases/tag/1.6.1

另外为 Program 添加缓存避免重复的 Shader 编译。优化后可以看到提升效果:

截屏2024-01-17 下午5 51 19

📝 更新日志

语言 更新描述
🇺🇸 英文
🇨🇳 中文

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@xiaoiver xiaoiver changed the title fix: add tile vector to ci 提升瓦片图层性能 Jan 17, 2024
@xiaoiver xiaoiver self-assigned this Jan 17, 2024
@xiaoiver xiaoiver requested a review from lzxue January 17, 2024 10:49
@lzxue lzxue added the V3 L7 3.0 升级 label Jan 17, 2024
@lzxue lzxue merged commit 15d39a2 into master Jan 17, 2024
7 checks passed
@lzxue lzxue deleted the fix-perf branch January 17, 2024 13:39
lzxue pushed a commit that referenced this pull request Jan 18, 2024
* fix: add tile vector to ci

* fix: add program cache for device model

* chore: update tile vector snapshot
lzxue pushed a commit that referenced this pull request Jan 18, 2024
* fix: add tile vector to ci

* fix: add program cache for device model

* chore: update tile vector snapshot
@xiaoiver
Copy link
Contributor Author

xiaoiver commented Jan 18, 2024

剩下的问题主要集中在构建三角网以及后续创建 Attribute 上:
https://l7.antv.antgroup.com/examples/tile/vector#chinadistrictmap

截屏2024-01-19 上午10 29 01 截屏2024-01-19 上午10 28 49

@lvisei
Copy link
Member

lvisei commented Jan 19, 2024

是的,同行没有用 worker 的情况下,看上去用了什么魔法,其实用了控制粒度的管理

lzxue added a commit that referenced this pull request Jan 30, 2024
* chore: test loaded 完成后截图

* 提升瓦片图层性能 (#2258)

* fix: add tile vector to ci

* fix: add program cache for device model

* chore: update tile vector snapshot

* chore: 添加demo & 优化uniform 参数 按需设置

* fix: 合并冲突

* 提升瓦片图层性能 (#2258)

* fix: add tile vector to ci

* fix: add program cache for device model

* chore: update tile vector snapshot

* chore: 移除不必要的代码

* feat: add touchend & touchstart 事件

* chore: test ci CERT_HAS_EXPIRED

* chore: 移除 taobao 镜像

* chore: 更新 test snapshots

* fix: bmap zoom 不一致

* chore: touch 事件

* chore: 替换和优化resize 的相关方法

* chore: 更新淘宝镜像

* fix: demo 引用错误

---------

Co-authored-by: xiaoiver <yuqi.pyq@antgroup.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
V3 L7 3.0 升级
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants