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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

المصدر.