Etherpad-lite: 1.8.0以降のバージョンでのパフォーマンスの低下

作成日 2020年08月26日  ·  27コメント  ·  ソース: ether/etherpad-lite

バグを説明する
バージョン1.8.0でパフォーマンスの低下が導入され、新しいバージョンでも複製可能

再現するには
動作を再現する手順:

  1. 長いパッドを作成します(例:4.000行以上)
  2. パッドの先頭でEnterキーを押して、新しい行を作成します
  3. 変更の処理に時間がかかる

予想される行動
Enterキーを押すと、新しい行の作成がはるかに高速になります。 ベースラインとして、バージョン1.7.5を使用できます。

スクリーンショット

1.iframeの高さを処理する古い方法

これは、1.8.0より古いバージョンで「ace2_inner」iframeの高さを変更していたと思われるコードです。
Screen Shot 2020-08-26 at 10 50 48
https://github.com/ether/etherpad-lite/blob/1.7.5/src/static/js/ace2_inner.js#L4817

2.新しいアプローチ

スクリーンショットが示すように、iframeで定義された高さスタイルはありません。 そのサイズはのサイズによって定義されます
#sidediv子供。 これは、flexboxを使用しているため可能です。
Screen Shot 2020-08-26 at 12 13 26

3.同じテキストの1.7.5版と1.8.4版のビデオ

https://youtu.be/LpthRFAH3GM
_お願いします、私がタイプするときに聞いてみてください_

デスクトップ(次の情報を入力してください):

  • Windows、MacOS、Ubuntu
  • GoogleChromeバージョン84.0.4147.135

スマートフォン(以下の情報を入力してください):

スマートフォンでテストしていません

追加のコンテキスト

主な問題はリフローのコストによるものです(次のセッションを確認してください)。 つまり、より複雑なCSSルールを使用すると、遅延が増加します。
#sidedivdisplay:noneと、遅延は発生しなくなりますが、 https://github.com/ether/に記述されているように、「ace2_inner」のサイズに問題が発生します
どちらのバージョンでも、プラグインなしで実行しています。

ビデオに示されている操作のChrome開発ツールレポート

1.7.5

graph175
functionCall175

1.8.4

_レンダリング時間が大幅に増加しました_
graph184
_「レイアウト」操作にかかる時間を確認します_
functionCall184

テーマに関するいくつかの興味深い記事

  1. https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

  2. https://gist.github.com/paulirish/5d52fb081b3570c81e3a

  3. https://gist.github.com/paulirish/5d52fb081b3570c81e3a#more -on-forced-layout

Serious Bug

最も参考になるコメント

こんにちは、みんな ! この非常に明確なバグレポート@joassouzaに感謝し、バグをお詫びします

申し訳ありませんが、現在他のプロジェクトに集中しているので、来週はこのチケットを詳しく調べてみます。 しかし、誰かが解決しようとするなら、私のゲストになってください!

全てのコメント27件

Cc @seballot

このafaikのテストカバレッジがあります。 応答性フロントエンドテストを参照してください。

大量のノードがある場合、リフローの問題はより簡単に認識できます。
それですか? https://github.com/ether/etherpad-lite/blob/develop/tests/frontend/specs/responseness.js
コメントしました

ああ、私はコメントを外して、テストカバレッジが機能していることを確認します。 うまくいけば、 @ seballotは急いでパフォーマンスの修正を見つけることができます:)

ありがとう@JohnMcLear!

コメントなし、本当に徹底的でよくまとめられたバグレポートに感謝します。 @seballotを再びぶつけ

ここにemail / ccがあるにもかかわらず、 @ seballotからの

こんにちは、みんな ! この非常に明確なバグレポート@joassouzaに感謝し、バグをお詫びします

申し訳ありませんが、現在他のプロジェクトに集中しているので、来週はこのチケットを詳しく調べてみます。 しかし、誰かが解決しようとするなら、私のゲストになってください!

@seballotは、これを見てみるためにあなたのスケジュールにいくらかの時間を確保するために、今週の

こんにちは !

再現できません。6000行の長さのパッドを作成しましたが、問題なく動作します。

Peek 06-09-2020 11-27

Debian9でテスト済み-> Chromium73およびFirefox68

行番号が正しく表示されないのはなぜですか(番号1は正常に表示され、番号2からは大きすぎて、位置合わせされていません)?
ローカルコードに問題がありますか?
たぶん、パフォーマンスの低下はMacだけですか? 他の誰かが試してみることができますか?

テストは行っていませんが、以前は合格していたFirefoxレスポンシブテストが失敗することがあります。 スキンなしでFirefoxレスポンシブテストを試して、合格したかどうかを確認しますか?

クロムとFirefoxの両方でテストに合格

image

ええ、それは私にも合格したので、もっと深く掘り下げる必要がありますが、私たちは高速(っぽい)PCを使用していて、ソースラボがタスクを処理するために農民のVMをスローするので、合格するのだろうか?

また、ubuntuのffでゼロラグが発生します

さて、 amount1600000 (8k行を作成)に変更すると、ラグが目立ちます。

@seballottests/frontend/specs/responsiveness.js26試してみてください

これが新しいバグかどうかは確認できませんが、1.7.9などをチェックして、動作が実際に異なることを確認する価値があります。 応答性のテストが1,000ラインマーク付近にあったのには理由があるに違いありません。

Firefox 52でのエクスペリエンスが問題であることに注意する価値がありますが、最新のFFは問題ないようです。 応答性テストはFF52でクラッシュしますが、80では問題ありません

this.timeoutレスポンシブテストが失敗しても、関数エラーではありません。 https://github.com/ether/etherpad-lite/pull/4257/files

より多くのコンテキストを与えるためだけに。 テストはMacO上のChromeで行われました。 i9、64GBRAMなどの非常に高速なマシンでも同じエラーを再現できます。
@seballotパッドの最初で編集してみてください。
Chromeを使用しているWindowsマシンでも試したところ、同じ遅延が発生しました。
https://video.etherpad.com/p/example_long_pad

私は馬鹿のようにFirefoxをテストしてきましたが、Chromeをテストします。

ええ、これは悪いです。 金額を800000に変更しましたが、ラグがひどいです。

パッドの最初で編集すると、遅延が増えると思います。 のように、それの最初の行で。

私はChromeパフォーマンスツールにあまり精通していませんが、これはresponseness.jsパッドを編集しようとしたときに表示されるものです。
Screenshot from 2020-09-06 16-54-38

私はあなたのようにすべてのレイアウト時間を取得していないことに注意してください?

WindowsマシンでFFを試しましたが、同じ遅延が発生します。 このパッドを使用する

https://video.etherpad.com/p/example_long_pad
リフローについては、どのCSSが適用されているか、ブラウザー、jsコードがトリガーするかによって異なります。これが、プラグインなしでテストを行った理由です。 応答性テストのコードをチェックして、これらのテストで皆さんが遅延に気付かない理由を理解する必要があります。

こんにちは ! 確かに8Kでそれは凍結し始めます。 しかし、私は1.7.5に切り替え、8kのパッドで同じようにフリーズします(最悪だと言ってもいいでしょう!)

とにかく、パッドが大きすぎるとetherpadが遅くなるのは事実です。 パッドは本を書くために作られていないので、それが重大なバグだとは思いません。ほとんどの人はそれらを短いテキストに使用していると思います。

しかし、はい、おそらく私たちは改善することができます。 しかし、それは骨の折れる仕事になると思います:)また、etherpadが異なるiframeを使用しているという特異性があるため、標準のレイアウトのトラッシングにのみ関連するかどうかはわかりません。そのため、レイアウトを調整するために常にjavascriptを実行する必要があります。相互の間(たとえば、線の高さ)

見てみようと思いますが、何も約束していません。
1-それはあまり面白くないようです:)
2-重大なバグだとは思わない

@JohnMcLear今見てみましたが、わかりません。 ace2_inner.jsに加えたすべての変更(ファイル全体を削除しても)はローカルインスタンスに影響しませんが、それでも同じように機能します。 何が足りないのですか?

ace2_inner.jsはバージョン文字列atmなしで要求されるため、ace2_inner.jsへのURLは変更されず、ブラウザーのキャッシュが使用されます。 settings.jsonでmaxAge = 0を設定したり、ブラウザキャッシュを無効にしたりすると、再起動せずに新しいファイルが提供されます。

こんにちは@ webzwo0i ! 助けてくれてありがとう! ace2_innerのキャッシュはiframeに読み込まれているため、自分で無効にする必要があることをついに思い出しました...

(maxAge = 0は影響を与えませんでした)

今少し遅れて、明日見えます!

1つのトリックは、キャッシュを無効にするため、ネットワークタブを開いて使用することです。

@joassouzaセバスチャンの調査結果を確認できますか?

完了しました。 問題と解決策の両方を見つけるためのすべての作業を行った@joassouzaのおかげで、実際にはそれほど複雑ではありませんでした

バグは最近のUIの変更とは関係がないことを確認しました。長い間存在していたと思います!

修正#4267でこれを閉じることができると思います
もう一度ありがとう@seballot

このページは役に立ちましたか?
0 / 5 - 0 評価