Support

Account

Home Forums ACF PRO Huge JavaScript performance issues with repeater fields when over ~100 fields

Solving

Huge JavaScript performance issues with repeater fields when over ~100 fields

  • Hello.

    I’ve got a repeater field on my Users which is named “Photo”. The photo has 2 different tag-fields and a description.

    When a user adds something around 100 fields or more, I can’t even edit the user because on load of the page i get Script timeouts in Chrome on my workstation. On my Gaming rig at home which has a lot of power it loads for about a minute and then I can edit things.

    Checking the Timeline tool in chrome reveals that it’s not my images that’s the problem, they load quick and fine (i have 200mbit connection) but that it’s the script that’s beeing used afterds, I guess on page load, that’s the culprit.

    Please advice, client can’t use the site.

  • Latest version of ACF Pro by the way

  • Hi @max

    Thanks for the info. What are the exact fields on the page?

  • Hi, here is an export!

    if( function_exists('register_field_group') ):
    
    register_field_group(array (
    	'key' => 'group_5406e917d2c05',
    	'title' => 'Photographers',
    	'fields' => array (
    		array (
    			'key' => 'field_5366797490f4c',
    			'label' => 'User tag',
    			'name' => 'user_tag',
    			'prefix' => '',
    			'type' => 'checkbox',
    			'instructions' => '',
    			'required' => 0,
    			'conditional_logic' => array (
    				array (
    					array (
    						'field' => 'field_5310682236562',
    						'operator' => '==',
    						'value' => '1',
    					),
    				),
    			),
    			'choices' => array (
    				'architecture' => 'Architecture',
    				'babykids' => 'Baby / Kids',
    				'beauty' => 'Beauty',
    				'lifestyletravel' => 'Lifestyle / Travel',
    				'fashion' => 'Fashion',
    				'food' => 'Food',
    				'interior' => 'Interior',
    				'portrait' => 'Portrait',
    				'sport' => 'Sport',
    				'still-life' => 'Still life',
    				'film' => 'Film',
    			),
    			'default_value' => array (
    			),
    			'layout' => 'vertical',
    		),
    		array (
    			'key' => 'field_5310682236562',
    			'label' => 'Main category',
    			'name' => 'author_category',
    			'prefix' => '',
    			'type' => 'select',
    			'instructions' => '',
    			'required' => 0,
    			'conditional_logic' => 0,
    			'choices' => array (
    				1 => 'Photography',
    				17 => 'DOP / Film',
    				7 => 'Styling / Set design',
    				8 => 'Food styling',
    				11 => 'Interior styling',
    				6 => 'Illustration',
    				12 => 'Animation',
    				22 => 'Graphic design',
    				18 => 'Prop maker',
    			),
    			'default_value' => array (
    				99 => 'Not formatted',
    			),
    			'allow_null' => 0,
    			'multiple' => 0,
    			'ui' => 0,
    			'ajax' => 0,
    			'placeholder' => '',
    			'disabled' => 0,
    			'readonly' => 0,
    		),
    		array (
    			'key' => 'field_530faeaedd2cb',
    			'label' => 'Photos / Videos',
    			'name' => 'photo_photos',
    			'prefix' => '',
    			'type' => 'repeater',
    			'instructions' => '',
    			'required' => 0,
    			'conditional_logic' => 0,
    			'row_min' => '',
    			'row_limit' => '',
    			'layout' => 'table',
    			'button_label' => 'Add Row',
    			'min' => 0,
    			'max' => 0,
    			'sub_fields' => array (
    				array (
    					'key' => 'field_530faebfdd2cc',
    					'label' => 'Photo',
    					'name' => 'photo_photo',
    					'prefix' => '',
    					'type' => 'image',
    					'instructions' => '',
    					'required' => 0,
    					'conditional_logic' => 0,
    					'column_width' => '',
    					'preview_size' => 'thumbnail',
    					'library' => 'all',
    					'return_format' => 'array',
    				),
    				array (
    					'key' => 'field_531097b005a25',
    					'label' => 'Client',
    					'name' => 'photo_client',
    					'prefix' => '',
    					'type' => 'text',
    					'instructions' => '',
    					'required' => 0,
    					'conditional_logic' => 0,
    					'column_width' => '',
    					'default_value' => '',
    					'placeholder' => '',
    					'prepend' => '',
    					'append' => '',
    					'formatting' => 'none',
    					'maxlength' => '',
    					'readonly' => 0,
    					'disabled' => 0,
    				),
    				array (
    					'key' => 'field_53105c9eff49a',
    					'label' => 'Type',
    					'name' => 'photo_category',
    					'prefix' => '',
    					'type' => 'select',
    					'instructions' => '',
    					'required' => 0,
    					'conditional_logic' => 0,
    					'column_width' => '',
    					'choices' => array (
    						1 => 'Photography',
    						17 => 'DOP / Film',
    						7 => 'Styling / Set design',
    						8 => 'Food styling',
    						11 => 'Interior styling',
    						6 => 'Illustration',
    						12 => 'Animation',
    						22 => 'Graphic design',
    						18 => 'Prop maker',
    					),
    					'default_value' => array (
    					),
    					'allow_null' => 0,
    					'multiple' => 0,
    					'ui' => 0,
    					'ajax' => 0,
    					'placeholder' => '',
    					'disabled' => 0,
    					'readonly' => 0,
    				),
    				array (
    					'key' => 'field_530faed8dd2cd',
    					'label' => 'Tags',
    					'name' => 'photo_tags',
    					'prefix' => '',
    					'type' => 'repeater',
    					'instructions' => '',
    					'required' => 0,
    					'conditional_logic' => 0,
    					'column_width' => '',
    					'row_min' => '',
    					'row_limit' => '',
    					'layout' => 'table',
    					'button_label' => 'Add Row',
    					'min' => 0,
    					'max' => 0,
    					'sub_fields' => array (
    						array (
    							'key' => 'field_530fb01d61d89',
    							'label' => 'Tag',
    							'name' => 'photo_tag',
    							'prefix' => '',
    							'type' => 'text',
    							'instructions' => '',
    							'required' => 0,
    							'conditional_logic' => 0,
    							'column_width' => '',
    							'default_value' => '',
    							'placeholder' => '',
    							'prepend' => '',
    							'append' => '',
    							'formatting' => 'html',
    							'maxlength' => '',
    							'readonly' => 0,
    							'disabled' => 0,
    						),
    					),
    				),
    				array (
    					'key' => 'field_5375f578e5214',
    					'label' => 'Vimeo Video ID',
    					'name' => 'photo_vimeo',
    					'prefix' => '',
    					'type' => 'text',
    					'instructions' => 'Exempelvis 7100569',
    					'required' => 0,
    					'conditional_logic' => 0,
    					'column_width' => '',
    					'default_value' => '',
    					'placeholder' => '',
    					'prepend' => '',
    					'append' => '',
    					'formatting' => 'html',
    					'maxlength' => '',
    					'readonly' => 0,
    					'disabled' => 0,
    				),
    			),
    		),
    	),
    	'location' => array (
    		array (
    			array (
    				'param' => 'user_role',
    				'operator' => '==',
    				'value' => 'all',
    			),
    		),
    	),
    	'menu_order' => 0,
    	'position' => 'normal',
    	'style' => 'seamless',
    	'label_placement' => 'top',
    	'instruction_placement' => 'label',
    	'hide_on_screen' => '',
    ));
    
    endif
    
  • Hi Max,

    Can you please view the source of the page. I have a feeling that there is simply too much HTML on the page for a browser to handle. How many lines of HTML are in the source? Does it even load? Are there any HTML errors?

  • Hi!

    LOL, yeah, holy crap. 114100 lines of html. no wonder it freaks out. What’s causing this? just too many fields?

    Is the plugin improperly used? Can we fix this somehow? It’s ~400-500 reapeating fields maximum, how can that generate 114K lines of html? That’s 285 lines of code per field, not counting the other stuff.

    Please advice…

  • Hi @max

    Each field contains wrapping divs, tables, etc.
    To have around 400 – 500 rows of data is pushing the limit of the number of inputs which a browser can handle. Are you able to split the data into individual post objects?

  • No, not really. Ideally would be to have ACF group the objects with sets of 50 or something and then have a pager then? Would that be possible?

  • This reply has been marked as private.
  • YAY! I think I’ve solved it.

    I just edited

    wp-content/plugins/advanced-custom-fields-pro/input.js

    and commented out this

    	$(window).load(function(){
    		
    		// action for 3rd party customization
    
    		//acf.do_action('load', $('body'));
    
    	});

    and

    	$(document).ready(function(){
    		
    		// action for 3rd party customization
    
    		//acf.do_action('ready', $('body'));
    
    	});

    the repeater fields still work, and the JavaScript timeout is gone. Even though it’s 114k lines of html…

    What could this mess up? What am I missing doing this?

  • This reply has been marked as private.
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.