本文探讨了在 Flutter 中使用 WebView 渲染 Echarts 图表时的性能优化策略。通过测试发现，将 Echarts 脚本动态插入而非一次性加载在 HTML 中，可以显著减少加载时间。最后，决定采用模板 HTML 以 UTF-8 URI 字符串形式加载，脚本和逻辑代码通过 JavaScript 函数插入，以实现最佳性能。
本文记录了基于 WebView 的 Flutter 可视化库：echarts_flutter 的一次优化加载性能的过程。
对于任何基于 WebView 的组件，html 的加载都是关乎性能的一个重要环节。 echarts_flutter 的基本原理是用 WebView 渲染本地的 echarts 图表，因此也不例外。
echarts_flutter 的 WebView 加载主要涉及以下几个部分：
- 模板 HTML
- echarts 脚本
- echarts 扩展脚本
- 图表逻辑代码
其中模板 html 和图表逻辑代码的体量很小，重点是 echarts 本体及扩展脚本加载。
Echarts 最强大的功能之一，就是具有很多功能强大的扩展，比如 WebGL 3D图表、Map 地图组件，在数据可视化要求越来越高的今天，这些扩展几乎成了和本体一样重要的部分，因此允许用户方便的引入扩展是一个必不可少的功能。此外为了避免麻烦的 asset 管理，我们希望无论是 HTML 还是 JavaScript 脚本，都能以字符串的方式处理，即 WebView 加载统一资源定位符（URI）。
因此这其中就有以下几个问题：
- 脚本的加载时机是直接放在 HTML 中还是后期插入
- URI 对一些特殊字符有限制，需要
最低0.47元/天 解锁文章
3059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
