Javascript 在HTML底部使用多个标记

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

我想知道他们会不会放慢速度？ 或者可能导致任何技术问题

有没有办法把它们合并成一个文件并链接到我的页面上？或者这可能不是个好主意

<script>
    $('[data-fancybox]').fancybox({
    protect: true,
    infobar: true,
    idleTime: false,
    clickContent: false, 
    buttons: [
    //"zoom",
    //"share",
    //"slideShow",
    //"fullScreen",
    //"download",
    //"thumbs",
    "close"
    ],
    animationEffect: "fade",
    });
</script>    

<!-- Hamburger Menu -->
<script>
    var $menuham = $(".menuham");
        $menuham.on("click", function(e) {
            $(".overlay").fadeToggle(200);
            $("h1.brandcolor").toggleClass("brandcolorw");
            $menuham.toggleClass("is-active");
    // Do something else, like open/close menu
    });
</script>
<!-- Project Info Button -->
<script>
  var $projectinfo = $(".projectinfo");
  $projectinfo.on("click", function(e) {
    $projectinfo.toggleClass("is-active");
    // Do something else, like open/close menu
  });
</script>    

<!-- Back to Top -->
<script>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 250); 
        return false; 
    }); 
});
</script>  

<!-- Progress Bar -->
<script>
        // When the user scrolls the page, execute myFunction 
    window.onscroll = function() {myFunction()};

    function 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 = scrolled + "%";
    }
</script> 

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

是的，这就是javascript应该在的地方。要么是这个，要么是在上面加上一块石头。特别是在加载的dom上执行操作时

我想知道他们会不会放慢速度？或者可能导致任何技术问题

不，如果你把它们放在最上面就不会快了。虽然你可以使它更快，如果你缩小你的js。。。如果您正在使用一些包管理器，比如npm，您可以添加一些包来帮助您完成这项工作，如果没有的话，有大量的页面可以帮助您缩小代码。看看谷歌：缩小javascript。。。您还可以缩小css。编辑：实际上，如果你把它们放在顶部，文件太大，它看起来会慢一些。因为它开始以异步方式按顺序加载内容，所以根据您的internet连接，它们可能会减慢某些内容的显示速度，现在这一点不太相关。。除非你有真正大的js文件

有没有办法把它们合并成一个文件并链接到我的页面上？或者这可能不是个好主意

<script>
    $('[data-fancybox]').fancybox({
    protect: true,
    infobar: true,
    idleTime: false,
    clickContent: false, 
    buttons: [
    //"zoom",
    //"share",
    //"slideShow",
    //"fullScreen",
    //"download",
    //"thumbs",
    "close"
    ],
    animationEffect: "fade",
    });
</script>    

<!-- Hamburger Menu -->
<script>
    var $menuham = $(".menuham");
        $menuham.on("click", function(e) {
            $(".overlay").fadeToggle(200);
            $("h1.brandcolor").toggleClass("brandcolorw");
            $menuham.toggleClass("is-active");
    // Do something else, like open/close menu
    });
</script>
<!-- Project Info Button -->
<script>
  var $projectinfo = $(".projectinfo");
  $projectinfo.on("click", function(e) {
    $projectinfo.toggleClass("is-active");
    // Do something else, like open/close menu
  });
</script>    

<!-- Back to Top -->
<script>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 250); 
        return false; 
    }); 
});
</script>  

<!-- Progress Bar -->
<script>
        // When the user scrolls the page, execute myFunction 
    window.onscroll = function() {myFunction()};

    function 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 = scrolled + "%";
    }
</script> 

是的，只要把代码放在一个文件中，只要文件的内容是相关的，就可以了

如果您正在构建一个站点，请将所有常规代码放在一个文件的所有页面上，您可以在每个页面上加载这些代码。并在每个页面的底部添加内容，这些内容不是网站的一般内容，而是特定于该页面的内容

---

据我所知，您是web开发新手，这对学习很有帮助，但最终如果您想使用javascript，我建议您在包管理器上进行调查。但是现在还可以。

我认为有多个脚本标签也可以。你的代码有什么问题吗？这比把它们放在头上要好得多。