jQuery Javascript Page Load Speed

I have a webpage that has a lot of jQuery/Javascript on it.  The scripts perform calculations and update the page.  All of the code is clean and organized and as optimized as much as I know how.  However, there is, what I consider, a lot of code and when you navigate to the next page and script has to do its thing, the pages load slow.  Is there anyway to speed up jQuery or Javascript processing?  For some reason I can get ySlow to work on these pages/
LVL 7
rgranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Couple of simple tips:

Make sure you're using a minified version of jQuery and a minified, combined version of your own javascript (and CSS).

Make sure you're pulling the jQuery library from a CDN - there's plenty out there including google.com and jquery.com

If there are lots of images on your page particularly CSS, then consider using sprites.

Make sure you server is providing compressed pages, such as gzipped.

Whilst these are simply things you can do, performance can often be affected by your own coding / how many HTTP request are being made / the state of the physical server etc.

Tweak a couple of things, and then test the performance again.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
InsoftserviceCommented:
Please provide the code spec or link so that we could check the exact reason .
Please let us know the size of js,css,image .
I hope your js and css files are minimized.
use Images sprite method for displaying images so as to reduce no of  http requests
0
rgranlundAuthor Commented:
These are really great suggestions and I will do as much as I can with them.  The following is the entire script.  Maybe you can have a quick look at it and let me kn ow where you think I can better organize/minimize the code.  I'm fairly new at this, so...
<script>
$(document).ready(function() {
    //  START Damage Total Output
    var damage_total_base = $('[name="item_options[{row_id}][physical_damage_total]"]').val();
    if (damage_total_base !== "") {
        $(".total-damage-total-{row_id}").html('<div class="cart-control-group"><div class="product-name">Physical Damage</div><div class="controls"><div style="float:left;">$</div><div style="float:left;">' + damage_total_base + '.00</div></div></div>');
    }
    //  END Damage Total Output

    //  START Liability Total Output
    var liability_total_base = $('[name="item_options[{row_id}][liability_total]"]').val();
    if (liability_total_base !== "") {
        $(".total-liability-total-{row_id}").html('<div class="cart-control-group"><div class="product-name">Bicycle Liability</div><div class="controls"><div style="float:left;">$</div><div style="float:left;">' + liability_total_base + '.00</div></div></div>');
    }
    //  END Liability Total Output

    //  START Medical Total Output
    var medical_total_base = $('[name="item_options[{row_id}][medical_total]"]').val();
    if (medical_total_base !== "") {
        $(".total-medical-total-{row_id}").html('<div class="cart-control-group"><div class="product-name">Medical Payments</div><div class="controls"><div style="float:left;">$</div><div  style="float:left;">' + medical_total_base + '.00</div></div></div>');
    }
    //  END Medical Total Output	

    //  START Vehicle Total Output
    var vehicle_total_base = $('[name="item_options[{row_id}][vehicle_total]"]').val();
    if (vehicle_total_base !== "") {
        $(".total-vehicle-total-{row_id}").html('<div class="cart-control-group"><div class="product-name">Vehicle Contact</div><div class="controls"><div style="float:left;">$</div><div  style="float:left;">' + vehicle_total_base + '.00</div></div></div>');
    }
    //  END Vehicle Total Output     	
    var illinois_hide = $('[name*="[0][location_state]"]').val();

		if( illinois_hide === "IL") {
			$('#bike_type').children('option[value="Electric / Pedal Assist"]').css('display','none');
		};

    var formUpdate{row_id} = function() {

        //  START Grab State.  Must Have for all calculations

        var state_a = $('[name*="[0][location_state]"]').val();
        if( state_a === "" ) {
        	state = "none";
        } else {
        	state = state_a;
        }

        //  END Grab State.


        $.ajax({
            url: "index.php/ajax/view_cart_ajax.php",
            type: "POST",
            data: {
                state: state
            },
            dataType: 'json',
            success: function(data) {
                    //  START Options Price
                    //  START Association Fee
                    var options_assoc_var = $('select[name*="[0][association_membership]"]').find(':selected').data('rate');
                    if (options_assoc_var == null) {
                        options_assoc = 1;
                    } else if (options_assoc_var == undefined) {
                        options_assoc = 1;
                    } else {
                        options_assoc = options_assoc_var;
                    }
                    //  END Association Fee

                    var roadside = 10;

                    //  GRAB Accessories

                    var sub_start_asses = $('[name*="[{row_id}][accessories_value]"]').val();
                    if (sub_start_asses === "") {
                        start_asses = 0;
                    } else {
                        start_asses = sub_start_asses;
                    }

                    var pdb_base = start_asses / 100;
                    if (pdb_base === 0) {
                        pdb = 0;
                    } else {
                        pdb = (data[0].pd_base_rate);
                    }
                    var pdb_sub = parseFloat(pdb) * parseFloat(pdb_base);
                    var myass = parseFloat(pdb_sub);

                    //  alert("Asseccories " + myass);



                    //  END Accessories

                    //  START Item Count for Multi Bicycle Discount
                    var item_count = '{total_items}';
                    //  END Count For Multi Bicycle Discount


                    //  START Create Base Rate	 
                    //  START Grab Base Rate
                    var sub_base_price = $('[name*="[{row_id}][base_price]"]').val();
                    var base_price = Math.round(sub_base_price);

                    //  START Grab Deductible
                    var deductible = $('select[name*="[0][product_deductible]"]').val();
                    //  END Create Base Rate

                    //  START Create Usage	
                    var usage_var = $('select[name*="[{row_id}][usage]"]').find(':selected').data('damage');
                    if (usage_var === null) {
                        usage = 1;
                    } else if (usage_var === undefined) {
                        usage = 1;
                    } else {
                        usage = usage_var;
                    }
                    //  END Create Usage


                    //  START Type
                    var type_var = $('select[name*="[{row_id}][type_bicycle]"]').find(':selected').data('damage');

                    if (type_var === null) {
                        type = 1;
                    } else if (type_var === undefined) {
                        type = 1;
                    } else {
                        type = type_var;
                    }
                    //  END Type


                    //  START Material
                    var material_var = $('select[name*="[{row_id}][bicycle_material]"]').find(':selected').data('damage');

                    if (material_var === null) {
                        material = 1;
                    } else if (material_var === undefined) {
                        material = 1;
                    } else {
                        material = material_var;
                    }
                    //  END Material


                    //  START Accessories Value Premium
                    var access_base_price = parseFloat(deductible) * parseFloat(myass) * parseFloat(usage) * parseFloat(type) * parseFloat(material);
                    //  END Accessories Value

                    //  START Physical Damage Premium
                    var rates = parseFloat(deductible) * parseFloat(base_price) * parseFloat(usage) * parseFloat(type) * parseFloat(material);

                    var sub_damage_total = parseFloat(rates) + parseFloat(access_base_price);

                    var damage_total = Math.round(sub_damage_total);

                    $('input[name="item_options[{row_id}][physical_damage_total]"]').val(damage_total);

                    //  alert("BIKE {row_id} - Physical Damage Total:: " + damage_total);

                    //  END Physical Damage Total



                    //  START CREATE Liability	
                    //  START Grab Liability Factor

                    var lov = $('select[name*="[0][product_liability]"]').val();
                    if (lov === null) {
                        lov = "";
                    } else if (lov === undefined) {
                        lov = "";
                    }


                    if (lov == 'liability_25') {
                        liability_rate = (data[0].liability_25);
                    } else if (lov == 'liability_50') {
                        liability_rate = (data[0].liability_50);
                    } else if (lov == 'liability_100') {
                        liability_rate = (data[0].liability_100);
                    } else if (lov == 'liability_300') {
                        liability_rate = (data[0].liability_300);
                    } else {
                        liability_rate = 0;
                    }
                    //  END Liability Factor

                    //  START Bicycle Type Liability
                    //  Type of Bike
                    var liability_var = $('select[name*="[{row_id}][type_bicycle]"]').find(':selected').data('liability');
                    if (liability_var === null) {
                        liability = 1;
                    } else if (liability_var === undefined) {
                        liability = 1;
                    } else {
                        liability = liability_var;
                    }
                    //  Bicycle Material
                    var material_var = $('select[name*="[{row_id}][bicycle_material]"]').find(':selected').data('liability');
                    if (material_var === null) {
                        material = 1;
                    } else if (material_var === undefined) {
                        material = 1;
                    } else {
                        material = material_var;
                    }
                    //  Bicycle Usage
                    var usage_var = $('select[name*="[{row_id}][usage]"]').find(':selected').data('liability');
                    if (usage_var === null) {
                        usage = 1;
                    } else if (usage_var === undefined) {
                        usage = 1;
                    } else {
                        usage = usage_var;
                    }
                    //  END Bicycle Type Liability

                    //  Start Multi Bike Liability Discount
                    if (item_count === 1) {
                        lmbd = 1;
                    } else if (item_count === 2) {
                        lmbd = .75;
                    } else {
                        lmbd = .6;
                    }
                    //  Start Multi Bike Liability Discount


                    //  START Liability Premium
                    var liability_sub_total = parseFloat(liability_rate) * parseFloat(liability) * parseFloat(material) * parseFloat(usage) * parseFloat(lmbd);

                    var liability_total = Math.round(liability_sub_total);

                    $('input[name="item_options[{row_id}][liability_total]"]').val(liability_total);

                    //  alert("Bike {row_id} - Liability Total: " + liability_total);
                    //  END Liability Premium	


                    //  START CREATE Medical	
                    //  START Grab Medical Factor
                    var msr = $('select[name*="[0][product_medical]"]').val();
                    if (msr === null) {
                        msr = 0;
                    } else if (msr === undefined) {
                        msr = 0;
                    }

                    if (msr === 'medpay_1000') {
                        medical_rate = (data[0].medpay_1000);
                    } else if (msr === 'medpay_2500') {
                        medical_rate = (data[0].medpay_2500);
                    } else if (msr === 'medpay_5000') {
                        medical_rate = (data[0].medpay_5000);
                    } else if (msr === 'medpay_7500') {
                        medical_rate = (data[0].medpay_7500);
                    } else if (msr === 'medpay_10000') {
                        medical_rate = (data[0].medpay_10000);
                    } else if (msr === 'medpay_15000') {
                        medical_rate = (data[0].medpay_15000);
                    } else if (msr === 'medpay_20000') {
                        medical_rate = (data[0].medpay_20000);
                    } else if (msr === 'medpay_25000') {
                        medical_rate = (data[0].medpay_25000);
                    } else {
                        medical_rate = 0;
                    }
                    //  END Medical Factor



                    //  START Bicycle Medical Medical
                    //  Bicycle Type
                    var med_medical_var = $('select[name*="[{row_id}][type_bicycle]"]').find(':selected').data('medical');
                    if (med_medical_var === null) {
                        med_medical = 1;
                    } else if (med_medical_var === undefined) {
                        med_medical = 1;
                    } else {
                        med_medical = med_medical_var;
                    }
                    //  Bicycle Material
                    var mat_med_medical_var = $('select[name*="[{row_id}][bicycle_material]"]').find(':selected').data('medical');
                    if (mat_med_medical_var === null) {
                        mat_med_medical = 1;
                    } else if (mat_med_medical_var === undefined) {
                        mat_med_medical = 1;
                    } else {
                        mat_med_medical = mat_med_medical_var;
                    }
                    //  Bicycle Usage
                    var usage_med_medical_var = $('select[name*="[{row_id}][usage]"]').find(':selected').data('medical');
                    if (usage_med_medical_var === null) {
                        usage_med_medical = 1;
                    } else if (usage_med_medical_var === undefined) {
                        usage_med_medical = 1;
                    } else {
                        usage_med_medical = usage_med_medical_var;
                    }

                    //  END Bicycle Medical Medical

                    //  Start Multi Bike MedicalDiscount
                    if (item_count === 1) {
                        mmbd = 1;
                    } else if (item_count === 2) {
                        mmbd = .75;
                    } else {
                        mmbd = .60;
                    }
                    //  Start Multi Bike Medical Discount

                    //  START Medical Premium
                    var medical_sub_total = parseFloat(medical_rate) * parseFloat(med_medical) * parseFloat(mat_med_medical) * parseFloat(usage_med_medical) * parseFloat(mmbd);

                    var medical_total = Math.round(medical_sub_total);

                    $('[name="item_options[{row_id}][medical_total]"]').val(medical_total);

                    //  alert("Bike {row_id} - Medical Total: " + medical_total);

                    //  END Medical Premium
                    //  END Medical 


                    //  START Vehicle  Premium

                    //  START CREATE  Vehicle 	
                    //  START Grab  Vehicle  Factor	
                    var vsr = $('select[name*="[0][product_contact]"]').val();
                    if (vsr === null) {
                        vsr = 0;
                    } else if (vsr === undefined) {
                        vsr = 0;
                    }

                    if (vsr === 'mvc_10') {
                        vehicle_rate = (data[0].mvc_10);

                    } else if (vsr === 'mvc_25') {
                        vehicle_rate = (data[0].mvc_25);
                    } else {
                        vehicle_rate = 0;
                    }
                    //  END Vehicle Factor


                    //  VEHICLE
                    //  Bicycle Type Vehicle
                    var vec_vehicle_var = $('select[name*="[{row_id}][type_bicycle]"]').find(':selected').data('vehicle');
                    if (vec_vehicle_var === null) {
                        vec_vehicle = 1;
                    } else if (vec_vehicle_var === undefined) {
                        vec_vehicle = 1;
                    } else {
                        vec_vehicle = vec_vehicle_var;
                    }

                    //  Bicycle Material Vehicle  
                    var mat_vec_vehicle_var = $('select[name*="[{row_id}][bicycle_material]"]').find(':selected').data('vehicle');
                    if (mat_vec_vehicle_var === null) {
                        mat_vec_vehicle = 1;
                    } else if (mat_vec_vehicle_var === undefined) {
                        mat_vec_vehicle = 1;
                    } else {
                        mat_vec_vehicle = mat_vec_vehicle_var;
                    }

                    //  Bicycle Usage Vehicle       
                    var usage_vec_vehicle_var = $('select[name*="[{row_id}][usage]"]').find(':selected').data('vehicle');
                    if (usage_vec_vehicle_var === null) {
                        usage_vec_vehicle = 1;
                    } else if (usage_vec_vehicle_var === undefined) {
                        usage_vec_vehicle = 1;
                    } else {
                        usage_vec_vehicle = usage_vec_vehicle_var;
                    }


                    //  END CREATE Vehicle         

                    //  Start Multi Bike Contact Discount
                    if (item_count === 1) {
                        vmbd = 1;
                    } else if (item_count === 2) {
                        vmbd = .75;
                    } else {
                        vmbd = .6;
                    }
                    //  Start Multi Bike Contact Discount

                    //  START Vehicle Premium
                    var vehicle_sub_total = parseFloat(vehicle_rate) * parseFloat(vec_vehicle) * parseFloat(mat_vec_vehicle) * parseFloat(usage_vec_vehicle) * parseFloat(vmbd);

                    var vehicle_total = Math.round(vehicle_sub_total);


                    $('input[name="item_options[{row_id}][vehicle_total]"]').val(vehicle_total);

                    //  alert("Bike {row_id} - Vehicle Total: " + vehicle_total);

                    //  END Vehicle Premium


                    //  START Total Options Price 
                    var options_total = parseFloat(liability_total) + parseFloat(medical_total) + parseFloat(vehicle_total);
                    //  END Total Options Price	 		


                    //  START Final Price
                    var pre_premium_total = parseFloat(damage_total) + parseFloat(options_total); 
                    var sub_premium_total = parseFloat(pre_premium_total) * parseFloat(options_assoc);
                    var premium_total = parseFloat(sub_premium_total) + parseInt(roadside);
                    //  END Final Price



                    //  START PRINT Final Price	
                    if (premium_total < 110) {
                        premium = 110;
                    } else {
                        premium = premium_total;
                    }


                   //alert("Bike {row_id} - Premium " + premium);
                    $('input[name="price[{row_id}]"]').val(premium);

                } //  END Update VAR
        }); //  END Ajax
    }; //  END Main OnChange Function
	
    $('select').on('change', formUpdate{row_id});
    $("form").on("submit", formUpdate{row_id});

}); //  END Document Ready
</script> 

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.