如果我推迟JS文件加载以提高Pagespeed，如何调用加载函数？

Question

我正在使用此脚本

<script type="text/javascript">
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
}

if (window.addEventListener) {
    window.addEventListener("load", downloadJSAtOnload, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", downloadJSAtOnload);
} else { window.onload = downloadJSAtOnload; }
</script>

其中defer.js是我整个网站所有JS函数的精简组合文件。

这项技术旨在推迟负载，以防止出现讨厌的Google Pagespeed警告：

“消除首屏内容中的阻止渲染的JavaScript和CSS”

但是现在，我对document.ready > function A所有调用现在都搞砸了...

有解决办法吗？

Answer 1

好，

因此，我不能说这是最佳做法，但似乎很合法：

如果您还没有和Web Workers一起玩，我强烈建议至少看一看API。

<head>
  <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
  </script>
  <title>Time for Web Workers!</title>
</head>
<body id="body">
  <script type="text/javascript">
      var worker = new Worker("js.js");
      worker.addEventListener("message",
          function (evt) {
            var script = document.createElement("script");
            script.innerHTML = evt.data;
            document.getElementById('body').appendChild(script);
          },false);
      worker.postMessage(1);    
  </script>

使用Javascript时， Web Workers打破了单线程的限制。 工人遭受的最大挫折是他们无法访问dom。 他们最能做的就是通过消息计算和传递数据。

啊，但是留言！

这是有点混乱的地方，但请坚持我。

var worker = new Worker("js.js");
// any data can be used as arg, but needed to trigger 'messages' listener
worker.postMessage(1);

我首先尝试发送postMessage()函数以使用本地js文件创建新的Worker 。 这可行，但是由于该线程不可用该脚本，因此导致jQuery保持undefined 。 单独的线程，单独的资源> _ <

为了解决这个问题，我们需要Worker将代码发送回主线程，以便在dom的jQuery脚本下执行。 我们可以通过将本地js文件设置为侦听message事件并以string形式返回其代码库来实现 。

这可以通过使用虚拟对象导入缩小的本地文件并将其解析为字符串来完成，也可以仅通过缩小的脚本创建一个字符串并像这样使用它来完成：

addEventListener("message",
    function (evt) {
      var script = 
          "$(document).ready(
             function() {
               var thisThing = 'blah';alert(thisThing);
             })";
            postMessage(script);
          }, false);

回到主线程，我们将事件侦听器设置为也侦听消息。 在此函数中，我们需要创建一个新的<script>元素，并将字符串化的代码库插入到其中，最后将其附加到body 。

worker.addEventListener("message",
    function (evt) {
      var script = document.createElement("script");
      script.innerHTML = evt.data;
      document.getElementById('body').appendChild(script);
    },false);

注意

我没有用大脚本测试过
我只用一个本地开发服务器来测试
我尚未在本地脚本中测试任何$(document).ready() -大量代码，所以我不知道这是否可以解决您的问题。
我很开心这样做：P

Answer 2

将您的JavaScript代码放在页面底部怎么办？ 这样，它将不会阻止任何渲染过程。

该代码将不会执行，因为已经调用了ready函数，因此您应该将所有代码包装在匿名函数中，以便立即执行。

(function(){
 //do stuff here
})();

如果我推迟JS文件加载以提高Pagespeed，如何调用加载函数？

问题描述

2 个解决方案

解决方案1
0 2016-11-29 06:39:03

解决方案2
-2 2016-11-29 00:36:34

如果我推迟JS文件加载以提高Pagespeed，如何调用加载函数？

问题描述

2 个解决方案

解决方案1 0 2016-11-29 06:39:03

解决方案2 -2 2016-11-29 00:36:34

解决方案1
0 2016-11-29 06:39:03

解决方案2
-2 2016-11-29 00:36:34