تجنب استدعاء ملفات في ملف الـcss الخاص بموقعك؟ - مقال كلاود
 إدعم  المنصة   
makalcloud
تسجيل الدخول

تجنب استدعاء ملفات في ملف الـcss الخاص بموقعك؟

دائما نري عند تجربة اداء سرعه الموقع علي احد المواقع المخصصه لذلك نري ان هناك شئ يبطئ من سرعه موقعنا و هو CSS @import .

  نشر في 25 يوليوز 2016  وآخر تعديل بتاريخ 30 نونبر 2016 .

    اذا كنت من المهتمين بتحسين سرعة موقعك والحصول علي تجربة مـُـستخدم أفضل فمن المؤكد انك قد قمت في يوم ما بالقيام بعملية قياس سرعه موقعك علي احد المواقع المسئولة بذلك وقد لاحظت ان هناك في التنبيهات تحذير او اشارة الي شئ يدعي تجنب استخدام import@.


ما هي وظيفة import@؟

هي عبارة عن طريقة لاستدعاء مجموعة من الخصائص والقواعد من ملف النمط "stylesheet" الي ملف نمط "stylesheet" اخر ويجب ان يتم استدعاء هذا الملف قبل جميع ملفات الـنمط "stylesheets" الخاصة.


ويتم استدعائها هكذا:

طريقة استدعاء ملف عن طريق import


لماذا علينا اذا تجنب استدعاء الملفات عن طريق import@ ؟

استدعاء الملف عن طريق import@ يخلق العديد من المشاكل للمتصفح، سنتكلم من ناحية الاداء وسرعه الموقع. 

طريقة عمل المتصفحات في استدعاء الملفات تعمل عن طريق التسلسل في تحميل الملفات وليس التوازي اى ان المتصفح عندما ينتهي من تحميل ملف رقم 1 مثلا يقوم بتحميل الملف الذي يليه وليكن ملف رقم 2 و هكذا ، اى ان المتصفح لا يقدر علي تحميل ملف 1 و 2 معا في نفس الوقت.


ولكن قبل الخوض في الحديث عن سوء استخدام خاصية import@ يجب علينا في البدايه توضيح كيفية قراءة المتصفح للملف او المستند قبل عرضه.

المتصفحات قبل ان تقوم بعرض الصفحة النهائيه للموقع وعرضها الي المستخدم تقوم بتحليل الملفات وقراءة محتوياتها واذا واجهه المتصفح ملـف داخل المستند يقوم المتصفح بتجاهله ويقوم عند الأنتهاء من تحميل الملف الرئيسي ببدأ تحميل الملف الفرعي وبعد الأنتهاء من تحميله يتم عرض الصفحة.



الان فلنفترض وجود ملف يسمي main.css وهو الملف الرئيسي لموقعنا وبداخل هذا الملف سنقوم باستدعاء ملف style.css وبداخل ملف الـstyle عدد من الاسطر والاوامر.


استدعاء ملف داخل ملف اخر


وسنقوم في ملف الـHTML الخاص بالموقع باستدعاء ملف main.css.

تضمين ملف main.css


الان بعد استدعاء الملفات ماذا سيحدث عند قراءة المتصفح للمستند!

- بعد الانتهاء من تحميل ملف الـHTML وبناء الـDOM.

- سيقوم المتصفح باستدعاء ملف mian.css ليتم بناء الـCSSOM.


من ادوات المطور ، تم ارسال طلب استدعاء الملف الرئيسي وهو main.css


وعند تحميل الملف main.css سيجد المتصفح ملف اخر يريد استدعائه يسمي style.css فسيقوم المتصفح بتجاهله حتي يتم تحميل الملف الرئيسي main.css كاملاً وعند الانتهاء من تحميله سيبدأ المتصفح بارسال طلب استدعاء ملف الـstyle.css

الانتهاء من تحميل الملف الرئيسي main.css

 ومن ثم يبدأ المتصفح بتحميل الملف الفرعي style.css وعند الأنتهاء من تحميل الملف الفرعي يتم عرض الصفحة للمستخدم و لكن هذا الملف قد اجبر المتصفح علي القيام بخطوات اضافيه مما يؤدي الي زياده في وقت تحميل الموقع.


ارسال طلب استدعاء الملف الفرعي بعد الأنتهاء من تحميل الملف الأساسي

اى انه باستخدام خاصية import@ لاستدعاء الملف انت تــُجبر المتصفح علي القيام بعملية اخري اضافيه تؤدي في النهاية الي زياده في وقت تحميل موقعك بسبب اعادة التوجيه التي حدثت في الملف الرئيسي.

وبعد الأنتهاء من تحميل الملفات الفرعية يتم رسم الـCSSOM ومن ثم عرض الصفحة.


ماذا استخدم بدلا عن خاصية import@ ؟

بدلا عن استدعاء الملفات بطريقة متسلسة يجب عليك استدعاء الملفات بطريقة متوازية اى يتم تحميل الملفات مع بعضها البعض دون تعطيل اى منهما الأخر.


وللقيام بذلك عليك استدعاء الملف في مستند الـHTML :

استدعاء الملف في مستند HTML


الان سيتم تحميل الملفين في وقت واحد دون ان يـُـعطل اي منهما الأخر.


ايضا يمكنك جمع جميع الملفات "combine" في ملف نمط"stylesheet" واحد اى باخذ جميع الاكواد من ملف style.css و اضافتها الي ملف main.css  مما ينتج عنه في النهاية ملف واحد فقط مما يقلل عدد الطلبات من السيرفر ومن ثم تحميل الموقع بصورة اسرع.

واذا كنت من مستخدمي معالجات النمط او "CSS Preprocessor" يمكنك جلب واستدعاء الملفات عن طريق استخدام import@ في ملف واحد بكل سهولة مع الأحتفاظ بكل نمط في ملف خاص.

واذا تسألت ما الفرق بين استخدام import@ في CSS  ومعالجات CSS مثل (Sass, Less) ستجد هنا الفروقات بينهم.


اذا عليك تجنب استخدام import@ واستخدم بدلا عنها link حتي لا تــُجبر المتصفح علي القيام باعمال اضافيه تعطل من ظهور الصفحة او اجمع جميع ملفات النمط في ملف واحد وكلما كان الموقع أسرع في التحميل و العمل كلما كانت تجربة المستخدم أفضل وايضا تحسين ظهور موقعك في نتائج البحث الاولي لذا تجنب استخدام import@ او من الأفضل لا تستخدمها نهائيا :)



المصدر.



   نشر في 25 يوليوز 2016  وآخر تعديل بتاريخ 30 نونبر 2016 .

التعليقات


لطرح إستفساراتكم و إقتراحاتكم و متابعة الجديد ... !

مقالات شيقة ننصح بقراءتها !



مقالات مرتبطة بنفس القسم











عدم إظهارها مجدداً

منصة مقال كلاود هي المكان الأفضل لكتابة مقالات في مختلف المجالات بطريقة جديدة كليا و بالمجان.

 الإحصائيات

تخول منصة مقال كلاود للكاتب الحصول على جميع الإحصائيات المتعلقة بمقاله بالإضافة إلى مصادر الزيارات .

 الكتاب

تخول لك المنصة تنقيح أفكارك و تطويرأسلوبك من خلال مناقشة كتاباتك مع أفضل الكُتاب و تقييم مقالك.

 بيئة العمل

يمكنك كتابة مقالك من مختلف الأجهزة سواء المحمولة أو المكتبية من خلال محرر المنصة

   

مسجل

إذا كنت مسجل يمكنك الدخول من هنا

غير مسجل

يمكنك البدء بكتابة مقالك الأول

لتبق مطلعا على الجديد تابعنا