في البوست اللي فات عرفنا ايه هو الـDNS وايه وظيفته، وفي البوست النهاردة هنقدر نستفيد من معرفتنا السابقة دي بشكل عملي في إنشاء موقع الويب بتاعنا فيما يعرف بالـ(Resource Hints)، لو مقريتش البوست اللي فات انصحك جدًا ترجعله (اللينك في أول كومنت)، وخلينا نبدأ موضوعنا.
اتفقنا على ان الـDNS بياخد الـDomain، يعمله Lookup عن الـIP Address بتاعه عشان المستخدم بعد كدة يقدر يتصل بالموقع ده، وفي حياتنا العملية في الـHTML بنستخدم موارد وملفات من مواقع كتير، زي مثلًا الـFont، الـBootstrap Library وغيرهم، وبالتأكيد بنكتب الـPath (المكان) بتاع الملفات دي بالشكل الطبيعي اللي متعودين عليه، الدومين وبعديه مكان الملف بالظبط
بس تخيل معايا انك بتجيب فايلات من نفس المكان كذا مرة، وفي كل مرة المتصفح الأول بيقرأ الدومين، يعمله Lookup، وبعدين يجيب الفايلات دي منه، وفي كل مرة بتطلب فايل من الموقع ده بيعمل Lookup لنفس الدومين، مضيعة للوقت وبتزود في الـLoading Time للموقع بالتأكيد
طب والحل؟
خليني أقولك على معلومة هتديلك القدرة على التحكم في إمتى وإزاي المتصفح يتعامل مع الملفات من المواقع التانية، وده عن طريق الـDNS-Prefetch, Pre Connect, Prefetch، وأخيرًا الـPre Render!
بالنسبة للـDNS Prefetch في الأول، ودي لطيفة جدًا الحقيقة وهتساعدك كتير، هنا ببساطة انت بتقول للمتصفح لو سمحت اعمل الـLookup على الدومين ده، وبعد ما تجيب الـIP Address سجله عندك، وكل اما احتاج File من الدومين ده خش ع الـIP Address المُسجل عندك على طول، مش لازم كل مرة تعملي DNS Lookup وتضيعلي وقت ع الفاضي!
حلو؟ طب ممتاز
نفترض بقى إنك عاوز تقوله عملت الـLookup خلاص؟ خد بقى الفايلات دي واحفظها عندك عشان أول ما احتاجها تجيبهالي؟ لحسن الحظ عندك الـHint الظريفة جدًا (Prefetch)، وهنا هي هتكيش (تحفظ الملفات في الكاش) لحين استخدامها في الموقع
الـPreconnect بقى هي اللي جامدة جدًا الحقيقة، انت مش مجرد هتعمل DNS Lookup والموضوع انتهى على كدة، لأ انت كمان هتفتح TCP Connection بحيث أي اتصال بين موقعك والموقع التاني يتم بسرعة جدًا وبدون الحاجة انه يتصل بالموقع كل شوية
هنا انت بتعرف الـBrowser ان الموقع ده انا هجيب منه فايلات وعاوز أفتح Connection معاه، فـ خليك مصحصح وفايق معايا كدة، أول ما اطلب منك فايل من الموقع ده تجيبه على طول بدون ما تنشيء الـConnection من أول وجديد
الـPreload برضه من الحاجات الممتازة هنا، ولكن خليني أأجل الكلام عنها للبوست تاني عشان أديها حقها وأقارنها بالـPre Connect والـDNS Prefetch.
وأخيرًا الـPre Render، وهنا ببساطة شديدة انت بتدي للمتصفح رابط وتقوله حمل الصفحة دي معاك، بحيث إن المستخدم لما يروح للصفحة التانية دي تكون متحملة بالفعل وتقلل وقت تحميلها، هنا إنت مش بتفيد الصفحة بتاعتك ولكن بتحسن سرعة الصفحة التانية، استخداماتها مش كتير الحقيقة وهي مازالت تجريبية، ولكن كان لازم أذكرها عشان تبقى عارف بوجودها
وفي النهاية عارف إن البوست المرادي كان طويل شويتين ومليان معلومات Advanced وممكن تبقى جديدة عليك، ولكن صدقني هي معلومات مهمة جدًا وهتوفر عليك وقت طويل وانت بتصمم الـWebsite بتاعك، لو مفهمتش البوست من أول مرة ممكن تقراه تاني، وهسيبلك في الكومنتات روابط هتفيدك بالتأكيد في إنك تفهم كل خاصية والفروقات ما بينهم بشكل أعمق، وبس كدة، ده الموضوع ببساطة!
الجينيص
HTML5 Notes
الجينيص