Как устранить пострендеринг “мерцание”?
Если вы хотите, чтобы переменные среды устанавливались во время выполнения, вы можете установить их вручную или использовать другие инструменты, такие как dotenv https://www.npmjs.com/package/dotenv
Но самый простой способ - установить их во время выполнения при запуске двоичных файлов. Вы можете использовать либо пакетный скрипт (если windows), например:
setlocal
set NODE_ENV=production
.\your-binaries.exe
endlocal
Примечание : setlocal предотвращает утечку переменной в дальнейшем.
Однострочная версия может быть set NODE_ENV=production && .\binaries.exe
Под Linux работает так же: установить переменную, затем запустить.
6 ответов
Как насчет того, чтобы комбинировать некоторые из этих решений:
<style type="text/javascript">
.only-without-script {
display: none;
}
</style>
<noscript>
<style type="text/javascript">
.only-with-script {
display: none;
}
.only-without-script {
display: block;
}
</style>
</noscript>
или я предпочитаю добавлять, класс к телу (поместите Ваш <script> тег наверху тела и не использует .ready событие):
<head>
<style type="text/javascript">
body.has-script .something-not-ajaxy {
display: none;
}
input.ajaxy-submit {
display: none;
}
body.has-script input.ajaxy-submit {
display: inline;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.className += ' has-script';
</script>
<!-- the rest of your page -->
</body>
Для ситуаций, идентичных Вашему, я обычно помещал кнопку отправки вокруг a <noscript> тег. Никто не предложил это, таким образом, я не уверен, считают ли это плохой практикой вокруг этих частей, но это - то, что я использую, и это работает на меня.
Если Вы только хотите узел, видимый, когда JavaScript включен, Вы могли сделать в голове:
<noscript>
<style type="text/css">
.js-enabled { display: none; }
</style>
</noscript>
И затем дайте любым элементам только для JavaScript класс js-enabled.
Я могу думать о двух методах:
1 - Предварительно обнаружьте, если JavaScript включен, и сохраните ту информацию в cookie/сессии. Это могло быть сделано в первой полосе и должно устранить большинство мерцаний.
2 - Используйте livequery плагин, который обнаруживает элементы, поскольку они добавляются к DOM. Можно выполнить его правильный, когда JavaScript заканчивает загружаться, который должен быть очень перед документом (это в голове).
$('.with_js_disabled').livequery(function() {
$(this).hide();
});
Точно так же, как David сказал, можно добавить JavaScript, который добавляет таблицу стилей для сокрытия всех "ненужных" элементов HTML:
<head>
...
<script type="text/javascript" language="javascript">
document.write('<style type="text/css"> .disabled-if-javascript { display: none; } </style>');
</script>
</head>
...
Если JavaScript включен, он устанавливает все элементы класса "disabled-if-javascript" к скрытому, прежде чем тело будет даже загружено. Просто добавьте этот класс ко всем элементам, которые должны быть скрыты, если JavaScript включен. Вам, возможно, также понадобился бы класс enabled-if-javascript, который делает противоположное, для показа определенных элементов, которые были бы скрыты для не-JavaScript. Возможно, необходимо добавить"!important"к Вашему определению стилей там, для переопределения существующего (не-JavaScript) правила.
Просто мысль: я не уверен, будет ли это работать, но Вы могли бы попытаться поместить некоторый JavaScript в заголовок документа для записи элемента стиля CSS, который скроет кнопку.
Простая вещь, которую стоит попробовать: добавить прямо перед закрытием тега body.
Это заставит всех привязывается к событию готовности к срабатыванию. И если вы заставите их активироваться в конце документа, DOM будет загружен и готов к работе, даже если «родное» событие onDomContentLoaded еще не запущено.
Это обычно работает для меня, когда я хочу удалить мерцание, особенно в IE / win, так как IE имеет собственный эмулятор domready в событии 'ready' jQuery.