首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

基于HTML5的WebGL应用内存泄露分析

以下我对《HT入门手册》的第一个例子做个扩展,对工具条增加了如下代码逻辑的三个按钮,第一个按钮一下子创建了20个新的Tab,每个Tab包含一个Graph3dView组件,另外两个按钮实现删除部分页的功能...20个的按钮分别打开之后系统的内存对象引用关系如下图所示: ?...因为dataModel作为全局对象被window应用着,而且其他新创建中的Graph3dView都绑定了该数据模型,框架使用者应该了解,各种组件都对dataModel数据模型添加了事件监听,其实数据模型并不知道各种...数据模型,使其断开了和全局window.dataModel的引用,当然Tab也得删除,从以上视频中也可以看得出当我们销毁了部分Tab后就能得到webglcontextrestored的事件恢复,...当点击构建20个按钮后,Profiles能看到Objects Count为21: ? 当我们点击两个删除按钮销毁6个Tab后发现,Objects Count下降到了15: ?

3K90

HT图形组件设计之道(三)

以下我对《HT入门手册》的第一个例子做个扩展,对工具条增加了如下代码逻辑的三个按钮,第一个按钮一下子创建了20个新的Tab,每个Tab包含一个Graph3dView组件,另外两个按钮实现删除部分页的功能...20个的按钮分别打开之后系统的内存对象引用关系如下图所示: ?...因为dataModel作为全局对象被window应用着,而且其他新创建中的Graph3dView都绑定了该数据模型,框架使用者应该了解,各种组件都对dataModel数据模型添加了事件监听,其实数据模型并不知道各种...数据模型,使其断开了和全局window.dataModel的引用,当然Tab也得删除,从以上视频中也可以看得出当我们销毁了部分Tab后就能得到webglcontextrestored的事件恢复,...当点击构建20个按钮后,Profiles能看到Objects Count为21: ? 当我们点击两个删除按钮销毁6个Tab后发现,Objects Count下降到了15: ?

2.6K90

HT图形组件设计之道(三)

以下我对《HT入门手册》的第一个例子做个扩展,对工具条增加了如下代码逻辑的三个按钮,第一个按钮一下子创建了20个新的Tab,每个Tab包含一个Graph3dView组件,另外两个按钮实现删除部分页的功能...20个的按钮分别打开之后系统的内存对象引用关系如下图所示: ?...因为dataModel作为全局对象被window应用着,而且其他新创建中的Graph3dView都绑定了该数据模型,框架使用者应该了解,各种组件都对dataModel数据模型添加了事件监听,其实数据模型并不知道各种...数据模型,使其断开了和全局window.dataModel的引用,当然Tab也得删除,从以上视频中也可以看得出当我们销毁了部分Tab后就能得到webglcontextrestored的事件恢复,...当点击构建20个按钮后,Profiles能看到Objects Count为21: ? 当我们点击两个删除按钮销毁6个Tab后发现,Objects Count下降到了15: ?

1.6K30

基于HTML5的WebGL应用内存泄露分析

以下我对《HT入门手册》的第一个例子做个扩展,对工具条增加了如下代码逻辑的三个按钮,第一个按钮一下子创建了20个新的Tab,每个Tab包含一个Graph3dView组件,另外两个按钮实现删除部分页的功能...20个的按钮分别打开之后系统的内存对象引用关系如下图所示: ?...因为dataModel作为全局对象被window应用着,而且其他新创建中的Graph3dView都绑定了该数据模型,框架使用者应该了解,各种组件都对dataModel数据模型添加了事件监听,其实数据模型并不知道各种...数据模型,使其断开了和全局window.dataModel的引用,当然Tab也得删除,从以上视频中也可以看得出当我们销毁了部分Tab后就能得到webglcontextrestored的事件恢复,...当点击构建20个按钮后,Profiles能看到Objects Count为21: ? 当我们点击两个删除按钮销毁6个Tab后发现,Objects Count下降到了15: ?

2.2K20

每日优鲜供应链前端团队微前端改造

系统(类似浏览器的tab),这些tab通过keep-alive和一系列对缓存的处理,使其体验接近原生浏览器tab。...图2展示了图1中的tab区以及子项目展示区。信息做了马赛克处理。 乍一看没什么特别的,但如果我说这些tab分别来自于不同git仓库的独立vue项目呢?...为了让tab切换不刷新,这里使用了keep-alive去缓存页面,考虑到内存性能,在关闭tab时通过一些方法(主要是keep-alive的exclude属性)去除了keep-alive缓存,同时为了让子项目间的...我们使用的是0.21版本的:github.com/systemjs/sy… 因为要动态通过http引入外部js,又不影响在开发的时候使用import、require方法,所以找到了systemjs来做这件事...根据systemjs文档说明,我们只需要把子项目打成umd格式(umd糅合了AMD和CommonJS)的包即可动态外部加载。

1.2K20

前端黑魔法:webworker动态化,无需JS文件创建worker

通过JS文件和路径创建webworker带来的问题 Webworker,我其实一直觉得用法比较生硬,因为似乎需要创建额外的JS文件才能运行,就像下面这样 var worker =new Worker('...work.js’) 这意味着,你需要额外创建一个js文件。...因为JS操纵文件的能力很差,如果想要创建文件,当然方法也有,参考:https://github.com/eligrey/FileSaver.js/ 但是问题在于,如果想要创建文件,JS的文件创建往往离不开下载...我原本只是想“悄无声息”地创建一个文件,但结果JS创建的时候突然弹出一个下载框,这可让人受不了。啊,难受。(此处应有[我太难了]表情包)。...第一,function.toString得到的并不是一个没有意义的字符串,它是完全可以被用来运行的 第二,通过这种方式,webworker不需要借助额外的JS文件了,webworker完全动态化和自由化

3.3K10

每日优鲜供应链前端团队微前端改造

系统(类似浏览器的 tab ),这些 tab 通过 keep-alive 和一系列对缓存的处理,使其体验接近原生浏览器 tab。...图 2 展示了图 1 中的 tab 区以及子项目展示区。信息做了马赛克处理。 乍一看没什么特别的,但如果我说这些 tab分别来自于不同 git 仓库的独立 vue 项目呢?...为了让 tab 切换不刷新,这里使用了 keep-alive 去缓存页面,考虑到内存性能,在关闭 tab 时通过一些方法(主要是 keep-alive 的 exclude 属性)去除了 keep-alive...文件,加载器去读取图 4 中的配置文件,然后注册配置文件中配置的各个项目后,首先加载主项目(菜单等),再通过路由判定,动态远程加载子项目。...我们使用的是 0.21 版本的:github.com/systemjs/sy…[6]因为要动态通过 http 引入外部 js,又不影响在开发的时候使用 import、require 方法,所以找到了 systemjs

1.5K20
领券