When evaluating dojo.require statements, dojo tracks which modules and resources have been required and doesn't download them many times, but takes them from cache.
But what if I require a module lazily, for example, when a button is clicked, - does dojo check its cache?
Yes, the same mechanism is used to make sure a module is not loaded, during page load and after page load, when responding to dynamic events, as long as it is a normal dojo.require("my.module.name") call.
Related
There is a 5 second or so after the page is loaded, that e.g. clicking or hovering on elements won't work.
I figured out, it has to do with the Tag Manager.
Just like suggested in the guide, it's loading asynchronously.
Does somebody have any suggestion how to avoid this lag?
GTM shouldn't cause such delays - it loads asynchronously. If you want to test it - remove GTM from the website and check page load time. You can also use WebPageTest and block GTM in the settings to prevent the script from running. Unless there are any custom HTML injections that prevent the buttons from working before all the content is loaded, it isn't GTM.
Looking at the load waterfall you should see which element blocks the page from loading.
I found out what the problem was that was issue in our implementation, not in GTM.
Quick question: Is it possible to dynamically load content like
<amp-twitter
data-tweetid="611193269532295168"
layout="responsive">
via AJAX into an AMP article?
AFAIK, it is not possible but AMP - LIVE-UPDATING AMPS
a new AMP component that updates page content dynamically without additional navigation or reload: readers looking at an earlier version of the page will simply see new updates as they come in.
The amp-live-list component adds support for publishing live updates to AMP pages as new content becomes available in the source document. This works great for implementing live blogs.
In other words, the AMP runtime will poll the server for updates to the origin document, fetching itself. The server can returns the entire AMP page or parts of it, and the runtime updates the page in-place seamlessly.
You can also check a related SO question can AJAX polling be used with AMP? that discusses how to dynamically load updates for the AMP pages.
Hope this helps.
I'm developping a jqm application with spring mobile in the back-end.
Whenever I hit the browser refresh button on my mobile phone the page is completely devastated afterwards. Browsers back-button works properly.
The data are still available due prg pattern (flashAttributes in Spring) after refresh. Only the view is malformed.
Any ideas how to solve this problem?
From jQuery Mobile docs :
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax
So what happens is - in jQuery Mobile, the scripts and styles defined in the head are loaded only once. So, in normal conditions, it works fine, as all the pages will use the scripts loaded from the first page.
But. When you refresh a page in-between, it triggers a page-reload instead of the ajax navigation model thatjqm uses. So all the scripts and styles loaded from the first page will not be included from here on out.
What you need to do is "reference the same set of stylesheets and scripts in the head of every page", so that even if you hit refresh in the middle, the scripts and styles that had been loaded from the head of the first page are loaded again.
I recommend you read the docs from the above link fully to gain a better understanding.
I'm using swfobject to load a flash object on my site and it's loading very slowly on pages with a lot of data...as if swfobject waits until the page loads before loading the swf.
Here's an example page with swfobject: http://www.tripline.net/trip?id=066434736132100383DB8A184B7D8D17
If I change out the swfobject code with an iframe (with the swf as the src) or just use object embed, the flash object loads much, much faster...before the rest of the page loads.
I know there are a ton of page load time improvements I could make to that page (I'm working on that as well), but I'm wondering if there are some specific changes I could make to the way I'm using swfobject to get the same loading speed as an iframe or object embed?
A couple of things to try:
Use static publishing.
embedSWF() waits until the HTML DOM is ready before replacing the content with the swf. With static publishing, browsers that support the standard way of embedding objects without using javascript will start loading the swf as soon as they get to the <object> element, and then swfobject will patch things up in javascript when the DOM is ready. That should give a slightly faster display of your swf.
Move even more javascript to the bottom of the page, if possible.
(I rarely do that, but) since any javascript will block the DOM parsing (in most browsers) until the script has been (loaded and) executed, that means it'll get to the swf later.
This would only make a real difference for static publishing, since dynamic publishing will still wait for DOM ready. DOM ready still won't occur until all scripts on the page have loaded and executed, which should take about the same time regardless of where they're placed (unless moving the scripts to the bottom gets rid of other blocking issues).
Play around with createSWF (not recommended)
createSWF() doesn't wait for the DOM to be ready. I have little idea of the internal workings of swfobject in terms of DOM manipulation these days, but - in the case of dynamic publishing - it may be possible to call it right after you've added the placeholder. The placeholder part of the DOM is (mostly) ready by that time (see e.g. here).
But that all depends on what other parts of the page swfobject wishes to address behind the scenes these days, and what it may do in future versions. Any DOM manipulation before DOM ready may also cause the browser to render parts twice in some cases, which obviously doesn't help performance. In short, not recommended.
I'm using Richfaces 4 and Mojarra 2.0.4. So I'll be glad if the answer is specific to Richfaces 4 framework :)
I understand that the JSF components are processed at the server side. Some of my pages are really data centric. So when I load that page (eg: inside a richTab with switchType ajax), it takes a lot of time for my bean to execute the method marked with #PostConstruct to execute and fetch data. And hence the time period between user clicking on the tab's header and actual page rendering is quite large, a really bad user experience. I've implemented lazy loading for the dataTables in the page but that still doesn't optimize my page load time since #PostConstruct is still there.
Is there anyway I can load the page first and THEN fetch the data with ajax and update the page? This loading time is really annoying for the user.Any help appreciated :)
PS: I thought of using the oncomplete and onbeforedomupdate client side events of rich:tab and call ajax functions declared with a4j:function. But it seems that these events are fired before the page is actually switched.
use onload event of <body> tag in html along with <a4j:jsFunction>
If you still feel your page is not rendering completely before the method called then use setTimeout('a4jfunctionName',10) javascript function in onload to complete the rendering first.