Safariで見たときにJavaScript(jquery)の処理速度が遅く困っています【WordPress】

追記：
※ご指摘がありましたので追記いたします。
質問の意図としましては作業依頼をお願いしているわけではなく、私の乏しい知識では原因になかなかたどり着けないので、原因究明に１歩でも近づくための助言をいただきたいです。
結果としてコード修正などの提案をいただくこともあると思いますが、そのあたりはご了承お願い致します。

パララックス風の効果を実現させるために下記jsを用いています。
（クライアント様から、参考サイトと同じjs使ってほしいと要望があったため。）

ChromeやFirefox、ieでは、スクロールと同時に背景画像が少しずつズレるパララックス風の効果が得られます。しかし、SafariやIphoneで見たときには、動きがカクカクします。（遅延）

console.timeで処理時間の計測をしましたがあきらかに10倍近くSafariだと遅いです。

js
1$(window).on('load scroll', function () {
2      var dy = $(this).scrollTop();
3      $('.para').each(function (index) {
4        var $self = $(this);
5        var offsetPositions = $self.offset();
6        var positions;　　　
7        if ($(window).width() > 767) {
8          switch (index) {
9          case 0:
10            positions = '50% ' + (dy - offsetPositions.top - 500) * (+0.3) + 'px';
11            $self.css('backgroundPosition', positions);
12            break;
13          case 1:
14            positions = '50% ' + (dy - offsetPositions.top - 1000) * (+0.3) + 'px';
15            $self.css('backgroundPosition', positions);
16            break;
17          case 2:
18            positions = '50% ' + (dy - offsetPositions.top - 500) * (+0.3) + 'px';
19            $self.css('backgroundPosition', positions);
20            break;
21          case 3:
22            positions = '50% ' + (dy - offsetPositions.top - 3000) * (+0.3) + 'px';
23            $self.css('backgroundPosition', positions);
24            break;
25          default:
26            break;
27          }
28        } else {
29          switch (index) {
30          case 0:
31            positions = '50% ' + (dy - offsetPositions.top - 100) * (+0.2) + 'px';
32            $self.css('backgroundPosition', positions);
33            break;
34          case 1:
35            positions = '50% ' + (dy - offsetPositions.top - 1000) * (+0.2) + 'px';
36            $self.css('backgroundPosition', positions);
37            break;
38          case 2:
39            positions = '50% ' + (dy - offsetPositions.top - 500) * (+0.2) + 'px';
40            $self.css('backgroundPosition', positions);
41            break;
42          case 3:
43            positions = '50% ' + (dy - offsetPositions.top - 4000) * (+0.2) + 'px';
44            $self.css('backgroundPosition', positions);
45            break;
46          default:
47            break;
48          }
49        }
50      });

本来実際のサイトお見せできれば回答しやすいとは思いますが、都合上お見せできないのでこちらの情報だけで、経験上推測できること、こうやって改善すれば直るかもよ
という意見をいただければと思います。

もし、追加で必要な情報があればおっしゃってください。

色々試しましたが息詰まってしまい、納期が近くて焦っています。。
どうかご教授お願いします。

▼試したこと
・jQueryの最新版をCDNで読み込ませる（もともと古いものをアップロードして読ませていたため）
・for文に変えて処理を実施
・caseを１つにして実施（スムーズに動く、けど意味ない）
・scriptの指定位置をfooterにおいたり、head内に置いたりしたが変わらず。。

ちなみにクライアントからいただいた参考サイトはSafariでも正常に動いていることから上のjsファイル以外の要因も考えられますが見当もつきません、、

m.ts10806

2018/08/02 05:56

急いでいるとかは特に要件と関係ないので外してください。タイトルにそういうのをつけると避けられやすくなります。

nekobass

2018/08/02 05:56

使い慣れてなくて申し訳ないです！すぐに無くします。

m.ts10806

2018/08/02 05:57

作業依頼の場ではないのでそのあたりも注意して質問本文を調整してください。

nekobass

2018/08/02 06:07

追記いたしました。急いでいるとかは関係ないですよね。反省いたします。。自分勝手な質問をしてしまい大変失礼いたしました。可能であればmts10806様の経験上から推測できることなどあれば助言いただけますでしょうか。

行動規範の内容に同意します

回答4件

safariだけ極端に遅いというのが気になりますね。
再現してみました。こちらをiphone,macで見るといかがでしょうか？
プレビュー
 エディタ

提示しているコードのみで再現していますのでこれでスムーズに動くようなら他のところに原因があるかもしれません。

投稿2018/08/02 08:01

keisukeh

総合スコア657

nekobass

2018/08/02 08:21

keisukeh様再現ありがとうございます！お手数おかけして非常に恐縮ですがめちゃくちゃ助かります！今iphone,macで見ましたがこちらはスムーズでしたね、、、やはり他に原因があるか、Webページ全体の重さや画像サイズも原因かもしれません。いちど、現在皆様からいただいた情報を元に改変してみます！

行動規範の内容に同意します

passive: true としてみてはどうでしょうか？
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

本当はIntersectionObserverを使えればいいのですが、Safariは対応していません。

また、位置の取得は重い処理なので、減らせるなら減らしたほうがいいです。

参考
https://www.html5rocks.com/en/tutorials/speed/scrolling/
https://www.html5rocks.com/ja/tutorials/speed/high-performance-animations/

投稿2018/08/02 07:06

x_x

総合スコア13749

nekobass

2018/08/02 08:19

x_x様＞passive: true としてみてはどうでしょうか？なるほど、試してみます！＞また、位置の取得は重い処理なので、減らせるなら減らしたほうがいいです。どうしようもない場合、少し仕様を変えてでも検討してみます！回答いただき感謝いたします！

行動規範の内容に同意します

ベストアンサー

やるべきことは「計算量をへらすこと」の1点です。
forやeach、ifやswitchといった小手先の書き方を変更しても、
for文で100万回回して2秒速くなりましたレベルのどうでもいい効果しか得られません。

また同じ計算でも、DOMツリーやCSSに影響する計算と、数値をチェックして足したり引いたりするコストはまるで違います。
単なる四則演算はfor文で100万回こなしたとしても瞬時に終わりますが、
DOMツリーの更新やCSSの値変更は、for文で100万回実行させるとブラウザが止まります。

従って、やるべきことはif文を増やしてでも、
無駄なCSSのプロパティ値の変更をやめさせることです。

じゃあどこにテコを入れれば良いかですが、
eachの中の前半に即刻returnをするif文を追加しましょう。

dy - offsetPositions.top - 500の500の固定値の数字が変化していることから考えるに、
こいつらって画面の切れ目でたまに2個同時に存在する可能性はあるけれど、
基本的には1画面内に1〜2個しか存在出来ないんじゃないですか？

だったら画面外に居るはずの2〜3個を操作し続けるのは完全に無駄な計算ですよね。
なので、今のスクロール位置、画面の縦幅からどこからどこを表示しているのかを求めて関係ない所はアニメーションしないようにすれば、計算量は1/2〜1/4に収まるんじゃないですか？

【おまけ】別の箇所も思いついたので…

$('.para').eachもコストが高かったので連絡。

JavaScript
1$(function () {
2  // スクロールの度に全DOMを検索して`para`を探すのでダメ
3  $(window).on('load scroll', function () {
4    $('.para').each(fn);
5  });
6});
7
8$(function () {
9  // このように予め変数に保存しておくのだ。
10  var $para = $('.para');
11  $(window).on('load scroll', function () {
12    // すでに変数にキャッシュ済みなのでDOM検索は行われない
13    $para.each(fn);
14  });
15});

投稿2018/08/02 06:59

編集2018/08/02 08:56

miyabi-sun

総合スコア21158

nekobass

2018/08/02 08:17

miyabi-sun様＞こいつらって画面の切れ目でたまに2個同時に存在する可能性はあるけれど、基本的には1画面内に1〜2個しか存在出来ないんじゃないですか？素晴らしい分析力で感動しています！！根本的な改善策を助言していただき感謝致します。自分がやっていることはmiyabi-sun様の仰る通り、小手先のことだと感じてはいましたがそれ以外思いつかなかったので非常に助かります。一度、いただいた助言を元にコードを改変してみます。また報告いたします。

miyabi-sun

2018/08/02 09:07

もう一箇所見つけましたので解答欄に追記しました。こっちはすぐ出来ると思います。

nekobass

2018/08/02 09:23 編集

ご親切にありがとうございます！こちらすぐに反映させました。すこしだけ処理時間は短くなりましたがやはり、動きは遅延します。＞eachの中の前半に即刻returnをするif文を追加しましょう。 ⇒これが必要だと思いますが、jsの経験が浅いので調べながら四苦八苦しております。。（そもそもなぜChromeなどは問題ないのに、safariやiphoneだと遅くなってしまうのか不思議です。調べても情報がほとんど出てこないです。）

行動規範の内容に同意します

パッと考えつく改善案は4つほどあります。1～3 を施工すれば大抵スムーズになると思います。