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/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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>
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