V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PageSpeed 相关文档
为 NGINX 编译 PageSpeed 支持
ngx_pagespeed
Configuring mod_pagespeed Filters
加载性能测试工具
WebPagetest
Gomez
suifengfengye
V2EX  ›  前端优化

echarts 占用内存过高,如何解决?

  •  
  •   suifengfengye · 2018-01-11 11:38:42 +08:00 · 8777 次点击
    这是一个创建于 2493 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题描述:在公司的 app 端,入口处用一个 UIWebview,webview 里面就是各个业务线的展示内容。我负责的业务线是 echarts+数据,绘制图表。近一个月,app (主要是 iphone6、iphone6s )闪退比较严重,经过性能分析,发现是我们业务线的内容,只要启用,内存暴增 30-40M。(流泪~~~) 经过分析,是 echarts 本身引入之后,就会导致 20+M 的内存增长。再加上一些业务代码,30M 轻轻松松就上去了。

    所以,在这里问问,大家有没有遇到过类似的问题,有什么解决方案?

    目前考虑到的方案是: 1、替换 echarts,不过业务上为配合数据+echarts,有一些转换代码,成本较高;再者要考虑的是,什么图表框架是轻量、不占用太多内存的。

    2、在服务端用数据+图表框架生成图片,然后前端直接调用图片显示即可(不过没有落地的方案)。 这个方案具体的问题:( 1 )、什么图表框架是支持服务端生成图片的?( 2 )、即使可行,每天几百万的 PV,这个服务端能不能扛得住?

    7 条回复    2018-01-27 00:31:08 +08:00
    Torpedo
        1
    Torpedo  
       2018-01-11 11:44:04 +08:00 via Android
    你们是不是用了 echarts 里的 webgl 绘制 3d ?
    换成 wkwebview 会好一些。
    或者不用 3d
    退后台的时候停止绘制
    suifengfengye
        2
    suifengfengye  
    OP
       2018-01-11 13:33:50 +08:00
    @Torpedo 没有使用 3D

    const echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/bar')

    测试时用 echarts 的核心库+bar 图,用的官网的 demo,内存就增上去了。
    learnshare
        3
    learnshare  
       2018-01-11 13:49:34 +08:00
    ECharts 太大,不适合移动端
    基本的 bar 图自己写一个就好了,第三方库都不需要
    suifengfengye
        4
    suifengfengye  
    OP
       2018-01-11 14:23:22 +08:00
    @learnshare 我测试的时候只用了 bar 图。实际上业务的图表很多~~~
    learnshare
        5
    learnshare  
       2018-01-11 14:53:57 +08:00
    @suifengfengye 移动端尽量只做基本的展示吧,图表交互什么的都是多余,也比较难操作
    有精力投入的话,可以拿 D3 写几个
    Torpedo
        6
    Torpedo  
       2018-01-11 15:49:47 +08:00 via Android
    @suifengfengye 那就不清楚了。上述我说的如果没有 3d 的话,就剩下 wkwebview 可能有效了
    suifengfengye
        7
    suifengfengye  
    OP
       2018-01-27 00:31:08 +08:00
    这里统一回复下。
    最终结果选择了方案 2,并且找到了落地方案。服务端使用 node 工程,结合 github 项目` node-echarts `进行图片渲染(根据这个项目的代码,并根据自己的业务需求做了一定的修改)。每次前端请求过来,服务端对数据进行处理,使用 node-echarts 生成 charts 图表实例(定义为 chart ),使用 chart.getDataURL 拿到 base64 编码,返回给前端展现;同时将 chart 生成图片上传到图片服务器保存起来(同一个的图表再次请求生成图片时,就返回一个 url 地址即可,避免重复生成图表,造成服务端压力过大)。

    遇到的坑
    1、node-echarts 项目依赖于 node-prebuilt 项目,在 linux 服务器上,如果没有安装中文字体,echarts 图表转成图片自后就会出现中文乱码。怎么解决?最简单的就是,在 linux 服务器上安装中文字体。这里是安装字体的链接: http://blog.csdn.net/wlwlwlwl015/article/details/51482065
    (因为 node-prebuilt 暂时没有提供注册字体的功能,只能这样处理,如果后续版本支持,就调用 node-prebuilt 的注册字体功能即可)

    2、node-echarts 生成的图片,在移动端显示很模糊。
    这里,做前端的同学自然会想到 2x 图。所以这里就是将画布以及 echarts 的字体、间距等等都调为原来的 2 倍,这样渲染出来的图片在移动端显示出来就非常清晰。(注意 chart.getDataURL 这个方法的参数 piexlRatio,将其调为 2 并没有什么卵用)。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2933 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 02:46 · PVG 10:46 · LAX 18:46 · JFK 21:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.