Блог

Как я могу отображать и кэшировать фрагменты HTML DOM?

Классический метод в играх с отрисовкой 2D и других приложениях заключается в предварительной отрисовке и кэшировании фрагментов пользовательского интерфейса. Это называется blitting. Я часто использую его в 2D-играх, которые я создаю для развлечения.

В реальном рабочем сценарии я хотел бы сделать это с собственными элементами html DOM — вывести их за пределы экрана, кэшировать результаты, а затем вставить кэшированные результаты в мой отображаемый DOM. Ключ в том, что после рендеринга результат (будь то в виде буквального растрового изображения или собственного представления объекта DOM) является неизменяемым и дешевым для отображения.

Неизменяемый означает, что добавление отображаемого содержимого в отображаемый DOM не приведет к его изменению (например, путем внутреннего применения новых стилей). Полное решение не будет иметь никаких предположений или требований к содержащему документу. Т.е. Вы могли бы удалить фрагмент совершенно другого веб-сайта и вставить его с точностью.

Непосредственное применение, которое я имею для этого, заключается в представлении фрагментов кода с подсветкой синтаксиса в веб-интерфейсе для движка выражений. Отображение представляет собой базовую таблицу, в которой могут отображаться десятки «правил», каждое из которых имеет выражение «условие» и выражение «действие».

Для фактического редактирования правил я использую отличный редактор ace. Это дает мне красивую пользовательскую подсветку как для пользовательского языка сценариев, так и для нескольких вариантов SQL. Но для табличного отображения я не хочу включать десятки полнофункциональных экземпляров редактора IDE, втиснутых в маленькие td буквы s. Я хотел бы использовать один экземпляр редактора 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());
});
 

http://google.github.io/incremental-dom/#demos Эти чуваки сделали что-то довольно крутое, что выглядит как приличный DOM blitter.