Measure Page Load Time Speed in Single Page Applications - javascript

I researched a lot on how to measure the page load times in a single page application like React, Vue etc but did not get any proper answer.
In Websites that are built using Single Page Application frameworks/libraries like vue, react etc load the initial page only once and then all the route changes do not fire a page load. To understand it better let us say our landing page is /index. When index route is loaded it is considered a Page Load but when we change the route to let's say /index/products here SPA takes care of it and loads the content using AJAX without loading the page.
But in websites that are built without SPA frameworks the case is different it loads every page on route changes and we can run the below line of code on each page and get the performance metrics.
performance.getEntriesByName(window.location.href)
This line of code simply returns a dataset containing some information about the page load speeds as shown in the image below.
So in SPA it runs only once and not when we change the routes. So what I want to do here is that I need to make this line run on every route change so that I get the above performance metrics that are shown in the image for every page.
Right now it only runs for the main page and when I change the routes inside the website, it does not run for every page. But in the case of reload it works properly because reload is again a new page load.

Related

XmlHttpRequest or iframe to load a web application?

I have a little perfomance issue with a web application I am using and I would like to know how can I solve it.
You see, when I enter to my web application, everything starts loading and takes some time since the application make some requests to a database to retrieve some data. I would like to know if I can put an iframe on a blank page with the link to my application so it can start loading inside the iframe making the rest of the page work and not getting stuck.
I've tried adding a XmlHttpRequest on a blank page requesting the web application link but it onlys retrieves the first elements that loads instantly but stops there. It doesn't get all the elements loaded before the first moment since they have some delay to appear because of the database request the web application makes.
How you guys think that I can load my web application inside another page and while my web application loads, I can still use the rest of the other page without everything getting stuck?
I hope you guys could guide me a little bit. Thank you in advance!
I've solved this by adding an invisible iframe that loads the page I need on the background and on the front I retreive everything with my application. Once I finish, I just delete the iframe on the background and move to the next task.

What are the consequences of running scripts from ajax loaded pages?

I built/manage an SPA (single-page application) interface. It doesn't use modern frameworks like VueJS or React... It uses AJAX.
It's a custom interface that loads parts of the pages through ajax. When you click an item to edit, a window on page or modal is opened and all the HTML and JS dependencies of that specific page from AJAX is injected into the page. When a new page is loaded, the existing html is replaced (I do jQuery for most of the actual functionality) with like html(new_content)
Potential Problem:
Inside these ajax loaded pages, it runs javascript, for instance, "attach to this button on click", "initiates a datatables class" for the content being loaded into tables etc. When another page is loaded, it replaces the existing content from the previous, the new page loads its own JS again.
1) Unique variables loaded from the Ajax pages still exist even after a new page is loaded from ajax. (looking the variables in the console show they exist), I am assuming loading variables with the same name get replaced with new values.
2) Functions/Classes that are being added are still embedded in the memory even after I've asked it to delete everything
Another example, if I ran a setInterval() timer, after a new page is
loaded and it replaces existing content, the setInterval is still
running.
What are your thoughts here? If the user doesn't reload the actual page by using the browser refresh, then loading these ajax pages over and over again will ultimately drain the memory of the client's device?
Is there a way to keep a clean slate after each page is loaded so existing variables loaded in memory are erased? Or do I make sure each page being loaded is wrapped into an anonymous function that is cleared after each page is loaded?

Can I use a socket through multiple HTML pages?

For example, if a user enters my webapp through the standard index.html page that is loaded automatically, can that socket still be used if the user clicks a button on my webpage that loads another html page thats part of my webapp? Right now, I have one front end js page that is used for my 3 html files. It works fine for my standard index file, but when I click a button that leads to another html file (Which is also connected to my front end js page), it says that io is not defined in the console.
Loading a new HTML page will cause the Javascript on the new page to execute - this will destroy any context from the previous page (including established connections).
There are a couple of ways around this:
write your code to re-establish the connection on page load. This will require passing an identifier of some sort so the new connection is associated with the existing session.
write your application as a single page app (SPA). In an SPA, the pages are rendered on the client side, as part of a Javascript app passed to the client on the first load. Thus, since there is no reload when a user is moving from one page to another, the connection is not lost.

What to use with history api instead of hash to differentiate between sections on a web page?

I have this url:
domain/?budget=0-&pn=1
Now i have a button which clicks a special view on the same page. I have done it like:
domain/?budget=0-&pn=1#special
The problem is that i am implementing history api and change in hash is causing popstate to be triggered which is not good.
What should i use instead of hash for such situation with html5 history api?
Using Single Page Applications (SPA The wiki definition is https://en.wikipedia.org/wiki/Single-page_application)
where a single page acts as the host page for other content loaded on demand into the page. In this case, the use of page templates ensures that every page, at one time or another, acts as the content host as well as a content page.
depicts how the HTML pages are structured. Each has the required structure around the page along with a content container whose inner HTML is replaced with a fragment of HTML from a content page. The identifier in the URL represents the unique identifier of the page content that is loaded into the page.
What makes use of the history object’s new members so valuable is that even though you can programmatically change the browser location without posting back to the server, at the same time that updated location is nothing more than a regular URL, which can be shared, copied or bookmarked. This means that you need to make sure your application works just as well upon the initial request of the page as it does when JavaScript is used to fetch the page.
demonstrates how Page 1 is affected by navigating to Page 2 using the history.pushState function. The overall structure of the page is preserved and after the response of an Ajax call is received, only the page fragment is injected into the content container. Notice how the page title remains the same, but the URL and content in the container reflect content from Page 2.
Consider though if you refresh the page after you navigated to Page 2 using pushState. Figure 3 shows how the page, when refreshed, keeps the correct URL and preserves the page content, but the page title reflects that it was served directly from Page 2.
This behavior is achieved by all pages having the same layout structure but include identifiers in the markup to specify the content fragment in the page. This is the same spirit in which a normal client/server web application would serve full HTML pages upon a standard GET request of the page, but then use a service in conjunction with an Ajax call to only update specific parts of the page.
Remember
As with most areas of new HTML5 capabilities, the functionality found in the new history object is available via a polyfill library that can fill in the gaps for older browsers or those that are yet to implement the standard.

PDFJS: how to render pages and load data on request?

I would like to show pdf files in my web app, PDFJS is working fine but I would like to load the pages on scrolling. I found PDFJS supports rendering on loading. I dont want to load whole document at a time. user clicks on next page get next page data and render.
I would like show pages on request?
How to render pages on request using PDFJS?

Categories