Question

我正在建立一个wordpress网站，我正在努力优化速度（我是一个新手）。根据Google页面速度洞察工具，我需要使用异步javascript来消除渲染阻止JavaScript。我环顾四周，我发现异步javascript插件的问题是它阻止我的谷歌地图加载。

以下是此插件对我主页的javascripts文件所做的操作：

＆＃13;

<script type="text/javascript">
    head.js({
        "comment-reply": "http://http://localhost:8888//wp-includes/js/comment-reply.min.js?ver=4.3"
    }, {
        "address": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.address-1.5.min.js"
    }, {
        "triple-layout": "http://http://localhost:8888//wp-content/themes/customtheme/js/triple.layout.js"
    }, {
        "smoothscroll": "http://http://localhost:8888//wp-content/themes/customtheme/js/smoothscroll.js"
    }, {
        "nprogress": "http://http://localhost:8888//wp-content/themes/customtheme/js/nprogress/nprogress.js"
    }, {
        "fastclick": "http://http://localhost:8888//wp-content/themes/customtheme/js/fastclick.js"
    }, {
        "imagesloaded": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.imagesloaded.min.js"
    }, {
        "isotope": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.isotope.min.js"
    }, {
        "flexslider": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.flexslider-min.js"
    }, {
        "fitvids": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.fitvids.js"
    }, {
        "validate": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.validate.min.js"
    }, {
        "uniform": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.uniform.min.js"
    }, {
        "fancybox": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.fancybox-1.3.4.pack.js"
    }, {
        "tooltipster": "http://http://localhost:8888//wp-content/themes/customtheme/js/jquery.tooltipster.min.js"
    }, {
        "prettify": "http://http://localhost:8888//wp-content/themes/customtheme/js/google-code-prettify/prettify.js"
    }, {
        "twitter-fetcher": "http://http://localhost:8888//wp-content/themes/customtheme/js/twitterFetcher_v10_min.js"
    }, {
        "mediaelement-and-player": "http://http://localhost:8888//wp-content/themes/customtheme/js/mediaelement/mediaelement-and-player.min.js"
    }, {
        "send-mail": "http://http://localhost:8888//wp-content/themes/customtheme/js/send-mail.js"
    }, {
        "classie": "http://http://localhost:8888//wp-content/themes/customtheme/js/classie.js"
    }, {
        "google-maps-api": "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"
    }, {
        "main": "http://http://localhost:8888//wp-content/themes/customtheme/js/main.js"
    }, {
        "wp-fix": "http://http://localhost:8888//wp-content/themes/customtheme/js/wp-fix.js"
    });
</script>
</body>

＆＃13;

Answer 1

你可能会过度思考它！＆＃39; async＆＃39; <script>标记的属性意味着浏览器呈现引擎将继续解析页面以供显示，同时仍然并行运行Javascript。这是一件好事，除非你有一些令人信服的理由让浏览器在执行<script>之前执行操作并暂停，然后再继续执行标记。它确保页面呈现快速。

所以而不是

<script src="myJS.js"></script>

你使用

<script src="myJS.js" async></script>

我怀疑你的异步JS插件＆＃39;你发现的可能完全是出于其他目的吗？

但是，我会确保您的代码在您的网页准备好后（例如在jQuery $(function() { /* set up map here */ });内部）

执行，这些代码会在您的网页上设置并与您的Google地图进行互动

异步javascript和谷歌地图

1 个答案: