عادل بن يحي
@عبيد
قمت بإطلاق فرع اختباري الجديد develop-skia ليس نسخة مكتملة، بل نموذج أولي MVP. الهدف منه قياس أداء مكتبة react-native-skia في عرض صفحات المصحف الشريف، ومقارنتها مباشرة بمكتبة react-native-svg.
منهجية الاختبار
أُجري الاختبار على محاكي أندرويد، باستخدام صفحات المصحف نفسها في كلا المحركين، مع قياس معدل الإطارات في الثانية أثناء تمرير الصفحة. وجرت المقارنة في سيناريوهين:
- السيناريو الأول (أوفلاين): الصفحة مخزنة مسبقاً على الجهاز، ولا يوجد أي اتصال بالشبكة.
- السيناريو الثاني (أونلاين): الصفحة تُحمّل لأول مرة من الشبكة أثناء إيماءة التمرير نفسها.
النتائج الرقمية
أولاً: السيناريو الأوفلاين، الصفحة محملة مسبقاً
| المحرك | متوسط معدل الإطارات أثناء التمرير |
|---|
| SVG | 29 إطاراً في الثانية تقريباً |
| Skia | 40 إطاراً في الثانية تقريباً |
في غياب أي ضغط من الشبكة، يتفوق Skia بفارق 11 إطاراً في الثانية. الفرق هنا واضح، مردّه إلى كفاءة المحرك نفسه في رسم الصفحة. أداء SVG البالغ 29 إطاراً ليس سيئاً، غير أن أداء Skia البالغ 40 إطاراً أحسن بكثير.
ثانياً: السيناريو الأونلاين، الصفحة تُحمّل لأول مرة أثناء التمرير
| المحرك | متوسط معدل الإطارات | أسوأ انخفاض مسجّل |
|---|
| SVG | 19 إطاراً في الثانية تقريباً | 15 إطاراً في الثانية |
| Skia | 28 إطاراً في الثانية تقريباً | 27 إطاراً في الثانية |
تحليل السلوك تحت الضغط المتزامن
عند تمرير صفحة في السيناريو الأونلاين، ثمة عمليتان تجريان في آنٍ واحد:
- عملية الرسم المستمر: المحرك مطالب بإعادة رسم الصفحة مع كل حركة للإصبع.
- عملية الجلب الشبكي: طلب fetch يعمل في الخلفية لتحميل بيانات الصفحة التالية وتفكيك ضغطها.
اجتماع هاتين العمليتين يُشكّل اختباراً حقيقياً لكفاءة المحرك. وهذا ما أظهرته النتائج بوضوح:
محرك SVG: يفقد 10 إطارات إضافية عن أدائه الأوفلاين (من 29 إلى 19)، ويسجل لحظات حرجة تصل إلى 15 إطاراً في الثانية. هذا الانخفاض تجميد محسوس، يلتقطه المستخدم فوراً على صورة تقطيع في الحركة.
محرك Skia: يفقد 12 إطاراً عن أدائه الأوفلاين (من 40 إلى 28)، غير أنه يبقى عند 27 إطاراً في الثانية، لم يسجل في أي لحظة انخفاضاً إلى درجة التجميد. الحركة أبطأ قليلاً مما هي عليه في السيناريو الأوفلاين، لكنها تبقى متماسكة.
الخلاصة التقنية
الفجوة الحقيقية بين المحركين تظهر تحت الضغط المتزامن للرسم والشبكة معاً:
عندما يتصفح المستخدم رواية جديدة أول مرة ويجري التحميل صفحة صفحة، يمنح Skia تجربة أنعم وأكثر استقراراً.
رابط الكود الخاص ب develop-skia: https://github.com/adelpro/open-mushaf-native/tree/develop-skia
الفيديو الخاص ب skia
الفيديو الخاص ب svg
