لوحة قائمة الجوال الجديدة بطيئة وتتأخر على الأجهزة القديمة

مرحباً :waving_hand:

منذ تحديث https://github.com/discourse/discourse/pull/23775، أصبحت حركة لوحة القائمة (المستخدم والشريط الجانبي) أبطأ بكثير من ذي قبل على أجهزة Android المحمولة القديمة. قد يكون السبب هو أن أداء وحدة المعالجة المركزية لهذه الأجهزة غير كافٍ لجعلها تتحرك بسلاسة.

على جهازي Huawei P20 Pro.

ومع ذلك، اختبرته على iPhone X أيضًا وهو سلس وسريع للغاية، لذلك أعتقد أن وحدة المعالجة المركزية هي المشكلة. هل هناك أي فرصة لتحسين الأداء على الأجهزة القديمة؟

شكراً لك :slightly_smiling_face:

6 إعجابات

شكرا @Don، سنلقي نظرة!

إعجابَين (2)

مرحباً دون، شكراً على ملاحظاتك!

سأقوم باختبار هذا قريباً؛ أظن أن الأجهزة القديمة قد تحتاج إلى تحسين الأداء (المخترق قليلاً) الذي يقلل عدد العناصر في القائمة إلى 20 لتشعر بالسلاسة - سأبحث في هذا الأمر قريباً.

3 إعجابات

@Don - فقط مزيد من البحث لمعرفة ما يجب اختباره، هل تلاحظ هذا عند فتح/إغلاق القوائم بالنقر (على القائمة + خارج القائمة)، أو بالسحب (مع الاستمرار والإيماءة بالسحب)؟

إعجابَين (2)

تبدو القائمة سلسة عند فتحها لأول مرة. أعتقد أن ذلك بسبب عدم تحميل عناصر اللوحة. عند فتحها لأول مرة، يظهر محمل الدوران في الأعلى. أعتقد أن هذا سلوك جيد وربما يكون من الرائع استخدام محمل الدوران دائمًا عند الفتح. :thinking:

الفتحات بعد ذلك تكون بدون رسوم متحركة. الإغلاق عشوائي (أحيانًا سلس وأحيانًا متقطع)

عندما تفتح وأضغط في الخارج، عادةً ما تتأخر أزرار قائمة اللوحة. ولكنها تنزلق للخارج أولاً :thinking: ربما يحدث هذا لأن لوحة القائمة بأكملها في reverse-row وعندما تغلق، تتم إزالة الفئة قبل أن تنزلق بالكامل وتعود إلى row؟

تعديل: هذه ليست أزرار قائمة اللوحة (علامة تبويب) بل هي مجرد أيقونات قبل الإشعارات. ولكن غالبًا ما يظهر تأخير في هذا السطر.

عندما أستخدم إيماءة لإغلاق القائمة، تبدو سلسة.

إعجابَين (2)

تحديث: يبدو أنه في متصفح Firefox، تكون حركة القائمة سلسة. لقد اختبرتها أيضًا على Edge حيث كانت مثل Chrome.

Firefox

حسب ما أستطيع معرفته، فإن “التباطؤ” هنا ناتج عن إعادة تصيير الرؤوس، وليس عن الرسوم المتحركة نفسها.

أحد الأشياء التي قدمتها والتي قد تعطي انطباعًا بالبطء الجديد هو الرسوم المتحركة للانزلاق للخارج (تمت إزالة هذه الرسوم المتحركة عن طريق الخطأ عندما أعدنا هيكلة رأسنا الجديد)

منح بعض وقت التأخير setTimeout مساحة للتنفس بين الرسوم المتحركة وعمل إعادة التصيير الذي تقوم به قوائم الأدوات يبدو أنه يجعل الأمور تسير بسلاسة أكبر، لذا فالرسوم المتحركة نفسها ليست بطيئة، لذا فإن شكي هو أن العمل الذي يحدث حول إعادة تصيير رؤوس الموقع عند الفتح/الإغلاق هو السبب.

أنا أتساءل في الواقع عما إذا كانت معالجة فايرفوكس لوعد انتهاء الرسوم المتحركة يتم إطلاقه بعد أن يتم رسم الرسوم المتحركة بالفعل (افترضت أن هذا هو الحال عند ترميز التغيير الأصلي)، مما قد يفسر سبب ظهوره بسلاسة أكبر من كروم، بينما يسمح كروم ببدء عمل إعادة الحساب بعد اكتمال حسابات الرسوم المتحركة، ولكن قبل رسم انتهاء الرسوم المتحركة.


تعديل: أنا أضيف وقفة باستخدام حلقة التشغيل الخاصة بنا لإضافة مساحة التنفس اللازمة قبل الرسوم المتحركة، وهذا يجب أن يجعل الرسوم المتحركة تبدو أكثر سلاسة: UX: call discourseLater on menu animations by featheredtoast · Pull Request #24168 · discourse/discourse · GitHub

3 إعجابات

شكرا جزيلا! ملاحظة جيدة! :heart_eyes:

إعجابَين (2)