加载样式表和 JavaScript 耗时过长答案

【问题标题】：Loading stylesheets and JavaScript taking too long加载样式表和 JavaScript 耗时过长
【发布时间】：2015-08-24 07:58:26
【问题描述】：

我应该怎么做才能减少加载时间？

<head>
    <title>NCI SwitchGears</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="menu/styles.css">
    <script src="bootstrap-3.3.4-dist/js/jquery-latest.min.js" type="text/javascript"></script>
    <script src="menu/script.js"></script>
</head>

【问题讨论】：

首先，只加载一个 jQuery 版本。顺便说一句，第二个将覆盖任何先前设置的 jQuery 方法，作为引导 js 方法
通常你可以延迟加载 JS 文件，方法是把它们放在结束体标签 </body> 之前。如果您需要进行一些特征检测或填充某个特征，但大多数时候您正在解析和操作需要加载 DOM 的 DOM，则可能会有例外。在页面末尾包含脚本或创建加载/初始化函数将有助于延迟 JS 的解析和执行。

标签： javascript jquery html css web

【解决方案1】：

您正在加载 jQuery 两次。一次本地，一次远程。
考虑使用 Require.JS 按需加载您的 JS
将样式表合并到一个请求中。确保您使用的是模块化样式，然后再次按需加载。
JS 在适当的地方移动到页脚

【讨论】：

【解决方案2】：

Google 提供了一个很好的工具来帮助您加快网页的加载时间 https://developers.google.com/speed/pagespeed/insights/

这是另一个不错的online tool。

作为一般规则：

加载 1 个 js 文件和 1 个 CSS 文件 - 压缩
将你的 js 放在页面底部，而不是在页眉中
在页面加载后通过 ajax 加载社交工具/脚本
优化您在模板上使用的图像/图形
设置适当的过期标头和缓存选项

您可以在上述工具中找到有关您网页的更具体说明。

【讨论】：