Q&A
jQueryRipples関連の記述を削除した場合、どうなりますか？
前提・実現したいこと
Wordpressを用いてブログの作成をしております。
ページ表示時にChromeのDevツールに下記エラーが発生しております。
恐らくプラグインで使用しているslickとjQueryRipplesの読み込みの際に
エラーが発生しているようです。
該当のヘルプURLを読んでも、内容が分からず困っています。
サイトの読み込みが遅い原因になっているの可能性もあるので、ここのエラーの解決を図りたいです。
発生している問題・エラーメッセージ
//slick,ripplesを使用するしないに関わらず発生するエラー [Violation] Forced reflow while executing JavaScript took 38ms//同様のエラーが複数発生します [Violation] 'setTimeout' handler took 117ms //slickのみを有効にした場合に発生するエラー [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 jQuery.js:5039 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 jQuery.js:5039 //ripplesのみを有効にした場合に発生するエラー [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 jQuery.js:5039 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 jQuery.js:5039 [Violation] 'requestAnimationFrame' handler took 59ms
該当のソースコード
//jQUery3.3.1 jQuery.js:5039 // Init the event handler queue if we're the first if ( !( handlers = events[ type ] ) ) { handlers = events[ type ] = []; handlers.delegateCount = 0; // Only use addEventListener if the special events handler returns false if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) { if ( elem.addEventListener ) { elem.addEventListener( type, eventHandle ); } } } //common.js 自身で書いたソースコード //jQueryRipplesのソース if ($('#header').length) { $('.bg canvas').height(h + 70); $('.bg canvas').css("top","70" + "px"); try { $('.bg').ripples({ resolution: 500, dropRadius: 20, interactive: false }); } catch (e) { } setInterval(function() { var $el = $('.bg-contents'); var x = Math.random() * $el.outerWidth(); var y = Math.random() * $el.outerHeight(); var dropRadius = 20; var resolution = 1024; var strength = 0.01 + Math.random() * 0.09; $el.ripples('drop', x, y, dropRadius, strength, resolution); }, 1024); $('.bg-contents').css('background-image', 'none'); $('.bg-contents').css('background-attachment', 'fixed'); } //slicksliderのソース if ($('.slick').length) { $('.slick').slick({ dots: false, fade: true, cssEase: 'linear', arrows: false, adaptiveHeight: true, autoplay: true, autoplaySpeed: 2500, lazyLoad: "progressive" }); } //slick使用部分のphpソース <section class="top_slide_wrap"> <div class="slide_inner slick"> <?php $args = array( 'post_type' => 'slide', 'posts_per_page' => -1 ); $customPosts = get_posts($args); if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?> <?php $img = get_field('slick_img'); $img_url = $img['url']; $link = get_field('slick_url') ?> <div> <?php if(!empty($link)): ?> <a href="<?php echo $link;?>" class="slick_link link_on hover"> <img src="<?php echo $img_url;?>"> </a> <?php else: ?> <a href="" class="slick_link link_off"> <img src="<?php echo $img_url;?>"> </a> <?php endif;?> </div> <?php endforeach; ?> <?php else :?> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide1.jpg"> </div> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide2.jpg"> </div> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide3.jpg"> </div> <?php endif; wp_reset_postdata(); ?> </div> </section>
試したこと
jQueryの読み込みバージョン変更→変化なし
上記のcommon.jsの記述削除→エラーは発生しない
補足情報（FW/ツールのバージョンなど）
jQuery3.3.1
slick1.6
jQueryripples version不明
mts10806様 ありがとうございます。jQueryRipplesの記述（common.jsのripples呼び出し記述）を削除した場合はエラーはslickに対してのみのエラーとなります。同様にslickの記述を削除した場合もエラーは発生いたしません。
mts10806様 追記です。 発生しないエラーは[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 だけで[Violation] Forced reflow while executing JavaScript took 68ms [Violation] 'setTimeout' handler took 77ms このエラーは発生したままとなります。
であればslickを解決すればいけそうですね。slickだけのエラーとあとhtmlの該当部分のみ追記いただけますか？
お手数かけますが質問本文に追記してもらえると。このコメント欄はデフォルト非表示で関連性がわかりづらくなりますので
mts10806様slickだけの場合ですと[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 [Violation] 'setTimeout' handler took 114ms [Violation] Forced reflow while executing JavaScript took 37ms [Violation] Forced reflow while executing JavaScript took 39ms
mts10806様 いずれのAdded non-passive event listener... のエラーもjQuery:5039行目 に対してです
mts10806様 slickを使用している該当HTMLは以下の通りです <section class="top_slide_wrap"> <div class="slide_inner slick"> <?php $args = array( 'post_type' => 'slide', 'posts_per_page' => -1 ); $customPosts = get_posts($args); if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?> <?php $img = get_field('slick_img'); $img_url = $img['url']; $link = get_field('slick_url') ?> <div> <?php if(!empty($link)): ?> <a href="<?php echo $link;?>" class="slick_link link_on hover"> <img src="<?php echo $img_url;?>"> </a> <?php else: ?> <a href="" class="slick_link link_off"> <img src="<?php echo $img_url;?>"> </a> <?php endif;?> </div> <?php endforeach; ?> <?php else : //記事が無い場合 ?> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide1.jpg"> </div> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide2.jpg"> </div> <div> <img src="<?php echo get_template_directory_uri(); ?>/img/slide3.jpg"> </div> <?php endif; wp_reset_postdata(); ?> </div> </section>
質問は編集できます。コメント欄ではマークダウンが使えませんので、質問を編集して追記してください
mts10806様 失礼しました。質問を編集いたしました
あなたの回答
tips
プレビュー
