كيفية تقليل تراجع المتصفح وإعادة الطلاء

1. تجنب عمليات DOM المتكررة مباشرة على المستند . إذا كنت بحاجة إليها حقًا ، فيمكنك استخدام طريقة Off-Document. تتضمن الطرق المحددة ولكن لا تتضمن ما يلي تمامًا:

(1). أولاً ، قم بحذف العنصر من المستند ، وبعد الانتهاء من التعديل ، أعد العنصر إلى موقعه الأصلي

(2). قم بتعيين عرض العنصر على "لا شيء" ، وبعد الانتهاء من التعديل ، قم بتعديل الشاشة إلى القيمة الأصلية

(3). إذا كنت بحاجة إلى إنشاء عقد DOM متعددة ، فيمكنك استخدام DocumentFragment لإضافة المستند في وقت واحد بعد إنشائها باستخدام DocumentFragment

2. تعديل النمط مركزيا

(1). قم بتعديل السمات على نمط العنصر بأقل قدر ممكن

(2). حاول تعديل النمط عن طريق تعديل اسم الفئة

(3). تعيين قيمة النمط من خلال خاصية CSSText

3. قيمة سمة تخطيط ذاكرة التخزين المؤقت

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

var عرض = el.offsetWidth ؛ var scrollleft = el.scrollleft ؛

4. اضبط موضع العنصر على المطلق أو الثابت

عندما يكون موضع العنصر ثابتًا ونسبيًا ، يكون العنصر في بنية شجرة DOM. عندما تحتاج عملية على العنصر إلى إعادة تقديمها ، سيقوم المتصفح بتقديم الصفحة بأكملها. يمكن أن يؤدي تعيين موضع أحد العنصر إلى المطلق والثابت إلى جعل العنصر منفصلًا عن بنية شجرة DOM ، وعندما يحتاج المتصفح إلى تقديمه ، فإنه يحتاج فقط إلى تقديم العنصر والعنصر الموجود أسفل العنصر ، مما يقلل من وقت عرض المتصفح إلى حد ما ، وهو أمر يستحق النظر بشكل خاص في العدد المتزايد من الرسوم الإلكترونية JavaScript.

ما ورد أعلاه هي بعض الأمور التي يلخصها لي حول تقليل تراجع المتصفح وإعادة الطلاء. أتمنى أن يحبها الجميع.