Hi everyone I am currently facing a performance issue with an angularJS 1.5.5 app. The homepage takes FOREVER to load, even using the minified libraries it is taking up to 25s to load (just with one user accesing the app).
I first thought that it could be the server where is allocated, but no, if I run my app locally, takes about the same time. This is the waterfall diagram:
Waterfall Diagram
I am not sure why does it takes too long to serve the minified libraries along with the rest of the resources. Even in most of the posts that I have seen related to performance issues, I notice that these libraries are provided in less than a second, maybe 250-500 ms for each of them (maximum).
This is the way I am importing my libraries to my index:
<!--Minified Libraries-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/min/angular_block_ui.min.css">
<link rel="stylesheet" href="css/min/font-awesome.min.css">
<link rel="stylesheet" href="js/lib/angular-ui-grid/ui-grid.min.css">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/min/massautocomplete.min.css">
<script src="js/resources/min/q.min.js"></script>``
<script src="js/resources/min/fastclick.min.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/resources/min/angular-animate.min.js"></script>
<script src="js/resources/min/angular-sanitize.min.js"></script>
<script src="js/resources/min/angular-route.min.js"></script>
<script src="js/resources/min/angular-ui-router.min.js"></script>
<script src="js/lib/angular-ui-grid/ui-grid.min.js"></script>
<script src="js/lib/jquery/jquery.min.js"></script>
<script src="js/lib/bootstrap/bootstrap.min.js"></script>
<script src="js/lib/angular-autocomplete/massautocomplete.min.js"></script>
<script src="js/resources/min/ui-bootstrap-tpls.min.js"></script>
<script src="js/resources/min/angular-file-upload.min.js"></script>
<script src="js/resources/min/roundProgress.min.js"></script>
<script src="js/resources/min/angular-charts.min.js"></script>
<script src="js/resources/min/circular1.min.js"></script>
<script src="js/resources/min/circular2.min.js"></script>
<script src="js/resources/min/angular_block_ui.min.js"></script>
<script src="js/lib/pdfmake/build/pdfmake.min.js"></script>
<script src="js/resources/min/vfs_fonts.min.js"></script>
<script src="js/lib/angular/angular-idle.min.js"></script>
<script src="app/app.js"></script>
<script src="app/service/CompensationSrvc.js"></script>
<script src="app/service/security.js"></script>
<script src="app/modules/common/controller/common.js"></script>
<script src="app/modules/home/controller/home.js"></script>
<script src="app/modules/import/controller/import.js"></script>
Thank you in advance!
Any help will be totally appreciated! I have been searching for an answer for the last days and nothing I have seen is as slow as this app.
UPDATE: I am almost sure that the problem is in the backend since the files are being served slowly.
The statement
app.use(express.static(__dirname + "/public")) is at the top of the code, so I am not sure what should I improve to make it faster...
Related
I'm trying to get a localized implementation of a date picker to work, for a while now. I first attempted doing at the application I am working on, to no avail. So I decided to create a small html page and use it on my local httpd to try and get it running and get transfer the working code to my app.
I copied all the CSS and JS files, adjusted the path and tried the implementation. The file is the following:
As you can see, it's very simple. All I want to do here is learn how to use the bootstrap-datetimepicker, so I can manipulate data for my main application.
Problem is: if I use jquery-ui's notation $('#datepicker0').datepicker(); it works. But if I try to use $('#datepicker0').datetimepicker(); from https://github.com/Eonasdan/bootstrap-datetimepicker it doesn't.
I'm pretty sure it's a very basic mistake, but I'm looking at this piece of code for a while now and can't fathom what it is...
Can someone lend me a help here?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/beyond.min.css" />
<link rel="stylesheet" href="css/demo.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/moment/moment.js"></script>
<script type="text/javascript" src="js/moment/moment-with-locales.js"></script>
<script type="text/javascript" src="js/moment/pt-br.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#datepicker0').datepicker();
});
</script>
<div class="container">
<div class="row">
<div class="input-group date col-sm-3">
<input id="datepicker0" type="text" name="executionDate" class="form-control"></input>
</div>
</div>
</div>
</body>
</html>
I got it working. Solution was as simple as use the right file. How so? I was trying to download the libraries files by right clicking on it and saving it to my computer. What I got instead of the file was the html for the page. I discovered my stupidity quite by accident this morning and got the correct files, by download the zip for the library and, like in a magic trick, it started working... Thanks for your insights and hel
I have a question to You.
On my local server my circle charts in JS working normally but when i want to see them through www protocol i don't see them :/. I copied my files many times to server - I don't see charts.
Here is code:
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.circliful.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://www.e-plus.com.pl/mateusz/THEMEFOREST/js/jquery.circliful.min.js"></script>
I tried to do this with my domain adress but result is the same... Webbrowser don't see my charts :(
Did you use any
<base href="http://...">?
Try using:
<link rel="stylesheet" type="text/css" media="all" href="./css/jquery.circliful.css">
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://www.e-plus.com.pl/mateusz/THEMEFOREST/js/jquery.circliful.min.js"></script>
This question is already asked many times but none of them worked for me. I am trying to use this date picker in a JSP file. This is my script
<head>
<title>My Home</title>
<link rel="stylesheet" type="text/css"
href="../resource/css/page-style.css" />
<link rel="stylesheet" type="text/css"
href="../resource/css/jQuery-ui.css" />
<script src="../resource/js/jquery-1.9.1.js"></script>
<script src="../resource/js/jquery-ui.js"></script>
<script type="text/javascript" src="../resource/js/form-elements.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#shortcuts").load("shortcut.html");
$("#datepicker").datepicker();
alert('jQuery is working');
});
</script>
</head>
The shortcut file is loading perfectly, alert is also showing. I get error message as TypeError: $(...).datepicker is not a function. I am not facing this problem if I run this script in a html file placed in my desktop, when I copy the come code to my IDE and run it I get this error in my console. Please suggest me what can I do? I know this question is asked several times I have checked every answer this is the only link having close match to my prob but didn't work for me.
The problem is with your imported files.I think you have not placed them properly.
Try to import these files
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
It is working for me.
see here for more information
Double check that there are no JQuery references after your JQuery-ui reference.
I had an extra JQuery reference that came after my JQuery-ui reference and lost an hour chasing the problem. That will cause the datepicker not found error.
This is something to do with the import files. I also faced the same scenario and following imports helped me to overcome the following issue "datepicker is not a function".
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Could anyone tell me how to get this code working on a web server. It works fine locally but the calculations don't work online. What has gone wrong? The html file is in the same folder as the jquery.js file.
http://jsfiddle.net/nyree/3CgcH/
thanks in advance for any help
<script type="text/javascript" src="/spreadsheets/jquery.js"></script>
<script type="text/javascript" src="YUI/yahoo-min.js"></script>
<script type="text/javascript" src="YUI/yahoo-dom-event.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/fonts-min.css" />
<script type="text/javascript" src="YUI/cookie-beta-min.js"></script>
<script type="text/javascript" src="YUI/cookie-min.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/tabview.css" />
<script type="text/javascript" src="YUI/element-beta-min.js"></script>
<script type="text/javascript" src="YUI/tabview-min.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/container.css" />
<script type="text/javascript" src="YUI/container-min.js"></script>
None of these files exist on jsFiddle's server. You need to change your reference URLs.
What exists on your server has nothing to do with what exists on jsFiddle's server.
jsFiddle only knows a part of the path, /spreadsheets/jquery.js. That is a relative URL to their server. If you want your code to work on someone elses server, you either need to be able to put the files on their server to maintain the path structure, or change the URLs to be absolute.
<script type="text/javascript" src="http://YOURWEBSITE.com/spreadsheets/jquery.js"></script>
How can I replace following lines with links to the Google jQuery API?
1st line is already done.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.cookie.js"></script>
and maybe even this line:
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
You can't...google doesn't host these plugins like they do jQuery Core and jQuery UI.
You can see what they host here: http://code.google.com/apis/libraries/devguide.html
The plugins are not a part of the CDN as of yet. Plugins are mostly user built, so I doubt if there will be a CDN for that.