عاوز تخلي الموقع بتاعك يبقى سريع ومياخدش Loading Time طويل؟
في البوست هنا هقولك على طريقة مهمة هتسهل عليك كتير، وفي الكومنتات عاوزكم تشاركوا بطرق تانية لتحسين سرعة تحميل الموقع (لو مش عارف ممكن تبحث وتحاول تكتب في الكومنتات، صدقني هتفرق معاك جدًا النصيحة دي)
احنا متعودين على وضع الـScript Tag في الـHead بتاع الصفحة أو قبل نهاية الـBody، وده طبعًا على حسب الحاجة، يعني مثلًا لو الكود محتاج يتنفذ قبل ما الـDOM يترندر بالكامل هنا هنضيفها في الـHead، إنما لو الكود بتاعنا بيتعامل مع Elements فـ الـDOM فـ الأفضل اننا نضيف الكود قبل نهاية الـBody عشان مانترزعش أحلى Undefined Error!
وهنا خليني أعرفك على الـAttributes اللي ممكن تضيفها للـScript Tag، اللي هتساعدك تتحكم في الوقت اللي يـRun فيه مهما كان مكانه، وبالضرورة مش هيعطل تحميل الصفحة كلها عشان ينفذ الكود بتاعك فـ هيحسن بشكل كبير جدًا في الـPerformance بتاع موقعك
وبإختصار الـAttributes دي هما الـDefer، والـAsync، وخليني أشرحلك الفرق بسرعة :
– الـAsync : وهنا المتصفح هيبدأ يجيب الـScript File ويشتغل عليه في نفس الوقت اللي بيشتغل فيه على باقي الصفحة، (Parallel)، وبعد ما يحمل الـScript File كله هيبدأ يـManipulate (يتلاعب) بالـDOM
– الـDefer : ودي قريبة جدًا من الـAsync، ولكن الفرق بينهم إن المتصفح مش هيبدأ يجيب الـScript File إلا بعد ما الصفحة تبقى جاهزة بالكامل، على عكس الـAsync اللي المتصفح بيشتغل عليها وعلى الصفحة في نفس الوقت، والـDefer هنا هتديك Loading Time أفضل ولكن لازم تعرف تستخدمهم إمتى
لو حابب تتعمق أكتر هتلاقي لينك في أول كومنت بيتكلم عن الـAttributes دي بشيء من التفصيل، وبس كدة، ده الموضوع ببساطة!
الجينيص
HTML5 Notes
الجينيص