AngularJS初始加载时间优化 [英] AngularJS Initial Loading Time Optimization

问题描述

我的应用只有15页，并且在客户端没有很多代码.该网站由阿姆斯特丹的模数托管，我称之为德国.它的加载时间很长，我是唯一一个调用该网站的人.服务器统计信息: 154个请求转移了9.14mb平均响应4.31ms

My app is just 15 pages and does not contain a lot of code on the client side. The website is hosted with modulus from Amsterdam and I call it from Germany. It has an awful long loading time and I was the only one calling the website. The server stats: 154 requests transfered 9.14mb avg response 4.31ms

大多数加载时间似乎是vendor.css和vendor.js.以及应用程序的css和js.

Most of the loading time seems to be vendor.css and vendor.js. As well as the css and js of the application.

我已经做过的事情:

• 先加载CSS
• 稍后尝试加载不需要的js，例如socket.io，谷歌分析，但这是一个Angular应用程序，因此我需要在头部添加一些JS
• uglify&缩小我的JS& CSS
• 使用concat CSS，JS减少请求
• 将精灵用于两次使用过的小图像
• 加载差异图像尺寸基于屏幕尺寸
• 为HTML使用角度模板缓存(这会增加初始加载时间)
• 可能还有一些我忘了提及的事情

为什么瀑布上没有空隙，请确保这些是外部脚本，但是它可以在那时加载图像.

Why is there a gap in the waterfall, sure these are external scripts but it could already load the images in that time.

从CDN加载外部JS是否会减少很多加载时间? 我想到了像这样: https://www.npmjs.com/package/gulp-cdnizer 但我喜欢它有一个类似的编.在开发和生产中.另外，我的吞咽过程非常复杂，我确实尽力避免在那里进行过多的重组.

Will loading the external JS from CDNs reduce a lot of the loading time? I thought about s.th. like this: https://www.npmjs.com/package/gulp-cdnizer but I like it to have a similar prog. in dev and prod. Also my gulp processes are very complex, I really try to avoid restructuring too much there.

像gzip这样的东西如何与角度模板缓存结合使用?

How are things like gzip combineable with angular template cache?

我还能做些什么来减少初始加载时间，应用程序中的加载时间很好.

What else can I do to reduce the initial loading time,the loading time in the app is good.

推荐答案

1. 因为您的网站要等到dom加载后才能加载，因为这是一个单页应用程序，如果没有角度，页面就不知道要加载什么图像...
2. 是的！是的！是的！ 我的dom负载约为11秒...我的js聚合文件为850K. 使用CDN时，我的dom加载时间为2秒，文件为250K(因为使用了良好的gzip)
3. 是是是！会很有帮助！
4. 使用javascript聚合将您的所有js最小化为一个文件(或2个文件). 如果您有很多文件，则将文件分为2个文件(必需和额外).您需要加载什么以及以后可以加载什么...

1. because your site will not load until the dom will be load because this is a single page application, without angular the page have no idea what image to load...
2. YES! YES! YES! my dom load was arround 11 secs... my js aggregated file was 850K. with CDN my dom load was 2sec and the file was 250K (because good gzip)
3. YES YES YES! will help a lot!
4. use javascript aggregation to marge and minimize all your js to a single file (or 2 files). if you have a lot of files, separate to 2 files, required and extra. what you need to load and what can be loaded later...

祝你好运:)

这篇关于AngularJS初始加载时间优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！