有很多不同的方法可以在html页面中包含JavaScript.我知道以下选项:
不计算来自硬盘,javascript:URIs和onEvent-attributes [ 3 ]的浏览器脚本,已经有16个替代方法可以执行JS,我确信我忘了一些东西.
我不太关心快速(并行)加载,我对执行顺序更感兴趣(这可能取决于加载顺序和文档顺序).是否有一个很好的(跨浏览器)参考,涵盖所有情况？例如http://www.websiteoptimization.com/speed/tweak/defer/仅处理其中的6个,并且主要测试旧浏览器.
我担心没有,这是我的具体问题:我有一些(外部)头脚本用于初始化和脚本加载.然后我在身体的末尾有两个静态的内联脚本.第一个允许脚本加载器动态地将另一个脚本元素(引用外部js)附加到正文.第二个静态内联脚本想要使用添加的外部脚本中的js.它可以依赖于已执行的其他(以及为什么:-)？
我想同时使用下面的JavaScript代码来加载defer和async:
<script defer async src="/js/somescript.js"></script>
由于deferInternet Explorer 5.5+支持,正如您在CanIUse.com上看到的,如果异步不可用,我希望优先使用延迟.Async我认为最好在可用时使用,但在Internet Explorer 10之前不支持.
我的问题是上面的代码是否有效HTML？如果没有,是否有可能使用JavaScript优雅地回退到不可用defer的脚本时创建这种情况async？
我尝试通过async在脚本上添加一些属性来优化我的页面.它似乎打破了我的javascript,因为$(document).ready在加载所有脚本之前执行!
我看到我可以通过$(window).load代替而解决我的问题,$(document).ready但我想知道是否有更好的解决方案.此解决方案在我的情况下触发2个问题:
$(document).ready并告诉所有开发人员不再使用它你有一些魔术吗？也许把所有脚本放在最后？用defer而不是async？
曾几何时,有很多激烈的争论<script>在<head>或<body>.
许多SO帖子已经指出了最佳实践/经验法则是<script>在<body>不阻止html解析器之前放置前端,从而更快地获得第一次屏幕绘制和更快的客户端DOM访问,从而获得更好的用户体验.
这必须是重复的("□")╯
等等...... 现在<script>可以deferred,实际上已经有一段时间了!
老帖说
延迟脚本可能会导致JS依赖问题
不,它不会.它在解析DOM时立即保留执行顺序.
它不适用于跨供应商
是的,它曾经是,但今天它几乎得到了所有主要浏览器供应商的支持:http://caniuse.com/#search=defer,除了评论指出IE <10之外可能还有一些问题.
然而,它提供的好处似乎是显而易见的,至少在我看来,因为它在早期(在开始解析DOM之前)并行下载脚本,因此不需要稍后请求脚本并缩短整个脚本所需的时间.页面互动.
简而言之,这个问题类似于:任何不使用的好理由
<head>
...
<script src='cdn/to/jquery' defer>
<script src='cdn/to/bootstrap' defer>
<script src='script/depends/on/jqueryandbootstrap' defer>
</head>
而是使用这个:
<body>
...
<script src='cdn/to/jquery'>
<script src='cdn/to/bootstrap'>
<script src='script/depends/on/jqueryandbootstrap'>
</body>
注意:这可能是一个有很多讨论的"古老"话题.但是,随着Web技术的快速发展,浏览器供应商更好地与新的Web规范保持一致,许多旧的stackoverflow答案可能无法保持最新.
问题1:
为什么我需要在网页中异步加载我的JavaScript文件？我可以在服务器端看到它的基本原理,但如果我知道我需要在客户端加载的所有文件,为什么我不应该将所有源文件连接成1个文件并在页面加载时加载？第一个初始页面加载是否如此重要,以至于由于检索每个JS文件的延迟而导致未来的操作可能会变慢？
问题2:
假设问题1的答案是我需要单独加载JS文件:
AMD异步加载每个JS文件,CommonJS同步加载.服务器端加载需要CJS(如果我没有弄错的话,这就是Node.js的工作方式).AMD似乎更适合客户.因此,在客户端中使用CJS的唯一原因是与服务器共享代码.
有没有办法让AMD和CJS发挥得很好,以便客户端JS文件可以异步加载但仍然具有CJS语法？
(究竟是什么require.js呢？我不能为我的生活在他们的网站上的线条之间阅读.)
可以扩展Google Maps API v3中的许多类,特别是google.maps.MVCObject和google.maps.OverlayView.
在一些示例中,它们将在回调函数中扩展一个类initMap.我的应用程序比这些示例更强大,并且不希望在回调函数中定义一堆类.
(A)的解决方案是否在我自己的脚本之前包含Google Maps API而不包含回调函数？或者(B)我只是在回调函数中定义所有内容吗？或(C)其他一些方法.
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script src="./assets/js/main.js" type="module"></script>
<script src="./assets/js/main.js" type="module"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
哪里initMap是main.js和看起来是这样的:
function initMap() {
class Alpha extends google.maps.MVCObject {}
class Bravo extends google.maps.MVCObject {}
class Charlie extends google.maps.MVCObject {}
// More classes.
class Zulu extends google.maps.MVCObject {}
// Rest of code.
}
其他一些方法.
我遇到了以下代码:
<script src="foo.js" async defer>
我明白<script async...>将下载脚本,然后解析它暂停HTML解析.我也明白<script defer...>在解析所有HTML之后会下载脚本并进行解析.
做<script async defer...>什么(例如异步和延迟一起使用)？
HTML5脚本标记加载指令似乎很酷/sf/answers/1684926141/
是否可以异步加载一堆脚本,但有一个脚本等待执行基于异步完成.
<script src="//some.cdn/jquery.js" async></script>
<script src="//some.cdn/underscore.js" async></script>
<script src="/my-app-which-uses-_-and-jquery.js" defer></script>
我的应用程序脚本是否可以保证在我的库之后执行,还是只能按顺序执行其他延迟脚本？
我有以下功能可以加载给定脚本：
function addScriptTag(url){
var script = document.createElement('script');
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
我使用了该函数来加载彼此相关的库，它们lib2依赖于lib1和lib1依赖于jquery：
function loadThemAll(){
addScriptTag('http://path/to/jquery.js');
addScriptTag('http://path/to/lib1.js');
addScriptTag('http://path/to/lib2.js');
}
问题在于，即使lib1按此顺序，当需要jQuery时，也找不到它。同样适用于lib2该用途lib1。
如何使script标签创建并按顺序加载脚本？换一种说法 ：
添加脚本标签jQuery并加载它。
当jQuery被加载，添加脚本标记lib1并加载它。
当lib1被加载，添加脚本标记lib2并加载它。
In most tutorials, there are two ways mentioned about how to execute a jquery script:
window.onload hook.$(document).ready(function(){...}) event (and could be abbreviated to $(function(){...}))And I found that it even works when I omit all them, just place the code in a <script></script> occlusion could achieve the same purpose. Just like this:
<html>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<body>
<button id="btn" name="test" value="clickme">clickme</button>
</body>
<script>
//$(document).ready( function(){
// $('#btn').on("click", function(e){
// alert("hi")
// }
//)})
$('#btn').on('click', function(e){
alert('hi') …javascript ×8
html5 ×4
jquery ×2
amd ×1
asynchronous ×1
commonjs ×1
google-maps ×1
html ×1
load-order ×1