Etherpad-lite: Penurunan kinerja pada 1.8.0 dan versi yang lebih baru

Dibuat pada 26 Agu 2020  ·  27Komentar  ·  Sumber: ether/etherpad-lite

Jelaskan bugnya
Penurunan kinerja diperkenalkan pada versi 1.8.0 dan dapat direplikasi pada versi yang lebih baru juga

Untuk Mereproduksi
Langkah-langkah untuk mereproduksi perilaku:

  1. Buat bantalan panjang (misalnya lebih dari 4.000 baris)
  2. Tekan ENTER di awal pad untuk membuat baris baru
  3. Lama memproses perubahan

Perilaku yang diharapkan
Pembuatan baris baru yang menekan ENTER akan lebih cepat. Sebagai baseline kita bisa menggunakan versi 1.7.5.

Screenshot

1. Cara lama menangani ketinggian iframe

Ini adalah kode yang saya kira mengubah tinggi iframe "ace2_inner" pada versi yang lebih lama dari 1.8.0
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. Pendekatan baru

Seperti yang ditunjukkan tangkapan layar, tidak ada gaya ketinggian yang ditentukan di iframe. Ukurannya ditentukan oleh ukuran
#sidediv anak-anak. Ini dimungkinkan karena menggunakan flexbox.
Screen Shot 2020-08-26 at 12 13 26

3. Video edisi 1.7.5 dan 1.8.4 dengan teks yang sama

https://youtu.be/LpthRFAH3GM
_harap, coba dengar saat saya mengetik_

Desktop (lengkapi informasi berikut):

  • Windows, MacOS, Ubuntu
  • Google Chrome Versi 84.0.4147.135

Smartphone (harap lengkapi informasi berikut):

Saya tidak menguji di smartphone mana pun

Konteks tambahan

Masalah utama adalah karena biaya reflow (periksa sesi berikutnya). Artinya, dengan aturan CSS yang lebih kompleks, penundaan akan meningkat.
Jika kita menyetel #sidediv menjadi display:none penundaan itu tidak terjadi lagi tetapi kita menyebabkan masalah dengan ukuran "ace2_inner" seperti yang tertulis di sini https://github.com/ether/ etherpad-lite / blob / develop / src / static / css / iframe_editor.css # L125
Pada kedua versi saya menjalankan tanpa plugin apa pun.

Laporan alat pengembang Chrome untuk operasi yang ditampilkan di video

1.7.5

graph175
functionCall175

1.8.4

_waktu rendering meningkat pesat_
graph184
_look berapa lama waktu yang dibutuhkan untuk operasi "Layout "_
functionCall184

Beberapa artikel menarik tentang Tema

  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

Komentar yang paling membantu

Hai kawan ! terima kasih atas laporan bug yang sangat jelas ini @joassouza , dan maaf atas

Maaf saya sangat fokus pada proyek lain sekarang, saya akan mencoba untuk melihat lebih dekat tiket ini minggu depan. Tetapi jika ada yang ingin mencoba memecahkan jadilah tamuku !!

Semua 27 komentar

Cc @eballot

Kami memiliki cakupan tes untuk afaik ini. Lihat uji frontend responsif.

Masalah reflow lebih mudah disadari ketika ada banyak node.
Apa yang itu? https://github.com/ether/etherpad-lite/blob/develop/tests/frontend/specs/responsiveness.js
Ini dikomentari

Ya ampun, saya akan menghapus komentar dan memastikan kami memiliki cakupan tes yang berfungsi. Semoga @seballot dapat menemukan perbaikan kinerja dengan cepat :)

terima kasih @JohnMcLear!

Tanpa komentar, terima kasih atas laporan bug yang benar-benar menyeluruh dan disatukan dengan baik. Akan menabrak @seballot lagi: +1:

Belum mendapat kabar dari @seballot meskipun ada email / cc di sini. Saya berasumsi dia sedang berlibur dan akan menyelesaikannya secepat mungkin, tetapi jika ada orang lain yang dapat mencoba sementara kami menunggu, itu akan ideal :)

Hai kawan ! terima kasih atas laporan bug yang sangat jelas ini @joassouza , dan maaf atas

Maaf saya sangat fokus pada proyek lain sekarang, saya akan mencoba untuk melihat lebih dekat tiket ini minggu depan. Tetapi jika ada yang ingin mencoba memecahkan jadilah tamuku !!

@seballot hanya

Hai!

Saya tidak dapat mereproduksi, saya membuat bantalan sepanjang 6000 baris, dan berfungsi dengan baik

Peek 06-09-2020 11-27

Diuji pada Debian 9 -> Chromium 73 & Firefox 68

Kenapa nomor baris anda terlihat jelek (nomor 1 ditampilkan oke, lalu dari nomor 2 terlalu besar dan tidak sejajar)?
Mungkinkah ada masalah pada kode lokal Anda?
Mungkin penurunan kinerja hanya di Mac? bisakah orang lain mencoba?

Belum menguji tetapi dapat melihat uji responsif Firefox gagal yang biasanya lulus. Coba uji responsif Firefox tanpa skin set untuk melihat apakah berhasil?

uji lulus untuk saya di kedua kromium dan firefox

image

Ya, itu baru saja berlalu untuk saya juga, jadi saya perlu menggali lebih dalam tetapi saya bertanya-tanya apakah itu lolos untuk kami karena kami berada di lab komputer dan saus yang cepat mengeluarkan beberapa petani untuk menangani tugas itu?

Saya juga mengalami zero lag pada ff di ubuntu

Oke jadi mengubah amount menjadi 1600000 (membuat 8k baris) membuat saya terlihat jeda.

Coba lakukan itu @seballot , tests/frontend/specs/responsiveness.js baris 26

Saya tidak dapat mengonfirmasi apakah ini adalah bug baru, ada baiknya memeriksa 1.7.9 atau apa pun dan memastikan bahwa perilakunya sebenarnya berbeda. Pasti ada alasan mengapa tes responsivitas berada di sekitar tanda garis 1k.

Perlu juga dicatat bahwa pengalaman di Firefox 52 adalah masalahnya, FF modern sepertinya baik-baik saja? Tes responsivitas crash di FF 52 tapi tidak masalah di 80. Faktanya itu crash browser. - Jadi saya rasa tes di Firefox 52? Saya sedang menguji SL sekarang.

Tes responsif gagal pada this.timeout bukanlah kesalahan fungsi. https://github.com/ether/etherpad-lite/pull/4257/files

Hanya untuk memberi lebih banyak konteks. Pengujian dilakukan di Chrome di MacOs. Kami dapat mereproduksi kesalahan yang sama pada mesin yang sangat cepat seperti i9, RAM 64GB.
@seballot dapatkah Anda mencoba mengedit di awal buku catatan?
Saya baru saja mencoba mesin Windows yang menggunakan chrome juga dan saya mengalami penundaan yang sama.
https://video.etherpad.com/p/example_long_pad

Saya telah menguji Firefox seperti orang bodoh, akan menguji Chrome sekarang.

Oke wow ya ini buruk. Saya mengubah jumlah menjadi 800000 dan lagnya sangat buruk.

Saya yakin penundaan meningkat jika Anda mengedit di awal pad. Seperti, di baris pertama.

Saya tidak terlalu akrab dengan alat Kinerja Chrome tetapi inilah yang saya lihat saat mencoba mengedit pad responsiveness.js.
Screenshot from 2020-09-06 16-54-38

Perhatikan bahwa saya tidak mendapatkan semua waktu tata letak seperti Anda?

Saya sudah mencoba FF pada mesin Windows dan saya mendapat penundaan yang sama. Menggunakan pad ini

https://video.etherpad.com/p/example_long_pad
Tentang reflow, itu tergantung pada CSS mana yang diterapkan, browser, kode js pemicunya, .... Itu sebabnya saya melakukan tes tanpa plugin apa pun. Saya harus memeriksa kode tes responsiveness untuk memahami mengapa dalam tes tersebut kalian tidak menyadari keterlambatan.

Hai! memang dengan 8K itu mulai membeku. Tapi saya beralih ke 1.7.5 dan dengan pad 8k itu membeku sama (saya bahkan akan mengatakan yang terburuk!)

Bagaimanapun, fakta bahwa etherpad menjadi lambat saat bantalan terlalu besar. Saya tidak merasa itu bug kritis, karena pad tidak dibuat untuk menulis buku, dan saya pikir kebanyakan orang menggunakannya untuk teks pendek.

Tapi ya mungkin kami bisa meningkat. Tapi saya merasa ini akan menjadi pekerjaan yang menyakitkan :) Juga saya tidak yakin itu hanya terkait dengan tata letak standar yang merusak, karena satu kekhususan adalah bahwa etherpad menggunakan iframe yang berbeda, jadi kami selalu perlu menjalankan javascript untuk menyelaraskan tata letak antara satu sama lain (untuk tinggi garis misalnya)

Saya akan mencoba untuk melihat-lihat, tetapi saya tidak menjanjikan apa pun karena
1- sepertinya tidak terlalu lucu :)
2- Saya tidak merasa itu bug kritis

@JohnMcLear Saya mencoba untuk melihat-lihat sekarang, tetapi saya tidak mengerti, setiap perubahan yang saya lakukan ke ace2_inner.js (bahkan menghapus seluruh file) tidak mempengaruhi instance lokal saya, masih berfungsi sama. Apa yang saya lewatkan?

ace2_inner.js diminta tanpa string versi atm, jadi URL ke ace2_inner.js tidak berubah dan cache browser Anda digunakan. Saat Anda menyetel maxAge = 0 di settings.json dan / atau menonaktifkan cache browser, file baru akan ditayangkan tanpa restart.

Hai @ webzwo0i ! terima kasih atas bantuan Anda! Saya akhirnya ingat bahwa saya perlu membatalkan cache ace2_inner sendiri karena dimuat di iframe ...

(maxAge = 0 tidak berdampak btw)

Sedikit terlambat sekarang, akan terlihat besok!

Salah satu triknya adalah menggunakan tab jaringan terbuka karena menonaktifkan caching.

@joassouza bisakah Anda mengkonfirmasi temuan Sebastians?

OK selesai ! sebenarnya tidak terlalu rumit, terima kasih kepada @joassouza yang telah bekerja keras untuk menemukan masalah dan solusi

dan saya mengonfirmasi bahwa bug tersebut tidak terkait dengan perubahan UI baru-baru ini, menurut saya bug itu sudah ada sejak lama!

Saya kira ini bisa ditutup sekarang dengan perbaikan # 4267
Terima kasih sekali lagi @seballot

Apakah halaman ini membantu?
0 / 5 - 0 peringkat