Question

可以在HTML的底部使用多个Script标签吗？这是我正在使用的脚本。

我想知道他们是否会减慢速度？或会导致任何技术问题？

有什么方法可以将它们合并为一个文件并将其链接到我的页面？还是这不是一个好主意？

  

<！-汉堡菜单->
<脚本>
    var $ menuham = $（“。menuham”）;
        $ menuham.on（“ click”，function（e）{
            $（“。overlay”）。fadeToggle（200）;
            $（“ h1.brandcolor”）。toggleClass（“ brandcolorw”）;;
            $ menuham.toggleClass（“ is-active”）;
    //做其他事情，例如打开/关闭菜单
    }）;

<！-项目信息按钮->
<脚本>
  var $ projectinfo = $（“。projectinfo”）;
  $ projectinfo.on（“ click”，function（e）{
    $ projectinfo.toggleClass（“ is-active”）;
    //做其他事情，例如打开/关闭菜单
  }）;


<！-返回页首->
<脚本>
$（document）.ready（function（）{
    $ {window）.scroll（function（）{
        如果（$（this）.scrollTop（）> 100）{
            $（'＃scroll'）。fadeIn（）;
        }其他{
            $（'＃scroll'）。fadeOut（）;
        }
    }）;
    $（'＃scroll'）。click（function（）{
        $（“ html，body”）。animate（{scrollTop：0}，250）;
        返回false；
    }）;
}）;


<！-进度栏->
<脚本>
        //当用户滚动页面时，执行myFunction
    window.onscroll = function（）{myFunction（）};

    函数myFunction（）{
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight-document.documentElement.clientHeight;
      var scrolled =（winScroll / height）* 100;
      document.getElementById（“ myBar”）。style.width =滚动+“％”;
    }

Answer 1

可以在HTML的底部使用多个Script标签吗？这是我正在使用的脚本。

是的，多数民众赞成在应该的地方。可以这样，也可以使用 defer 属性在顶部。特别是如果您正在加载的dom上执行操作。

我想知道他们是否会减慢速度？或会导致任何技术问题？

不，如果将它们放在顶部，不会更快。虽然如果您缩小js的大小可以使速度更快...如果您使用的是npm之类的软件包管理器，则可以添加一些软件包来帮助您解决这个问题，如果没有的话，可以通过大量页面来帮助您缩小您的代码。只需在Google上查看：缩小javascript ...您还可以缩小css。 编辑：实际上，如果将它们放在顶部并且文件很大，它看起来可能会变慢。因为它开始以异步方式但按顺序加载内容，所以根据您的Internet连接，它们可能会减慢某些内容的显示速度，如今这种情况已经不太相关了。.除非您确实拥有较大的js文件。

有什么方法可以将它们合并为一个文件并将其链接到我的页面？还是这不是一个好主意？

是的，只要将您的代码放在一个文件中，只要文件的内容与之相关即可。

如果要构建站点，请将所有常规代码（应该在所有页面上的代码）放在一个文件中，您可以在每个页面上加载该代码。并在每个页面的底部添加非网站通用但特定于该页面的内容。

我假设您是Web开发的新手，这很不错，很适合学习，但是最终，如果您想使用javascript，我建议您研究软件包管理器。但目前还可以。

在HTML底部使用多个<script>标签

1 个答案: