将所有 jquery 插件代码内联到 HTML 中是个好主意吗？答案

【问题标题】：Is a good idea to put all jquery plugin code inline in the HTML?将所有 jquery 插件代码内联到 HTML 中是个好主意吗？
【发布时间】：2017-11-27 13:47:09
【问题描述】：

考虑到最佳加载性能，所有 JS 都是异步加载的。但在我的网站中，我使用的是 Google Adsense。为了延迟加载 Google Adsense 广告，我使用了AdsenseLoader.js。但是，如果我异步加载所有 JS，则某些横幅无法正确加载。

如果我将 jQuery 插件代码和 AdsenseLoader 内联在 HTML 中，所有 Adsense 横幅都会正确加载。

代码在页脚中是这样的：

<script defer>
    /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */
    !function(a,b){"object"==typeof module&&" /* ......... AND ALL JQUERY PLUGIN CODE MINIFIED HERE..... */

    /* Adsense loader https://github.com/osvaldasvalutis/adsenseLoader.js */
    !function(t,n,a,e){"use strict";var o=t(n) /*  ......... AND ALL ADSENSELOADER PLUGIN CODE MINIFIED HERE..... */
</script>

<script async src="assets/js/main.js"></script> <!-- ALL OTHER JS FUNCIONS LOADED ASYNC -->

<!-- HERE I LOAD THE ADSENSE BANNERS -->
<script defer>
    $( '.adsense' ).adsenseLoader({
        'laziness': 2,
        onLoad: function( $ad ){
            $ad.addClass( 'adsense--loaded' );
        }
    });
</script>

我需要将 jQuery 和 AdsenseLoader 内联，因为如果我将 main.js ASYNC 放入其中，一些 adsense 横幅将无法正确加载。

如果我正常加载 jQuery 和 AdsenseLoader，就像这样：

<script src="assets/js/jquery.js"></script>
<script src="assets/js/adsenseloader.js"></script>

它会导致一个 JAVASCRIPT RENDER BLOCK。

我认为的独特方法是将所有“批评”JS 缩小内联在 HTML 页脚中，并且可以完美运行。但我不知道这是否是个好主意，因为我从未在其他网站上看到过这个。

PS.：我是巴西人，抱歉我的英语不好。

编辑 1

这是我footer.php的截图

【问题讨论】：

我会从 CDN 链接之一链接 jQuery - 您的许多访问者很有可能已经缓存了它。
你把
@delinear 谢谢你的回答。我同意你的观点，但如果 <script> 标签不是异步的，则会导致 javascript 渲染阻塞。如果是异步的，会导致加载某些横幅时出错。你知道将 jquery 内联放在 HTML 页脚中是否有问题吗？
@sebastian-krysiak 谢谢你的回答。所有脚本都在页脚中。我用文件footer.php 更新了问题
@DR.Somar 据我所知没有技术上的理由不这样做，只要您知道缺点。至于它是否会使您的用例变得更好或更糟，唯一真正知道的方法是尝试它并运行一些测试。

标签： javascript jquery html

【解决方案1】：

如果您正在寻找延迟加载，请尝试LazyHTML

AdsenseLoader.js 有延迟加载广告的问题，因为它没有按顺序加载，Github 中为它创建了一个issue。

这是您可以使用 LazyHTML 的方式：

在 Header 中加载 LazyHTML 代码和 Adsbygoogle。

<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.0.0/dist/lazyhtml.min.js" crossorigin="anonymous"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>

将所有 Adunit 包装在如下示例包装器中

<div class="lazyhtml" data-lazyhtml>
  <script type="text/lazyhtml">
  <!--
  <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  -->
  </script>
</div>

这里有更多关于Lazy Loading Adsense的方法

我不建议将所有 jQuery 插件代码都内联，因为当你在外部拥有它时，它会被浏览器缓存并重复使用多次，但内联脚本必须用 HTML 一遍又一遍地加载，这将增加有效负载大小。

【讨论】：