如何使用HTML同时加载Javascript

Question

是否有任何技术在HTML呈现的同一时间渲染javascript文件？

我的第一个想法是将它加载到<script>标记的头部，但正如我所见，这不会影响加载顺序，或者我错了？

问题是，在某些时候，我需要使用JavaScript来设置元素的宽度，当页面加载时，它真的很烦人的小振动是什么，因为JavaScript代码设置元素宽度后呈现在元素HTML。

Answer 1

除非您设置了异步标志（在某些浏览器中），否则JS文件将阻止加载内容。所以你可以从它加载的那一刻起运行你的JS脚本。

尽管你看了CSS解决方案可能会更好。

支持异步代码：Which browsers support <script async="async" />?

Answer 2

使元素在HTML渲染为不可见，并有JavaScript的设置，那么宽度使其可见。

Answer 3

您可以在内联脚本块中使用document.write来输出元素的HTML，包括内联style。虽然它会很丑陋;你确定你无法避免整个事情吗？

编辑：一个更简洁的方法是document.write一个内联样式块，它在元素的HTML之前使用一个id选择器来设置元素的宽度;这将降低更好，但仍避免访问DOM它已经准备好之前，任何潜在的问题：

<script type="text/javascript"> 
    var width = ...; 
    document.write('<style type="text/css">#myid{width:' + width + 'px;}</style>'); 
</script> 
<div id="myid">...</div> 

Answer 4

是的，你可以用一个微小的加载器的JavaScript像JcorsLoader（仅647B用gzip）

JcorsLoader.load(
       "http://xxxx/jquery.min.js", 
       function() { 
        $("#demo").html("jQuery Loaded"); 
       }, 
       "http://xxxx/jquery.cookie.js", 
       function() { 
        $.cookie('not_existing'); 
       } 
      ); 

载倍数js并行并按顺序执行而不阻塞DOMReady或onload。

https://github.com/pablomoretti/jcors-loader