异步 javascript 和谷歌地图答案

【问题标题】：Asynchronous javascript and google map异步 javascript 和谷歌地图
【发布时间】：2015-08-29 19:42:57
【问题描述】：

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

这是这个插件对我主页的 javascripts 文件所做的：

<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>

【问题讨论】：

标签： javascript wordpress google-maps

【解决方案1】：

你可能想多了！ <script> 标记的“异步”属性意味着浏览器渲染引擎将继续解析页面以进行显示，同时仍并行运行 Javascript。这是一件好事，除非您有一些令人信服的理由让浏览器在执行 <script> 时停止运行，然后再继续执行它之后的标记。它确保页面快速呈现。

所以不是

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

你使用

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

我怀疑你发现的“异步 JS 插件”可能完全是为了其他目的？

不过，我会确保一旦 DOM 准备就绪（例如，在 jQuery $(function() { /* set up map here */ }); 中），在您的页面上设置 Google 地图并与之交互的代码就会执行

【讨论】：