Is there a way to pre-load ckEditor ckEditor before we even open the page in which the ckEditor.js javascript is being called?
I would like to do this as the ckEditor.js is a heavy 350kb file which for some user takes 20-30 sec to upload over the dialup connections. I wanna load it when the user has only opened the front page ( which is just a simple still html) and is busy reading the front page. and by the time he/she moves to the page where ckeditor is used, the ckeditor.js is already loaded and cached.
You can definitely do this by including CKEditor as a js file regularly on your home page, which will cause it to load into the cache before moving on to another page. The problem is that CKEdtior is usally linked to with some arbitrary number as a query string at the end of the file name which makes it uncacheable (ckeditor.js?v=12424324234 or something similar). You'll probably need to get into the CKEditor source (which I remember is a complete nightmare) and do a global find for where that file calls the JS file you're trying to cache, and make sure it doesn't include that variable query string on the end.
Related
I sent my project to my server but no one cant see changes what i did in local mode(i have index.html and other js and php). I had the same problem with another project with index.php but soved adding this <?php time();?> at the end of scrip. Is there any similar solution for javascript?
This is what i did
<script src="assets/js/funciones.js?<?php time();?>"></script>
The problem is that you're changing static files, but not their filenames.
By default apache/nginx/etc serve static content with headers that say "cache this for a very long time" because it's static content, why would you not?
Tacking on random trash to the URL like you're doing with you JS is a kludge that permanently breaks all caching and ensures that users will repeatedly download the exact same static file every time they request a page. You can make the trash less random to break the cache less frequently, but it's still an inefficient kludge. [Albeit a popular one, to my immense annoyance.]
Ideally for resource bundles like JS and CSS, you make a new resource bundle file every time you change it, eg: somefile-v1234.js or somefile-20211007.js and update the reference in your HTML source. This has the side-benefit of ensuring that the versions of your resource bundles always match.
The same goes for any other static file: images, CSV, etc.
The trouble you're having now is that you've updated some HTML pages and the only way to break the cache is to have the user perform an action, like hitting CTRL+F5 to force a refresh.
There are a couple ways around this:
Change the Apache/Nginx/etc settings to set shorter expiries for static file cache headers. You may be able to target specific files like index.html, but YMMV.
Serve the content with PHP. Anything served via a PHP script will not have any cache headers set by default, as the assumption is that the output of a script is dynamic. You can also issue the caching headers yourself in PHP to control what gets cached for how long.
Lastly, you cannot solve this problem retroactively. If a user has a cached version of the HTML page that has not yet reached its expiration, the user MUST take action to break that cache. There's nothing that can be done server side because the valid cache tells the client that it doesn't have to ask the server.
Once you get to the point of your application being popular enough to warrant putting a CDN in front of it this problem gets much worse as now there's a cache in the middle that the user doesn't have control of, and it's potentially an expensive problem because some CDN providers charge a fee for forcing CDN cache invalidations.
I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...
I need to clear browser cache when I push an updated javascript file on server. A simple answer would be to use below technique of query string.
<script type="text/javascript" src="/js/myjsfile.js?{my file version}"></script>
It would work but
Do I need to do this on every single script tag of every single
page of my application?
Can I do this at main screen like login which loads at the beginning
and I assume that would clear the cached file with new one, would it
work?
"Do I need to do this on every single script tag of every single page of my application?"
Yes you do. The cache is based on the file's url, including those extra parameters.
Adding those parameters doesn't actually remove the file from the browser's cache, it more or less sees it as a new, different file.
This also answers point 2, since having to do it on all pages means you can't do it on only one page.
I am administrating a web page were we have an HTML dokument linking to PDF-files. The PDF-files gets updated from time to time, but we don't want to change the file names. This means that the users get old cached copies of the files, and have to refresh the files manually in order to get the newest file.
I added the following code to the links:
onClick="this.href=this.href.split('?')[0]+'?'+new Date().getTime()">
This solved the problem were the users got old files, but introduced a problem were the user needs to load PDFs even though they have not been updated. This causes more server load, and longer wait times for the users. Is it possible to get a similar code were the script checks a hash or the file size of the target file and adds that to the URL behind the questionmark? If this is possible I would overcome all my problems.
I dont know where you got access to but i assume you can use php.
So you should append an md5 (generated by md5_file()) as parameter to your string. The parameter will only change, if you upload a new pdf (mtime() will have the same effect)
I have a few scripts that are common among all html pages for my application. Call this file commonfunctions.js. Each html page will load it as you move around the application along with appending the last modification date for this js file (that's gotten from the server). Firebug is adding the file every time to the list of loaded scripts as well as an eval/seq/# (where # is the number of times this file has been loaded starting at 7 for some reason). For example, if I have 3 pages called one.html, two.html, and three.html each with this line of code:
<script type="text/javascript" src="commonfunctions.js?mod=11/33/2012"></script>
If I were to go from one.html->two.html->one.html->three.html, Firebug would list the scripts loaded as:
commonfunctions.js?mod=11/33/2012
commonfunctions.js?mod=11/33/2012/eval/seq/7
commonfunctions.js?mod=11/33/2012/eval/seq/8
commonfunctions.js?mod=11/33/2012/eval/seq/9
and so on as I visit the three pages more.
Why is this happening and is there a way to stop it? I read that it could be that firebug will make its own url if it doesn't know the url due to an eval() or event attribute; however, these scripts are being loaded via regular tags.
I'm concerned because I'm not sure if this means the browser has now compiled and is executing or storing multiple copies of the same script--very wasteful in both conditions.
The script may have been loaded via script tag, but somewhere within commonfunctions.js a call to eval()has been made. Or three, obviously.