تحسين الأداء الأمامي والمهارات

مقدمة لماذا يعد تحسين الأداء مهمًا جدًا للمهندسين الأماميين

هناك قول في الصناعة لا أعرف ما إذا كنت قد سمعت ، "الأشخاص الذين يعرفون تحسين الأداء ودرسوا رمز مصدر jQuery والرمز المكتوب دون تحسين الأداء سيكون لديهم فرق في أداء المئات أو حتى الآلاف من المرات". JavaScript اليوم هي عملية انتقالية من ECMASCript3 إلى ECMASCRIPT5 و ECMASCRIPT6. عندما لا يتم كتابة JavaScript جيدًا ، لا تتم كتابة طريقة الكود بشكل صحيح ، ولا يمكن تجاهل المشكلات الناتجة.

تحسين الأداء

أدناه سوف أشارك بعض رؤيتي حول تحسين الأداء معك ؛

1. صورة قزم

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

2.CSS التحسين المحدد

في CSS ، حاول استخدام محدد الطفل> ، واستخدام محدد أقل سليل. عند استخدام محدد سليل ، سوف يبحث محرك البحث في جميع عناصر سليل. إذا استخدمنا محدد الطفل ، فيمكننا تضييق نطاق البحث ، وبالتالي تقليل استهلاك أداء محرك البحث.

3. js قم بتغيير النمط وتشغيل اسم الفصل بشكل مباشر

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

4. JS تعمل مباشرة على عقد DOM

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

قد لا يفهم بعض الناس مفهوم إعادة رسم وتراجع

5. محدد المباراة العادية

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

6. js احصل على تحسين العناصر

عند الحصول على عناصر في JS ، من الطبيعي استخدام document.getElementsById. سيبحث محرك البحث من أسفل شجرة DOM حتى يتم البحث عن المستند في النافذة ثم البحث مرة أخرى. لذلك ، من الأفضل تخزين Document.body عند الحصول على العناصر. عند استخدامها مرة أخرى ، ما عليك سوى إخراج هذا المتغير للاستخدام ، والذي يمكن أن يحفظ أداء محرك البحث

7. تفوق الذاكرة

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

8. استخدم طلبات الحصول على AJAX

يتم تحقيق طلب النشر عن طريق إرسال رؤوس طلب HTTP أولاً ثم إرسال البيانات. لا يحتوي GET على رأس طلب ، ولكن تجدر الإشارة إلى أن الحد الأقصى لحجم الحصول على حوالي 4K ، في حين أن Post ليس له حد.

9. تأخير تحميل الصور

عندما تبدأ الصفحة طلبًا ، يكون عدد الطلبات كبيرًا جدًا ، بحيث يمكن تحميل الصورة. عندما تقوم الصفحة بالتمرير إلى موقع الصورة ، سيتم تحميل الصورة.

فيما يلي مكون إضافي لتحميل الصور كسول

 jquery.lazyload.js

10. تجنب أن تكون سمة الصورة SRC فارغة

الصور ذات سمات SRC التي هي سلاسل فارغة شائعة ، وظهر بشكل رئيسي في شكلين:

<img src = "">

var img = new image () ؛ img.src = "" ؛

يسبب كلا النموذجين نفس المشكلة: يرسل المتصفح طلبًا آخر إلى الخادم.

مهارة

1. الفكر الحصري

أولاً ، استبع كل ما تابع ، ثم قم بإجراء العملية التالية ؛ بشكل عام ، عند إجراء الرسوم المتحركة ، وإضافة أنماط ، وما إلى ذلك ، توضيح أولاً الأنماط السابقة أثناء التشغيل الثانوي ثم أضف أنماطًا جديدة لتجنب النزاعات في الرسوم المتحركة في نفس الوقت.

2. عملية الدائرة القصيرة (||)

بشكل عام ، عندما تحتاج إلى الحكم على القيمة سواء كانت موجودة ، حاول ألا تستخدم إذا كانت البيانات. يمكنك استخدام مشغلي الدائرة القصيرة لحفظ الذاكرة التي تشغلها الرمز. على سبيل المثال:

 a = a || b ؛

إذا كان هناك ، استخدم أ ؛ إذا لم يكن هناك ، استخدم ب.

3. العملية (&&)

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

 A && A.Length && A.Length> = 0

4. المباراة الزائفة والمصفوفة

عندما تحتاج إلى تغليف عنصر غير وارمي وتحويله إلى صفيف ، فإن أسهل طريقة هي إضافة []. إذا كان يحتاج إلى أن يكون طيبة زائفة ، فيمكنك تعيين سمة الطول عليها.

5. صمام الخانق

يستخدم بشكل عام في الرسوم المتحركة ، وتعيين قيمة ، وتعيينها على صواب في البداية ، وتحديد قيمتها ، وتعيين هذه القيمة إلى خطأ عند إدخال الرسوم المتحركة ، واستخدم وظيفة رد الاتصال لإعادة تعيينها إلى صواب في نهاية الرسوم المتحركة.

6. فتح حالة الاختيار السلبي للنص (البضائع الجافة النقية)

عند النقر فوق بعض الأزرار ، يتم تحديد النص في بعض الأحيان ، مما يجعل العميل يراها مثل الخطأ. ما يلي هو الكود لإزالة هذه الحالة ولصقها فقط.

 if (document.all) {document.onselectStart = function () {return false} ؛ // لـ ie} آخر {document.onmousedown = function () {return false} ؛ document.onmouseup = function () {return true} ؛ } document.OnsElectStart = وظيفة جديدة ('event.returnvalue = false') ؛

7. استخدم بذكاء المشغل الثلاثية

عندما يكون من الضروري تحديد ما إذا كانت القيمة موجودة ، يمكنك أيضًا استخدام المشغل الثلاثي لجعل الكود أكثر تحسينًا. على سبيل المثال

 obj = obj === undefined؟ الكائن: obj ؛

التجديد:

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