关于javascript:在HTML标记中,我应该把
如果您使用的是jquery,那么将javascript放在您认为最好的地方,并使用
附带说明:我喜欢
xhtml将不会验证脚本是否在head元素之外的任何地方。turns out it can be everywhere.
您可以使用jquery之类的东西延迟执行,这样就不需要考虑它放在哪里了(除了在解析过程中受到的一点性能影响)。
1 2 | <script src="myjs.js"> </body> |
在HTML文件中,脚本标记应始终在正文关闭之前或底部使用。
然后您可以在加载JS文件之前先看到页面的内容。
如果需要,请检查此项:http://stevesouders.com/hpws/rule-js-bottom.php
传统的(也是被广泛接受的)答案是"在底部",因为在任何东西开始执行之前,整个DOM都将被加载。
出于各种原因,有不同的人,从可用的实践开始,故意以page onload事件开始执行。
根据脚本及其用法的不同,最好的方法(在页面加载和呈现时间方面)可能是本身不使用常规标记,而是动态地异步触发脚本加载。
有一些不同的技术,但最直接的方法是在触发window.onload事件时使用document.createElement("script")。然后,当页面本身呈现时,首先加载脚本,从而不会影响用户等待页面出现的时间。
这自然要求呈现页面时不需要脚本本身。
有关更多信息,请参阅steve sounders(yslow的创建者,现在在谷歌)的后耦合异步脚本。
2019年的现代方法是使用ES6模块类型脚本。
1 | <script type="module" src="..."> |
默认情况下,模块是异步加载和延迟的。也就是说,您可以将它们放在任何地方,它们将并行加载,并在页面完成加载时执行。
本文描述了脚本和模块之间的区别:
https://stackoverflow.com/a/53821485/731548
与脚本相比,模块的执行如下所述:
https://developers.google.com/web/fundamentals/primers/modules延迟
支持如下:
https://canius.com/feat=es6模块
最后包括脚本主要用于首先显示网站内容/风格的地方。
在头部包含脚本可以提前加载脚本,并且可以在加载整个网站之前使用。
如果最终输入脚本,则只有在加载整个样式和设计之后才会进行验证,而这对于快速响应的网站来说是不可取的。
视情况而定,如果您加载的脚本是设计页面样式/使用页面中的操作(如单击按钮)所必需的,则最好将其放在顶部。如果您的样式是100%CSS,并且您有按钮操作的所有回退选项,那么您可以将其放在底部。
或者最好的事情(如果这不是问题)是你可以制作一个模式加载框,把你的javascript放在页面的底部,当你的脚本的最后一行被加载时,它就会消失。这样可以避免用户在加载脚本之前在页面中使用操作。同时也避免了造型不当。
在加载和执行之前,脚本会阻止DOM加载。
如果您将脚本放在
另一方面,将它放在
您包括jquery,这意味着您可以将它放在您希望的任何地方并使用.ready()。
如果您仍然非常关心IE<10中的支持和性能,那么最好始终将脚本标记作为HTML主体的最后一个标记。这样,您就可以确定已经加载了DOM的其余部分,并且不会阻塞和呈现。
如果您不再太在意IE<10,那么您可能需要将脚本放在文档的头部,并使用
defer 确保它们只在加载了DOM之后运行()。如果您仍然希望代码在IE<10中工作,请不要忘记将代码包装在 window.onload 中,尽管如此!
我认为这取决于网页的执行。如果要显示的页面在没有先加载javascript的情况下无法正确显示,则应首先包含javascript文件。但是,如果您可以显示/呈现一个网页而不需要最初下载javascript文件,那么您应该将javascript代码放在页面的底部。因为它将模拟快速的页面加载,从用户的角度来看,似乎页面加载更快。
您可以将大多数
在HTML文档末尾
以便在执行时不会影响在浏览器中加载HTML文档。
在HTML后面包含脚本对我来说更有意义。因为大多数时候我需要在执行脚本之前加载DOM。我可以把它放在head标签中,但我不喜欢所有的文档加载侦听器开销。我希望我的代码简短、甜美、易读。
我听说Safari的旧版本在将脚本添加到head标签之外时是夸基的,但我说谁在乎。我不知道有人在用那个废话。
顺便问一句好问题。
最好是在文档代码的末尾,在标记后编写
1 2 3 4 5 | $(document).ready(function(){ //your code here... }); |
你可以把脚本放在你想要的地方,其中一个并不比另一个更好。
情况如下:
页面加载是线性的,"自上而下",所以如果你把脚本放在头上,就可以确保它在一切事情发生之前就开始加载,现在,如果你把它放在正文中,与代码混合,会导致页面加载方式不雅观。
识别好的实践并不取决于在哪里。
为了支持您,我将提到以下内容:
你可以放置:
页面将线性加载
页面与其他内容异步加载
页面的内容将在加载脚本之前和之后加载
这里的好做法是,何时实施每一个?
我希望我能帮上忙,任何事都能回答我这个问题。