Reactjs takes too much time for content download in chrome? - reactjs

Scenario:
I have a page which loads additional data when scrolled to the end of the page. Most of the times the Content Download is slow and some times it is fast. Though, the response data is only few kb. This issue is only seen in chrome (Chrome Version: Version 67.0.3396.99 (Official Build) (64-bit)).
What might be the solution here?
In chrome, Content Download takes sometimes shorter time and sometimes longer time for same request.
The requests are to the same API.
As suggested here, that frontend might be doing a lot of work!
So, I checked the profiling and it is not the issue.
Why is there a lot of idle time in the second call? How to reduce the Content Download time?
Edit
When click event is triggered in browser during loading, the content loads faster.

Related

Angular JS application taking around 100% CPU while resizing

My website is in AngularJS v1.7.2 (using Laravel PHP framework as backend).
Current issue is the website freezes after resizing several times (2-3 or more times). I have checked Google chrome Task Manager Tool and it showing around 100% of CPU usage at the time of freezes. Same issue also occurred while testing the site in mobile by changing orientation several times. I have already tried solution like bind one way, add track by for ng-repeat, using tools like Batarang but no luck yet. Is there any proper solution for the issue. Please let me know.
UPDATE
The website almost finish. Only the freeze issue currently blocking us. The website mainly containing song, album, playlist, artist.
On home page there is banner (4 images) using iosSlider . then there are per category (8 categories) album (5 album each). on right sidebar there are song list. There are other pages like category page, artist page, album page, song page, user profile pages etc. Also there is a customised player using angular soundmanager2 API. Generally while viewing in desktop normally there no issue so far. But if I check using Device Toolbar (CTRL+Shift+M) and switch to other pages and rotate 2-3 times it just freezes. Even can't reload or refresh the page tab. If I check Chrome Task manager (Shift+Esc) it shows around 100% CPU usages
that time. Thing to notice the issue only occurring if I route to other page(forward or backward or both) then rotate 2-3 times. I am using AngularJS Batarang to sort out the issue but with no clue still now
SOLVED
The issue was with iosSlider. After removing the iosSlider no crash issue now.

Google chrome: React Page does not open in google Chrome Browser

I open a React page in Google chrome but does not open, still loading and Browser show Aw, snap! Can you suggest me What going Wrong.
Image
The Aww Snap crush is a bug in chromium caused by different things:
Low memory
It is also possible that site contains lots of images or JavaScript which might force Chrome to run out of space on the device while loading the site.
I'd suggest you clear up some space on the device and reboot the device.
If it helps, try closing any unused application in background to save resources (CPU, RAM and disk space) and see if Chrome continues to crash.
This vulnerability crashes browser tabs when encountering a link with a malformed URL in the HTML of a page.
The bug crashes the browser without the user taking any direct action other than loading the affected page.
This vulnerability occurs because of Chrome's habit of prefetching page data, such as performing DNS lookups on domain names in links on a page, in a preemptive attempt to speed up future loads. Chrome will try and work out which link on a site you're likely to click on next and then pre-load in the background.
Possible fix is disabling pre-fetching
Go to Settings >> Privacy >> Use a prediction service to load pages more quickly >> Uncheck box.
Another possible cause is a corrupt profile.
You can create a new profile, but if you do, custom data won't be available by default. This includes bookmarks, extensions and settings that you may have changed in Chrome.

localhost serving old file saves

First, I apologize that I don't fully understand what's going on here. I am new to AngularJS and I am building an app that I am running on localhost:3000. I make changes to my files, and I refresh the localhost:3000 page.
But after a few times of doing this, my changes do not get passed to the server.
Upon inspecting the developer tools, I see that it is using an older version of the file that I have overwritten with new code. No matter how many times I refresh the page, the changes do not get passed to the server.
If I come back after a few hours, it gets all the changes like it should. But only the first time, because every time after that I have the same problem.
I've tried restarting the http-server, I've tried closing and opening the editor, closing and opening the tab, restarting my computer, but none of these fixes the problem permanently.
If you need any more information, I'll edit it into this question. Thanks!
Try clearing your browser cache
Either
ctrl + f5
or
Right click on refresh button and choose the last option (hard reload)
(only in chrome, I guess)
That's almost certainly a caching issue.
You need to look at the network traffic when the page is downloading.
How you do that will depend on the browser you use, but try pressing F12 for a start
Check the RESPONSE headers for anything "cache"
Also check for a Status code of 304 - "Not Modified"
That might reveal to you instructions from the server to the browser to cache the file for a few hours, or that the browser is being told the copy it has is up to date.
Alternatively it might be server side caching, in which case I can't help you much.
One other solution is to change the file reference to include the date modified as a query string.
e.g.
instead of
src="/scripts/myscript.js"
use
src="/scripts/myscript.js?dt={filemodifieddateformyscripts.js}"

Getting pages indexed in Kik browser

I'm having trouble getting pages to show up in the NEW tab and in the Optimized for Kik search results.
All my pages have the required title, meta description, canonical and script tag served if the user-agent contains the string "kik".
Here is an example of a page that isn't being indexed.
http://playcanv.as/p/MW862amA
The pages have been correctly set up for around a week and still aren't showing up. Any ideas why?
Currently, the Kik browser shows a loading screen on top of your website until the window.onload event has fired. If the website takes too long to load the user is presented with an error screen.
Testing locally, http://playcanv.as/p/MW862amA downloaded roughly 5MB before window.onload and took roughly 30 seconds to get there. I'm betting the search index isn't let it in because of this.
So the fix is simply deferring expensive network requests until after window.onload. The easiest solution is to wrap your network calls in kik.ready(function(){})

Progressive rendering of a webpage in Internet Explorer 7

I'm trying to improve the user perception of page load time of some web pages. These web pages take about 5 seconds to complete loading and rendering. The overall time is fine; but on clicking a link to load a page, nothing happens for about 4.5 seconds and then the whole page appears in one shot. This spoils the user experience, since the user is left wondering if anything is happening or not after clicking the link.
As I understand it, browsers are supposed to progressively render web pages as and when the resources available to render portions of the page become available to it. One thing I've seen recommended (by YSlow for eg:) is to put the css in the head and the javascript near the ending body tag - or as near the end of the page as possible. I've done this, but I don't see the initial part of the page rendering and then pausing for the javascript to load. The theory, as I understand it, is that the page will begin rendering progressively once all the CSS is loaded. I also understand that the page will pause rendering when any javascript is being executed/downloaded.
What else can affect progressive rendering on IE, especially on IE7?
I found out that javascript (specifically, some jQuery selectors) were slowing things down and preventing the page from rendering. We first optimized the jQuery code by removing some code which was repeatedly selecting the same elements. Then moved the code down to $.ready so that it executes after the page has loaded.
Overall, this has given us a 2 second boost in page load times as well as allowing more pages to load progressively.
A first step may be to understand what's going on on the network side, a tool like Fiddler will help you. In your case, Timeline display should be a good starting point.
Why not show notifications to users when a link is clicked that the page is currently in loading state.
You can do this:
window.onbeforeunload = function(e){ document.body.innerHTML='loading...';/*or even a better content/* };
I'm having the same load problems because of flash videos on a page. Will somebody tell me why oh my God why can't ie just load pages as nicely as firefox does???
If ie went out of business today, all the hours and days and nights I've wasted would be over.
I think it's about time that ie get with the demands of web maasters in 2009 and change the way they load pages.
If java script is used, people without java will see blank spaces.
Check for unclosed tags.
Check all images have width and height attributes.

Resources