JavaScript 与脚本文件放置位置混淆 [英] JavaScript confusing with script file placing place
问题描述
技术上将脚本放在 html 页面的底部是 JavaScript 最佳实践.但我很困惑为什么有些脚本应该在页面顶部调用，比如 Angular.因此，当我使用类似 Angular 的库时，我是否违反了 JavaScript 最佳实践?
Technically Place Scripts at the Bottom of html page is JavaScript Best Practice. But i'm confusing why some scripts should call at the top of page like Angular. So when i use Angular-like libraries is i'm breaking JavaScript best practices?
有什么解释吗?
推荐答案
从技术上讲，如果您不太关心脚本文件的顺序加载，这才是最佳实践.在调用它之前，您发现首先需要一个库.因此，人们在加载 HTML 后在底部加载他们所有的自定义脚本，因此他们不需要处理那个特定的 DOM 加载 事件和反击 渲染阻塞脚本 这就是当您将它们全部放在 head 标签中时会发生的情况.
Technically it's only best practice if you don't care "much" for the sequential loading of script files. You figured out you need a library first before you can call it. Hence people load all of their custom scripts in the bottom, after the HTML is loaded, so they don't need to take care of that particular DOM loaded event and to counter render blocking scripts which is what happens when you simply put them all in the head tag.
但 JavaScript 库实际上是需要首先完全加载的依赖项.从技术上讲也是在小范围内(或者现在将其与慢速智能手机进行比较).而且你也应该知道http协议允许你一次下载2个请求.
But JavaScript libraries are actually dependencies that need to be fully loaded first. Technically also on small band (or these days compare it with slow smartphones). And you should also know that the http protocol allows you to download 2 requests at once.
考虑到这些信息，我说最佳实践是将一个捆绑脚本文件置于从 head 标签加载的 async 模式下，最好是缩小的.可以通过 grunt/gulp 设置或某种方式实现.
With that info in mind, I say best practice is one bundled script file put on async mode loaded from the head-tag, preferably minified. Achievable with a grunt/gulp setup or some sort.
<head>
<title></title>
<script src='path-to-bundled-script.js' async='async' />
</head>
async 属性确保页面加载不会等待此脚本完全加载.它仍然等待多个 http 请求，因此需要捆绑顺序执行.
The async attribute makes sure the page loading doesn't wait on this script to be fully loaded. It still does wait on more than one http requests, hence the bundeling for sequential execution.
因此，当您进行开发并且没有完成此包的 grunt/gulp 设置时，您会遇到错误，说未加载库或无法识别符号.
So when you are developping and you don't have your grunt/gulp setup completed for this bundle, you will hit errors, saying that libraries aren't loaded or symbols aren't recognized.
要解决这个问题，您可以使用属性 defer.
To solve this you can use the attribute defer.
<head>
<title></title>
<script src='path-to-library.js' defer='defer' />
<script src='path-to-library2.js' defer='defer' />
<script src='path-to-library3.js' defer='defer' />
<script src='path-to-custom1.js' defer='defer' />
<script src='path-to-custom2.js' defer='defer' />
</head>
使用 defer 属性，页面加载将等待脚本执行完毕，但不会等待 HTML 完全加载.
With the defer attribute, the page load will wait for the scripts to be executed, but not for the HTML to be completely loaded.
使用这种技术，您可以忘记关闭正文标签作为最佳实践，并且您将获得可使用谷歌的 页面速度洞察
Using this technique, you can forget about the closing body tag as best practice and you'll gain speeds testable with google's pagespeed insight
这篇关于JavaScript 与脚本文件放置位置混淆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
