#javascript #html #dom
#javascript #HTML #dom
Вопрос:
Как я могу отображать и кэшировать фрагменты 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());
});
Комментарии:
1. что это за html? будет ли canvas работать лучше?
2. @DanielA. Белый прямой HTML5
<!DOCTYPE html>
. Использование canvas — это вариант для выполнения рендеринга и / или упаковки результата, но он не должен требовать, чтобы какая-либо часть документа хостинга была вложена в canvas, т. Е. Она должна позволять вставлять в существующий DOM3. я имею в виду, какие элементы вам нужно выгрузить?
4. @DanielA. Белый в основном стилизованный текст, такой как мое немедленное применение пользовательской подсветки синтаксиса. Статический стиль css не подходит из-за всей сложной обработки, которая используется для оценки входного текста (это то, что делает библиотека ace). Но я ищу более общее решение. Что, если, например, я хотел бы взять фрагмент с другого веб-сайта и отобразить его?
5. Вы когда-нибудь находили ответ на этот вопрос? Мне также нужно получить растровые данные экземпляра редактора ace для использования с приложением-оболочкой.
Ответ №1:
http://google.github.io/incremental-dom/#demos Эти чуваки сделали что-то довольно крутое, что выглядит как приличный DOM blitter.
Комментарии:
1. Как это работает? Пожалуйста, сделайте свой ответ автономным.