Низкая производительность JavaScript при динамическом отображении: нет по идентификатору

Question

Я использую скрипт, который читает URL текущей страницы, проверяет наличие определенной строки и затем создает cookie с истечением одного дня.Если cookie присутствует, я устанавливаю display = none на четыре деления по id.Код ниже, и он работает.Проблема в том, что это кажется довольно медленным, так как мне удается некоторое время увидеть div, прежде чем они исчезнут.

Я пробовал оба jquery для «скрытия» div, но также и «документ».getElementById .style.display = 'none'; "

<script type="text/javascript">
var myvariab1= window.location.href;
if( myvariab1.indexOf('thetextiamsearhing') >= 0){
var date = new Date;
date.setDate(date.getDate() + 1);
var mexpire = "; expires="+date;
final_cookie = "mycookie =" + myvariab1+mexpire +"; path=/";
document.cookie = final_cookie;
}
 if (document.cookie.indexOf('mycookie') > -1 ) {
$(document).ready(function(){
$('#myid1').hide();
$('#myid2').hide();
$('#myid3').hide();
$('#myid4').hide();
});
}

</script>

Что я могу сделать, чтобы сделать это быстрее?Скрипт помещается прямо перед закрытием </head>.Скрипт находится внутри скрипта электронной коммерции, который использует jquery.

Answer 1

Скройте элементы в начале, используя CSS, а затем оцените существование куки, чтобы показать элементы или скрыть их.

Answer 2

Вместо ожидания полного анализа документа, чтобы скрыть рассматриваемые элементы, создайте или добавьте тег style, чтобы элементы никогда не отображались в первую очередь.Например:

var myvariab1= window.location.href;
if( myvariab1.indexOf('thetextiamsearhing') >= 0){
  var date = new Date;
  date.setDate(date.getDate() + 1);
  var mexpire = "; expires="+date;
  final_cookie = "mycookie =" + myvariab1+mexpire +"; path=/";
  document.cookie = final_cookie;
}
if (document.cookie.indexOf('mycookie') > -1 ) {
  document.head.appendChild(document.createElement('style'))
    .textContent = `
      #myid1, #myid2, #myid3, #myid4 {
        display: none;
      }
    `;
}

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

Конечно, если *Тег 1007 * уже существует в документе, вы можете добавить к нему правила вместо создания нового, если хотите.