أعتقد أن الجميع يعلم أن JavaScript هي لغة تطوير كاملة ، ويمكن رؤية JS على المتصفح والهاتف المحمول وجانب الخادم. ستشارك هذه المقالة بعض أفضل الممارسات الفعالة في JavaScript لتحسين فهمك لمبادئ JS الأساسية ومبادئ التنفيذ.
تخزين البيانات
هناك مشكلة كلاسيكية في نظام الكمبيوتر الذي يحقق أداء القراءة والكتابة الأمثل عن طريق تغيير موقع تخزين البيانات. في JavaScript ، يمكن أن يكون لموقع تخزين البيانات تأثير كبير على أداء الكود. إذا كنت تستطيع إنشاء كائنات مع {} ، فلا تستخدم كائنًا جديدًا. إذا كنت تستطيع إنشاء صفائف مع [] ، فلا تستخدم مجموعة جديدة. سرعة وصول الحرفيين في JS أعلى من سرعة الكائنات. كلما كان المتغير أعمق في سلسلة النطاق ، كلما طالت الممارسة اللازمة للوصول. بالنسبة لمثل هذه المتغيرات ، يمكن حفظ المتغيرات المحلية من خلال ذاكرة التخزين المؤقت ، مما يقلل من عدد الوصول إلى سلاسل النطاق ، لا يوجد فرق كبير بين تدوين النقطة (Object.name) والمشغل (الكائن [الاسم]). فقط Safari سيكون له فرق ، والنقاط دائمًا أسرع
دورة
هناك العديد من الحلقات الشائعة في JS:
لـ (var i = 0 ؛ i <10 ؛ i ++) {// افعل شيئًا} لـ (var prop in Object) {// for loop Object} [1،2].وغني عن الشك في أن الطريقة الأولى هي أصلية ، مع أدنى استهلاك للأداء وأسرع سرعة. تولد الطريقة الثانية من أجل المزيد من النفقات العامة (المتغيرات المحلية) في كل تكرار ، وسرعته ليست سوى 1/7 من النوع الأول. من الواضح أن الطريقة الثالثة توفر طريقة حلقة أكثر ملاءمة ، لكن سرعتها ليست سوى 1/8 من الحلقة العادية. لذلك ، يمكنك اختيار طريقة الحلقة المناسبة وفقًا لحالة المشروع الخاصة بك.
وفد الحدث
فقط تخيل إضافة حدث إلى كل علامة على الصفحة. هل سنضيف onclick إلى كل علامة؟ قد يؤثر هذا الموقف على الأداء عندما يكون هناك عدد كبير من العناصر في الصفحة التي يجب أن تكون مرتبطة بنفس معالجة الحدث. يزيد كل حدث ملزم من العبء على الصفحة أو أثناء التشغيل. للحصول على تطبيق أمامي غني ، ستشغل الكثير من الروابط الكثير من الذاكرة على صفحة مع تفاعلات ثقيلة. طريقة بسيطة وأنيقة هي تفويض الأحداث. إنه سير عمل يستند إلى الأحداث: التقاط طبقة حسب الطبقة ، وصلت إلى الهدف ، وطبقة الطبقة حسب الطبقة. نظرًا لوجود آلية فقاعة للأحداث ، يمكننا التعامل مع الأحداث التي تبدأ من جميع عناصر الأطفال عن طريق ربط الأحداث بالطبقة الخارجية.
document.getElementById ('content'). onClick = function (e) {e = e || window.event ؛ var target = e.target || E.Srcelement ؛ // إذا لم تكن العلامة A ، فسوف أخرج إذا (target.nodenmae! === 'A') {return} // اطبع عنوان الارتباط الخاص بـ console.log (target.href)}إعادة النشر وإعادة ترتيب
بعد تنزيل المتصفح HTML و CSS و JS ، سيتم إنشاء شجرتين: شجرة DOM وشجرة التقديم. عندما تتغير خصائص DOM الهندسية ، مثل عرض DOM وارتفاعه ، أو لونه ، يحتاج المتصفح إلى إعادة حساب الخصائص الهندسية للعنصر وإعادة بناء شجرة التقديم. وتسمى هذه العملية إعادة رسم وإعادة ترتيب.
BodyStyle = document.body.style ؛ bodystyle.color = أحمر ؛ BodyStyle.Height = 1000px ؛ bodystyke.width = 100 ٪ ؛
من خلال تعديل الخصائص الثلاثة في الطريقة أعلاه ، سيعاد المستعرض ثلاث مرات. في بعض الحالات ، يمكن أن يؤدي الحد من إعادة الترتيب إلى تحسين أداء العرض للمتصفح. الطريقة الموصى بها هي كما يلي: يتم تنفيذ عملية واحدة فقط وإكمال ثلاث خطوات:
BodyStyle = document.body.style ؛ bodystyle.csstext 'اللون: أحمر ؛ الارتفاع: 1000px ؛ العرض: 100 ٪' ؛
تحميل جافا سكريبت
يسمح كل من IE8 و Firefox3.5 و Chrome2 بتنزيل ملفات JavaScript المطلوبة. لذلك لن يمنع <script> تنزيلات العلامات الأخرى. لسوء الحظ ، ستظل عملية تنزيل JS تمنع تنزيل الموارد الأخرى ، مثل الصور. على الرغم من أن أحدث المتصفحات تعمل على تحسين الأداء من خلال السماح بتنزيل متوازي ، إلا أن حظر البرنامج النصي لا يزال يمثل مشكلة. لذلك ، يوصى بوضع جميع العلامات <script> في أسفل <Body> العلامات لتقليل التأثير على عرض الصفحة بأكملها وتجنب المستخدمين من رؤية مساحة فارغة
نشر ملف JS عالي الأداء
نظرًا لأنك تعلم بالفعل أن علامات <Script> المتعددة ستؤثر على سرعة عرض الصفحة ، فليس من الصعب فهم أن "تقليل HTTP المطلوب لتقديم الصفحة" هو قاعدة كلاسيكية لتسريع موقع الويب. لذلك ، فإن دمج جميع ملفات JS في بيئة المنتج سيقلل من عدد الطلبات ، وبالتالي تسريع عرض الصفحة. بالإضافة إلى دمج ملفات JS ، يمكننا أيضًا ضغط ملفات JS. يشير الضغط إلى تجريد أجزاء من ملف لا يرتبط بالتشغيل. يتضمن المحتوى الذي تم تجريده أحرف المسافة البيضاء ، والتعليقات. يمكن أن تقلل عملية التعديل عادة من حجم الملف بمقدار النصف. هناك أيضًا بعض أدوات الضغط التي تقلل من طول المتغيرات المحلية ، مثل:
var myname = "foo" + "bar" ؛ // بعد الضغط ، يصبح var a = "foobar" ؛
ملفات التخزين المؤقت JS
يمكن للتخزين المؤقت لمكونات HTTP تحسين تجربة المستخدم لزيارات إرجاع الموقع. يستخدم خادم الويب "رأس استجابة HTTP" لإخبار العميل إلى متى يجب تخزين المورد. بالطبع ، لدى Cache أيضًا عيوبه الخاصة: عند ترقية التطبيق ، تحتاج إلى التأكد من تنزيل المستخدم أحدث محتوى ثابت. يمكن حل هذه المشكلة عن طريق تغيير اسم ملف المورد الثابت. قد ترى مرجع المتصفح JSAPPLICATION-20151123201212.JS في بيئة المنتج. هذا هو حفظ ملف JS الجديد في طابع زمني ، وبالتالي حل مشكلة عدم تحديث ذاكرة التخزين المؤقت.
لخص
بطبيعة الحال ، فإن JS الفعال لا يتعلق فقط بهذه الأشياء التي يمكن تحسينها. إذا كان من الممكن تقليل بعض خسائر الأداء ، فيمكننا استخدام JavaScript للتطوير بشكل أكثر كفاءة.