JavaScript与脚本文件放置位置混淆

小编典典

JavaScript与脚本文件放置位置混淆

angularjs

从技术上讲，将脚本放在html页面底部是JavaScript最佳实践。但是我很困惑为什么某些脚本应该像Angular那样在页面顶部调用。因此，当我使用类似Angular的库时，是否违反了JavaScript最佳做法？

有什么解释吗？

阅读 224

2020-07-04

共1个答案

小编典典

从技术上讲，这仅是最佳实践，如果您不关心顺序文件的“太多”加载。您确定要先调用一个库。因此，人们在加载HTML之后将所有自定义脚本加载到底部，因此他们无需照顾该特定DOM loaded事件并应对渲染阻止脚本，这就是将它们全部放在首位时发生的情况标签。

但是JavaScript库实际上是需要首先完全加载的依赖项。从技术上讲，也适用于小型乐队（或如今与慢速智能手机相比）。而且您还应该知道http协议允许您一次下载2个请求。

考虑到这些信息，我说 最好的做法 是将一个捆绑的脚本文件放在async从头标加载的模式下，最好缩小。可通过咕unt声/大口吃设置或某种方式实现。

<head>
    <title></title>
    <script src='path-to-bundled-script.js' async='async' />
</head>

该async属性确保页面加载不会等待此脚本完全加载。它仍然会等待一个以上的http请求，因此绑定了顺序执行。

因此，在进行开发时，如果没有为此捆绑包完成grunt / gulp设置，则会遇到错误，表示未加载库或无法识别符号。

为了解决这个问题，您可以使用属性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完全加载。

使用这种技术，您可以忘记将body标记作为最佳做法，而可以通过Google的pagespeed洞察力获得可测试的速度

2020-07-04