Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Too much javascript make site slow?

Status
Not open for further replies.
Carlvic

Carlvic

MIS
Jun 15, 2017
99
AE
Hello,


I having my first project using php codeigniter and on my registration page I have a lot of js functions.

Like Onclick on change, Autosuggest, select2, tabs and maybe more during development..

I this may slow my page/site?

As of now when I check speed of my page it takes 1-3 secs to load.
But my project still on localhost and don't have a lot of data for now.



I attach my javascript structure here, I found some tips online but I don't know what should I follow they have different approach.
Anyone can give suggestions would be better.

JavaScript: 
 <link rel="stylesheet" href="assets/css/autocomplete/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
        <script src="assets/js/autocomplete/jquery.easy-autocomplete.min.js" type="text/javascript"></script>
        
        <script src="assets/js/bootstrap-datetimepicker.min.js"></script>
        <script src="assets/js/editable_table/mindmup-editabletable.js"></script>
        <script language="javascript">
    // init copy features
$(document).ready(function(){
    
    $('#copy-lang').click(function(){
        $('.tabbable .tab-pane.active select, '+
          '.tabbable .tab-pane.active input[type=checkbox], '+
          '.tabbable .tab-pane.active input[type=text], '+
          '.tabbable .tab-pane.active textarea').each(function(){
            
            if($(this).attr('id') == null)return;
            
            var option_id = $(this).attr('id').substr($(this).attr('id').lastIndexOf('_')+1);
            var lang_active_id = $(this).attr('name').substr($(this).attr('name').lastIndexOf('_')+1);
            var option_val = $(this).val();
            var is_input = $(this).is('input');
            var is_input_text = $(this).is('input[type=text]');
            var is_area = $(this).is('textarea');
            var r_id = $(this).attr('id');
            var is_level = false;
            var is_tree_input = $(this).hasClass('tree-input-value');
            var is_level_splited;
            var is_level_parent_id;
            var is_HTMLTABLE = $(this).hasClass('HTMLTABLE');
            var is_PEDIGREE = $(this).hasClass('PEDIGREE');
            var curr_level = 0;
            
            if($(this).hasClass('skip-input'))
                return;

            if(!$(this).attr('id'))return;
            
            //if(is_tree_input)
            //    console.log('test: '+r_id);
            
            if(r_id.indexOf("level") > 0)
            {
                is_level_splited = r_id.split("_"); 
                is_level = true;
                option_id = is_level_splited[2];
            }
            
            if(is_input)
            {
                if($(this).attr('type') == 'checkbox')
                {
                    option_val = $(this).is(':checked');
                }
                else
                {
                    
                }
            }
            else if(is_HTMLTABLE)
            {
                option_val = $(this).parent().find('table > tbody').clone();
            }
            else if(is_PEDIGREE)
            {
                option_val = $(this).parent().find('ul.tree');
            }
            else if(is_area)
            {
                option_val = $(this).val();
            }
            else if(is_level)
            {
                curr_level = parseInt(is_level_splited[4]);
                is_level_parent_id = 0;
                if(curr_level > 0)
                {
                    is_level_parent_id = $('.controls #inputOption_'+is_level_splited[1]+'_'+option_id+'_level_'+parseInt(curr_level-1)).val();
                }

                option_val = $(this).val();
            }
            else
            {
                option_val = $(this).prop('selectedIndex');
            }
            
//            console.log('option_id: '+option_id);
//            console.log('lang_active_id: '+lang_active_id);
//            console.log('option_val: '+option_val);
//            console.log('is_input: '+is_input);
            
            $('.nav.nav-tabs li.lang a').each(function(){
                if(!$(this).parent().hasClass('active'))
                {
                    var lang_key = $(this).attr('href').substr(1);
                    
//                    console.log('lang_key: '+lang_key);
//                    console.log('#inputOption_'+lang_key+'_'+option_id);
                    
                    if(is_input)
                    {
                        if(is_tree_input)
                        {
                            $('#inputOption_'+lang_key+'_'+option_id).parent().parent().find('select').val('');
                            $('#inputOption_'+lang_key+'_'+option_id).val('');
                            
//                            console.log('#inputOption_'+lang_key+'_'+option_id);
//                            console.log($('#inputOption_'+lang_key+'_'+option_id).val());
                        }
                        else if(is_input_text)
                        {
                            if($('#inputOption_'+lang_key+'_'+option_id).val() == '' ||
                               $.isNumeric(option_val))
                                $('#inputOption_'+lang_key+'_'+option_id).val(option_val);
                        }
                        else
                        {
                            $('#inputOption_'+lang_key+'_'+option_id).prop('checked', option_val);
                        }
                    }
                    else if(is_PEDIGREE)
                    {
                        //$('#inputOption_'+lang_key+'_'+option_id).parent().find('ul.tree').html(option_val.html());
                    }
                    else if(is_HTMLTABLE)
                    {
                        // replace based on dropdown translation
                        // console.log('lang_from_id: '+lang_active_id);
                        // console.log('lang_to_id: '+lang_key);
                        // console.log(option_id);
                        
                        //col_1_76_0
                        var option_val_clone = option_val.clone();
                        option_val_clone.find('tr td').each(function( index ) {
                            var col_index = $(this).index();
                            var row_index = $(this).parent().index();
                            var cur_content = $(this).html();
                            var lang_col_from = $('#col_'+lang_active_id+'_'+option_id+'_'+col_index);
                            var lang_col_to = $('#col_'+lang_key+'_'+option_id+'_'+col_index);
                            
                            if(lang_col_to.length == 1 && cur_content != '')
                            {
                                var dropdown_index = lang_col_from.find("span:contains('"+cur_content+"')").index();
                                var rep_text = lang_col_to.find('span').eq(dropdown_index).html();
                                option_val_clone.find('tr').eq(row_index).find('td').eq(col_index).html(rep_text);
                                
                                //console.log(dropdown_index + '|' + $( this ).html() );
                                //console.log(rep_text);
                            }
                        });
                        
                        $('#inputOption_'+lang_key+'_'+option_id).parent().find('table > tbody').html(option_val_clone.html());
                        
                        table_add_events(option_id+'_'+lang_key);
                        save_changes_table(option_id+'_'+lang_key);
                    }
                    else if(is_area)
                    {
                        if($('#inputOption_'+lang_key+'_'+option_id).val() == '' ||
                           $('#inputOption_'+lang_key+'_'+option_id).val() == '<br>' )
                        {
                            $('#inputOption_'+lang_key+'_'+option_id).val(option_val).blur();
                        }
                    }
                    else if(is_level)
                    {
                        if (typeof load_and_select_index === 'function') {
                            load_and_select_index($('#inputOption_'+lang_key+'_'+option_id+'_level_'+is_level_splited[4]), option_val, is_level_parent_id);
                        }
                    }
                    else
                    {
                        //console.log('#inputOption_'+lang_key+'_'+option_id);
                        //console.log(option_val);
                        $('#inputOption_'+lang_key+'_'+option_id).prop('selectedIndex', parseInt(option_val)); 
                        $('#inputOption_'+lang_key+'_'+option_id).trigger('change');
                    }
                }
            });
        });
        
        return false;
    });
    
    $('#translate-lang').click(function(){
        $('.tabbable .tab-pane.active select, '+
          '.tabbable .tab-pane.active input[type=checkbox], '+
          '.tabbable .tab-pane.active input[type=text], '+
          '.tabbable .tab-pane.active textarea').each(function(){

            if($(this).attr('id') == null)return;
            
            var option_id = $(this).attr('id').substr($(this).attr('id').lastIndexOf('_')+1);
            var lang_active_id = $(this).attr('name').substr($(this).attr('name').lastIndexOf('_')+1);
            var option_val = $(this).val();
            var is_input = $(this).is('input');
            var is_input_text = $(this).is('input[type=text]');
            var is_area = $(this).is('textarea');
            var r_id = $(this).attr('id');
            var is_level = false;
            var is_tree_input = $(this).hasClass('tree-input-value');
            var is_level_splited;
            var is_level_parent_id;
            var is_HTMLTABLE = $(this).hasClass('HTMLTABLE');
            var is_PEDIGREE = $(this).hasClass('PEDIGREE');
            var curr_level = 0;
            
            if($(this).hasClass('skip-input'))
                return;

            if(!$(this).attr('id'))return;
            
            if(r_id.indexOf("level") > 0)
            {
                is_level_splited = r_id.split("_"); 
                is_level = true;
                option_id = is_level_splited[2];
            }
            
            if(is_input)
            {
                if($(this).attr('type') == 'checkbox')
                {
                    option_val = $(this).is(':checked');
                }
                else
                {
                    
                }
            }
            else if(is_HTMLTABLE)
            {
                option_val = $(this).parent().find('table > tbody').clone();
            }
            else if(is_PEDIGREE)
            {
                option_val = $(this).parent().find('ul.tree');
            }
            else if(is_area)
            {
                option_val = $(this).val();
            }
            else if(is_level)
            {
                curr_level = parseInt(is_level_splited[4]);
                is_level_parent_id = 0;
                if(curr_level > 0)
                {
                    is_level_parent_id = $('.controls #inputOption_'+is_level_splited[1]+'_'+option_id+'_level_'+parseInt(curr_level-1)).val();
                }

                option_val = $(this).val();
            }
            else
            {
                option_val = $(this).prop('selectedIndex');
            }
            
            $('.nav.nav-tabs li.lang a').each(function(){
                if(!$(this).parent().hasClass('active'))
                {
                    var lang_key = $(this).attr('href').substr(1);
                    //console.log('lang_key: '+lang_key);
                    
                    if(is_input)
                    {
                        if(is_tree_input)
                        {
                            $('#inputOption_'+lang_key+'_'+option_id).parent().parent().find('select').val('');
                            $('#inputOption_'+lang_key+'_'+option_id).val('');
                            
//                            console.log('#inputOption_'+lang_key+'_'+option_id);
//                            console.log($('#inputOption_'+lang_key+'_'+option_id).val());
                        }
                        else if(is_input_text)
                        {
                            if($.isNumeric(option_val))
                            {
                                $('#inputOption_'+lang_key+'_'+option_id).val(option_val);
                            }
                            else if($('#inputOption_'+lang_key+'_'+option_id).val() == '' && option_val != '')
                            {
                                $.getJSON($('#translate-lang').attr('rel'), {from: lang_active_id, to: lang_key, value: option_val}, function( data ) {
                                    if(data.result != '')
                                    {
                                        $('#inputOption_'+lang_key+'_'+option_id).val(data.result);
                                    }
                                    else
                                    {
                                        $('#inputOption_'+lang_key+'_'+option_id).val(option_val);
                                    }
                                });
                            }  
                        }
                        else
                        {
                            //console.log('#inputOption_'+lang_key+'_'+option_id);
                            //console.log(option_val);
                            //$('#inputOption_'+lang_key+'_'+option_id).val(option_val);
                            $('#inputOption_'+lang_key+'_'+option_id).prop('checked', option_val);
                        }
                    }
                    else if(is_PEDIGREE)
                    {
                        
                    }
                    else if(is_HTMLTABLE)
                    {
                        // replace based on dropdown translation
                        //console.log('lang_from_id: '+lang_active_id);
                        //console.log('lang_to_id: '+lang_key);
                        //col_1_76_0
                        var option_val_clone = option_val.clone();
                        option_val_clone.find('tr td').each(function( index ) {
                            var col_index = $(this).index();
                            var row_index = $(this).parent().index();
                            var cur_content = $(this).html();
                            var lang_col_from = $('#col_'+lang_active_id+'_'+option_id+'_'+col_index);
                            var lang_col_to = $('#col_'+lang_key+'_'+option_id+'_'+col_index);
                            
                            if(lang_col_to.length == 1 && cur_content != '')
                            {
                                var dropdown_index = lang_col_from.find("span:contains('"+cur_content+"')").index();
                                var rep_text = lang_col_to.find('span').eq(dropdown_index).html();
                                option_val_clone.find('tr').eq(row_index).find('td').eq(col_index).html(rep_text);
                                
                                //console.log(dropdown_index + '|' + $( this ).html() );
                                //console.log(rep_text);
                            }
                        });
                        
                        $('#inputOption_'+lang_key+'_'+option_id).parent().find('table > tbody').html(option_val_clone.html());
                        
                        table_add_events(option_id+'_'+lang_key);
                        save_changes_table(option_id+'_'+lang_key);
                    }
                    else if(is_area && option_val != '')
                    {
                        if($('#inputOption_'+lang_key+'_'+option_id).val() == '' ||
                           $('#inputOption_'+lang_key+'_'+option_id).val() == '<br>' )
                        {
                            $.getJSON($('#translate-lang').attr('rel'), {from: lang_active_id, to: lang_key, value: option_val}, function( data ) {
                                if(data.result != '')
                                {
                                    $('#inputOption_'+lang_key+'_'+option_id).val(data.result).blur();
                                }
                                else
                                {
                                    $('#inputOption_'+lang_key+'_'+option_id).val(option_val).blur();
                                }
                            });
                        }
                    }
                    else if(is_level)
                    {
                        if (typeof load_and_select_index === 'function') {
                            load_and_select_index($('#inputOption_'+lang_key+'_'+option_id+'_level_'+is_level_splited[4]), option_val, is_level_parent_id);
                        }
                    }
                    else
                    {
                        //console.log('#inputOption_'+lang_key+'_'+option_id);
                        //console.log(option_val);
                        $('#inputOption_'+lang_key+'_'+option_id).prop('selectedIndex', parseInt(option_val)); 
                        $('#inputOption_'+lang_key+'_'+option_id).trigger('change');
                    }
                }
            });
        });
        
        return false;
    });
        
});


<?php if (isset($package_num_amenities_limit)): ?>
                $(document).ready(function () {

                    $('.control-group .controls input[type=checkbox]').change(function (event) {
                        var selected_checkboxes = $('.tab-pane.active .control-group .controls input[type=checkbox]:checked').length;

                        if (selected_checkboxes > <?php echo $package_num_amenities_limit; ?>)
                        {
                            $(this).prop('checked', false);
                            ShowStatus.show('<?php echo lang_check('Limitation by package'); ?>: ' + '<?php echo $package_num_amenities_limit; ?>');
                        }
                    });

                });
<?php endif; ?>

       

  
         


        </script>

       <script type="text/javascript">
    $(document).ready(function(){
    $('#inputOption_1_20').on('change',function(){
    if( $(this).val()==="1BR"){
    $('#search_option_36_from').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_20').show(); //bedroom
    $('#inputOption_1_1190').hide(); //no. of cheques
    $('#search_option_1000').show(); //Furnish
    $('#search_option_1070').show(); //Rent Status
    $('#search_option_1095').show(); //Vacancy On Transfer
    $('#search_option_1080').show(); //Main Direction
    $('#search_option_1081').show(); //Primary View
    $('#search_option_1003').show(); //Developer
    $('#inputOption_1_1169').hide(); //Period
    $('#search_option_1061').hide(); //Fitted
    $('#search_option_1060_from').show(); //Area Min
    $('#search_option_1060_to').show(); //Area Max
    $('#search_option_1003').show(); //Developer
    $('#search_option_1044').hide(); //Year Launched
    $('#search_option_1004').hide(); //Year Completion
    $('#search_option_1071').hide(); //Authority 

    }
    else if($(this).val()==="2BR"){
    $('#inputOption_1_1169').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_1000').show(); //Furnish
    $('#search_option_20').show(); //bedroom
    $('#search_option_1041').show(); //no. of cheques
    $('#search_option_1070').hide(); //Rent Status
    $('#search_option_1095').hide(); //Vacancy On Transfer
    $('#search_option_1080').hide(); //Main Direction
    $('#search_option_1081').hide(); //Primary View 
    $('#search_option_70').show(); //Keywords
    $('#search_option_1067').show(); //Period
    $('#search_option_1061').hide(); //Fitted
    $('#search_option_1060_from').hide(); //Area Min
    $('#search_option_1060_to').hide(); //Area Max
    $('#search_option_1003').hide(); //Developer
    $('#search_option_1044').hide(); //Year Launched
    $('#search_option_1071').hide(); //Authority   
    }

    else if($(this).val()==="Off Plan Re-Sale"){
    $('#search_option_36_from').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_20').show(); //bedroom
    $('#search_option_1041').hide(); //no. of cheques
    $('#search_option_1000').hide(); //Furnish
    $('#search_option_1070').hide(); //Rent Status 
    $('#search_option_1095').hide(); //Vacancy On Transfer
    $('#search_option_1080').hide(); //Main Direction
    $('#search_option_1081').hide(); //Primary View
    $('#search_option_70').show(); //Keywords
    $('#search_option_1067').hide(); //Period
    $('#search_option_1061').hide(); //Fitted
    $('#search_option_1060_from').show(); //Area Min
    $('#search_option_1060_to').show(); //Area Max
    $('#search_option_1003').show(); //Developer
    $('#search_option_1044').show(); //Year Launched
    $('#search_option_1071').hide(); //Authority  
    }

    else if($(this).val()==="Commercial Sale"){
    $('#search_option_36_from').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_20').hide(); //bedroom
    $('#search_option_1041').hide(); //no. of cheques
    $('#search_option_1000').show(); //Furnish
    $('#search_option_1070').show(); //Rent Status
    $('#search_option_1095').show(); //Vacancy On Transfer
    $('#search_option_1080').show(); //Main Direction
    $('#search_option_1081').show(); //Primary View 
    $('#search_option_70').show(); //Keywords
    $('#search_option_1067').hide(); //Period
    $('#search_option_1061').show(); //Fitted
    $('#search_option_1060_from').show(); //Area Min
    $('#search_option_1060_to').show(); //Area Max
    $('#search_option_1003').hide(); //Developer
    $('#search_option_1044').hide(); //Year Launched
    $('#search_option_1071').show(); //Authority  
    }

    else if($(this).val()==="Commercial Rent"){
    $('#search_option_36_from').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_20').hide(); //bedroom
    $('#search_option_1041').show(); //no. of cheques
    $('#search_option_1000').show(); //Furnish
    $('#search_option_1070').hide(); //Rent Status
    $('#search_option_1095').hide(); //Vacancy On Transfer
    $('#search_option_1080').hide(); //Main Direction
    $('#search_option_1081').hide(); //Primary View 
    $('#search_option_70').show(); //Keywords
    $('#search_option_1067').hide(); //Period
    $('#search_option_1061').show(); //Fitted
    $('#search_option_1060_from').show(); //Area Min
    $('#search_option_1060_to').show(); //Area Max
    $('#search_option_1003').hide(); //Developer
    $('#search_option_1044').hide(); //Year Launched
    $('#search_option_1071').show(); //Authority
    }
});
    });

    </script>



Thankyou!
 
Sort by date Sort by votes
May not be a javascript problem: looks more like jquery. Don't know a lot about jquery - does it generate one query for every $('#search_option')?
 
Upvote 0 Downvote
Hello Xwb,

Actually on that functions I use for the dependent fields.


search_options are the div ID's of my form.
and call my values thru "{options_values_20}" Using Codeigniter.

Here's a example code

HTML: 
<div class="col-md-2" id="search_option_2">
                <label>{options_name_2}</label>
                    <select class="form-control input-lg ">
                       {options_values_2}
                    </select>
                </div>


So if I select a value on my dropdown list specific field will hide.


Do you think this can cause slow on my page?


Thank you




 
Upvote 0 Downvote
Too much javascript make site slow?
Click to expand...

Yes it can.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
512
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
220
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
486
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
379
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top