如何同时加载 Javascript 和 HTML答案

【问题标题】：How to Load Javascript Simultaneously with HTML如何同时加载 Javascript 和 HTML
【发布时间】：2011-03-21 12:28:53
【问题描述】：

是否有任何技术可以在渲染 HTML 的同时渲染 javascript 文件？

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

问题是，有时我需要在页面加载时使用 javascript 来设置元素的宽度，这真的很烦人，因为在 HTML 中呈现元素后设置元素宽度的 javascript 代码.

【问题讨论】：

标签： javascript html load performance html-rendering

【解决方案1】：

使元素在 HTML 中呈现为不可见，并让 Javascript 设置宽度然后使其可见。

【讨论】：

【解决方案2】：

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

如果您查看 CSS 解决方案可能会更好。

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

【讨论】：

【解决方案3】：

是的，您可以使用 JcorsLoader 之类的小型加载程序 javascript（Gzip 仅 647B）

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

【讨论】：

在我测试过的所有插件中，这个插件实际上做了它应该做的事情。 yepnope 之类的都是废话 - 看，他们甚至已经有 2 年多的时间没有为它们工作了。抱歉 4 次挖掘，但我在测试这些插件上浪费了 wks。

【解决方案4】：

您可以在内联脚本块中使用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>

【讨论】：