Question

如何渲染和缓存HTML DOM的块？

渲染重型2D游戏和其他应用程序的一种经典技术是预渲染和缓存UI的密集块。这称为blitting。我在2D游戏中经常使用它来构建它的乐趣。

在实际工作场景中，我想用本机html DOM元素执行此操作 - 将它们移出屏幕，缓存结果，然后将缓存的结果插入到我显示的DOM中。关键是，一旦渲染，结果（无论是文字位图还是本机DOM对象表示）都是不可变的并且显示成本低廉。

不可变意味着将呈现的内容添加到显示DOM不会改变它（例如通过本质上应用新样式）。完整的解决方案对包含文档没有任何假设或要求。即你可以搞一个完全不同的网站，并保真地插入它。

我对此的直接使用是在表达式引擎的Web界面中呈现语法高亮代码的片段。显示器是一个基本的表格，可以显示几十个规则，每个规则都有一个＆＃39;条件＆＃39;表达和＆＃39;动作＆＃39;表达。

对于实际的规则编辑，我使用优秀的ace editor。这为自定义脚本语言和多种SQL变体提供了漂亮的自定义突出显示。但是对于表格显示，我不想包含几十个功能齐全的IDE编辑器实例，这些实例被挤压成小td个。我想使用一个ace编辑器实例来渲染每个表达式，然后缓存并显示渲染结果。

这是我想做的事情：

var editorElement = $('#snippetEditor')[0];
var aceEditor = ace.edit(editorElement);
// .. set various options on the aceEditor ..
$('#myTable td[data-snippet-language]').each(function (i, el) {
    var code = $(el).text();
    aceEditor.setValue(code);

    // Assuming blit returns native DOM. If it creates
    // a bitmap, then blit will turn it into a base64 img literal
    var rendered = blit(editorElement);
    $(el).html($(rendered).html());
});

Answer 1

http://google.github.io/incremental-dom/#demos 这些家伙做了一件非常酷的东西，看起来像一个像样的DOM blitter。

如何搞砸DOM？

1 个答案: