Можно ли манипулировать домом до состояния готовности?

StackOverflow https://stackoverflow.com/questions/1222849

Вопрос

Обычно я управляю прогрессивным улучшением, сохраняя опыт в чистоте, но насколько это безопасно? Есть ли потенциал для состояния гонки, и это не работает?

Представьте себе простой абстрактный сценарий, вы хотите отображать что-то по-другому, если у вас есть поддержка javascript .. В общем, это то, что я в конечном итоге буду делать: 

<div id="test">original</div>
<script type="text/javascript">
    var t = document.getElementById('test');
    t.innerHTML = 'changed';
</script>

Многие могут утверждать, что вы должны использовать платформу и ждать события domready и вносить в него изменения ... однако существует значительная задержка, когда элемент 'test' будет уже отрисован до конца документа и CSS готовы и domready срабатывает .. таким образом вызывая заметное мерцание «оригинал».

Этот код подвержен ошибкам состояния гонки? или я могу гарантировать, что элемент можно обнаружить и изменить, если он существует до сценария?

Заранее спасибо.

Это было полезно?

Решение

Можно, но есть проблемы, связанные с этим.

Во-первых, в IE, если вы пытаетесь манипулировать узлом, который не был закрыт (например, BODY до его тега закрытия, который должен быть ниже вашего JS), тогда вы можете столкнуться с IE "OPERATION ABORTED" " ошибка, которая приведет к пустой странице. Манипулирование узлом включает добавление узлов, перемещение узлов и т. Д.

В других браузерах поведение не определено, однако они обычно ведут себя так, как вы ожидаете. Основная проблема заключается в том, что по мере развития вашей страницы она может загружаться / анализироваться / работать по-разному. Это может привести к запуску сценария до того, как браузер определит, что ссылочные элементы действительно созданы и доступны для манипуляций с DOM.

Если вы пытаетесь улучшить воспринимаемую пользователем производительность (то есть ловкость). Я настоятельно рекомендую вам избегать этого пути и изучать возможности освещения ваших страниц. Вы можете использовать Yahoo YSlow / Google Page Performance Firebug, чтобы помочь вам начать работу.

Скорость страницы Google

YSlow от Yahoo

Другие советы

Вы можете манипулировать DOM до его полной загрузки, но это может быть рискованно. Очевидно, вы не можете гарантировать, что бит DOM, которым вы пытаетесь манипулировать, действительно существует, поэтому ваш код может периодически прерываться.

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

Если вы хотите убедиться, что операция прошла успешно, оберните код в блок try ... catch и снова вызовите его через setTimeout () при ошибке.

На Viajeros.com у меня индикатор загрузки работает с 8-9 месяцев, и у меня пока нет проблем. Это выглядит так: 

<body>

<script type="text/javascript">
    try {
        document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
        document.getElementById("cargando").style.display = "block";
    } catch(E) {};
</script>

При преждевременном доступе к DOM возникают исключения в IE 5 и Navigator 4.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top