Альтернатива iframe

Question

Так что я осматривался и немного заблудился в этой теме.Люди говорят, что есть альтернативы для iframe, но я не вижу ни одной, которая бы подходила для того, что я пытаюсь сделать.По сути, я создал небольшую игру, которая использует видео и воспроизводит определенные, основанные на вводе правильных кнопок с клавиатуры.

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

iframe слишком медленный, сама игра работает нормально, но когда я помещаю его в iframe, он отстает как сумасшедший в половине случаевили материал не рендерится, потому что он идет так медленно.

Есть идеи, с чего начать?

Answer 1

Существует одна альтернатива <iframe>, и это тег <object>.Он также может отображать контент из разных источников.Преимущество заключается в том, что он соответствует стандартам xhtml и рекомендуется к использованию, но в старых браузерах такой широкой / удобной поддержки нет (вам нужно поиграться с ней, чтобы сделать ее правильной в IE).Он используется следующим образом:

<object data="page.html" width="400" height="300" type="text/html">
    Alternative Content
</object>

Это прямой ответ на ваш вопрос, я не думаю, что это даст вам какое-либо преимущество в скорости.Уже по той причине, что <iframe> -элемент гораздо более используется и поэтому более проверен и обслужен, чем <object>.

Я для себя никогда не видел, чтобы <iframe> был причиной замедления, ноэто все еще возможно.Если это вариант, вам непременно следует попробовать то, что ocanal сказал ранее в комментариях: пусть ваш скрипт работает над контейнером-контейнером div вместо элемента body и вставит его непосредственно на главную страницу.

Для браузера это не должно быть чем-то большим, чем некоторые издержки при обработке второго документа, так что вы можете догадаться, что это просто немного больше, чтобы заставить ваш компьютер работать медленно.Поэтому было бы неплохо оптимизировать код в целом:

1. Посмотрите, сможете ли вы найти узкое место, вызывающее замедление.Возможными причинами могут быть

   • , много меняющих DOM - что всегда медленно
   • , много влияющих на вещи, которые даже не видны на экране

   • получение атрибутовиз предметов.Для каждого дополнительного периода, который вы используете, это означает больше работы для вашего процессора:

     // instead of using this over and over again
     house.roof.window.handle.open();
     house.roof.window.handle.close();
     
     // save it to a var and use that instead
     var handle = house.roof.window.handle;
     handle.open();
     handle.close();
     

2. Обновление игры с короткими равными интервалами на window.setTimeout() также может быть слишком быстрым и бесполезнымЭнергопотребление процессора излишне (или слишком медленно и тогда не будет выглядеть нормально, но никогда не будет правильно) - так что вы можете использовать новый window.requestAnimationFrame.Варианты с префиксом поставщика реализованы в текущих версиях всех важных браузеров, и легко обеспечить запасной вариант к старому методу.
3. В качестве последней мысли: возможно, это даже помогает в некотором мета-магическом способе включитьсам файл скрипта на главной странице, а не во внедренном документе