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

• Max

• September 4, 2014 at 7:05 pm

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.

• Max

• September 4, 2014 at 8:06 pm

Latest version of ACF Pro by the way

• Elliot

• September 5, 2014 at 12:01 pm

Hi @Max

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

• Max

• September 5, 2014 at 7:08 pm

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

• Elliot

• September 8, 2014 at 5:20 pm

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?

• Max

• September 9, 2014 at 11:01 am

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…

• Elliot

• September 9, 2014 at 2:08 pm

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?

• Max

• September 9, 2014 at 10:20 pm

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?

• Max

• September 10, 2014 at 12:18 am

This reply has been marked as private.

• Max

• September 10, 2014 at 1:41 am

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?

• Elliot

• September 29, 2014 at 12:46 pm

This reply has been marked as private.