小部件中的延迟代码-页面速度

时间：2018-10-22 作者：Electron

如何使用Widget Defer提高页面速度

有没有办法defer 页脚中的小部件？

我在页脚小部件中有一个外部API，这会减慢我的速度page. 在加载页面之前不需要它。

我使用的缓存插件（W3 Total Cache）为我提供了延迟其他脚本的选项，但没有直接编码到小部件中的脚本。

手动操作的最佳方式是什么defer 页脚的WordPress小部件区域中的自定义代码API？

像这样

enter image description here

enter image description here

<script type="text/javascript">
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
var cccTheme = {"General":{"background":"#ffffff14","borderWidth":"0","borderColor":"none"},"Tabs":{"background":"#ffffff08","color":"#eee","activeBackground":"#ffffff14","activeColor":"#fff"},"Row":{"color":"#eee","borderColor":"#016ac1"},"Trend":{"colorDown":"#b7b6b6","colorUp":"#50dcb6","colorUnchanged":"#dddddd"},"Conversion":{"color":"#006ac1"}};
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+\'serve/v1/coin/multi?fsyms=BTC,LBC,ETH&tsyms=USD,BTC,GBP,CNY\';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
</script>

3 个回复
最合适的回答,由SO网友:Александр Фишер 整理而成

您的代码显示了一个内联脚本，它向DOM中添加了一个新的脚本标记，这可能会减慢网站的加载时间。这不是内联脚本标记。尝试添加此行s.defer = true; 之后s.async = true; 添加defer 属性到脚本标记。然后应该如下所示：

var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.defer = true; //add this line
var theUrl = baseUrl+\'serve/v1/coin/multi?fsyms=BTC,LBC,ETH&tsyms=USD,BTC,GBP,CNY\';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
这将导致添加一个新的脚本标记（名为s 页面将加载的所有脚本，它应该如下所示：

<script type="text/javascript" async defer src="https://widgets.cryptocompare.com/serve/v1/coin/multi?fsyms=BTC,LBC,ETH&amp;tsyms=USD,BTC,GBP,CNY"></script>

SO网友:cjbj

这与WordPress无关。这是关于加载脚本时浏览器的行为。你说得对defer 无法使用内联脚本。因此，最简单的方法是添加event listener 到将在加载页面之前暂停执行的脚本：

window.addEventListener ("load", function() {
  ... your script ...
  }

SO网友:T.Todua

@cjbj是对的，我投票支持他。但是，如果需要，您可以尝试另一种方法—将该脚本移动到文件中（即。wp-content/your_script.js) 然后使用将其插入小部件defer:

<script src="https://yoursite.com/wp-content/your_script.js" defer></script>
另外，您的特定脚本看起来并不专业（可能不是由javascript专家编写的）。要强制它停留在特定的html区域内，请执行以下操作：

将脚本放入div中：<div id="my_cripto"><script src.......></div>.js 文件，执行此修改：

var embedder = document.getElementById("my_cripto");

结束
标签： widgets   api   performance   customization   optimization   小码农  

相关推荐

设置API问题：提交后未保存更改

我正在写一个插件“付费帖子”，里面有一些选项。我为我的插件创建了一个设置页面，它显示OK，但当我按下“保存更改”按钮时，我的选项没有更改，它只会保持“打开”。阅读“设置API”页面并没有帮助，探索其他插件也没有帮助。管理选项的代码部分：// Admin options function PPOptionsPage() { add_settings_section(\"section_main\", __(\"Main options\", \'paid-posts\'), \