I have many examples where text renders slower than an image which almost feels instant. I am doing this via reactjs and server-side rendering with nodejs. For example this gif: http://recordit.co/waMa5ocwdd
Shows you that the header image loads instantly, the CSS is already loaded as the colors are there and present. But, for some reason, the text takes almost a half second to appear. How can I fix or optimize this?
Thanks!
Ok, so debugging this kind of stuff it's useful to hit YSlow for the latest tips, etc.
In general, though, it's good to remember that browsers will make separate requests for each item in your page (i.e. everything with a URL; images, css, etc) and that most of them have some kind of cap on concurrent downloads (4 seems common, but it varies and changes a lot). So while 12 requests isn't a lot, it's still time. As is the time to parse and load your JS, etc. And parsing and loading JS is more time that will happen (and typically, in most browsers, will pause further downloads until it's done)
Without spending a ton of time, I'm guessing that your HTML loads, that calls in the header image, and then the browser starts hitting all the JS and react framework code and it takes a second or two to figure out what to render next.
Again, YSlow has a lot of advice on how to optimize those things, but that's my 2c.
EDIT: adding detail in response to your first question.
As i mentioned above, the JS is only part of the problem. The sum total of render time will include the total time it takes to download and parse everything (including CSS, etc). As an example, looking at it in Chrome debug tools it looks like it takes something around 300ms for the html to download and be parsed enough for the next resources to get called in. In my browser the next two are your main css and logo.png. At around 800ms is when your logo is done downloading, and it's rendered almost immediately. At around the time the html is done downloading, the first js script starts downloading (I don't think turning JS off stops that from happening, though it probably stops the parsing from happening; I've never tested it). At somewhere around 700ms is where you start pulling down the font sets you're using and it looks like they finish downloading around 1second. Your first text shows up about 200ms after that, so I'm guessing that pulling and parsing the font files is what the holdup is (when compounded with them queuing behind other resources).
Related
Currently I have a Next application with SSR using getInitialProps that takes too long to deliver the HTML based on the complexity of the app (I'm getting high Waiting for Server to respond times in Chrome in the network tab).
I'd want to figure out what is adding so much time (sometimes I get seconds), so I'm trying to:F
Find out how much time does it take for the server from the time it receives the GET request for the page to the time it sends the HTML
Have a clear picture of what's happening and how much time does it take during the SSR. Because at the moment is a black box for me.
I tried suggested improvements: code splitting, lazy loading components, code improvements, etc.
I tried using Server Timing API to measure the requests performed in getInitialProps, to narrow down a part of the process. But it doens't help with the rendering process and other Next processes that might add to the response time.
I tried using the Node.js profiler for Chrome using NODE_OPTIONS='--inspect' next dev. This is the closest I got to what I wanted, but I can't tell where does the server respond back, and what do each Activity corresponds to. Some documentation could be helpful.
I tried middleware. Not sure if I got something wrong, but I can't measure the time from start to finish.
Some observations were that other more simple pages, have faster response times, but regardless the time it takes is extremely longer (1 - 2 orders of magnitude)
Is there a limit to the number/size of assets I can run in a preload function? I'm finding that often when loading the progress gets stuck at 99% and either takes a few minutes to complete and the completed event is fired or doesn't complete at all.
Is there anyway I can debug this to find out where the process is getting stuck, or is it simply that loading 250MB of game assets will crash the loader from time to time.
I don't know that there's a hard cutoff or limit built into Phaser for the number or size of assets that can be loaded in the preload method. Since it sounds like you're sometimes seeing a delayed-but-successful completion while other times you never reach 100% successful load, it's more likely that you're hitting a timeout or some other load error.
You should be able to catch these errors with the FILE_LOAD_ERROR event:
preload() {
// Preload setup
this.load.on('loaderror', this.onLoadError);
}
onLoadError(file) {
console.log(file);
}
Another option you might explore is modifying the LoaderConfig.
With that being said, 250MB before you do anything seems like a huge lift. You might want to consider breaking up the load across scenes, verifying that your assets are as compressed as possible or doing some lazy loading of assets when needed instead of in the preload. You can see an example of an on-demand asset load here.
I need to process AJAX in my crawler and would prefer using system browser albeit I may have to change my mind. My crawler program may generally be working in background while the user can work on other stuff in other applications.
Anyhow - since WebControl leaks memory if processing JS libs that leak memory - this can cause a crawler to quickly run out of memory. (Many SO posts about this.)
So I have created a solution that uses a separate "dummy" small executable with the webcontrol that takes input/output. This is launched as a separate process by the crawler. This part seems to work great. This child process is created/destroyed as many times as needed.
However, this called process with the embedded-IE grabs focus on every page load (a least if e.g. JS code calls focus) which means if the user is doing work in e.g. Word or whatever - keyboard focus is lost.
I have already moved the embedded IE window off-screen, but I can not make it invisible in the traditional sense since then the embedded IE stops working.
I have tried to disable all parent controls before calling navigate - but it does not work for me.
Any ideas I have not tried? Maybe somehow catch a windows message that focuses webcontrol and ignore it? OR something so I can immediately refocus the earlier control that had focus?
I currently use Delphi - but this question is applicable to VB, C# .Net etc. from my earlier investigations on this matter. I will take a solution and ideas in any language.
My ebook does animations driven by setTimeout. (I am using requestAnimationFrame when available, which it's not on older iPads running iOS 5). The book is composed of about 100 separate XHTML files to ensure page breaks occur exactly where they should, which is otherwise an iffy proposition in iBooks.
Immediately after opening the book, animations are very slow (eg one second per step, rather than 50ms), but after keeping the book open a while (a minute or so?), the animations ran at expected speed.
The reason I found: iBooks is apparently pre-loading all the pages in the book (I suppose in order to get page numbers, or speed up page turning). The pre-loading seems to be interfering with my animations--stealing setTimeout slots, as it were.
I had thought the problem might be the time required at load time to set up the animations on each document, but timed those and found it was just a few milliseconds per page. The problem may be a semi-large script (100K) on each of the 100+ pages, which I imagine iBooks is parsing over and over again as it preloads each page.
I have considered the option of including the large script dynamically when each page is viewed, but got stuck on figuring out how to tell when that is. We have no PageVisibility API in Safari, and the focus event does not fire on initial page load, so how do I tell when the page is actually being viewed, as opposed to stealthily pre-loaded in the background by iBooks?
My next attempt is going to be to shrink the number of individual XHTML pages down to 1 or a few, and take my chances with page-break-* and its ilk to handle page breaking.
What I need is a way to (1) tell iBooks either to not pre-load other pages in the book or (2) give my setTimeout requests priority over those queued up by iBooks for preloading pages or (3) know when a page is being displayed so I can inject the script at that point in time.
See also epub 3, how to prevent pages from running in background ? (iBooks / Readium) and FInding out when page is being viewed in EPUB FXL via Javascript.
I am designing an application that allows users to use animated emoticons(defined using external SWF files) and display them inside another SWF file. This works as long as there are only a very small # emoticons at a time, but if the number increases significantly the performance starts to slow to a crawl.... The bottleneck isnt the network as there are only a few emoticons to choose from, we are just having issues displaying them simultaneously.
How does the Flash threading model handle playing external SWFs? Can we attempt to play them on a separate thread, or will that cause issues(like it does in Swing and Cocoa and the like)
its hard to say, when you mean loading multiple small swf , are they copies or are you creating new instances, with new properties etc...
I have managed to similar thing making a 20 line poker machine that uses swf for all the images, animations . These files each are about 600Kb and there is 12 of these at one time on the screen animated(well depends on the win);
But how i did this was load them into an array every time i needed it. and access it from there. i didnt seem to have any issues.
Its not much of an answer but can you explain your loading method, or put a sample html server i could see whats exactly your problem