Customize: Reduce peak memory usage by JSON-encoding settings and controls individually.

When there are hundreds of settings and controls (e.g. nav menu items and widget instances) the resulting object that is JSON-encoded can become very large, and `wp_json_encode()` can consume a lot of memory to serialize it. By breaking down the serialization into multiple calls the peak memory usage can be kept in line.

Moves logic out of `wp-admin/customize.php` into the `WP_Customize_Manager` class with new methods:

 * `is_ios()`
 * `get_document_title_template()`
 * `get_preview_url()`/`set_preview_url()`
 * `get_return_url()`/`set_return_url()`
 * `get_autofocus()`/`set_autofocus()`
 * `customize_pane_settings()`

Includes unit tests for these methods, for which the logic was formerly untestable in `customize.php`.

Fixes #33898.

Built from https://develop.svn.wordpress.org/trunk@34269


git-svn-id: http://core.svn.wordpress.org/trunk@34233 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2015-09-17 19:42:26 +00:00
parent bb43f72692
commit 93bcd86b2a
3 changed files with 341 additions and 156 deletions

View File

@ -20,22 +20,15 @@ if ( ! current_user_can( 'customize' ) ) {
);
}
wp_reset_vars( array( 'url', 'return' ) );
$url = wp_unslash( $url );
$url = wp_validate_redirect( $url, home_url( '/' ) );
if ( $return ) {
$return = wp_unslash( $return );
$return = remove_query_arg( wp_removable_query_args(), $return );
$return = wp_validate_redirect( $return );
wp_reset_vars( array( 'url', 'return', 'autofocus' ) );
if ( ! empty( $url ) ) {
$wp_customize->set_preview_url( wp_unslash( $url ) );
}
if ( ! $return ) {
if ( $url ) {
$return = $url;
} elseif ( current_user_can( 'edit_theme_options' ) || current_user_can( 'switch_themes' ) ) {
$return = admin_url( 'themes.php' );
} else {
$return = admin_url();
}
if ( ! empty( $return ) ) {
$wp_customize->set_return_url( wp_unslash( $return ) );
}
if ( ! empty( $autofocus ) && is_array( $autofocus ) ) {
$wp_customize->set_autofocus( wp_unslash( $autofocus ) );
}
/**
@ -83,9 +76,7 @@ if ( wp_is_mobile() ) :
?><meta name="viewport" id="viewport-meta" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.2" /><?php
endif;
$is_ios = wp_is_mobile() && preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] );
if ( $is_ios ) {
if ( $wp_customize->is_ios() ) {
$body_class .= ' ios';
}
@ -94,18 +85,12 @@ if ( is_rtl() ) {
}
$body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_locale() ) ) );
if ( $wp_customize->is_theme_active() ) {
$document_title_tmpl = _x( 'Customize: %s', 'Placeholder is the document title from the preview' );
} else {
$document_title_tmpl = _x( 'Live Preview: %s', 'Placeholder is the document title from the preview' );
}
$document_title_tmpl = html_entity_decode( $document_title_tmpl, ENT_QUOTES, 'UTF-8' ); // because exported to JS and assigned to document.title
$admin_title = sprintf( $document_title_tmpl, __( 'Loading&hellip;' ) );
$admin_title = sprintf( $wp_customize->get_document_title_template(), __( 'Loading&hellip;' ) );
?><title><?php echo $admin_title; ?></title>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>';
var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>;
</script>
<?php
@ -137,7 +122,7 @@ do_action( 'customize_controls_print_scripts' );
<span class="controls"><?php _e( 'Customize' ); ?></span>
<span class="preview"><?php _e( 'Preview' ); ?></span>
</a>
<a class="customize-controls-close" href="<?php echo esc_url( $return ); ?>">
<a class="customize-controls-close" href="<?php echo esc_url( $wp_customize->get_return_url() ); ?>">
<span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
</a>
</div>
@ -172,134 +157,13 @@ do_action( 'customize_controls_print_scripts' );
<div id="customize-preview" class="wp-full-overlay-main"></div>
<?php
// Render Panel, Section, and Control templates.
$wp_customize->render_panel_templates();
$wp_customize->render_section_templates();
$wp_customize->render_control_templates();
/**
* Print Customizer control scripts in the footer.
* Print templates, control scripts, and settings in the footer.
*
* @since 3.4.0
*/
do_action( 'customize_controls_print_footer_scripts' );
/*
* If the frontend and the admin are served from the same domain, load the
* preview over ssl if the Customizer is being loaded over ssl. This avoids
* insecure content warnings. This is not attempted if the admin and frontend
* are on different domains to avoid the case where the frontend doesn't have
* ssl certs. Domain mapping plugins can allow other urls in these conditions
* using the customize_allowed_urls filter.
*/
$allowed_urls = array( home_url('/') );
$admin_origin = parse_url( admin_url() );
$home_origin = parse_url( home_url() );
$cross_domain = ( strtolower( $admin_origin[ 'host' ] ) != strtolower( $home_origin[ 'host' ] ) );
if ( is_ssl() && ! $cross_domain )
$allowed_urls[] = home_url( '/', 'https' );
/**
* Filter the list of URLs allowed to be clicked and followed in the Customizer preview.
*
* @since 3.4.0
*
* @param array $allowed_urls An array of allowed URLs.
*/
$allowed_urls = array_unique( apply_filters( 'customize_allowed_urls', $allowed_urls ) );
$login_url = add_query_arg( array(
'interim-login' => 1,
'customize-login' => 1
), wp_login_url() );
// Prepare Customizer settings to pass to JavaScript.
$settings = array(
'theme' => array(
'stylesheet' => $wp_customize->get_stylesheet(),
'active' => $wp_customize->is_theme_active(),
),
'url' => array(
'preview' => esc_url_raw( $url ? $url : home_url( '/' ) ),
'parent' => esc_url_raw( admin_url() ),
'activated' => esc_url_raw( home_url( '/' ) ),
'ajax' => esc_url_raw( admin_url( 'admin-ajax.php', 'relative' ) ),
'allowed' => array_map( 'esc_url_raw', $allowed_urls ),
'isCrossDomain' => $cross_domain,
'home' => esc_url_raw( home_url( '/' ) ),
'login' => esc_url_raw( $login_url ),
),
'browser' => array(
'mobile' => wp_is_mobile(),
'ios' => $is_ios,
),
'settings' => array(),
'controls' => array(),
'panels' => array(),
'sections' => array(),
'nonce' => array(
'save' => wp_create_nonce( 'save-customize_' . $wp_customize->get_stylesheet() ),
'preview' => wp_create_nonce( 'preview-customize_' . $wp_customize->get_stylesheet() )
),
'autofocus' => array(),
'documentTitleTmpl' => $document_title_tmpl,
);
// Prepare Customize Setting objects to pass to JavaScript.
foreach ( $wp_customize->settings() as $id => $setting ) {
if ( $setting->check_capabilities() ) {
$settings['settings'][ $id ] = array(
'value' => $setting->js_value(),
'transport' => $setting->transport,
'dirty' => $setting->dirty,
);
}
}
// Prepare Customize Control objects to pass to JavaScript.
foreach ( $wp_customize->controls() as $id => $control ) {
if ( $control->check_capabilities() ) {
$settings['controls'][ $id ] = $control->json();
}
}
// Prepare Customize Section objects to pass to JavaScript.
foreach ( $wp_customize->sections() as $id => $section ) {
if ( $section->check_capabilities() ) {
$settings['sections'][ $id ] = $section->json();
}
}
// Prepare Customize Panel objects to pass to JavaScript.
foreach ( $wp_customize->panels() as $panel_id => $panel ) {
if ( $panel->check_capabilities() ) {
$settings['panels'][ $panel_id ] = $panel->json();
foreach ( $panel->sections as $section_id => $section ) {
if ( $section->check_capabilities() ) {
$settings['sections'][ $section_id ] = $section->json();
}
}
}
}
// Pass to frontend the Customizer construct being deeplinked
if ( isset( $_GET['autofocus'] ) ) {
$autofocus = wp_unslash( $_GET['autofocus'] );
if ( is_array( $autofocus ) ) {
foreach ( $autofocus as $type => $id ) {
if ( isset( $settings[ $type . 's' ][ $id ] ) ) {
$settings['autofocus'][ $type ] = $id;
}
}
}
}
?>
<script type="text/javascript">
var _wpCustomizeSettings = <?php echo wp_json_encode( $settings ); ?>;
</script>
</div>
</body>
</html>

View File

@ -93,6 +93,33 @@ final class WP_Customize_Manager {
*/
protected $registered_control_types = array();
/**
* Initial URL being previewed.
*
* @since 4.4.0
* @access protected
* @var string
*/
protected $preview_url;
/**
* URL to link the user to when closing the Customizer.
*
* @since 4.4.0
* @access protected
* @var string
*/
protected $return_url;
/**
* Mapping of 'panel', 'section', 'control' to the ID which should be autofocused.
*
* @since 4.4.0
* @access protected
* @var array
*/
protected $autofocus = array();
/**
* Unsanitized values for Customize Settings parsed from $_POST['customized'].
*
@ -139,6 +166,14 @@ final class WP_Customize_Manager {
add_action( 'customize_register', array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first
add_action( 'customize_controls_init', array( $this, 'prepare_controls' ) );
add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_control_scripts' ) );
// Render Panel, Section, and Control templates.
add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_panel_templates' ), 1 );
add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_section_templates' ), 1 );
add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_control_templates' ), 1 );
// Export the settings to JS via the _wpCustomizeSettings variable.
add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
}
/**
@ -621,7 +656,6 @@ final class WP_Customize_Manager {
*/
public function customize_preview_settings() {
$settings = array(
'values' => array(),
'channel' => wp_unslash( $_POST['customize_messenger_channel'] ),
'activePanels' => array(),
'activeSections' => array(),
@ -638,11 +672,6 @@ final class WP_Customize_Manager {
);
}
foreach ( $this->settings as $id => $setting ) {
if ( $setting->check_capabilities() ) {
$settings['values'][ $id ] = $setting->js_value();
}
}
foreach ( $this->panels as $panel_id => $panel ) {
if ( $panel->check_capabilities() ) {
$settings['activePanels'][ $panel_id ] = $panel->active();
@ -667,6 +696,25 @@ final class WP_Customize_Manager {
?>
<script type="text/javascript">
var _wpCustomizeSettings = <?php echo wp_json_encode( $settings ); ?>;
_wpCustomizeSettings.values = {};
(function( v ) {
<?php
/*
* Serialize settings separately from the initial _wpCustomizeSettings
* serialization in order to avoid a peak memory usage spike.
* @todo We may not even need to export the values at all since the pane syncs them anyway.
*/
foreach ( $this->settings as $id => $setting ) {
if ( $setting->check_capabilities() ) {
printf(
"v[%s] = %s;\n",
wp_json_encode( $id ),
wp_json_encode( $setting->js_value() )
);
}
}
?>
})( _wpCustomizeSettings.values );
</script>
<?php
}
@ -1264,6 +1312,279 @@ final class WP_Customize_Manager {
}
}
/**
* Return whether the user agent is iOS.
*
* @since 4.4.0
* @access public
*
* @return bool
*/
public function is_ios() {
return wp_is_mobile() && preg_match( '/iPad|iPod|iPhone/', $_SERVER['HTTP_USER_AGENT'] );
}
/**
* Get the template string for the Customizer pane document title.
*
* @since 4.4.0
* @access public
*
* @return string
*/
public function get_document_title_template() {
if ( $this->is_theme_active() ) {
$document_title_tmpl = _x( 'Customize: %s', 'Placeholder is the document title from the preview' );
} else {
$document_title_tmpl = _x( 'Live Preview: %s', 'Placeholder is the document title from the preview' );
}
$document_title_tmpl = html_entity_decode( $document_title_tmpl, ENT_QUOTES, 'UTF-8' ); // Because exported to JS and assigned to document.title.
return $document_title_tmpl;
}
/**
* Set the initial URL to be previewed.
*
* URL is validated.
*
* @since 4.4.0
* @access public
*
* @param string $preview_url URL to be previewed.
*/
public function set_preview_url( $preview_url ) {
$this->preview_url = wp_validate_redirect( $preview_url, home_url( '/' ) );
}
/**
* Get the initial URL to be previewed.
*
* @since 4.4.0
* @access public
*
* @return string
*/
public function get_preview_url() {
if ( empty( $this->preview_url ) ) {
$preview_url = home_url( '/' );
} else {
$preview_url = $this->preview_url;
}
return $preview_url;
}
/**
* Set URL to link the user to when closing the Customizer.
*
* URL is validated.
*
* @since 4.4.0
* @access public
*
* @param string $return_url URL for return link.
*/
public function set_return_url( $return_url ) {
$return_url = remove_query_arg( wp_removable_query_args(), $return_url );
$return_url = wp_validate_redirect( $return_url );
$this->return_url = $return_url;
}
/**
* Get URL to link the user to when closing the Customizer.
*
* @since 4.4.0
* @access public
*
* @return string
*/
public function get_return_url() {
if ( $this->return_url ) {
$return_url = $this->return_url;
} else if ( $this->preview_url ) {
$return_url = $this->preview_url;
} else if ( current_user_can( 'edit_theme_options' ) || current_user_can( 'switch_themes' ) ) {
$return_url = admin_url( 'themes.php' );
} else {
$return_url = admin_url();
}
return $return_url;
}
/**
* Set the autofocused constructs.
*
* @param array $autofocus {
* Mapping of 'panel', 'section', 'control' to the ID which should be autofocused.
*
* @type string [$control] ID for control to be autofocused.
* @type string [$section] ID for section to be autofocused.
* @type string [$panel] ID for panel to be autofocused.
* }
*/
public function set_autofocus( $autofocus ) {
$this->autofocus = array_filter( wp_array_slice_assoc( $autofocus, array( 'panel', 'section', 'control' ) ), 'is_string' );
}
/**
* Get the autofocused constructs.
*
* @since 4.4.0
* @access public
*
* @return array {
* Mapping of 'panel', 'section', 'control' to the ID which should be autofocused.
*
* @type string [$control] ID for control to be autofocused.
* @type string [$section] ID for section to be autofocused.
* @type string [$panel] ID for panel to be autofocused.
* }
*/
public function get_autofocus() {
return $this->autofocus;
}
/**
* Print JavaScript settings for parent window.
*
* @since 4.3.0
*/
public function customize_pane_settings() {
/*
* If the frontend and the admin are served from the same domain, load the
* preview over ssl if the Customizer is being loaded over ssl. This avoids
* insecure content warnings. This is not attempted if the admin and frontend
* are on different domains to avoid the case where the frontend doesn't have
* ssl certs. Domain mapping plugins can allow other urls in these conditions
* using the customize_allowed_urls filter.
*/
$allowed_urls = array( home_url( '/' ) );
$admin_origin = parse_url( admin_url() );
$home_origin = parse_url( home_url() );
$cross_domain = ( strtolower( $admin_origin['host'] ) !== strtolower( $home_origin['host'] ) );
if ( is_ssl() && ! $cross_domain ) {
$allowed_urls[] = home_url( '/', 'https' );
}
/**
* Filter the list of URLs allowed to be clicked and followed in the Customizer preview.
*
* @since 3.4.0
*
* @param array $allowed_urls An array of allowed URLs.
*/
$allowed_urls = array_unique( apply_filters( 'customize_allowed_urls', $allowed_urls ) );
$login_url = add_query_arg( array(
'interim-login' => 1,
'customize-login' => 1,
), wp_login_url() );
// Prepare Customizer settings to pass to JavaScript.
$settings = array(
'theme' => array(
'stylesheet' => $this->get_stylesheet(),
'active' => $this->is_theme_active(),
),
'url' => array(
'preview' => esc_url_raw( $this->get_preview_url() ),
'parent' => esc_url_raw( admin_url() ),
'activated' => esc_url_raw( home_url( '/' ) ),
'ajax' => esc_url_raw( admin_url( 'admin-ajax.php', 'relative' ) ),
'allowed' => array_map( 'esc_url_raw', $allowed_urls ),
'isCrossDomain' => $cross_domain,
'home' => esc_url_raw( home_url( '/' ) ),
'login' => esc_url_raw( $login_url ),
),
'browser' => array(
'mobile' => wp_is_mobile(),
'ios' => $this->is_ios(),
),
'panels' => array(),
'sections' => array(),
'nonce' => array(
'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
),
'autofocus' => array(),
'documentTitleTmpl' => $this->get_document_title_template(),
);
// Prepare Customize Section objects to pass to JavaScript.
foreach ( $this->sections() as $id => $section ) {
if ( $section->check_capabilities() ) {
$settings['sections'][ $id ] = $section->json();
}
}
// Prepare Customize Panel objects to pass to JavaScript.
foreach ( $this->panels() as $panel_id => $panel ) {
if ( $panel->check_capabilities() ) {
$settings['panels'][ $panel_id ] = $panel->json();
foreach ( $panel->sections as $section_id => $section ) {
if ( $section->check_capabilities() ) {
$settings['sections'][ $section_id ] = $section->json();
}
}
}
}
// Pass to frontend the Customizer construct being deeplinked.
foreach ( $this->get_autofocus() as $type => $id ) {
$can_autofocus = (
( 'control' === $type && $this->get_control( $id ) && $this->get_control( $id )->check_capabilities() )
||
( 'section' === $type && isset( $settings['sections'][ $id ] ) )
||
( 'panel' === $type && isset( $settings['panels'][ $id ] ) )
);
if ( $can_autofocus ) {
$settings['autofocus'][ $type ] = $id;
}
}
?>
<script type="text/javascript">
var _wpCustomizeSettings = <?php echo wp_json_encode( $settings ); ?>;
_wpCustomizeSettings.controls = {};
_wpCustomizeSettings.settings = {};
<?php
// Serialize settings one by one to improve memory usage.
echo "(function ( s ){\n";
foreach ( $this->settings() as $setting ) {
if ( $setting->check_capabilities() ) {
printf(
"s[%s] = %s;\n",
wp_json_encode( $setting->id ),
wp_json_encode( array(
'value' => $setting->js_value(),
'transport' => $setting->transport,
'dirty' => $setting->dirty,
) )
);
}
}
echo "})( _wpCustomizeSettings.settings );\n";
// Serialize controls one by one to improve memory usage.
echo "(function ( c ){\n";
foreach ( $this->controls() as $control ) {
if ( $control->check_capabilities() ) {
printf(
"c[%s] = %s;\n",
wp_json_encode( $control->id ),
wp_json_encode( $control->json() )
);
}
}
echo "})( _wpCustomizeSettings.controls );\n";
?>
</script>
<?php
}
/**
* Register some default controls.
*

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.4-alpha-34268';
$wp_version = '4.4-alpha-34269';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.