I have a screen with multiple tabs around 10 to 12. I am loading data in each tab component separately in OnInit. When the request is in pending state chrome network tab, the UI freezes. Not able to click the already loaded tabs. Is this the browser behavior or Angular?
I would like to understand whether asynchronous actions in browser affects the rendering performance.
Related
We are stream video via websocket in a grid image approach. We render the received images into a canvas and canvas will be updated multiple times a second. When we move to a different tab or application and return to our page, the page goes blank for few seconds say 10-20 seconds. Sometimes it takes even more time. Rest other chrome tabs are normal.
In our page, canvas rendering continued even in the background. When a tab is not visible, chrome throttles the UI changes for saving battery and performance.
When the returning to the same tab, all rendering is pushed at once and it made the page blank and unresponsive.
We introduced window.requestAnimationFrame api of browser, which solved the problem. requestAnimationFrame stops the rendering function once the tab becomes invisible and resumes when returning to the same tab.
We changed from:
render();
to
requestAnimationFrame(render);
check this answer for further understanding
Answering own question as this might help someone.
I am making a chrome extension that fetched JSON data from CoinMarketCap.com API and currently I have it running in the background script. I'm not 100% sure what the purpose of the page is really. I was wondering if I could simply fetch the data from the popup script after I click a button within my popup?
Each button represents a different coin. I basically want to get the price of a chosen coin and display it on whatever page the user is on when they double click the coin in a text article. Eventually I want to make it so you can double click any coin and have it show a live price conversion while you're on the web-page.
The point of a background page is to be always available (running if persistent: true, woken up / recreated for registered events if persistent: false).
A popup's lifetime is determined by its visibility. The moment the user clicks away and closes it, the page is closed (as if the tab with it was closed), so it can no longer process any events and its state is lost.
As long as:
The data you need fetched is to be received/processed while the popup is open
Any state you need to persist between popups being shown can be stored in chrome.storage
Then you don't need the background page to do the fetching. Popup page has the same level of access to Chrome APIs.
However, consider this scenario: suppose you want the data to be ready as soon as popup is opened (at least, you want it to be fresher than "since last time"). You may want to do periodic updates even while the popup is closed to refresh the data. You can only do that reliably with a background page (and, say, chrome.alarms API). Then you can cache the latest available data in chrome.storage and use that in the popup.
Background pages have their uses as some code that can run periodically regardless of user actions, and to be able to always react to events.
According to Changes to Cross-Origin Requests in Chrome Extension Content Scripts now you have to do your fetches in Background Script. Not in Content Script.
My web application is mimicing the UI of my desktop application, flow is as follows
Select Task in browser window
Change any Options and then start
Show Progress in same browser window, the progress bar goess back to server every 5 seconds checking progress.
When task has completed we show report in new tab
and go back to Select task Window,
this is done by running following Javascript in progress page
window.open('/start','_self'); window.open('/reporturl','_blank');
This works fine on my PC but when trying on Safari on OSX and on Android phone and iPad one of two things happen
The progress page becomes the start page but the report page is not opened in tab
The Progress page becomes the report page
My question is does opening window in new tab with _blank have all the problems of using popup windows. If so should I modify my prcoess so that at stage 3 it just displays report page, and then add a back button or navigable footer to the report to allow user to get back to start page ?
I can think of some options you could use instead of new tab.
Modal with Ajax
-- With jQuery it is posible to open modal
dialogs they can be populated with html (or other data) fetched with ajax (async). I am a big fan of these and use them all over my projects. Users will not be annoyed with pop-up warning messages, etc. Once the content is read (or whatever) the user can simply close the dialog. (If I had to make your app I would certainly implement this).
Besides the jQuery dialogs, other modal/dialog scripts are out there. Check out Bootstrap Modal if you like it modern.
Serve report as download
-- Depending on what the user can/will do with the report, it might be interesting to write the report page in a way that it sends back a .pdf file, or another type of file, as download. Loading the URL in a new tab will now always start a download. Triggering this from JS without user interaction might be a problem though (same as with pop-up / new tab). Adding a button to trigger the download on complete will solve this.
I know the question was about the use of tabs.. But try to avoid it. Browsers handle it all in their own way. And many users get confused when suddenly stuff is opening in tabs when they did not ask for it. In case of pop-ups, it is possible for users to turn them of or convert into opening a new tab from within the browser settings. If they have been fiddling with browser defaults, you'll have troubles of keeping the 'flow' of the app the same for all users (and cross browser).
Help me understand what causes this:
And by this, I mean the fact that 100% of my assets are cached but there is still a ~200ms delay between receiving the content from the script and the DOMContentLoaded event firing. This is Chrome on Linux and the page being served up is about 100 lines of divs and things, nothing major.
This 200ms "delay" that you're observing is not caused by the network, but by processing the content.
The delay between fetching the HTML and CSS, and between the CSS files is the time needed to parse the HTML. When JavaScript comes into the mix, the HTML parser halts until the script is loaded and until is evaluated and executed.
You can get a detailed breakdown of what affects the load timing by opening the Timeline tab, clicking on the button/circle in the upper-left corner ("Record") and reloading the page. Below is an example which shows the correlation between script execution time and resource fetching time. These screenshots were recorded in a browser profile without any extensions, if you have installed any extensions, then the times will probably increase.
Network tab:
Timeline tab:
Read more about performance and profiling:
https://developer.chrome.com/devtools/docs/network
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
We currently have a Silverlight application that has the following functionality.
Page load with multiple tab pages. The tab pages may or may not contain more tab pages.
None of the tab pages data has been retrieved. Except for the one visible and in front.
On the user clicking the tab page to bring it to the front - the app then retrieves the data for that tab page.
We are now creating an HTML5 and Javascript version of this application and are after the same functionality.
I am new to this and am using the jquery-ui tab control which is done by using a div.