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