لقد كانت الموقتات دائمًا هي التقنية الأساسية للرسوم المتحركة لجافا سكريبت. المفتاح لكتابة حلقة الرسوم المتحركة هو معرفة مدة التأخير. من ناحية، يجب أن يكون الفاصل الزمني للحلقة قصيرًا بما يكفي لجعل تأثيرات الرسوم المتحركة المختلفة تبدو سلسة؛ ومن ناحية أخرى، يجب أن يكون الفاصل الزمني للحلقة طويلًا بما يكفي للتأكد من أن المتصفح لديه القدرة على عرض التغييرات الناتجة.
يبلغ معدل التحديث لمعظم شاشات الكمبيوتر 60 هرتز، وهو ما يعادل تقريبًا 60 عملية إعادة رسم في الثانية. ستحد معظم المتصفحات من عمليات إعادة الرسم بما لا يزيد عن تردد إعادة رسم الشاشة، لأنه حتى بعد هذا التردد لن تتحسن تجربة المستخدم. ولذلك، فإن الفاصل الزمني الأمثل للرسوم المتحركة الأكثر سلاسة هو 1000 مللي ثانية/60، وهو ما يعادل تقريبًا 16.6 مللي ثانية.
المشكلة في setTimeout وsetInterval هي أنهما غير دقيقين. تحدد آلية التشغيل الداخلية الخاصة بها أن معلمة الفاصل الزمني تحدد في الواقع الوقت لإضافة رمز الرسوم المتحركة إلى قائمة انتظار مؤشر ترابط واجهة مستخدم المتصفح لانتظار التنفيذ. إذا تمت إضافة مهام أخرى إلى مقدمة قائمة الانتظار، فيجب أن ينتظر رمز الرسوم المتحركة حتى تكتمل المهمة السابقة قبل تنفيذها.
يستخدم requestAnimationFrame الفاصل الزمني للنظام للحفاظ على أفضل كفاءة في الرسم، ولن يتسبب في الإفراط في الرسم وزيادة الحمل لأن الفاصل الزمني قصير جدًا، كما أنه لن يتسبب في توقف الرسوم المتحركة وعدم سلاسةها لأن الفاصل الزمني طويل جدًا العديد من تأثيرات الرسوم المتحركة لصفحة الويب التي سيتم تحقيقها هناك آلية تحديث موحدة لحفظ موارد النظام وتحسين أداء النظام وتحسين التأثيرات المرئية.
سماتتأخذ طريقة requestAnimationFrame رد اتصال كمعلمة، وسيتم تمرير وظيفة رد الاتصال في معلمة، DOMHighResTimeStamp، للإشارة إلى الوقت الذي يتم فيه تشغيل وظيفة رد الاتصال التي تم فرزها حاليًا بواسطة requestAnimationFrame(). القيمة المرجعة هي معرف الطلب، الذي يمثل معرفًا فريدًا في قائمة رد الاتصال. يمكن تمرير هذه القيمة إلى window.cancelAnimationFrame() لإلغاء وظيفة رد الاتصال.
requestID = window.requestAnimationFrame(callback);
باستخدام واجهة برمجة التطبيقات هذه، يمكن تنفيذ رموز معينة أثناء عملية إعادة العرض التالية لتجنب تشغيل عدد كبير من عمليات إعادة التدفق في فترة زمنية قصيرة.
على سبيل المثال، تعد وظيفة رد الاتصال لحدث تمرير الصفحة (التمرير) مناسبة جدًا لاستخدام واجهة برمجة التطبيقات هذه، مما يؤدي إلى تأجيل عملية رد الاتصال حتى إعادة العرض التالية. ومع ذلك، تجدر الإشارة إلى أن requestAnimationFrame لا يدير وظائف رد الاتصال، أي أن استدعاء requestAnimationFrame بنفس وظيفة رد الاتصال عدة مرات قبل تنفيذ رد الاتصال سيؤدي إلى تنفيذ رد الاتصال عدة مرات في نفس الإطار. إن أبسط طريقة هي استخدام وظيفة الاختناق لحل هذه المشكلة، أو يمكنك العثور على طريقة للحصول على وظيفة رد اتصال واحدة فقط في قائمة انتظار requestAnimationFrame:
// افعل شيئًا ما = true;
بالطبع، أفضل سيناريو للتطبيق لا يزال هو الرسوم المتحركة بالإطار، والتي يمكن أن تعمل على تحسين الأداء بشكل كبير.
أسئلة المقابلة كيفية عرض عشرات الآلاف من أجزاء البيانات دون أن تتعطل في الواجهةيتناول هذا السؤال كيفية عرض البيانات دون حظر الصفحة، وهذا يعني أنه لا يمكنك عرض عشرات الآلاف من العناصر مرة واحدة، ولكن يجب عرض جزء من DOM مرة واحدة، ثم يمكنك تحديثه كل 16 مللي ثانية من خلال requestAnimationFrame.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>المستند</title></head><body> <ul>التحكم</ul> <script> setTimeout(() => { // أدخل 100000 قطعة من البيانات const Total = 100000 // أدخل 20 قطعة في كل مرة. مرة واحدة Let countOfRender = 0 Let ul = document.querySelector(ul); function add() { // تحسين الأداء، لن يتسبب الإدراج في حدوث تدفق عكسي const fragment = document.createDocumentFragment(); time; 1؛ حلقة () }، 0)؛ </script></body></html> التوافقبعض المتصفحات القديمة لا تدعم واجهة برمجة التطبيقات هذه. من أجل استخدام واجهة برمجة التطبيقات هذه، يمكنك تخصيص هذه الطريقة وتثبيتها أسفل النافذة:
(function() { var lastTime = 0; var البائعين = ['webkit', 'moz']; for(var x = 0; x < البائعين.طول && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'] window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] ||.window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback) { var currTime = new Date().getTime(); 0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + this.timeToCall); timeToCall); lastTime = currTime + timeToCall; return id };ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.