V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
ted0220
V2EX  ›  程序员

这次不是推广,请求前端大佬帮忙分析一下崩溃原因

  •  
  •   ted0220 · 323 天前 · 1924 次点击
    这是一个创建于 323 天前的主题,其中的信息可能已经有所发展或是发生改变。
    之前开源过一款像素画游戏,用户反馈过移动端会卡死的情况,自己也遇到过两次,页面操作无响应,也无法点击刷新,只能关闭标签页重新打开,由于是偶发问题,一直无法定位到问题的位置,通过 window.onerror 也无法捕获错误信息,目前怀疑是 e-smart-zoom-jquery.js 插件大量操作 dom 节点导致的,有前端大佬能帮忙分析一下嘛,感激不尽

    github 项目地址: https://github.com/tebie6/pixel-game

    怀疑的 JS 文件 https://game.tebie6.com/static/pixel/js/e-smart-zoom-jquery.js?v=0.0.12
    7 条回复    2024-01-31 16:49:33 +08:00
    woshixiaoqianbi
        1
    woshixiaoqianbi  
       323 天前   ❤️ 1
    network 面板里勾上 memory 选项,录制一段时间内的操作分析下内存占用上的操作
    LancerComet
        2
    LancerComet  
       323 天前   ❤️ 1
    不是解决问题的,只是看了一下缩放的做法感觉很粗暴,Canvas 整个画布画出来之后用 DOM 的方式缩放,按道理也不是不行,只是额外引入了黑盒类库,你可以改成使用离屏 Canvas 做 bitmap 缓存,然后根据用户的视图区域、位置、缩放来从缓存里取必要的像素进行绘制,意思就是把缩放和移动挪到 Canvas 中实现,完全可以避免使用这种 DOM 缩放类库,可能会比较复杂,因为要维护摄影机的信息,几年前给比利比利做像素画板的时候就是这种实现,活动期间没有获得性能塌方反馈
    ted0220
        3
    ted0220  
    OP
       323 天前
    @LancerComet 感谢分享,由于不是前端出身所以知识面比较局限,用的方式比较粗糙,后续会研究学习改进
    godbasin
        4
    godbasin  
       323 天前   ❤️ 1
    一般崩溃有两种情况:
    1. 内存暴涨导致崩溃,可以分析下内存情况
    2. 死循环,在卡死的时候,去控制台点一下暂停执行,看看代码停留在哪个位置就可以
    ted0220
        5
    ted0220  
    OP
       323 天前
    @godbasin 是的,因问题一般都是发生在手机浏览器上,所在出现问题时无法通过控制台排查问题
    Zz09
        6
    Zz09  
       323 天前
    感觉也可能是定时器之类的没回收
    godbasin
        7
    godbasin  
       323 天前
    @ted0220 手机也可以连电脑的,不过复现路径可能得找到,怀疑的地方可以埋点日志,崩溃的时候作为参考
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1014 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 20:58 · PVG 04:58 · LAX 12:58 · JFK 15:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.