浏览器加载资源的最有效方式

Most efficient way for browser to load resources

本文关键字：有效 方式 加载 资源 浏览器      更新时间：2023-09-26

我目前使用Angular和ng个路由、ng个表和ng个动画。我还使用其他库，如jQuery和Modernizr。最后，我有了自己的自定义javascript，它可以是多个文件。

因此，我的项目加载了一长串资源，如下所示：

<script type="text/javascript" src="/lib/jquery.min.js"></script>
<script type="text/javascript" src="/lib/modernizr.min.js></script>
<script type="text/javascript" src="/lib/angular.min.js"></script>
<script type="text/javascript" src="/lib/angular-route.min.js"></script>
<script type="text/javascript" src="/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>

我知道我可以通过减少HTTP调用和压缩所有文件来加快我的项目。

我使用CodeKit，它提供了将JS文件相互导入并编译为单个压缩文件的选项。如果我对上面的列表这样做，我会简单地加载一个像这样的文件：

<script type="text/javascript" src="/js/main.min.js"></script>

一个单独的HTTP调用而不是6+，并且所有代码都被缩小了。这里的问题是，单个文件是500kb+，在一个完整的项目中会大得多，可能超过1mb。

  • 这是否意味着文件不会因为太大而被浏览器缓存
  • Angular或其他库在以这种格式编译时是否会出现运行问题？（如果.map文件不在同一目录中，控制台将抛出错误）
  • 当然，一个500kb以上的文件仍然需要很长时间才能加载，所以这真的会提高加载时间吗

在我看来，它必须等待整个大文件加载后才能执行任何操作。而如果这些文件是单独的，它们可以在每次加载后立即开始执行脚本。

这是否意味着文件不会因为太大而被浏览器缓存？

这取决于浏览器。桌面浏览器应该不会有任何问题，但移动浏览器会。

Angular或其他库在以这种格式编译时是否会出现运行问题？（如果.map文件不在同一目录中，控制台会抛出错误）

没有。.map问题不会影响最终用户，除非他们打开控制台。这也可以通过为组合版本生成.map文件的构建过程来解决。

当然，一个500kb以上的文件仍然需要很长时间才能加载，所以这真的会提高加载时间吗？

是的，因为您不会在每个请求中来回传递cookie和http头。

但是，您可以做一些事情来改善加载时间。例如，我将文件分为两类：

立即需要的文件，以及以后可以加载的文件。

不幸的是，你不可能真的在没有后果的情况下对角度进行区分，因为所有路线都需要预先定义，以及所述路线所需的所有控制器和服务。唯一可以真正删除的是内联模板，因为以后可以通过ajax请求模板。

我能够为我的一个应用程序进行这样的拆分；我将管理代码和客户端代码分开，只在成功登录管理员后才包含管理代码。这对管理员来说很不方便，因为管理员不能直接进入管理页面，也不能在没有问题的情况下重新加载管理页面，但它确实减少了非管理员用户的加载时间。

这让你只有一个真正的选择：缩小你所包含内容的整体大小。这意味着使控制器和服务尽可能地可重用，并且不包含不必要的代码。看看您的示例，您将包含jQuery。jQuery的目的是使编写ajax请求和选择/操作DOM节点变得更容易，Angular已经涵盖了这两个方面。因此，您可以通过删除jQuery并使用基于角度的插件来减少代码库的大小。

相关文章：