ページ上の動作が重いウィジェットを識別する方法Issue この記事は、サービスポータルページのどのウィジェットの動作が重いのかを、わかりやすく簡単な方法で正確に判定するのに役立ちます。 手順 このスクリプトをコピーします。 (async () => { let threshold = 1000; // only show load times for widgets higher than this value (in milliseconds) var wa = $("div [widget='widget']").css("border", "1px solid red").css("padding-top", "20px").css("position", "relative") let widgetTable = []; let wmk = []; for (var i = 0; i < wa.length; i++) { let widgetEntry = {}; $0 = wa[i] let scope = $($0).scope(); try{ var widget = scope.widget; } catch(e){ console.error(e); continue; } var timing = 0; let elem = $("<div style='position: absolute; top: 1px; left: 1px'><a target='_blank' href='/$sp.do?id=widget_editor&sys_id=" + widget.sys_id + "'> " + widget.name + "</a> </div>"); var printScope = $("<a href='javascript:void(0);'>Print scope </a>").on('click', function() { console.info(scope); }); elem.append(printScope); widgetEntry.name = widget.name; widgetEntry.rectangle = widget.rectangle_id || 'undefined'; widgetEntry.sys_id = widget.sys_id; let id = scope.widget.rectangle_id + "_" + scope.$id // if this is not a nested widget, go ahead and refresh it. if (!scope.$parent || !scope.$parent.widget) { var widget_name = widget.name; var t0 = performance.now(); await scope.server.refresh(); var t1 = performance.now(); timing = "<div style='float:right;color:red;' id='" + id + "'> Load Time: " + parseInt(t1 - t0) + " ms.</div>"; widgetEntry.load_time_ms = parseInt(t1 - t0) || 0; elem.append(timing); } // add a button to refresh manually. var loadTime = $("<button style='border-radius: 50%;'> ⟳ </button>").on('click', function() { var widget_name = scope.widget.name; let id = scope.widget.rectangle_id + "_" + scope.$id var t0 = performance.now(); scope.server.refresh().then(() => { var t1 = performance.now(); timing = "<div style='float:right;color:red;' id='" + id + "'> Load Time: " + parseInt(t1 - t0) + " ms.</div>"; widgetEntry.load_time_ms = parseInt(t1 - t0) || 0; if ($('#' + id)) { $('#' + id).remove(); } elem.append(timing); console.log("Call to " + widget_name + " took " + (t1 - t0) + " ms."); }); }); elem.append(loadTime); $($0).append(elem); widgetTable.push(widgetEntry); } widgetTable.sort((a, b) => (a.load_time_ms > b.load_time_ms) ? 1 : -1); var slow = widgetTable.filter((e, i, w) => { return e.load_time_ms >= threshold; }); let mkdn = `|Name|sys_id|rectangle_id|Load Time Ms| |:---:|:---:|:---:|:---:| ${slow.map((widgetEntry, i, widgetTable) => { return `|${widgetEntry.name}|${widgetEntry.sys_id}|${widgetEntry.rectangle}|${widgetEntry.load_time_ms}|`; }).join("\n")}`; var doCopy = function() { var el = document.createElement('textarea'); el.value = mkdn; el.setAttribute('readonly', ''); el.style = { position: 'absolute', left: '-9999px' }; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); } var elem = `<div style="float: right; z-index: 1; position: relative; left: -50%; /* or right 50% */ text-align: left; padding:10px"> <h2>${(slow.length > 0)?"Slow Widgets:" : "No Slow Widgets Found!"}</h2> <table style="padding:3px; display:${(slow.length > 0)?"table":"none"}"> <tr><td style="padding:3px;" >Name</td><td style="padding:3px;">sys_id</td><td style="padding:3px;">rectangle id</td><td style="padding:3px;">load time ms</td></tr> ${slow.map((widgetEntry, i, widgetTable) => { return `<tr><td style="padding:3px;">${widgetEntry.name}</td><td style="padding:3px;">${widgetEntry.sys_id}</td><td style="padding:3px;">${widgetEntry.rectangle}</td><td style="padding:3px;">${widgetEntry.load_time_ms}</td></tr>`; }).join(" ")} </table> <button onClick=${doCopy()} style="display:${(slow.length > 0)?"table":"none"}">Copy Markdown</button> </div>`; $('body').append(elem); })(); 動作が重いポータルページを開きます。ページが読み込まれたら、javascript コンソールを開き (command + option + j)、上のスクリプトを貼り付けて enter を押します。 デフォルトでは、このスクリプトによって、読み込みに 1 秒以上かかるウィジェットが出力されます。これは、スクリプトの先頭で定義されているしきい値変数で変更できます。 ページ上の各ウィジェットの表示が更新されます。各ウィジェットの周りに色付きのボックスが表示され、ロードにかかった時間 (ミリ秒単位) が示されます。さらに、ページ下部にテーブルが表示され、しきい値 (ミリ秒単位) 以上の時間がかかったウィジェットが表示されます。また、テーブルの内容を自動的にマークダウン形式でクリップボードにコピーするボタンも表示されます。 Related Linksなお、埋め込みウィジェットは多くの場合親ウィジェットから渡されたパラメーターに依存しているため、これにより自動的に表示が更新されることはありません。必要な場合は、後から手動で表示を更新できます。ウィジェットの赤い枠線と読み込み時間が表示され、さらにウィジェット名、ウィジェット範囲の印刷ボタン (読み込まれるデータを確認)、ウィジェットの表示を更新して更新完了後に最新の読み込み時間を表示するボタンが追加されます。ウィジェット名はリンクになっているので、クリックすればウィジェットがウィジェットエディターで開きます。