UserCSSにより井戸端ページの編集が遅くなった
from Gyazzみたいなエディタ作りでReact.jsを学ぶ: TypeScript/Deno化
このページ重たくなってきたな・・inajob.icon
ソースコードがあると重くなる？
切り出してみた
相変わらず重いか・・・・inajob.icon
原因は別にあるのか・・
日記ページとかと比べて特段長いページとかでもないのだが、不思議だ
あんまりにも遅いので、web browserのremote debugしたtakker.icon
chrome for android
keypressが連続している
https://gyazo.com/0693bf579220347859522a89acd0c36c
1つのkeypressで2回CSS再計算が走っている
https://gyazo.com/4205d794c29ac043945152e7a008ad4f
１つ目はまちまち
editor関連のemitchangeか、navbarのstate changeが走っている
後者はこの前うｐした荒ぶるnavbarと関連していそう
なぜだが知らないが、scroll eventが発生するたびにgetStyle()でスタイルを再計算させていた
道理でnavbarが荒ぶるわけだ 2024/02/21#65d5471f1280f000006153d9
これ、今まではこうなってなかったということ？per_terra.icon
いつかは記録し忘れましたが、荒ぶることはありませんでしたtakker.icon
最近変更されたのかなper_terra.icon
navbar周りのUserCSSの再設計#65cc77b6ffff360000a03db6だった
でも、editorにfocusが無いときに荒ぶらない理由がわからないな
focusがなくてもロジックは同じだった
わかった
focusがあたっているときは、getStyle()がposition: absolute;などを返して、positionを上書きする
defaultはposition: fixed;
navbar周りのUserCSSの再設計#65cc77b6ffff360000a03db6
この辺の話な気がするper_terra.icon
iOSのせいだったのかーtakker.icon
Androidまで適用しないでほしいbsahd.icon
focusがあたっていないときは、getStyle()がnullを返す
/takker/scrapbox上でリアルタイムに残り時間を表示するUserScript@0.0.2のstyle書き換え処理が /shokai/iOS Safariはスクリーンキーボードを開いているとposition: fixedがスクロールに付いてこなくなると衝突しているのかと思い、UserScriptを切って試してみましたが、特に変わらず
井戸端のCSSのせいではなさそう
別のprojectでも再現しました
emitChangeでcloneDeepしているところがあるのが気になる
2つ目はjQueryのSizzleが主な原因
この2つが非常に長いスタイル再計算を引き起こしている
強制リフローの可能性がある？
一通りキー入力した後のfreeze時の動き
https://gyazo.com/2a3eaf7b506a06e2e8cdcb0780e03c9c
inputeventが続いている
それぞれ1つのCSS再計算を引き起こしている
どうやら主にgetTextRectがレンダリングを遅くしているようだ
curCSSという関数名やWindow.getComputedStyle()まわりを実行しているっぽい雰囲気から原因は察せた
最上部のグラフの紫色が落ち込んでいるところは、CSSStyleDeclaration.getPropertyValue()やdocument.querySelectorAll()が割りを食っているところ
いずれにしろCSS周りで時間を食っているようだ
laptopで書いていて気づいたけど、smartphoneほどではないにしろPCで書いても動きが遅いな……
確かに重いかもwogikaze.icon
UserCSSを無効にしてみると普通に軽い
CSSが長い再計算を引き起こしている？takker.icon
navbar周りのUserCSSの再設計かな？wogikaze.icon
でも最近更新されたわけじゃないのか
importしているのが悪い？
一回コメントアウトしてみる
多分importは関係ない。初回読み込みが遅くなるだけだから
そう思うper_terra.icon
disableしてみたwogikaze.icon
とても軽い気がする?(プラセボかも
↓の確認をするために戻した2024/2/23 11:23
インデントするとまだ重い
複雑なCSSをcutすれば直る？takker.icon
:has()系が怪しい
気のせいじゃなかったのかper_terra.icon
なんとかする
hr.iconをCSSで描画するUserCSSがhas大量なので一旦ロールバックした
自分のプロジェクトに井戸端のCSS、ページをコピーしてみたものの重くならずwogikaze.icon
https://gyazo.com/fc42fbc5d0b29b4f077ab3dd6525288bhttps://gyazo.com/fcdc58876cfdc7fe60bcd78b962f7931
my project/villagepump
そもそも自分のプロジェクトだとkeypressログが見つからない??
再現できたっぽい
navbarのcssを含めると重くなった
ただ、navbarのcssだけだと重くならない
keypressのイベントも生えてきたwogikaze.icon
一度でも読み込むと重くなってしまう？
わからないことが多すぎる
CSSを無効にして書き込んでみるtakker.icon
おお～、ラグがPCと同程度にまで減ったぞ！
やはり井戸端のCSSが重すぎることが主因のようだ
ネストCSSが異常に重たいwogikaze.icon
Vivaldiが悪いのかも
Chromeだと再現しない
そこそこに軽い
うげper_terra.icon
弊環境だと微妙に再現しないので困っている
全部無効化してどんなもんか試している
うーん、分からん
確かに軽い気がする
自分のプロジェクトに井戸端のCSS適用したら余裕でサクサク動くな…
井戸端そのものが重かったりするのか？
読み込むページに依る
長いページから出るときが重い
code:css
.line:not(.cursor-line) .deco:has(.deco-\'):has(.deco-_){display:flex;align-items:center;text-align:center;&:before,&:after{flex-grow:1;min-width:30px;content:"";border-top:1px solid #afafaf}&:has(.deco--){&:before,&:after{border-style:dashed none none}}&:before{margin-right:10px}&:after{margin-left:10px}:has(.deco-_){text-decoration:none !important}}.line a.link.icon:is(href$="/icons/hr",href$="/icons/hrd"){width:100%;img,span{display:none};&:before{display:inline-block;width:100%;vertical-align:middle;content:"";border-top:1px solid #afafaf}&:is(href$="/icons/hrd"):before{border-style:dashed none none}}
ネストCSSのみを抜き出してきたwogikaze.icon
私のコードです…per_terra.icon
work4aiもネストと:hasなるべく避けるか…nomadoor.icon
:has()はともかく、ネストって重いのか？per_terra.icon
上のコードはDOM走査のコストを考えてないので論外として
code:css
.line a.link.icon:is(
href$="/icons/hr", /* */
href$="/icons/hrd" /* */
) {
/* */
&:is(href$="/icons/hrd")::before {
border-style: dashed none none;
}
}
これが重いのは分かる
code:css
.line:not(.cursor-line) .deco-\" {
/* A */
&::before {
/* B */
}
}
こういうコードなら大丈夫そうな気がしている
パースのコストだけかかる？
セーフモードなら重くなくなっている、感謝inajob.icon