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加载事件并计算< a href =https://developers.google.com/speed/docs/insights/BlockingJS\"rel =nofollow>渲染阻止脚本，当您将它们全部放在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-tag加载的 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.
要解决此问题，您可以使用属性推迟。
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.
使用这种技术，你可以忘记关闭身体标签作为最佳做法，你可以通过google的 pagespeed insight
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屋！
