V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
ted0220
V2EX  ›  程序员

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

  •  
  •   ted0220 · 324 days ago · 1925 views
    This topic created in 324 days ago, the information mentioned may be changed or developed.
    之前开源过一款像素画游戏,用户反馈过移动端会卡死的情况,自己也遇到过两次,页面操作无响应,也无法点击刷新,只能关闭标签页重新打开,由于是偶发问题,一直无法定位到问题的位置,通过 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 replies    2024-01-31 16:49:33 +08:00
    woshixiaoqianbi
        1
    woshixiaoqianbi  
       324 days ago   ❤️ 1
    network 面板里勾上 memory 选项,录制一段时间内的操作分析下内存占用上的操作
    LancerComet
        2
    LancerComet  
       324 days ago   ❤️ 1
    不是解决问题的,只是看了一下缩放的做法感觉很粗暴,Canvas 整个画布画出来之后用 DOM 的方式缩放,按道理也不是不行,只是额外引入了黑盒类库,你可以改成使用离屏 Canvas 做 bitmap 缓存,然后根据用户的视图区域、位置、缩放来从缓存里取必要的像素进行绘制,意思就是把缩放和移动挪到 Canvas 中实现,完全可以避免使用这种 DOM 缩放类库,可能会比较复杂,因为要维护摄影机的信息,几年前给比利比利做像素画板的时候就是这种实现,活动期间没有获得性能塌方反馈
    ted0220
        3
    ted0220  
    OP
       324 days ago
    @LancerComet 感谢分享,由于不是前端出身所以知识面比较局限,用的方式比较粗糙,后续会研究学习改进
    godbasin
        4
    godbasin  
       324 days ago   ❤️ 1
    一般崩溃有两种情况:
    1. 内存暴涨导致崩溃,可以分析下内存情况
    2. 死循环,在卡死的时候,去控制台点一下暂停执行,看看代码停留在哪个位置就可以
    ted0220
        5
    ted0220  
    OP
       324 days ago
    @godbasin 是的,因问题一般都是发生在手机浏览器上,所在出现问题时无法通过控制台排查问题
    Zz09
        6
    Zz09  
       324 days ago
    感觉也可能是定时器之类的没回收
    godbasin
        7
    godbasin  
       324 days ago
    @ted0220 手机也可以连电脑的,不过复现路径可能得找到,怀疑的地方可以埋点日志,崩溃的时候作为参考
    About   ·   Help   ·   Blog   ·   API   ·   FAQ   ·   Tools   ·   1336 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:32 · PVG 01:32 · LAX 09:32 · JFK 12:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.