预加载脚本没有执行

Question

预加载脚本没有执行

Mar*_*iry 12 javascript browser performance requirejs

问题

为了提高页面性能,我需要预加载我需要在底页运行的脚本.

我想控制脚本何时被解析,编译和执行.

我必须避免脚本标记,因为它是常见渲染引擎(geeko等)的阻止程序.

我无法使用defer属性加载它,因为我需要控制脚本执行的时间.此外,异步属性不是可能的.

样品:

<html><head>
//preload scripts ie: a.js  without use the script
</head><body> ..... all my nice html here
//execute here a.js
</body></html>

Run Code Online (Sandbox Code Playgroud)

这允许我最大化我的页面的渲染性能,因为浏览器将开始下载脚本内容,并且它将同时呈现页面并行.最后,我可以添加脚本标记,以便浏览器解析,编译和执行代码.

我能做到的唯一方法是使用隐藏的图像标记.(这是斯托扬的简化版)

即

 <html><head>
 <img src="a.js" style=display:none;>
</head><body> ..... all my nice html here
 <script src="a.js">  
</body></html>

Run Code Online (Sandbox Code Playgroud)

题

我没有发现使用这种技术的任何问题,但有没有人知道更好的方法来做到这一点？有没有meta预取？

附加信息

我正在使用requirejs,所以我试图预加载模块代码而不执行它,因为这段代码依赖于DOM元素.

Answer 1

Jui*_*ter 6

使用类似的技术,您可以使用imgInternet Explorer 预加载脚本和样式表,并object为每个其他浏览器预加载标记.

var isMSIE = /*@cc_on!@*/false;

var resources = ['a.js', 'b.js', 'c.css'];

for (var i=0; i<resources.length; i++){
  if (isMSIE){
    new Image().src = resources[i];
  } else {
    var o = document.createElement('object');
    o.data = resources[i];
    document.body.appendChild(o);
  }
}

Run Code Online (Sandbox Code Playgroud)

有一篇博客文章描述了这种技术并概述了警告:预加载CSS/JavaScript而不执行.

但是,为什么不想像其他答案中建议的那样只使用动态添加的脚本,这可能会带来更清晰的解决方案和更多的控制.