谷歌浏览器AngularJS应用

我有一个AngularJS应用程序，在此URL下可达的初始加载按下Enter键，使用谷歌浏览器，无需打开开发人员工具（F12），大约需要20秒钟的时间才能加载，如果我打开开发人员工具，大约需要5秒钟，这没关系。与其他浏览器如Opera，Firefox和IE一样，初始加载应用程序总是需要大约5秒钟的时间。谷歌浏览器AngularJS应用

我现在的问题是如果有人对这种奇怪的行为有任何解释？

来源

2016-11-06 quma

花了5秒钟，我的谷歌浏览器。我想你可能需要清除你的谷歌浏览器的缓存。 – Laazo

感谢您的回应，我尝试了它在隐身模式下，它也花了5秒（每次尝试）。在普通模式下，花费20秒。我的应用程序端是否有可能在“正常”模式下改善加载时间？我意识到，如果点击链接“我的appl”（总是5秒），或者我在浏览器URL输入中输入网址并点击回车，这也是一个区别。这一点有点奇怪。 – quma

与响应时间慢的问题，是因为你有一个加载了太多的文件。您的应用程序会加载带有ng-include的html文件，并且在加载所有脚本之前它不会开始加载该文件。我建议将所有脚本捆绑到一个文件中。这会将加载时间至少缩短一半。这是一个很好的插件，它将你的库从鲍尔打包成一个文件https://www.npmjs.com/package/gulp-bundle-assets。

而且好的做法是把html静态HTML文件中稍后将与内容替换你想

<body ng-include='app/core/aposoft.html'> 
    <div> App is initializing </div> 
</body>

像这样的html你会让用户知道该应用程序加载，你可以使用CSS来更好地设计它。将所有脚本放在</body>标记下。还可以在服务器上为所有脚本启用缓存。

通过这种方式，您可以将单个文件加载所有脚本和初始html，以向用户显示您的应用程序正在初始化，并且下次同一用户打开您的应用程序时，它将非常快速。

注：为了避免与缓存问题，当你有新的版本，你应该使用https://www.npmjs.com/package/gulp-useref

来源

2016-11-08 10:31:20 Kliment

这是一个相当的猜测，但似乎你会更好地将整个项目哼成/缩小为3个文件。

该项目包含许多.js文件，因此需要更多时间。

https://www.youtube.com/watch?v=TMKj0BxzVgw

试试这个视频，如果你想通过叫声/缩小文件，会做的伎俩

也要把这些246个请求转换成3名的请求，但目前需要最大5秒

编辑：

我再次找到自己的代码。

这是的package.json

"grunt": "^1.0.1", 
    "grunt-angular-templates": "^1.0.4", 
    "grunt-contrib-clean": "^1.0.0", 
    "grunt-contrib-concat": "^1.0.1", 
    "grunt-contrib-copy": "^1.0.0", 
    "grunt-contrib-cssmin": "^1.0.1", 
    "grunt-contrib-uglify": "^1.0.1", 
    "grunt-usemin": "^3.1.1",

它创建此树文件夹树：

dist > 
    css > 
     css.min.css 
    scripts > 
     app.min.js 
     vendor.min.js

而是包含与.js文件多于10个文件夹我的应用程序文件夹中。

的Index.html

<!-- build:css css/css.min.css --> 
    <link rel="stylesheet" href="Something.css"></link> 
    <link rel="stylesheet" href="Something.css"></link> 
    <!-- endbuild --> 

    <!-- build:js scripts/vendor.min.js --> 
    <script src="Something.js"></script> 
    <script src="Something.js"></script> 
    <script src="Something.js"></script> 
    <!-- endbuild --> 

    <!-- build:js scripts/app.min.js --> 
    <script type="text/javascript" src="Something.js"></script> 
    <script type="text/javascript" src="Something.js"></script> 
    <script type="text/javascript" src="Something.js"></script> 
    <!-- endbuild -->

来源

2016-11-08 10:05:27 Kapein

谷歌浏览器AngularJS应用

回答

相关问题