Q&A
「Networkを見るとTimeが20,000msなどを超えたりする」とのことですが、これは https://code.jquery.com/ui/1.12.0/jquery-ui.min.js のロードに、20,000ms かかっている、という意味でいいですか？
こちらのライブラリを使用しているのですが、初めは気にならなかったのですが、最近開発中においてページをリロードするたびにとても遅いです。
Developer toolのNetworkを見るとTimeが20,000msなどを超えたりすることもあります。
【環境】
・ブラウザ：Google Chrome バージョン: 91.0.4472.114
・resizable.jsの利用環境、 CDNによりLinkタグはheadタグ内、Scriptタグはbody閉じタグの直前に以下のコードを配置
html
1<head> 2 <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css"> 3 <link rel="stylesheet" href="main.css"> 4</head> 5<body> 6 <div class="top_wrapper"> 7 <div class="sortable_wrapper"> 8 <div id="sortable_left" class="icon_wrapper in_active"> 9 <div draggable="false" id="note" class="icon note left-hand" style="width:35px;"></div> 10 <div draggable="false" id="refer" class="icon refer left-hand" style="width:35px;"></div> 11 <div draggable="false" id="qa" class="icon qa left-hand" style="width:35px;"></div> 12 <div draggable="false" id="exercise" class="icon exercise left-hand" style="width:35px;"></div> 13 <div draggable="false" id="answer" class="icon answer left-hand" style="width:35px;"></div> 14 <div draggable="false" id="index" class="icon index left-hand" style="width:35px;"></div> 15 <div draggable="false" id="conti" class="icon conti left-hand" style="width:35px;"></div> 16 </div> 17 <div id="sortable_right" class="icon_wrapper active"> 18 <div draggable="false" id="text" class="icon text" style="width:76%;"></div> 19 <div draggable="false" id="function" class="icon function" style="width:24%;"></div> 20 </div> 21 </div> 22 </div> 23 24 <div class="content_wrapper"> 25 <div class="text_wrapper show wrapper_margin resizable" style="width:76%;" data-id="text"></div> 26 <div class="index_wrapper common_wrapper hide resizable" data-id="index"> 27 <div class="note_wrapper common_wrapper hide resizable" data-id="note">note</div> 28 <div class="refer_wrapper common_wrapper hide resizable" data-id="refer">note_others</div> 29 <div class="qa_wrapper common_wrapper hide resizable" data-id="qa">qa</div> 30 <div class="exercise_wrapper common_wrapper hide resizable" data-id="exercise">exercise</div> 31 <div class="answer_wrapper common_wrapper hide resizable" data-id="answer">answer</div> 32 <div class="function_wrapper common_wrapper show resizable" data-id="function" style="width:24%;"> 33 <div class="inner_wrapper" style="margin-left:10px;margin-top:10px;"></div> 34 </div> 35 36 <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> 37 <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 38 <script src="function.js"></script> 39 <script type="text/javascript" src="../vendor/Sortable-master/Sortable.js"></script> 40 <script type="text/javascript"> 41 elmAry = ["qa","note","refer","text","index","exercise","answer","function","conti"] 42 new Sortable(sortable_left, { 43 group: 'shared', // set both lists to same group 44 animation: 150, 45 onEnd: function (evt) { 46 var dest = $(evt.to).attr('id') 47 var elm = $(evt.item).attr('id') 48 dest==="sortable_right" ? show_hide_box(elm,elmAry,"l"):0; 49 dest==="sortable_right" ? 50 ( () => {$(evt.item).addClass("right-hand").removeClass("left-hand");control_margin('sortable_right')})(): 51 ( () => { 0 })(); 52 dest==="sortable_right" ? sortBox('sortable_right',elmAry):0; 53 dest==="sortable_right" ? width_adjust('sortable_right'):0; 54 dest==="sortable_right" ? display_dotted('sortable_right'):0; 55 } 56 }); 57 new Sortable(sortable_right, { 58 group: 'shared', 59 animation: 150, 60 onMove: function (evt) { 61 $(evt.to).attr('id')==="sortable_left" ? $(evt.dragged).css('width','35px'):0; 62 }, 63 onEnd: function (evt) { 64 var dest = $(evt.to).attr('id') 65 var elm = $(evt.item).attr('id') 66 dest==="sortable_left" ?show_hide_box(elm,elmAry,"r"):0; 67 dest==="sortable_left" ? $(evt.item).addClass("left-hand").removeClass("right-hand"):0; 68 dest==="sortable_right" ? 69 (() => {sortBox('sortable_right',elmAry);control_margin('sortable_right')})(): 70 (() => { 0 })(); 71 dest==="sortable_left" ? control_margin('sortable_right'):0; 72 dest==="sortable_left" ? width_adjust('sortable_right'):0; 73 dest==="sortable_left" ? width_default('sortable_left'):0; 74 dest==="sortable_left" ? display_dotted('sortable_right'):0; 75 } 76 }); 77 </script> 78 <script type="text/javascript"> 79 // resizable 80 $(document).ready(function () { 81 var touch_elm_before_wd = 0; 82 var touch_elm_after_wd = 0; 83 var touch_elm_id = ""; 84 var ary = ['text','index','note','refer','qa','exercise','answer','function','conti'] 85 var children=[]; 86 var cnt_elm = 0; 87 var diff_wd = 0; 88 89 $(".resizable").resizable({ 90 minWidth: 140, 91 handles: 'e', 92 animateDuration: 'fast', 93 start:function( event, ui ) { 94 ary.forEach(name =>{ 95 $('.'+name+'_wrapper').hasClass('show') ? children[name] = $('.'+name+'_wrapper').width() :0; 96 }) 97 }, 98 resize:function( event, ui ) { 99 touch_elm_before_wd = ui.originalSize.width; 100 touch_elm_id = ui.element.data('id'); 101 touch_elm_after_wd = ui.size.width; 102 diff_wd = touch_elm_before_wd - touch_elm_after_wd; 103 104 cnt_elm = $('.show.resizable').length; 105 cnt_elm > 2 ? diff_wd = diff_wd / (cnt_elm-1) :0; 106 ary.forEach(name =>{ 107 $('.'+name+'_wrapper').hasClass('show') && touch_elm_id != name ? $('.'+name+'_wrapper').css('width',`${children[name]+diff_wd}px`):0; 108 }) 109 var get_children = $('.content_wrapper').children('.show'); 110 var wd_ttl = 0; 111 var children_length = get_children.length ; 112 get_children.each(function(i,elm){ 113 wd_ttl += $(elm).width(); 114 }) 115 get_children.each(function(i,elm){ 116 var get_id = $(elm).data('id'); 117 if(children_length === 1 ){ 118 $('#'+get_id).css('width',`${$(elm).width()/1350*100}%`) 119 }else{ 120 var wd_ratio = $(elm).width()/wd_ttl; 121 $('#'+get_id).css('width',`${wd_ratio*100}%`) 122 } 123 }) 124 } 125 }); 126 }); 127 </script> 128</body>
js
1//function.js 2function show_hide_box(getElm,elmAry,lr){ 3 var boxAry = elmAry.map(function(value){ 4 return value+"_wrapper"; 5 }) 6 if (lr==="l") { 7 elmAry.forEach(function(item,i){ 8 getElm === item ? $("."+boxAry[i]).addClass('show'):0; 9 getElm === item ? $("."+boxAry[i]).removeClass('hide'):0; 10 }) 11 } 12 if (lr==="r") { 13 elmAry.forEach(function(item,i){ 14 getElm === item ? $("."+boxAry[i]).addClass('hide'):0; 15 getElm === item ? $("."+boxAry[i]).removeClass('show'):0; 16 }) 17 } 18} 19 20function control_margin(parent){ 21 var children_node = $("#"+parent).children(); 22 23 if(children_node.length < 2) { 24 children_node.each(function(i,elm){ 25 var id_name = $(elm).attr('id'); 26 $("."+id_name+"_wrapper").removeClass('wrapper_margin') 27 }) 28 } 29 30 if(children_node.length > 1) { 31 children_node.each(function(i,elm){ 32 var id_name = $(elm).attr('id'); 33 $("."+id_name+"_wrapper").removeClass('wrapper_margin') 34 i = i+1 35 if(i != children_node.length){ 36 $("."+id_name+"_wrapper").addClass('wrapper_margin') 37 } 38 }) 39 } 40} 41 42function addstr(value) { 43 return "."+value+"_wrapper"; 44} 45 46function sortBox(parent,elmAry){ 47 var id_ary=[] 48 var children_elm = $("#"+parent).children(); 49 children_elm.each(function(i,elm){ 50 var move_elm = $(elm).attr('id'); 51 id_ary.push(move_elm) 52 }) 53 for (var i = 0; i < elmAry.length; i++) { 54 id_ary.indexOf(elmAry[i]) < 0 ? id_ary.push(elmAry[i]) : 0; 55 } 56 var rs = id_ary.map(addstr); 57 var combined = []; 58 for (var i = 0; i < rs.length; i++) { 59 combined.push($(rs[i])); 60 } 61 $('.dummy_wrapper').after(combined) 62} 63 64function width_adjust(parent){ 65 var children_node = $("#"+parent).children(); 66 var children_length = children_node.length; 67 switch (children_length) { 68 case 1: var width = 100;break; 69 case 2: var width = 50;break; 70 case 3: var width = 33.3;break; 71 case 4: var width = 25;break; 72 case 5: var width = 20;break; 73 case 6: var width = 16.7;break; 74 case 7: var width = 14.2;break; 75 case 8: var width = 12.5;break; 76 case 9: var width = 11.1;break; 77 default: var width = 0; 78 } 79 children_node.each(function(i,elm){ 80 var id_name = $(elm).attr('id'); 81 i = i + 1 82 if(i != children_node.length){ 83 $(elm).css('width',`${width}%`); 84 $("."+id_name+"_wrapper").css('width',`${width}%`); 85 }else{ 86 $(elm).css('width',`${width+1}%`); 87 $("."+id_name+"_wrapper").css('width',`${width+1}%`); 88 } 89 }) 90} 91//10,0001文字を超えるため一部省略
css
1.show{ 2 display: block; 3 animation: show 1s linear 0s; 4} 5.hide{ 6 display:none; 7} 8//10,000文字を超えるため、CSSは一部のみ表示
【試したこと】
0. こちらのような記事も見つけて、対象はsotable.jsなのですが、同じ理屈なのかと、display:noneにresaizable要素をつけることを避けるために、width:0をwidth: 100pxのように表示非表示を切り替えるような方法を試してみたのですが、解決には至りませんでした。
- CDNではなく直接ファイルをDLしてUIを読み込んでみたのですが、解決には至りませんでした。
同じ問題が起きたことがある方など、何か原因や解決法についてご助言いただければ幸いです。
はい、ご理解の通りです。
ただし、多少ややこしいのですが50msで全てが、読み込まれれこともあり、20000msで読み込まれるものが、ui.cssのケースもなくはないです。原因の大半はhttps://code.jquery.com/ui/1.12.0/jquery-ui.min.jsの読み込みであるということは言えます。
一部cashe上の問題だもあるのかもしれません。よろしくお願いします。
であれば、コードの問題ではなくて、ネットワークの問題だろうと思うのですが、いかがでしょうか。
また、リロードをしても 304 not modified にはなっていないということかと思いますが、キャッシュが無効化されている原因について、思い当たることはありますか？
開発中なので、Developer ToolのNetWorkにおいて、Disabled Casheはチェックしております。
ただ、問題は本番環境に移行した際、初回に訪問したユーザーにおいて、同じように重たいローディングが待っているということを危惧しております。
また、NetWorkの見方に誤りがあるのかもしれませんがDTのNet Workタブを選択すると
jquery-ui.min.js status:200 type:script initiator:main.php size:68kb time:24,000ms
のような表示のされ方をします。
本文にスクリーンショットを貼り付けたのですが、文字数オーバーになるため、回答でのご案内となり申し訳ございません。
ブレークダウンしてみた時に、どこがボトルネックになっていますか？
TTFBが長い感じですか？
コメントありがとうございます。
直近のNetWorkを閲覧すると12.27Sのうち、内訳は以下の通りです。
Request sent:0.13ms
Waiting (TTFB):115.99ms
Content Download:11.91s
たまにですが、TTFBが長く取られているケースもあるようです。
これは、たぶん通信速度の問題ですよね……？
たとえば、ローカルにサーバを立てて、ライブラリをローカルに配置して比較してみるというのはどうでしょうか？
2つ目のサンプルですが、よくわからない最長記録が出ました。、上記はui.min.jsが対象だったのですが、今度はjquery.3.6.0.jsのjquery本体です。
Request sent:0.4ms
Waiting (TTFB):41.76ms
Content Download:2.26s
念のためにご案内させていただきます。
>たとえば、ローカルにサーバを立てて
こちらは、説明が漏れていて申し訳ございません。ローカルサーバーで実行しております。
ライブラリについては、CDNを使わずにサーバー内にファイルを配置して実行してみています。
遅延があるのは毎回ではないため、少し回数のサンプルをとって、またご報告させていただきます。
事前に確認したいのですが、CDNはライブラリ側のネットワークにも依存すると思います（一般的にCDNで公開しているようなライブラリは脆弱なネットワークではないと推察しますが）
今回のようなケースは別にして、CDNを使うべきか、ファイルを設置すべきかについて、一般論的な是非はあるのでしょうか？
ローカルサーバにダウンロードしても現象が再現するとなると、ローカルサーバ周りの問題のような気がしますね……
CDNサーバ側の環境は原因ではないと思われます。
---
> CDNを使うべきか、ファイルを設置すべきかについて、一般論的な是非は
モジュールバンドラを使うのが昨今の流れなので、自分でサイトを作成するのであればCDNの使用機会は減っているのではないでしょうか。
ありがとうございます。
最終的にややこしい結果になってしまったのですが、CDNを排除して、ローカルにファイルを設置して、直接読み込ませてみたら、今のところ、遅延が発生していません。。。んん微妙です。レンタルサーバーを借りているので、当該サイバーで実行したらどのような結果になるのか試してみます。この件は一旦これでCloseしようと思います。
さて、最後に派生した質問で、申し訳ないのですが、
>モジュールバンドラを使うのが昨今の流れ
この点不案内で申し訳ないのですが、webpackなどを利用して最終的にbandle.jsのようなファイルにまとめて公開することを前提とした場合、JQuery本体や今回のようにJQuery.uiもこれに含めてしまうという意味合いで正しいでしょうか？
まだまだ、用語等に不案内でもうわけございません。
はい、そうです。
たとえば、jQuery-UI は npm版がありますので……
https://www.npmjs.com/package/jquery-ui
コメントありがとうございます。
問題点の、具体的にまだたどり着いていないですが、あたりの付け方について大変勉強になりました。
また、関連する質問についてもご回答くださりありがとうございます。
少しOpenにして他にコメントがなさそうであれば、自己解決でCloseさせていただきます。
改めて御礼申し上げます。
あなたの回答
tips
プレビュー
