Question

I have the below ajax call.

jQuery.post('index.php',{
                        'option'    : 'com_one',
                        'controller': 'product',
                        'task'  : 'loadColors',
                        'format'    : 'raw',            
                        'design_id' : design_id,
                        'collar_id' : collar_id                        
                }).success(function(result) { 
                    jQuery('div#color_wrapper').html(result); 
                }).error(function() { 
                    jQuery('div#color_wrapper').html('<h1>ERROR WHILE LOADING COLORS</h1>');
                });

Method 1
It returns large set of HTML. Then those are assigned to the div#color_wrapper. What I do here is echo all the HTML I want in the model.php.

Method 2
I just got to know that I can get the data as a JSON object and render them inside the page using a JavaScript template.(handlebarsjs).

As far I understand It’s client side processing(Method 2)vs server side processing(Method 1).

My problem is which method is faster? Which method is the industry standard? Are there any pros and cons of these two methods? What method should I use and Why?

Thanks

Answer 1

I think the JSON method is better, since there’s less data to transfer for consecutive requests.

If you’re really that conscious about performance, you should precompile your templates.

Additionally, if you precompile your templates, you don’t even have to send handlebars.js to the client. You can send a much smaller handlebars.runtime.js to the browser, further decreasing load time!