يوم جيد للجميع. اليوم أريد أن أتحدث معك عن التحسين. ما هو ، لماذا هو مطلوب ، والأهم من ذلك ، كيفية التأكد من أنه لا ألم مؤلم ذلك الحين.
بادئ ذي بدء ، سوف نفهم ما هو التحسين بشكل عام ، وما هو التحسين في JS. لذا ، التحسين هو تحسين شيء ما وفقًا لبعض الخصائص الكمية. حددت JS أربع خصائص كمية لنفسها:
مقدار الكود - من المقبول عمومًا أن أقل سطور الكود مكتوبة ، وأكثر إنتاجية وأفضل. رأيي مختلف اختلافًا جذريًا ، لأنه من خلال كتابة سطر واحد من التعليمات البرمجية ، يمكنك إنشاء تسرب للذاكرة أو دورة دائمة يموت فيها المتصفح ببساطة.
السرعة (الأداء) هي ما يسمى بالتعقيد الحسابي ، أي عدد الإجراءات التي سيتعين على المحلل اللغوي تنفيذها لتنفيذ التعليمات.
سرعة البناء - ليس سراً أنه الآن لا يمكن لأي مشروع تقريبًا الاستغناء عن شركات الإنشاء مثل Webpack أو Gulp ، وبالتالي فإن هذه الخاصية تعرض صحة إعدادات منشئ المشروع. صدقوني ، عندما يكون الخادم أكثر ذكاءً من طاحونة القهوة ، يصبح مهمًا.
إمكانية إعادة استخدام الكود - توضح هذه الخاصية مدى بناء بنية إعادة استخدام الوظائف والمكونات والوحدات النمطية.
فكر في كل فئة من الفئات بمزيد من التفصيل ، وسنحلل ما هي الخصائص التي تتضمنها وما الذي تعتمد عليه.
حجم الكود:
- الدوبلاج. كم رمز من نفس النوع كتب في أماكن مختلفة ؛
- التعليقات. التعليقات في الكود جيدة ، لكنني واجهت مشاريع كانت فيها تعليقات أكثر من الكود ؛
- عدم التوحيد. ومن الأمثلة الجيدة على مثل هذه المشكلة وظائف مماثلة ، والتي لها فروق دقيقة اعتمادًا على بعض الخصائص.
- وجود قانون الموتى. في كثير من الأحيان في المشاريع هناك وظائف التصحيح أو وظائف لا يتم استخدامها على الإطلاق.
الأداء:
- باستخدام متصفح آلية التخزين المؤقت.
- تحسين الكود بناءً على تلك البيئات التي سيتم تنفيذها فيها ؛
- وجود تسرب الذاكرة ؛
- باستخدام عمال الويب ؛
- باستخدام مراجع لعناصر شجرة DOM ؛
- استخدام المتغيرات العالمية ؛
- وجود مكالمات متكررة ؛
- تبسيط الحسابات الرياضية.
بناء السرعة:
- عدد التبعيات الخارجية ؛
- تحويلات الكود. يشير هذا إلى عدد القطع وحجمها وتحويلات css وإلتصاق الملفات وتحسين الرسومات وأكثر من ذلك بكثير.
إعادة استخدام الرمز:
- عدد المكونات
- تكرار المكونات
- المرونة والتخصيص.
كما قيل في المقالات السابقة ، من أجل تغيير شيء ما ، تحتاج إلى تحديد نقطة البداية ومعرفة مدى سوء كل شيء. من أين تبدأ هذه العملية الضخمة؟ ابدأ بأبسط شيء: تسريع التجميع وخفض وقت الزيادة في المشروع. أنت تسأل لماذا يستحق أن تبدأ مع هذا؟ بسبب حقيقة أنها تعتمد على بعضها البعض. سيؤدي تقليل مقدار الشفرة إلى زيادة سرعة الإنشاء للبنيات ، وبالتالي زيادة الإنتاجية.
إن تعظيم الاستفادة من وقت البناء يعرّفنا حتماً بمفهوم "البرد" - هذه هي العملية عندما يبدأ المشروع من نقطة الصفر وحتى نقطة تأثر جميع التبعيات وإعادة تجميع الشفرة بالكامل. لا تخلط مع Rebild - هذا هو إعادة بناء رمز العميل دون سحب التبعيات الخارجية وغيرها من بهرج.
لزيادة سرعة البناء سوف يساعد البناء:
- باستخدام المجمعات الحديثة. لا تقف التقنيات ثابتة ، وإذا كان لديك أول حزمة ويب ، فعندما تنتقل إلى الرابعة ، سترى زيادة لطيفة لا تفعل شيئًا بالفعل ؛
- التخلص من جميع إدمان الموتى. من وقت لآخر ، ينسى المطورون ، الذين يحاولون العثور على الحقيقة في أسفل العلبة باستخدام حامض الكبريتيك ، التنظيف بعد تجاربهم الخاصة. سألني زميلي ذات مرة: "قم بالتبعية المكتوبة في package.json ، ولكن لا يتم استيرادها في أي مكان في الكود ، إلى الحزمة" الحزمة؟ " نعم ، لن يتم تضمينها في التجميع نفسه ، ولكن سيتم إفراغ الحزمة. السؤال هو ، لماذا؟
- قسم التجميع إلى عدة ملفات شخصية حسب احتياجاتك. الحد الأدنى اثنين: همز وديف. مثال على ذلك: تشويش الكود. بالنسبة للمنتج ، يعد هذا أمرًا إلزاميًا ، نظرًا لأن الوزن الأقل = التحميل الأسرع ، ولكن عند التعتيم المطوَّر على العطب ، لا يتداخل إلا وينفق وقت البناء على التلاعب غير الضروري ؛
- موازاة خطوات التجميع الفردية ؛
- باستخدام عملاء npm يمكنهم تخزين ذاكرة التخزين المؤقت.
سيتطلب تسريع عملية إعادة الإنشاء والبناء "البارد" الاستغناء عن التعليقات غير الضرورية وقطعًا من التعليمات البرمجية. ومع ذلك ، ماذا تفعل إذا كان لديك مشروع ضخم ولا يمكنك فحصه بنفسك؟ في مثل هذه الحالات ، يأتي محللو الكود إلى عملية الإنقاذ.
أنا شخصياً أستخدم SonarQube بشكل دوري ، وليس الأفضل ، لكنه مرن. يمكن تدريس ميزات المشروع ، إن وجدت. من وقت لآخر ، يقوم بأشياء تقف على الأقل ، على الأقل تسقط ، ولكن ، مثل أي أداة ، يجب أن يكون قادرًا على استخدامها وألا ينسى الشك في ملاحظاته. على الرغم من كل عيوبه ، فقد تعامل مع اثارة ضجة مع البحث عن الكود الميت والتعليقات ووجود نسخ وأشياء صغيرة ، مثل عدم وجود مقارنة صارمة.
الفرق الأساسي بين SonarQube و ESlint / TSLint / Prettier وغيرهم مثلهم هو أنه يتحقق من جودة الكود ، ويعزل الدبلجة ، وتعقيد الحساب ، ويقدم أيضًا توصيات بشأن التغييرات اللازمة. النظير ببساطة التحقق من رمز للأخطاء وبناء الجملة والتنسيق.
في الممارسة العملية ، صادفت الترميز ، خدمة جيدة مع اشتراك مجاني ومدفوع. سيكون مفيدًا إذا كنت بحاجة إلى التحقق من شيء ما على الجانب ، دون الحاجة إلى نشر هذا "الحصاد" في المنزل. لديه واجهة سهلة الاستخدام ، إشارة مفصلة لما هو الخطأ في الكود وأكثر من ذلك بكثير.
في هذه المقالة ، لن أتطرق إلى موضوع إعداد البنية والقطع والبقية ، لأن كل هذا يتوقف على احتياجات المشروع والباني المثبت. ربما سأتحدث عن هذا في مقالات أخرى.
ساعدت التلاعب الذي تم القيام به على تسريع التجميع - الربح ، ولكن ماذا بعد؟ نظرًا لأن المحللين يمكنهم العثور على دبلجة الكود ، سيكون من المفيد وضعها في وحدات منفصلة أو مكونات ، وبالتالي زيادة إعادة استخدام الكود.
كان هناك قسم واحد فقط لم نلمسه - سرعة الشفرة نفسها. إن الآلية ذاتها للوصول إلى الإحساس بالإنتاجية تدعى بكل ما يعيد بناؤه من إعادة إحياء الكلمة. دعنا نلقي نظرة فاحصة على ما يستحق القيام به عند إعادة البناء وما هو غير ذلك.
قاعدة الحياة: إذا نجحت ، لا تلمسها ، فلا ينبغي أن ترشدك في هذه العملية. القاعدة الأولى في تكنولوجيا المعلومات: قم بعمل نسخة احتياطية ، ثم ستقول ذلك بفضل نفسك. في المقدمة ، قبل إجراء أي تغييرات ، قم بإجراء اختبارات حتى لا تفقد وظائفها في المستقبل. ثم اسأل نفسك - كيفية تحديد أوقات التحميل وتسريبات الذاكرة؟
هذا سوف يساعد DevTool. لن يظهر تسرب للذاكرة فقط ، ويخبرك بوقت تحميل الصفحة ، وسحب الرسوم المتحركة ، وإذا كنت محظوظًا ، فسيتم إجراء تدقيق لك ، ولكن هذا ليس دقيقًا. يحتوي DevTools أيضًا على ميزة لطيفة ، مثل الحد من سرعة التنزيل ، والتي سوف تتيح لك توقع سرعة تحميل الصفحة باستخدام الإنترنت السيئ.
تمكنا من تحديد المشاكل ، والآن دعونا نحلها!
للبدء ، سنقوم بتقليل وقت التحميل باستخدام آلية التخزين المؤقت للمتصفح. يمكن للمتصفح تخزين كل شيء مؤقتًا ومن ثم تزويد المستخدم ببيانات من ذاكرة التخزين المؤقت. Localstorage و sessionstorage لم يأخذك أحد منك. إنها تسمح لك بتخزين بعض البيانات التي تساعد على تسريع SPA خلال التنزيلات اللاحقة وتقليل طلبات الخادم غير الضرورية.
يعتبر من الضروري تحسين الكود استنادًا إلى البيئة التي سيتم تنفيذها فيه ، ولكن كما تظهر الممارسة ، يستهلك الكثير من الوقت والجهد ، مع عدم تحقيق زيادة ملموسة. أقترح النظر في هذا فقط كتوصية.
من المستحسن بشكل طبيعي القضاء على جميع تسربات الذاكرة. لن أركز على ذلك ، أعتقد أن الجميع يعرف كيفية القضاء عليهم ، وإذا لم يكن الأمر كذلك ، فحينئذٍ ، غوغل.
مساعد آخر لدينا هو webworker. عمال الويب هم سلاسل عمليات مملوكة للمتصفح والتي يمكن استخدامها لتنفيذ تعليمات JS البرمجية دون حظر حلقة الحدث. يمكن للعاملين على الويب القيام بمهام ثقيلة وطويلة دون حظر تدفق واجهة المستخدم. في الواقع ، عند استخدامها ، يتم إجراء العمليات الحسابية بالتوازي. قبلنا هو multithreading الحقيقي. هناك ثلاثة أنواع من عمال الويب:
- العمال المتفانيون - يتم إنشاء مثيلات عمال الويب المخصصين بواسطة العملية الرئيسية. فقط العملية نفسها يمكنها تبادل البيانات معهم.
- العمال المشتركون (العمال المشتركون) - يمكن الحصول على الوصول إلى عامل مشترك من خلال أي عملية لها نفس مصدر العامل (على سبيل المثال ، علامات تبويب المتصفح المختلفة ، iframe ، والعمال المشتركون الآخرون).
- عمال الخدمة هم عمال مدفوعون بالحدث مسجلون باستخدام مصدرهم ومسارهم. يمكنهم التحكم في صفحة الويب التي يرتبطون بها عن طريق اعتراض أوامر التنقل وطلبات الموارد وتعديلها ، وتخزين البيانات مؤقتًا التي يمكن التحكم فيها بدقة شديدة. كل هذا يعطينا أدوات ممتازة للتحكم في سلوك التطبيق في موقف معين (على سبيل المثال ، عندما تكون الشبكة غير متوفرة).
يمكن العثور على كيفية العمل معهم بسهولة على الإنترنت.
لقد توصلنا إلى حد ما إلى المناهج وواجهات الطرف الثالث ، والآن أقترح التحدث عن الكود نفسه.
بادئ ذي بدء ، حاول التخلص من المكالمات المباشرة إلى شجرة DOM ، حيث إنها عملية تستغرق وقتًا طويلاً. دعنا نتخيل أنك تتلاعب باستمرار بنوع من الأشياء في الكود. بدلاً من العمل مع هذا الكائن بالرجوع إليه ، يمكنك باستمرار سحب شجرة DOM للبحث عن هذا العنصر والتعامل معه ، وننفذ نموذج التخزين المؤقت في الكود.
الخطوة الثانية هي التخلص من المتغيرات العالمية. أعطانا ES6 اختراعًا رائعًا للجنس البشري يسمى متغيرات الكتلة (بعبارات بسيطة ، الإعلانات المتغيرة من var إلى let و const ).
وأخيرا ، أكثر لذيذ. هنا ، لسوء الحظ ، ليس لدى الجميع خبرة كافية لفهم الفوارق الدقيقة. أنا ضد استخدام وظائف العودية. نعم ، إنها تقلل من حجم الشفرة المكتوبة ، لكنها لا تستطيع الاستغناء عنها: في كثير من الأحيان لا توجد وظائف خروج على مثل هذه الوظائف العودية ، بل يتم نسيانها ببساطة. كما هو الحال في القول "يمكنك كسر إصبع بمطرقة ، ولكن هذه ليست مشكلة مطرقة ، ولكن مالك إصبع" أو نكتة عن القطط: وظائف العودية ليست سيئة ، تحتاج إلى أن تكون قادرة على طهيها.
على الرغم من كل قوة تطبيقات الواجهة الأمامية الحديثة ، يجب ألا تنسى الأساسيات. من الأمثلة الواضحة للهدر واللاعقلانية إضافة عناصر جديدة إلى بداية الصفيف. من يدري ، يفهم ، ومن لا يعلم - الآن سأقول. يعلم الجميع أن عناصر الصفيف لها فهرس خاص بها ، وعندما نضيف عنصر صفيف جديد إلى بدايته ، سيكون تسلسل الإجراءات كما يلي:
- تعريف طول الصفيف
- ترقيم كل عنصر.
- التحول من كل عنصر مجموعة
- إدراج عنصر جديد في صفيف
- إعادة فهرسة عناصر الصفيف.
النتائج:
لقد حان وقت التقريب ، وبالنسبة لأولئك الذين يشعرون بالارتياح لتنسيق المذكرات ، احتفظوا بقائمة من الخطوات التي يمكنك فهمها في أي مرحلة من مراحل التحسين أنت الآن وماذا تفعل بعد ذلك:
- نحدد مقدار كل شيء جيد / سيء ، ونزيل المقاييس.
- نحن نقطع كل شيء غير ضروري: التبعيات غير المستخدمة ، الكود الميت ، التعليقات غير الضرورية.
- نحن تخصيص وتسريع وقت التجميع ، وتكوين ملامح مختلفة عن ملامح.
- نحن نحلل الكود ونقرر الأجزاء التي سنقوم بتحسينها وإعادة كتابتها.
- نكتب اختبارات لمنع فقدان الوظيفة.
- نبدأ في إعادة التسكين ، والتخلص من المتغيرات العالمية ، وتسريبات الذاكرة ، ورمز الدبلجة وغيرها من القمامة ، ولا ننسى التخزين المؤقت.
- نعمل على تبسيط تعقيد العمليات الحسابية ونأخذ كل شيء ممكن إلى عامل الويب.
كل شيء ليس معقدًا كما يبدو للوهلة الأولى. من المحتمل أن يكون تسلسلك مختلفًا عن التسلسل الخاص بك ، فقط لأن لديك رأسك على كتفيك. ستقوم بإضافة عناصر جديدة أو ، على العكس ، تقليل عددهم ، لكن أساس القائمة سيكون مماثلاً. وصفت التقسيم على وجه التحديد بحيث يمكن تشغيل هذا النشاط بالتوازي مع العمل الرئيسي. في كثير من الأحيان العميل ليس على استعداد لدفع ثمن إعادة صياغة ، توافق؟
وأخيرا.
أنا أؤمن بك ، وأنك سوف تنجح. هل تعتقد أنني ساذجة؟ أفترض أنك ستفاجأ ، لكن بما أنك وجدت هذا المقال ، فاقرأه حتى النهاية ، فهذا يعني (لدي أخبار جيدة لك) لديك عقل ، وتحاول تطويره. أتمنى لك التوفيق في مهمة صعبة مثل تحسين الجبهة!