javascript - Js 脚本从页脚中断

Question

Google 速度优化测试建议我通过将所有非必要的 css 和 js 移动到页脚来优化我的页面。 CSS 很简单，将与点击效果或悬停效果相关的任何内容移至页脚。

但是，我发现无法移动 javascript。我正在使用有点过时的 Bootstrap 模板。有 28 个脚本都在本地加载，主要是各种 jquery 库。

我浏览了网站上的大约 5 个页面，并试图将每个 javascript 移动到页脚。在我的网站上，每一个都会导致某种 js 错误或其他错误。

现在，真正让我感到困惑的部分是，我确实查看了源代码，并且在我尝试过的页面上的其他任何地方都没有运行一个 js 文件。

我也试过一次将所有脚本移动到页脚。无论如何，如果我将它们从标题中删除 - 我会收到 js 错误并且事情开始失败...... Accordion 菜单，对象放置，一切......

所以我的问题是，当我将我的 js 文件放在页脚中时，即使页面上没有其他 javascript，我的网站怎么会崩溃？这是什么我不明白，因为显然我不明白一些东西。

(对于页脚，我指的是关闭正文标记之前的代码，而不是页脚标记或为页脚设计的 div 中的代码)

我的标题中的脚本

<link rel="icon" type="image/ico" href="favicon.ico"/>
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery-ui.min.js'></script>
<script type='text/javascript' src='/js/plugins/bootstrap.min.js'></script>
<script type='text/javascript' src='/js/plugins/fullcalendar/fullcalendar.min.js'></script>

<script type='text/javascript' src='/js/plugins/jquery/jquery.mousewheel.min.js'></script>
<script type='text/javascript' src='/js/plugins/cookie/jquery.cookies.2.2.0.min.js'></script>
<script type='text/javascript' src='/js/plugins/charts/excanvas.min.js'></script>
<script type='text/javascript' src='/js/plugins/charts/jquery.flot.js'></script>    
<script type='text/javascript' src='/js/plugins/charts/jquery.flot.stack.js'></script>    
<script type='text/javascript' src='/js/plugins/charts/jquery.flot.pie.js'></script>
<script type='text/javascript' src='/js/plugins/charts/jquery.flot.resize.js'></script>
<script type='text/javascript' src='/js/plugins/sparklines/jquery.sparkline.min.js'></script>
<script type='text/javascript' src='/js/plugins/select2/select2.min.js'></script>
<script type='text/javascript' src='/js/plugins/uniform/uniform.js'></script>
<script type='text/javascript' src='/js/plugins/maskedinput/jquery.maskedinput-1.3.min.js'></script>
<script type='text/javascript' src='/js/plugins/validation/languages/jquery.validationEngine-en.js' charset='utf-8'></script>
<script type='text/javascript' src='/js/plugins/validation/jquery.validationEngine.js' charset='utf-8'></script>
<script type='text/javascript' src='/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>
<script type='text/javascript' src='/js/plugins/animatedprogressbar/animated_progressbar.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js'></script>
<script type='text/javascript' src='/js/plugins/cleditor/jquery.cleditor.js'></script>
<script type='text/javascript' src='/js/plugins/dataTables/jquery.dataTables.min.js'></script>    
<script type='text/javascript' src='/js/plugins/fancybox/jquery.fancybox.pack.js'></script>
<script type='text/javascript' src='/js/cookies.js'></script>
<script type='text/javascript' src='/js/actions.js'></script>
<script type='text/javascript' src='/js/charts.js'></script>
<script type='text/javascript' src='/js/plugins.js'></script>
<script type='text/javascript' src='/js/mail.js'></script>

页面上不存在其他脚本。如果我将它们以完全相同的顺序放在页脚中，网站就会中断......

Answer 1

您放入网页中的任何代码都必须在事件(回调)上运行，通常是onload。脚本。您可以按此顺序加载它们。

1. 库/框架
2. 依赖于库
的库
3. 您的图书馆
4. 您的外部脚本。