In VS 2008, I have an ASP.NET content page having one master page. I would like to add JavaScript functions for client side validation etc. for this page. My questions are:
Should I write these scripts in a separate .js file, or embedded within the .aspx file.
Does this choice affect the performance of the website?
Are there any rules for writing a JavaScript file?
I would say, you should create javascripts functions into separate .js file and link them up inside the the master page or .ASPX where it's needed.
Imagine you "copy and paste" the javascripts functions in each of the .ASPX, then when that .ASPX file is loaded, it will take longer to render that page since it needs to render also the javascript functions. If you maintain it into separate .js file, the browser will only download once if it's newer or not exist before.
You can also cache those .js files, so that the browsers won't reload it everytime.
The other advantage is when you need to make some changes in the .js files, you just need it to modify it centrally at one file, rather than do a "Find and Replace" through numerous .ASPX
You should consider the power of caching, if the JavaScript functions are likely to be used on several pages a user will visit. In this case you should put them in (if possible) one external .js file. With this the file will only get fetched once from the server and then stays in the browser cache. Your HTML pages get smaller (significantly for larger JS libs).
If the functions (typically validation rules) only apply to one single page only, an external JavaScript file would lead to an extra HTTP request that leads to a short blocking in the user's experience of your page. Here it's better to embed the JS in the HTML file.
See Yahoo!'s tips on this for more detailed hints.
Cheers,
It depends on your use. If its a page specific functionality then try and implement it in the page itself. If it is used by many pages then put that inside a js file.
Does it affect the performance of
website?
Yes, it can. If you have a js file with thousands of lines of code and in a page you have to call only one function inside the js file. If you refer the file for this one there should be a bandwidth wastage in downloading the entire file. For this case you can write the function inside the same page itself.
On the other side browser can cache a js file. So for subsequent requests if the file is present in the cache it won't be downloaded again. But in the case of JavaScript being written in the page itself, every time the page loads all of its contents will be downloaded.
Related
I am using Magnolia CMS 5.3.4, the STK, and freemarker (FTL) template scripts.
Some components I have defined relies on specific javascript files. Right now, what I do is that I include these javascript files in the main.ftl template script. I am looking for a way to get them included only if the specific component is present on the page.
I tried to use the jsFiles property in Template Definitions, but it seems it works only for page template definition.
The jsFiles property indeed works only for pages not for components. This is because Magnolia wants to include those files in header already, rather than loading them in middle of the body when component gets rendered.
As a general practice I would anyway recommend combining your js files into one (look at for example plugin loader in resources on how this is done) and set longer time for caching such file so that browser downloads all the script just once for the whole site rather then page by page. The bigger js file you are sending over the more overhead you are cutting off from requesting separate files and better the compression of content for transport will work.
HTH,
Jan
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.
Let's say I have a website with following pages:
www.server.com/index.php
www.server.com/anotherPage.php
www.server.com/css/style_for_index.css
www.server.com/css/style_for_anotherPage.css
Assuming, I am visiting www.server.com/index.php:
When using .appcache manifest in the <HTML> tag, I understand that every associated file of this page is automatically cached anyway.
But if I wanted to load, at the same time, www.server.com/anotherPage.php, then I would also have to load www.server.com/css/style_for_anotherPage.css in the CACHE section of the manifest.appcache file.
What I don't understand is if I would also have to include the background-images from www.server.com/css/style_for_anotherPage.css into the manifest.appcache file.
I understand that every associated file of this page is automatically cached anyway.
This is incorrect.
You need to explicitly mention any resource you want to be cached, except for the so-called master entries. Master entries are the HTML files that include a manifest attribute in their <html> element. So also any images, scripts, stylesheets referenced by these files.
Obviously, you need to also include any files referenced by your css or javascript files, if you want them to be available offline.
I'm stepping in to a project that has been going on for a few years.
One of the issues I saw immediately is that CSS files are being included in the master pages, the aspx pages, user controls and more, and also style sheets are created and imporeted via aspx files, and not linked. (A mess, I know)
It becomes impossible to debug styling issues.
What would be the best strategy for removing the double imports? Is there any built-in method to insure files are imported only once?
Thank you!
One way will be to have all CSS files embedded as resources then use Page.ClientScript.RegisterClientScriptResource.
Another way is leave the files as they are now and use Page.ClientScript.RegisterClientScriptBlock to include them after checking if already included by Page.ClientScript.IsClientScriptBlockRegistered giving it the unique key used in the Register method.
Either way, you'll have to remove the CSS includes from the .aspx itself and put it in the code behind.
I am building up a website using MVC architecture. It takes a lot of css with it. I require atleast 20 css files to store within it each associated with some unique views. I want to know where can I store the css files? Either in a single root css directory or shall I store it with a particular view. Also linking these files within the common template file would be tedious enough. I mean it would show up 20 different tags. Is there any alternative way to do this? Please help. I am using codeigniter framework by the way.
What I do is store it all in a css folder inside the public folder (the one that houses your index.php file). I also have a helper method that generates the actual link tags, so in the template files, I just have something like:
<?= stylesheet('sheet1','sheet2','sheet3') ?>
The helper method that calls would then make the links (and assumes that they're in the public/css directory).
That cleans up the raw template files, though it does still make multiple tags in the files themselves. I use partial views, so there's a master view that has the main CSS file(s) that are used on every page (or almost every page), then add in on each template the ones that are unique to the view.
If you have 20 CSS files, you might want to go through and see what you can tidy up and make more generic. Any place where you have more than one of the same styles (even across files) is up for the chopping block. Any extra files should be relatively small and provide only overrides for the exception pages (and if you can genericize those more, so you use a file for more than one page, then that's even better).
I would recommend you to combine all the CSS files in a single file. Its easier to maintain and you will have only one request to the server. Having so many css files will only increase the loading time of your page. Also gzip the css files to increase the page speed.