javascript在动态显示中性能缓慢：id无答案

【问题标题】：Slow performance of javascript in dynamic display:none by idjavascript在动态显示中性能缓慢：id无
【发布时间】：2018-05-27 14:06:06
【问题描述】：

我正在使用一个脚本来读取当前页面的 URL，检查是否存在特定字符串，然后创建一个有效期为一天的 cookie。如果存在 cookie，那么我将 display = none 设置为 id 的四个 div。代码如下，它正在工作。问题是它看起来相当缓慢，因为我设法在 div 消失之前看到了一段时间。

我已经尝试过使用 jquery 来“隐藏”div 以及“document.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 的电子商务脚本中。

【问题讨论】：

为什么不是服务器端？它比一切都快！您可以使用任何服务器端代码轻松完成此操作。
你的意思是用php？我无法将 php 代码附加到那些 div（例如 echo ....），那么如何仅通过 id 选择器、服务器端隐藏它们？
是的，使用php，您可以定义一个隐藏div 的类，例如.hide，那么如果您的php 返回true，则回显class，否则不会。您可以使用简单的内联 php 来实现。但我不知道你为什么不能使用php

标签： javascript jquery css cookies

【解决方案1】：

与其等待文档被完全解析以隐藏有问题的元素，不如创建或附加到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这样的重量级库，可以稍微加快页面加载速度。

当然，如果文档中已经存在style 标签，您可以根据需要为其添加规则而不是创建新标签。

【讨论】：

感谢您的回答和努力，我已经为每个有问题的 div 设置了样式。您能否详细说明“您可以向其中添加规则而不是创建新规则”？ Jquery 已经加载，无法避免。
即使您已经为每个 div 设置了样式，您仍然可以使用display: none 添加另一个规则，就像在 sn-p 中一样。您可以添加到现有样式表，例如，developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/…
嗯，好的，我现在明白了。我没有，是这样想的.. Thnx，我会试一试并发布结果......
不幸的是，您提到的代码对我不起作用。我还尝试了替代方法，例如：document.getElementsByTagName("head")[0].appendChild(document.createElement('style')); 或通过 jquery $("head").append 我还尝试在 </body> 之前移动 javascript，但它没有工作。我还尝试将append 设置在</body> 之前，但没有成功。我可以看到 DOM 中的样式，但没有效果。
如果有其他东西覆盖了他们的display 属性，那么你必须让display: none; 以某种方式获得更高的优先级，例如!important。检查要隐藏的元素以查看对其应用了哪些样式，这将告诉您其他干扰样式来自什么

【解决方案2】：

在开始时使用 CSS 隐藏元素，然后评估 cookie 的存在以显示元素或保持隐藏。

【讨论】：