Larger HTML files VS client templating - javascript

Let's assume i have 50 views in my app, all of these views include user html.
<div>Hi, im a user</div>
What would be faster, loading and rendering the user view in the client and using the template engine to attach it to all of the other 50 views OR if this piece of HTML were on each of the 50 views, making their files larger, but eliminating the need for client rendering and the additional Http request?
Edit
I'm not concerned about duplicate code, we will compile the small piece of code, so it won't be duplicated. The question is strictly about speed of larger HTML files VS client rendering + http request.

You want to avoid putting the same exact HTML in every file. Use includes/templating/partials in order to display headers/footers so that when you need to make a change, you only need to change one file. Not 50.
As far as loading parts of the page asynch; It's all about what you want the loading to look like to the client. Asynch loading appears faster to the end user because the initial page load is faster (less data to transmit) but actually takes longer over all because of the multiple http requests.

Related

How do I display my project correctly in a server?

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.

How to create screensaver during client gets data from server?

An Angular application weighs over 5 mb in production. First time, when client asks page from server it takes some time, during this process user sees a blank white page.
Is it possible to create screensaver until client gets data?
You have two options:
Option 1 - clean & tidy: Create a new loading component and set that as your root component, and offload all of the loading work from your root component to that new component via lazy loading.
Option 2 - quick & dirty: You can edit your index.html file and put whatever you want inbetween your main app component's opening and closing tags, including a style tag to style the elements which will appear there. This content will disappear when your app loads.
The cleanest and neater way is to Lazy Loading your modules. You can easily convert your modules to be loaded lazily.
This divides your huge javascript into chunks and does not load them until they are requested.

My page is "stuttering" when it loads. How can I fix this?

I have a piece of content that I was tired of editing on every page of my website, so I put it in a separate HTML file and have been loading the markup into its place on all my pages:
<div id="header-house">
<script type="text/javascript">
$("#header-house").load("reusableMarkup/header.html");
</script>
</div>
The problem is that my page stutters when it loads. It seems to load everything and then display it and then move it around after injecting the header. Is there any simple fix to this? I haven't yet learned synch/asynch stuff.
Immediate asynchronous calls to retrieve bits and bobs of HTML isn't the correct way to go about what you are trying to do - a separate HTTP request must be made for each additional HTML file you want to include, slowing your site down significantly and creating a weird user experience like you've described.
The route you've taken here is better suited to on-demand HTML generation (e.g. when the user performs an action that results in a popup modal containing some dynamic data).
What you're trying to do is exactly what a server-side language is used for, where your HTML files are combined / repeated on the server to generate a single HTML document, which is then sent to the client as a whole (one HTTP request).
In PHP for example, you could go about solving your problem using the include function:
<div id="header-house">
<?php include "reusableMarkup/header.html"; ?>
</div>

Reusing html like templates without a view engine

This is for a new application, there's going to be several servers handling different parts (one for htmls, one as a proxy to handle https requests, and a full java backend with a database). The view server is supposed to be as simple as possible (an apache server delivering the htmls and that's it)
The idea is to use the pure htmls (with JS) that the UI designed created. Now, I thought of making the entire application using Jquery, by pulling all the dynamic data and append js files with logic on how to handle the ajax response.
My problem comes when I want to reuse htmls (the header, the footer and the menu are exactly the same for all pages). I can call, for example, /contact.html, and through ajax, call header.html, footer.html and menu.html. But that would mean 4 GET requests only for the main page (plus, rendering could be really off until all requests are finished).
I also don't want to have single full pages, because if I want to change the menu, I have to make that change in every html.
Is there some other alternative I'm missing ? If not, what is the best approach here (performance AND maintenance are equally important here)
Try http://mixer2.org/ .
Mixer2 can load html templates and convert them to java bean instance.
All the html tag and org.mixer2.xhtml.* java class are mapped one by one automatically.
So, You can load several templates such as "header.html", "footer.html", and re-use the tag snippet copy.

Send head before body to load CSS and JS asap

I wonder if anyone has found a way to send at mid rendering the head tag so CSS and Javascript are loaded before the page render has finished? Our page takes about 523ms to be rendered and resources aren't loaded until the page is received. I've done a lot of PHP and it is possible to flush the buffer before the end of the script. I've tried to add a Response.flush() at the end of the Masterpage page_load, but the page layout is horribly broken afterward. I've seen a lot of people using an update panel to send the content using AJAX afterward but I don't quite know what impact it would have on the SEO.
If I don't find a solution I guess I'd have to go the reverse proxy route and find a way to invalidate the proxy cache when the pages content change.
Do not place the Flush on code behind but on your html page as:
</head>
<%Response.Flush();%>
<body >
This can make something like fleekering effect on the page, so you can try to move the flush even a little lower to the page.
Also on Yahoo tips page at Flush the Buffer Early
http://developer.yahoo.com/performance/rules.html
Cache on Static
Additionally you can add client cache on static content like the css and javascript. In this page have all the ways for all iis versions.
http://www.iis.net/ConfigReference/system.webServer/staticContent/clientCache
Follow up
One more think that I suggest you to do after I see your pages is to place all css and javascript in one file each. And also use minified to minimize them.
I use this minified http://www.asp.net/ajaxlibrary/Download.ashx with very good results and real time minified.
Consider using a content-delivery-network (CDN) to host your images, CSS and JS files. Browsers have either an eight or four connection limit per domain - so once you use those up the browser has to wait for the resources to be freed up.
By hosting some files on the CDN you get another set of connections to use concurrently, allowing everything to load faster.
Also consider enabling GZIP on your server if you haven't already. This compresses files on the fly, resulting in smaller transfers.
You could use jQuery to execute your js as soon as it is loaded.
$.fn.ready(function(){
//Your code here
})
Or you could just take the standalone ready function -> $(document).ready equivalent without jQuery
You could do a fade-in or show once the document has been loaded. Just set body display:none;

Categories

Resources