The site has a nice theme. However the site slow to load even on googles serves. Is there anyway to speed polymer initial load time. Also it has loads of http request, can you reduce this?
It sounds like you're looking for the Polymer Starter Kit. It includes a build process to minimize resource loading, including Vulcanize.
Related
I have been using Protractor(Jasmine frame work) to automate Angular JS application. So i wanted to automate React JS application.
I have used Protractor(Jasmine frame work) to automate React JS application, but i faced lot of issues, had to use lot of explicit waits to visible the react web elements. Do we have any option to make it to wait until all the react web elements are visible
or
Please suggest the best way to automate React JS application
Not possible in protractor at least
But I always use explicit waits even for angular applications because built-in protractor's waiting often is not stable
If you understand the correlation between API requests and loading of the application you'll have no problems. So basically reactjs is a library to build one page application which is loaded when you open the url. Once loaded and rendered in browser there is no more loading, unless an API request is sent. When that happens normally developers put up a loading animation. With that said, 95% of cases, you need to handle waiting in 2 cases: when the app is opening and when loading animaniton is up. If you create methods for that and put them in page objects library, your problem is solved with a few extra lins of code here and there
I'm running an angularjs app, and can't figure out why my page is loading slowly. The css and js files all load quickly, but there is a long delay between that and when the html loads, where the app just seems to stay suspended doing nothing
headertemplate.jtml, footertemplate.html, and notelist.html are the partials being loaded to make up the view
Angular uses ajax to retrieve templates. You should be able to look at the network tab in developer tools to see the ajax request for each template. That might give you a clue as to what the hold up is.
I'm not sure why it's taking so long to receive them, but one way you can speed that up would be to pre-cache the templates with a tool like HTML2JS. This way, your templates are just another JS file that you include along with your program code and templates are loaded as soon as your program code is loaded. It will increase your initial download size, but will greatly improve the speed of fetching templates.
You can cache all templates in $templateCache which will make angular app never make xhr request for partial htmls.
https://docs.angularjs.org/api/ng/service/$templateCache
There are various gulp and grunt modules to automate that process.
https://www.npmjs.com/package/gulp-angular-templatecache
https://github.com/ericclemmons/grunt-angular-templates
By the way are you making any server calls in angular.forEach, for some reason they don't show up in network tab (idk why?? o.O)
Or may be you are using resolve in ui-router's state config which is taking time to activate the state and calling html partial..
I am wondering if a large angular app (around 10 megabytes of js, css, and html files) that has been ported over to Cordova will still need requiresJS for lazy loading.
The reason I ask is because I thought requiresJS was mainly focused on saving bandwidth by not loading the entire file at once and only loading the needed modules for the current view…
But since Cordova is native it seems like it would perform much better if it was all loaded from the phones flash drive at the same time?
Another question this brought up is does this stop the actual JavaScript from being loaded into memory until the user navigates to that view?
I tried to research the effects of requiresJS in Cordova applications and did not find anything that answered my question… Any help or insight would be greatly appreciated.
There are multiple reasons why you'd want to use a module loader such as requireJS beyond lazy loading / saving bandwidth: it will help you manage your dependencies and enable you to write better, modular code.
RequireJS will in no way influence the performance of your application negatively - loading speed for fetching .js files locally is negligible anyway.
Another question this brought up is does this stop the actual JavaScript from being loaded into memory until the user navigates to that view?
Depending on how you build your application, it is indeed possible (and encouraged) to load code on demand, a.k.a. lazy loading.
With requireJS it could be as simple as calling 'require('some-library')' at any point in your code where you need it.
i am trying to improve the performance of my web application.
It is a java based web application & deployed on an amazon cloud server with Jboss & apache.
There is one page in the application that is taking 13-14 seconds to open. The functionality is so much that there are about 100+ http requests that get executed on page loading time. The Js & css files are taking too much time to load.
So i moved all of the Javascript code from my JSP page to new JS files. Minified the JS & css files. Still there is not much difference in the page load time.
There is dojo data on this page as well which takes time to load.
Is there any other appproach i should try to tune this page?
Can something be done at the Jboss or Apache level?
Apply caching for images etc. More here
Use CDN for any external libraries you use (like jquery). More here
Use a library for your js scripts like RequireJS to optimize your css and js files. You can concatenate (merge multiple js files to one) your code. This will reduce the number of ajax calls (that's what the browser does when it sees a js or css dependency) (As #Ken Franqueiro mentions in the comment section, Dojo already has a mechanism for this). More here
Optimize your images. Use appropriate dimensions. Do not use full blown dimensions if you just intend to use it for a 10x10 container. Use sprites if possible. More here
Show a message/loader to show the user some progress. This will minimize the user restlessness More here
If you load data that takes too long, then show the page and load the data afterwards. This will too give some sense of progress to the user.
If the response is very big you can compress your response data. Be careful though that the browsers your application supports, can handle the compressed information by default, or add a custom mechanism to decompress the data. More here
Use some profiling tools like Chrome Development Tools or FireBug for Mozilla.
Take a snapshot of your network traffic and check where the bottleneck is.
In Chrome you press F12 and then select the Network tab.
I am creating a one page web app with ExtJS.
Isn't the best way to decrease load time of an web app to inject JS, CSS and HTML in the initial HTML file sent to browser instead of just including the script and css tags to load the files from the server one at a time since that will reduce multiple HTTP requests into only one.
You may like the concept of httpcombiner.ashx.
http://archive.msdn.microsoft.com/HttpCombiner
This tool can also compress and cache your js and css
If you want to cut down on initial load time, one of the best ways is to take advantage of the browser cache. Suggest you look at using a hosted ExtJS library, such as from Google Ajax APIs. There is a great chance a prospective visitor will already have it cached.
This is just one tip of many.
This webpage outlines some best practices when it comes to lowering perceived webpage loading time.
http://developer.yahoo.com/performance/rules.html
In addition to using the condensers pavan suggested, you can use Google's closure compiler to minimize javascript files.
http://closure-compiler.appspot.com/home
Well, there is big difference between load time and observed load time. One of the best ways to reduce load time is to use server side compression. However, progressive loading appears to be loading faster for the user.
Therefore initial response should only contain minimal set of style sheets (lets browser render later arriving stuff already styled) and layout. Then you could have onLoad callback to some AJAX loader which loads additional components.
Most importantly do not forget to size your image containers. One of the most annoying things is when you miss-click a link just because an image started loading and changed the layout.