Skip to content

Commit bc79d1a

Browse files
author
cristian-ungureanu
authored
Merge pull request #871 from Codeinwp/feature/pro/315
Improve script performance
2 parents 5d1c9c8 + acf5220 commit bc79d1a

File tree

6 files changed

+146
-21
lines changed

6 files changed

+146
-21
lines changed

‎classes/Visualizer/Module.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -623,7 +623,7 @@ protected function get_inline_custom_css( $id, $settings ) {
623623
}
624624

625625
$img_path = VISUALIZER_ABSURL . 'images';
626-
$css .= ".locker,.locker-loader{position:absolute;top:0;left:0;width:100%;height:100%}.locker{z-index:1000;opacity:.8;background-color:#fff;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}.locker-loader{z-index:1001;background:url($img_path/ajax-loader.gif) no-repeat center center}.dt-button{display:none!important}";
626+
$css .= ".locker,.locker-loader{position:absolute;top:0;left:0;width:100%;height:100%}.locker{z-index:1000;opacity:.8;background-color:#fff;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}.locker-loader{z-index:1001;background:url($img_path/ajax-loader.gif) no-repeat center center}.dt-button{display:none!important}.visualizer-front-container.visualizer-lazy-render{content-visibility: auto;}";
627627
$css .= '</style>';
628628

629629
$arguments = array( $css, $settings );

‎classes/Visualizer/Module/Chart.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,7 @@ public function renderChartPages() {
528528
}
529529

530530
$_POST['save_chart_image'] = isset( $_POST['save_chart_image'] ) && 'yes' === $_POST['save_chart_image'] ? true : false;
531+
$_POST['lazy_load_chart'] = isset( $_POST['lazy_load_chart'] ) && 'yes' === $_POST['lazy_load_chart'] ? true : false;
531532

532533
if ( isset( $_POST['chart-img'] ) && ! empty( $_POST['chart-img'] ) ) {
533534
$attachment_id = $this->save_chart_image( $_POST['chart-img'], $chart_id, $_POST['save_chart_image'] );

‎classes/Visualizer/Module/Frontend.php

Lines changed: 79 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
4141
*/
4242
private $_charts = array();
4343

44+
/**
45+
* Lazy render script.
46+
*
47+
* @access private
48+
* @var bool
49+
*/
50+
private $lazy_render_script = false;
51+
4452
/**
4553
* Constructor.
4654
*
@@ -53,6 +61,7 @@ class Visualizer_Module_Frontend extends Visualizer_Module {
5361
public function __construct( Visualizer_Plugin $plugin ) {
5462
parent::__construct( $plugin );
5563

64+
$this->_addAction( 'wp_print_footer_scripts', 'printFooterScripts' );
5665
$this->_addAction( 'wp_enqueue_scripts', 'enqueueScripts' );
5766
$this->_addAction( 'load-index.php', 'enqueueScripts' );
5867
$this->_addAction( 'visualizer_enqueue_scripts', 'enqueueScripts' );
@@ -81,14 +90,32 @@ function script_loader_tag( $tag, $handle, $src ) {
8190
if ( is_admin() ) {
8291
return $tag;
8392
}
84-
85-
$scripts = array( 'google-jsapi', 'visualizer-render-google-lib', 'visualizer-render-google' );
86-
87-
foreach ( $scripts as $async ) {
93+
// Async scripts.
94+
$async_scripts = array( 'google-jsapi', 'chartjs', 'visualizer-datatables' );
95+
foreach ( $async_scripts as $async ) {
8896
if ( $async === $handle ) {
89-
$tag = str_replace( ' src', ' defer="defer" src', $tag );
97+
$tag = str_replace( ' src', ' async src', $tag );
98+
break;
99+
}
100+
};
101+
102+
// Async scripts.
103+
$scripts = array( 'dom-to-image' );
104+
foreach ( array( 'async', 'defer' ) as $attr ) {
105+
if ( wp_scripts()->get_data( $handle, $attr ) ) {
106+
break;
107+
}
108+
if ( in_array( $handle, $async_scripts, true ) || false === strpos( $handle, 'visualizer-' ) ) {
90109
break;
91110
}
111+
if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
112+
$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
113+
if ( $this->lazy_render_script ) {
114+
$tag = str_replace( ' src', ' data-visualizer-script', $tag );
115+
}
116+
}
117+
// Only allow async or defer, not both.
118+
break;
92119
}
93120
return $tag;
94121
}
@@ -328,6 +355,14 @@ public function renderChart( $atts ) {
328355
// handle settings filter hooks
329356
$settings = apply_filters( Visualizer_Plugin::FILTER_GET_CHART_SETTINGS, $settings, $chart->ID, $type );
330357

358+
$lazy_load = isset( $settings['lazy_load_chart'] ) ? $settings['lazy_load_chart'] : false;
359+
$lazy_load = apply_filters( 'visualizer_lazy_load_chart', $lazy_load, $chart->ID );
360+
$container_class = 'visualizer-front-container';
361+
if ( $lazy_load ) {
362+
$this->lazy_render_script = true;
363+
$container_class .= ' visualizer-lazy-render';
364+
}
365+
331366
// handle data filter hooks
332367
$data = self::get_chart_data( $chart, $type );
333368

@@ -436,7 +471,7 @@ public function renderChart( $atts ) {
436471
}
437472

438473
// return placeholder div
439-
return $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID );
474+
return '<div class="' . $container_class . '">' . $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID ) . '</div>';
440475
}
441476

442477
/**
@@ -606,4 +641,42 @@ private function getChartData( $cache_key = '', $chart_id = 0 ) {
606641

607642
return false;
608643
}
644+
645+
/**
646+
* Print footer script.
647+
*/
648+
public function printFooterScripts() {
649+
if ( $this->lazy_render_script ) {
650+
?>
651+
<script type="text/javascript">
652+
var visualizerUserInteractionEvents = [
653+
"mouseover",
654+
"keydown",
655+
"touchmove",
656+
"touchstart"
657+
];
658+
659+
visualizerUserInteractionEvents.forEach(function(event) {
660+
window.addEventListener(event, visualizerTriggerScriptLoader, { passive: true });
661+
});
662+
663+
function visualizerTriggerScriptLoader() {
664+
visualizerLoadScripts();
665+
visualizerUserInteractionEvents.forEach(function(event) {
666+
window.removeEventListener(event, visualizerTriggerScriptLoader, { passive: true });
667+
});
668+
}
669+
670+
function visualizerLoadScripts() {
671+
document.querySelectorAll("script[data-visualizer-script]").forEach(function(elem) {
672+
jQuery.getScript( elem.getAttribute("data-visualizer-script"), function() {
673+
elem.setAttribute("src", elem.getAttribute("data-visualizer-script"));
674+
elem.removeAttribute("data-visualizer-script");
675+
} );
676+
});
677+
}
678+
</script>
679+
<?php
680+
}
681+
}
609682
}

‎classes/Visualizer/Render/Sidebar.php

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -517,19 +517,38 @@ protected function load_dependent_assets( $libs ) {
517517
* @access protected
518518
*/
519519
protected function _renderChartImageSettings() {
520-
// Default enable if amp is active.
521-
$is_amp = function_exists( 'amp_is_enabled' ) && amp_is_enabled();
522-
$this->save_chart_image = null === $this->save_chart_image && $is_amp ? true : $this->save_chart_image;
523-
524-
self::_renderSectionStart( esc_html__( 'Save chart as an image inside Media Library', 'visualizer' ), false );
525-
self::_renderCheckboxItem(
526-
esc_html__( 'Save inside media library?', 'visualizer' ),
527-
'save_chart_image',
528-
$this->save_chart_image ? true : false,
529-
'yes',
530-
esc_html__( 'To enable save the image as an inside media library.', 'visualizer' ),
531-
false
532-
);
533-
self::_renderSectionEnd();
520+
// Default enable if amp is active.
521+
$is_amp = function_exists( 'amp_is_enabled' ) && amp_is_enabled();
522+
$this->save_chart_image = null === $this->save_chart_image && $is_amp ? true : $this->save_chart_image;
523+
524+
$is_create_chart = true;
525+
if ( filter_input( INPUT_GET, 'library', FILTER_VALIDATE_BOOLEAN ) ) {
526+
if ( filter_input( INPUT_GET, 'action' ) === Visualizer_Plugin::ACTION_EDIT_CHART ) {
527+
$is_create_chart = false;
528+
}
529+
}
530+
$this->lazy_load_chart = null === $this->lazy_load_chart && $is_create_chart ? true : $this->lazy_load_chart;
531+
532+
self::_renderSectionStart( esc_html__( 'Save chart as an image inside Media Library', 'visualizer' ), false );
533+
self::_renderCheckboxItem(
534+
esc_html__( 'Save inside media library?', 'visualizer' ),
535+
'save_chart_image',
536+
$this->save_chart_image ? true : false,
537+
'yes',
538+
esc_html__( 'To enable save the image as an inside media library.', 'visualizer' ),
539+
false
540+
);
541+
self::_renderSectionEnd();
542+
543+
self::_renderSectionStart( esc_html__( 'Lazy rendering of chart', 'visualizer' ), false );
544+
self::_renderCheckboxItem(
545+
esc_html__( 'Enable lazy rendering of chart?', 'visualizer' ),
546+
'lazy_load_chart',
547+
$this->lazy_load_chart ? true : false,
548+
'yes',
549+
esc_html__( 'To enable lazy chart rendering.', 'visualizer' ),
550+
false
551+
);
552+
self::_renderSectionEnd();
534553
}
535554
}

‎css/front.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.locker,
2+
.locker-loader {
3+
position: absolute;
4+
top: 0;
5+
left: 0;
6+
width: 100%;
7+
height: 100%;
8+
}
9+
10+
.locker {
11+
z-index: 1000;
12+
opacity: 0.8;
13+
background-color: white;
14+
15+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
16+
filter: alpha(opacity=80);
17+
}
18+
19+
.locker-loader {
20+
z-index: 1001;
21+
background: url(../images/ajax-loader.gif) no-repeat center center;
22+
}
23+
24+
/* datatables */
25+
.dt-button {
26+
display: none !important;
27+
}
28+
29+
.visualizer-front-container.visualizer-lazy-render {
30+
content-visibility: auto;
31+
}

‎js/render-facade.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@
128128

129129
function displayChartsOnFrontEnd() {
130130
// display all charts that are NOT to be lazy-loaded.
131+
$( 'div.viz-facade-loaded:not(.visualizer-lazy):empty' ).removeClass( 'viz-facade-loaded' );
131132
$('div.visualizer-front:not(.visualizer-lazy):not(.viz-facade-loaded)').each(function(index, element){
132133
var id = $(element).addClass('viz-facade-loaded').attr('id');
133134
showChart(id);

0 commit comments

Comments
 (0)