有很多不同的方法可以在html页面中包含JavaScript.我知道以下选项:
不计算来自硬盘,javascript:URIs和onEvent-attributes [ 3 ]的浏览器脚本,已经有16个替代方法可以执行JS,我确信我忘了一些东西.
我不太关心快速(并行)加载,我对执行顺序更感兴趣(这可能取决于加载顺序和文档顺序).是否有一个很好的(跨浏览器)参考,涵盖所有情况？例如http://www.websiteoptimization.com/speed/tweak/defer/仅处理其中的6个,并且主要测试旧浏览器.
我担心没有,这是我的具体问题:我有一些(外部)头脚本用于初始化和脚本加载.然后我在身体的末尾有两个静态的内联脚本.第一个允许脚本加载器动态地将另一个脚本元素(引用外部js)附加到正文.第二个静态内联脚本想要使用添加的外部脚本中的js.它可以依赖于已执行的其他(以及为什么:-)？
我有一些<script>元素,其中一些元素依赖于其他<script>元素中的代码.我看到这个defer属性可以在这里派上用场,因为它允许在执行时推迟代码块.
为了测试它我在Chrome上执行了这个:http://jsfiddle.net/xXZMN/.
<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>
但是,它提醒2 - 1 - 3.为什么不提醒1 - 2 - 3？
在我的网站上,我有许多内联的JavaScript代码段.他们中的大多数需要jquery和类似的东西.
但我想在页面呈现后将jquery加载推迟到.这意味着,在加载jquery之前,我的内联javascript会执行.我能做些什么吗？我正在寻找易于实现的解决方案(我也无法移动我的内联javascript,因为它是在为用户准备页面时自动生成的).
$(document).ready() 加载所有HTML元素后执行代码.
如何在应用所有CSS规则后执行jQuery代码？
我有很少的样式表链接到页面,加载页面需要一些时间.元素布局在加载期间发生更改.
出于可用性目的,我需要在所有元素布局都具有目标大小后更正它.否则我得到这些元素的错误大小.
现在我在焦点上或在一些超时后做,但在页面加载后需要这个.
无论如何，是否可以保留“延迟”或内联混合的脚本的执行顺序？
例如。考虑以下场景 -
<head>
<script src="/polyfills.js" />
<script>
// Small inline script that needs polyfills to work
</script>
<script src="/feature1.js" defer>
<script src="/feature2.js" defer>
</head>
我的目标是让所有脚本都有defer行为并保持执行顺序。但是，在这里，我无法添加defer到 polyfills 脚本，因为这样做会破坏内联脚本。
polyfills (defer) => inline-script (how?) => feature1 => feature2
内联脚本是一个很小的代码片段，不值得浪费一个请求。
例如，我可以编写一个函数来包装内联脚本并仅在填充填充加载后执行）吗？
我进行以下测试，以查看该defer属性是否推迟脚本块的执行。有2个脚本块。第一个带有defer属性，第二个带有out。如果我正确理解，则该属性会强制浏览器在所有html解析完成后（包括其他script块）。
但是从控制台来看，我始终是“从推迟开始”的。这是为什么？defer在本script地块上不起作用？
<html>
<body>
...
<script type="text/javascript" defer>
console.log('from deferred');
</script>
<script type="text/javascript">
console.log('from regular');
</script>
</body>
</html>