问题:如何暂时生成Raphael节点,然后将它们一次性注入DOM?
过了一段时间,我仍然被困在SVG / Raphael / DOM问题上。
拉斐尔是我们工作室的一个非常好的平台,可以完成一些很棒的项目。但是当涉及到Raphael生成的单个页面上的大量SVG时 - 页面会发生什么(这就是问题本身):
1)浏览器使用Raphael代码处理.js文件。
2)Raphael在我的代码中找到SVG行,并尝试创建AND以直接向DOM注入新节点。
3)然后它找到下一行代码,然后是下一行代码,依此类推......
4)拥有超过6,000个纯SVG代码行 - Raphael正在处理过去每一行的过多时间,所以在此期间(对于用户而言)它接缝浏览器是卡住(冻结)并没有回应,直到拉斐尔会通知它已经完成处理代码。
因此,一般来说,我想要实现的方案是:
1)浏览器使用Raphael代码处理.js文件。
2)Raphael在我的代码中找到了SVG行,并将新创建的节点注入到全局时间var中,其中所有其他节点也将被注入。
3)然后它找到下一行代码,然后是下一行代码,依此类推,直到它将处理所有代码,创建存储在变量中的许多节点。
4)处理完成后 - Raphael接受temp var并将其转储到DOM中,同时创建所有节点。考虑6000+节点的情况 - 这将大大提高整体性能。 (我知道,因为我尝试使用Chrome将纯SVG代码注入到我们的某些测试页面中,Chrome处理代码的时间不到一秒,相比之下,Raphael部分只需30秒。)
我尝试了什么?好吧,我已经过了this SO question,放弃了200点我的声誉,但不幸的是,在这个问题上无法再进一步了。
所以,要明确的是,我的问题是:我如何暂时生成Raphael节点,然后立即将它们注入到DOM中?