I am a junior and this confuses me. I mean, if I use the same image more than once (on different routes) in React, does it mean that user downloads it more than once in browser?
I am just trying to learn that if using the same image will not cause more bandwidth in my website.
Yes, react stores images in cache memory. So it downloads the image only once and if you use the same image in other routes, it will not download it again.
For example, you can look at the following video, the image is downloaded only once, and when the route is changed, the image is not downloaded again
Test sample
Provided that you are serving the image with the correct headers, the browser should cache the image without you needing to think about it. This behaviour does not depend on the frontend framework that you're using (react, vue, angular, etc). I would read up on HTTP caching here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
For most purposes, if you have an image that never changes, the browser will only load it once and subsequent requests for it will be served from the user's harddrive. There are a million caveats (for example if the image is requested from a different origin than it was cached from), and the image is evicted from the cache (for example because the user's harddrive was full), but the only thing you need to worry about is if your image host is sending the correct headers.
In most cases with simple images requested using the <img src="example.com/pic.jpg" /> tag, this just means making sure that either the Expires or Cache-Control: max-age headers are set and have reasonable values.
For example, sending Cache-Control: max-age=86400 would keep the file in cache for up to 1 day (86,400 seconds).
Related
I have a component which lazy loads the images.For the first time when my page loads then at that time the images are displayed using lazy loading but if I refresh or reload or close and then open the tab then my images are pre loaded because it is now fetched from cache.Is there any way i can stop caching of my component in angular 7?
The cache is not being done by Angular but your browser. Once you load an image (and depending on the headers of the response) your browser will cache it to be able to load it faster the next time. This is usually a good approach.
Not sure why you don't want them to be cached but you have different options. Here you have a good read about HTTP caching: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching This cache configurations for static assets are usually done by your web server and they depend on which webserver you are using (nginx, Apache, IIS, node, ...).
Another option is to append a random query string to your image URL. This HTTP cache system works by using the image URL as a resource key to identify it. Because of this reason you can do something like:
<img src="./yourimagefolder/yourimage.jpg?r=putherearandomstring">
In this way your image resource 'Id' will be different in each request. (You will need to change the 'putherearandomstring' string in the example with a different random string each time the page is loaded.
If this is just for development purposes, you can disable the cache in developer tools. I don't see a reason you would want to do this for a live site though? As you would be forcing the user to grab the images everytime they load the component which will reduce performance.
The problem with cache in an environment where custom software is updated frequently and some users are less savvy is that they will not automatically get critical client-side changes unless they are told specifically to refresh their cache. With all of the decorations in the index.html I have not yet found a reliable solution.
I'm writing an application that uses Dropbox as the source of image files which are loaded via javascript by assigning img.src = "[Dropbox download link]". This works fine, but I'm often fetching many files at a time, and when re-loading a set of images (say, on a page reload), the browser re-sends a request for each one (which returns 304 not modified). I'd like to have the browser cache the image on the initial load so I can simply avoid the re-requests altogether, but can't figure out how to enable browser caching of these images. Can I set cache headers in this situation? The response headers from Dropbox have "cache-control" set to "no-cache".
You might be able to use HTML5's application cache. But I'm pretty sure you wont be able to serve the manifest file from dropbox either.
I understand that the browser is forced to fetch a new version of the cached JS file when the file name is changed or a query string is added to it.
We don't do this and until now we've never had issues with browser serving stale files. Recently, we are seeing some users using IE9 who complain about the browser serving cached JS/CSS files. This issue is not consistent across everyone using the site.
My understanding is that when the file name or query string is not changed, but the JS file content is changed, the browser would fetch the new version.
Why is this happening and why is it not consistent?
Any thoughts?
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
This is good if we want to actual cache the resource. If we want to force a new download set no-cache, which forces caches to submit the request to the origin server for validation before releasing a cached copy, every time. This is useful to assure that authentication is respected (in combination with public), or to maintain rigid freshness, without sacrificing all of the benefits of caching.
HTTP Server-Specified Expiration - specs
Yes, when the content seems the same (i.e. same file names), users may get a cached version of those files on subsequent visits.
It is really beyond your control... it's up to each specific browser to decide how to handle caching and it's also up to the user... some dump their cache regularly or refresh the page if something doesn't seem right.
If you want to force the user to see your updated CSS or JS content, change the CSS or JS file name... otherwise it may be inconsistent for a short, but unknown, period of time.
This tutorial may help you...
http://www.mnot.net/cache_docs/
For example Chrome caches scripts until Shift + F5 or some time expired ( and ignore the fact it is changed on server, it don't even send a request ).
So is done by other browsers ( but when cache is enabled ) - i cannot descripe exactly when it happens
I want to pre-cache next web page into a thumbnail. Is it possible to pre-render a html page (with css) into an image on-the-fly with javascript/jQuery? And how to persist that temporary image on the client?
You could do an ajax request requesting an image or a linkt o an image from a script.
This srcipt needs to request the data needed from the website and render it using a rendering mechanism.
The returned information could be a link to the generated image on the server.
Performance could be pretty low depending on the data to be retrieved and rendered.
This question will show you a solution to render a website and produce a pdf.
You could use this approach and convert the pdf into an image usinf ImageMagick (needs to be installed on your server).
Afaik, that's not possible on the client-side, because it raises security concerns. Even the <canvas> element cannot render HTML-elements (only browser plugins are allowed to use the methods provided for that purpose).
What is the site written in?? If you have server side capabilities you could probably do it and send the image to be cached. Is not possible from jquery or javascript as far as I know.
Unless your page is absurdly complex, then it's more likely your bottleneck is in the network, rather than rendering. You can easily preload the html page and all its important resources (e.g. images, multimedia, etc), so that when the user go to the next page, you don't need to hit the network anymore and will load it from local cache.
There are a few techniques you can use to preload HTML files, invisible iframe is probably the easiest (though I never tried it myself).
We have multiple pages on a website which require many of the same Javascript and CSS files.
How do we avoid those files being downloaded again if it has already been downloaded by the user browsing some other page?
If the file is in the same path, the browser should automatically cache it. You may want to explicitly specify the cache expiry time, if possible via your web server or programming environment.
If you use an HTTP traffic analyzer like Fiddler you should see that requests for JavaScript and CSS resources return an HTTP code 304 (Not Modified). This tells the browser "the version of the resource you have in your cache is the same as the one on the server so you don't need to download it again".
For even better performance you can explicitly set caching headers for these resources.
This caching tutorial has great info.
You should explicitly set caching headers if you want caching. www.fiddler2.com/redir/?id=httpperf