長いページから出るときが重い
from 2023/07/28
日記ページ重すぎて遷移に時間かかるSummer498.icon
切り出しの基準を考えたほうがいいなこれ
切り出し基準に達したときに警告するCSSはあってもよさそう
近いやつ: インデントが深くなったときにクオリアさんが警告するCSS
日記ページが一定行数を超えると自動的に並列日記を作るとかnishio.icon
書き込む時の分ける大変さを考えると、書き込んだ後に切り出したいなぁSummer498.icon
行をはやみ切り出しされる井戸日記われても末に合はむとぞ思ふcFQ2f7LRuLYP.icon
並列日記が一時期流行ってたinajob.iconcFQ2f7LRuLYP.icon
余談: そして2023/07/29 🍖～Κατά Ἰσαάκ Ευαγγέλιον～が生まれる
これは書き込むときに分ける大変さがあるSummer498.icon
皆で一箇所に書き散らしたあとでまとめたい
/villagepump/からホームに戻る時は重いのか
重くない (別タブが開く)
from 2023/07/29
日記ページが重くなる原因を探るSummer498.icon
文が多いからか
リンクが多いからか
個人プロジェクトに文が多いページとリンクが多いページを作って実験する
重さのファクターは井戸端固有のものにある
以下のページを個人プロジェクトに作成。結果は重くない
リンク: 既存の全ページ (210ページ) にリンクするページ
アイコン記法でのリンクも貼ったのでリンク数は420
被リンク: 30ページからリンクされてるページ
2hop-link: 作るのがめんどくさいTODO
長文: 2023/07/28を全文コピペしたページ
井戸端固有
井戸端のSummer498.iconの UserScript を無効化
重いページは重いまま (原因ではない)
井戸端の bundled CSS を個人プロジェクトにコピー
ちょっと重い
重いページ$ \cal H_{\rm eavy}から別のページに遷移する時が重いなSummer498.icon
入るときに重いんじゃなくて、出るときに重いのが謎すぎる
消すのに時間がかかっている？
「井戸端」のボタンを押してHome に戻る時は重くない
/villagepump/からホームに戻る時は重いのか?
重くない (というか別タブが開く)
同一タブ内で遷移するのに時間がかかるな
外部リンクは別タブなので重くない
この大量にあるDOMが原因かと思ってたMijinko_SD.icon
https://gyazo.com/61b3ac18672c1205066f2d212b4596a6
特に今までに開発されたUserScriptは文字、リンク、アイコンすべてが多いのでとてつもなく重いwogikaze.icon
そのページは離脱時は日記の離脱時ほど重くないSummer498.icon
読み込み時は日記の読み込み時より重いかも
もしくは関連ページリストが重たい？Mijinko_SD.icon
スマホで開いたら全てのページが重たいからよくわからん
とりあえず今はこれだと思ってるSummer498.icon
from 2023/08/06
前も言及されていた気がするが、やはり長いページは入るときではなく出るときが重いyosider.icon
なんでだろう
開発コンソールのパフォーマンス測定をやってみるとわかりそうtakker.icon
ページを出る時に一番時間を食っている函数を特定する
UserScriptの可能性もある
もしそうならそれはtakker.icon製の疑いが高い
UserScript 全部切って試しても出る時重かったから多分違うSummer498.icon
https://gyazo.com/c2965c6ad8874a4c84c60e8e8f4420deSummer498.icon
2023/07/28からリンクを踏んだ時のパフォーマンス分析
removeChild でほとんどの時間を食ってる
へぇ～～yosider.icon
そもそも40秒以上かかっている…!?
全体で50秒位でしたSummer498.icon
そんなことだろうという感じはあったけど
ページから抜けるときにページコンテンツのDOMを全部消してる?
何でそんなプログラムになってるんだろう
参考：SPA/shokai/ServiceWorkerとCacheによるSPAの高速化、オフラインモードwogikaze.icon
仮想DOMの差分検知が最悪計算量になるパターンなのかもtakker.icon
差分検知で全てのDOMを一個ずつ消すプロセスを採用されてしまっているなら、これで対処可能かもtakker.icon
code:js
scrapbox.addListener("page:changed", () => {
const lines = document.getElementById("editor")
.getElementsByClassName("lines")?.0;
if (lines) lines.textContent = "";
});
これだと長時間かけて遷移した後に Script が起動されて遷移後のページが(見た目だけ)真っ白になりますねSummer498.icon
after change ではなく before change にラインを削除する処理を挟みたいんだろうな～って思って調べているがそれらしいのが見つからない
/kembo/Scrapbox の UserScript でページ遷移をキャッチする方法
興味深い。JSでDOM再構成の話が速いという文脈で載っている
今は遅いという文脈でJSでDOM再構成の話をしているのと対象的
あー、タイミングそこなのかtakker.icon
別の方法を使わないとだめか
全部のリンクに onClicked イベントリスナを追加するのを思いついた。入るときに重くなりそう。Summer498.icon
リンクがクリックされた時にページのコンテンツを全部消す
消した後にリンク遷移が行われるかは謎。
最悪リンク遷移時のDOMいじりとコンテンツ消しが同時に走ってぶつかる可能性
https://gyazo.com/3b4e3e5f3b752daf3e056ee4e89c9643wogikaze.icon
先に消しておいてもぶつかった
remove の直前に取ってくる動作じゃないのかSummer498.icon
こんなの作ってみたけど重いのは解消されていないSummer498.icon
code:scripts.js
scrapbox.addListener("page:changed", () => {
const anchors = document.getElementById("editor")
.getElementsByTagName("a");
...anchors.forEach(e=>{e.onclick=()=>{ // s/onClick/onclick/g
const lines = document.getElementById("editor")
.getElementsByClassName("lines")?.0;
if (lines) lines.textContent = "";
}});
});
HTMLElement.onclickは非推奨takker.icon
他に登録されているevent listenerを削除してしまう(はず)
もしかして意図的に削除してる？
いや、雑に書き換えてるだけSummer498.icon
今気づいたけど、s/onClick/onclick/g だったtakker.icon
何語かと思ったけど、sedコマンドらしい。 Vim.icon か。Summer498.icon
解消されてないのはそもそもevent listenerが登録されていないのが理由かもしれない
これはヒドイwwwSummer498.icon
置き換えたら長いページから出るときが重い#64d6ee525f1e0d00009b7c77と同じエラーが出て遷移しても表示されないwogikaze.icon
じゃ、ダメなコードということでSummer498.icon
$(".line").slice(1)[1].remove()で一行だけ消した場合でもエラー出るwogikaze.icon
2023/08/12
今重いことに気が付いた！！wogikaze.icon
日記から移動しようとしたときに2秒ぐらいかかってるのこれか～
2023/07/28のページから移動するとき50秒ぐらいかかりませんか？Summer498.icon
https://gyazo.com/bce92b4b2b0dcb9adf84208f2530d443
https://gyazo.com/c74449a3cbb5dbf454a8c36520b79912
15秒くらいか～Summer498.icon
ここはCPUの性能依存ぽい?wogikaze.icon
Summer498.icon(50秒)のCPUはAMD Ryzen 7 4800H with Radeon Graphics (2.90 GHz, 8コア)
19,150https://pcfreebook.com/article/458629156.html
wogikaze.icon(15秒) AMD Ryzen 5 5500
20,000
...誤差では？
というかSummer498.iconのCPUの稼働率が全然上がってないからボトルネックそこじゃない気がする
Reflowを制するものはDOMを制す - Qiita
なんもわからんので全部display:noneしてやれwogikaze.icon
code:js
scrapbox.addListener("page:changed", () => {
const anchors = document.getElementById("editor")
.getElementsByTagName("a");
...anchors.forEach(e=>{e.onclick=()=>{ // s/onClick/onclick/g
$(".line").css("display","none")
}});
});
それ DOM 消えてないんじゃない？Summer498.icon
スタイルの再計算が重いなら計算しないように..みたいなwogikaze.icon
あ～そういうコト！？Summer498.icon
てか重い原因関連ページリストって言ってたじゃんwogikaze.icon
長いページから出るときが重い#64d134c8ed60e600007f9cef
ならリスト消せばいいじゃん
$("related-page-list").remove()
移動したときに再追加されないのでx
多いのは2hopだから2hopだけ消そう
$(".links-2-hop").remove()
結局こっちも消したら2回遷移でエラーでちゃうwogikaze.icon
なんか微妙だからlineのほうも非表示にしとこ(意味あるのかはわからない)
$(".links-2-hop").remove()
$(".line").css("display","none")
https://gyazo.com/2e0e3ab04d33a45bfe7f03958fbd3575
TODO:関連ページリストをクリックしたときは動いていないので
s/document.getElementById("editor").getElementsByTagName("a");/document.getElementsByTagName("a")
マシになった気がするwogikaze.icon
https://gyazo.com/1d6aa6067690dd17b574a115d965da01
wogikaze#62d8ee935f1e0d0000b6ee16
まともに解決するには、ReactのDOM更新algorithmに修正を加えるしかないtakker.icon
Scrapbox 君 React で動いてたのねSummer498.icon
長いページから他のページに移動するとき、同じタブでページ遷移せず新しいタブで開くと重くないyosider.icon