Question
How to get rid of the components' JS and CSS code which are not used by the application and are loaded on every page in components.js and components.css?
Problem
Primefaces loads on every page two big JS files (components.js and jquery-plugins.js, ~140KB) and for every component it loads additional JS and CSS file.
Loading the lightweight page with one basic component results in several JS and CSS requests which noticeably slows down the DOM loading. The JS and CSS code of components which is not used in the page (or even in whole application) is loaded on every page.
What I tried:
- I tried the OmniFaces CombinedResourcesHandler. I finished up with 200KB JS file but the download time and JS processing time took about 30% of DOM loading. Combined resources are loaded from /javax.faces.resource/ and I did not find out how to load them from CDN as those resources are generated automaticaly.
Related
How do I remove unused css in a webpage?
I could see that bundled css takes more time to load when I try in performance. I was trying to optimize that case by rendering the bundled css based on page wise (using react routing)
Example: There is a webpage called 'A'. If I load the page, the css used in that page alone should render. other css should not loaded or used. like wise it has to be done for every other pages.
I am currently working on a website that includes several very large Javascript files. These files are causing the load time of the page to become very slow.
The output of the javascript files are initially hidden to the user behind several jquery tabs. I was wondering if it is possible to load the files only when the user clicks on those specific tabs so that the initial load time of the website wouldn't be slow?
Javascript files can be loaded dynamically upon demand when you need them.
This will be an asynchronous operation so you will start the loading process and then some time later the script will be loaded and available to you.
In jQuery, you can use $.getScript().
Example:
$.getScript("test.js", function() {
// script is loaded now
// code that uses this script can go here
});
FYI, there are other techniques for improving the load time of your site. For example, you can put all non-essential scripts (those not involved in the initial display of your page) at the very end of the <body>, right before the </body> tag. This will allow your page to display without waiting for those scripts to load.
Scripts can also be marked async and defer so that other aspects of page loading will NOT wait for them to load.
Other useful references on this topic:
Script Tag - async & defer
Deferred scripts and DOM
load and execute order of scripts
improving website performance by dynamically loading javascript?
Yes you can do this. See
http://community.sitepoint.com/t/dynamically-loading-js-script/40207/15
You will probably have to do some string concatenation in the filename when writing out the src attribute so its loads the different file you require
I have an issue with dynamically loaded content.
I'm using ajax calls to load in HTML content without refresh the browser, and pages have their own JavaScript libraries that need to load in order for them to work. So I embed that JavaScript content into the HTML which I load with ajax.
The problem is, that even though the HTML that had the embeded JavaScript gets removed, the functionality of those JavaScript functions is still loaded no matter if the HTML along with the JavaScript is removed.
That means, that if a certain page is loaded more than once, actions will fire the same amount of times that the pages has been loaded.
How do I make sure that JavaScript libraries get only loaded into the browser once, retaining the functionality of loading the source of the JS libraries with the ajax call, not just having source file links and then loading them again after the ajax call along with the required HTML is loaded? (load the JS files along with/before the HTML is loaded with ajax)
Once you load a JavaScript file into your browser's memory, it remains there until you load another page.
So... it doesn't matter how do you load it (through AJAX, or just once when page load through script link, or just embedding it into your raw HTML), once it's there it will remain there until you go to another page.
If you want your client code to execute only under certain circumstances you need to control that.
From my point of view your best option is to just load once your libraries and determine by code when execution should start, end, and repeat (if needed).
I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.
If you have any idea how can this be achieved ?
You can do using Cache manifests. Read these resources:
http://appcachefacts.info/
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).
You should link to your external css stylesheet at the top of your webpage in the header like this:
<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />
or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.
The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).
I have a html page (inicio.html) which loads some js scripts. Then from a js script there is a navigation to another page in a different html file (test.html) and a different set of js files.
The problem is that when I do the changePage ($.mobile.changePage("test.html");) and the new page is loaded the new js files are kept in files like
http://localhost:8080/cdmWEB/resources/scripts/jquery/2.0.3/jquery-2.0.3.min.js/eval/seq/2
The js functions are being executed because the console.log messages in them are shown. But the changes the js scripts should do in the page are not rendered and the js cannot be debuged (using firebug).
I am loading the js scripts with the tag in the html file, but I have also tried the $.getScript function with the same result.
I am using jQuery 2.0.3 and jQuery-mobile 1.3.1.
From what I saw the reason why the js files are kept like that is because they are retrieved using ajax. Is there a way to prevent this and retrieve the file "normally"? or is there something I am missing (probably)?
Have a look here:
Jquery Mobile - $.mobile.changepage not loading external .JS files
You should consider loading the needed JS in the main page, and not in the page your changing to.
I ended up using window.open('test.html','_self','',true); to make the transition. This loads the new scripts when the transition is made and the jquery appends keep working fine.