اسرار توسعه وب : HTTP, AJAX و بیشتر از این ها

در این دوره ، شما در مورد مسیر مهم رندر یاد خواهید گرفت. این به مجموعه مرورگرهای مراحل اشاره دارد که باید برای واکشی و سپس تبدیل HTML ، CSS و JavaScript به وب سایت های تنفسی تبدیل شوند. از آنجا ، شما شروع به کاوش و آزمایش با ابزارهایی برای اندازه گیری عملکرد خواهید کرد. شما استراتژی های ساده و در عین حال بسیار قدرتمندی را برای ارائه هرچه سریعتر پیکسل ها به صفحه نمایش خواهید آموخت.
دانش CRP برای درک چگونگی بهبود عملکرد یک سایت فوق العاده مفید است. مراحل مختلفی برای CRP وجود دارد ، مانند ساخت DOM ، ساخت CSSOM ، اجرای JavaScript ، ایجاد درخت رندر ، تولید طرح و در نهایت نقاشی پیکسل ها به صفحه نمایش. همانطور که مشاهده می کنید ، این یک مجموعه کامل از مطالب جالب را در بر می گیرد. این دوره سخنرانی های زیادی دارد که دانش دانش شما را گسترش می دهد و مهارت های شما را آزمایش می کند.
از طریق مثالهای عملی ، این دوره به شما کمک می کند تا قطعه CRP را به صورت قطعه درک کنید. ما در طول راه از جدیدترین و بهترین ویژگی های JavaScript و مرورگرها (مانند API جدید Fetch API) استفاده خواهیم کرد تا بتوانید جلوتر از بسته باشید.
تا پایان این دوره ، شما قادر خواهید بود "صحبت کنید "CRP با درک چگونگی واکشی داده ها از یک سرور و سپس دریافت آن داده ها در اسرع وقت به کاربر خود.
تمام منابع این دوره در https://github.com/packtpublishing/ موجود است توسعه وب-توسعه-سوکراسیون ---- هدایت-هدایت-http-ajax-and-more

عنوان اصلی : Web Development Secrets Revealed - Critical Rendering Path, HTTP, AJAX, and More

سرفصل های دوره :

مقدمه:
بررسی اجمالی دوره
مقدمه
آنچه این دوره شامل می شود
نحوه استفاده از مرورگرها برای درخواست داده
AJAX - مقدمه
بازگشت سریع
XMLHttpRequest - مقدمه
ساخت شی XMLHttpRequest
برخورد با داده های پاسخ
یک مثال دیگر - نمایش زمان از یک سرور
ساخت عملکرد زمان سفارشی ما
یک مثال دیگر - واکشی یک تصویر و نام شخص
تعریف تابع requestListener ما
XMLHttpRequest - خلاصه ای از تصویر و نام ما
واکشی - مقدمه
واکشی - تنظیم آن
Fetch - متد .json() چیست
واکشی - با POST
جایگزینی XMLHttpRequest با Fetch برای عکس و نام ما
نتیجه گیری
پروتکل HTTP، TCP و بسته‌ها:
عملکرد اصلی مرورگر
مرورگرها و W3C
درخواست مرورگر - مقدمه
بسته ها
بسته ها - پنج لایه توضیح داده شده است
بسته ها - مثال
پروتکل HTTP - مقدمه
HTTP - درخواست و پاسخ
یک قدم به عقب بردارید - این چیزها عملی است
خلاصه بخش
پیشرفته - ساخت پلی پر سفارشی:
معرفی Polyfill
مرورگر چیست
آیا مرورگرها از مجموعه ای از استانداردها پیروی می کنند؟
Polyfill چیست؟
تست اینکه آیا روش forEach() در مرورگر ما وجود دارد یا خیر
forEach() چیست؟
مثال عملی forEach()
Custom forEach() Polyfill - مقدمه
Custom forEach() Polyfill - مرحله اول
Custom forEach() Polyfill - تابع Callback
این چیست؟
Custom forEach() Polyfill - Final
خلاصه بخش
مسیر رندر بحرانی - DOM، CSSOM، درخت رندر:
مقدمه
موتور JS، موتور رندر، و چسبی که همه چیز را با هم نگه می دارد (مرورگر)
نحوه عملکرد مرورگر (مراحلی که برای واکشی داده ها و نمایش آنها انجام می شود)
مسیر رندر بحرانی - مقدمه
ساخت DOM - قسمت 1
ساخت DOM - قسمت 2
بازنگری سریع
Tab Performance - DevTools
Call Tree - روشی جایگزین برای تجزیه و تحلیل فعالیت های وب سایت شما
ثبت رویداد از پایین به بالا - روشی جایگزین برای تجزیه و تحلیل فعالیت های وب سایت شما
CSSOM - مقدمه
چرا باید درخت CSS داشته باشیم؟
نحوه مشاهده فرآیند CSSOM برای وب سایت شما - محاسبه مجدد سبک
Render Tree - مقدمه
Render Tree - چالش
Render Tree - Solution
بازنویسی سریع - درخت رندر
مقایسه DOM، CSSOM، و Render Tree
Render Tree - Layout
مشاهده فرآیند Layout در DevTools
Render Tree - Paint
بازگشت
منابع مسدودسازی رندر:
Render Blocking Resources - مقدمه
چگونه CSS را مسدود کنیم بدون رندر (نکته: پرسش‌های رسانه)
انواع رسانه - مثال
آیا JavaScript Render Blocking است؟
جاوا اسکریپت و DOM
ترتیب کد شما مهم است - قسمت 1
ترتیب کد شما مهم است - قسمت 2 (راه حل)
جاوا اسکریپت و CSSOM
نمونه ای از جاوا اسکریپت که باید برای CSS منتظر بمانید
گام به عقب: DOM در مقابل CSSOM در مقابل جاوا اسکریپت
جاوا اسکریپت در حال مسدود کردن رندر است
رویکرد 1: قرار دادن جاوا اسکریپت در پایین صفحه
رویکرد 2: استفاده از Async
مقایسه رویکرد 1 (پایین) در مقابل رویکرد 2 (ناهمگام)
رویکرد 3: به تعویق انداختن
مقایسه رویکرد 2 (ناهمگام) در مقابل رویکرد 3 (به تعویق انداختن)
رویکرد 4: شنونده رویداد سفارشی - قسمت 1
رویکرد 4: شنونده رویداد سفارشی - قسمت 2 (بیایید کل رندر را تجزیه و تحلیل کنیم)
Async در مقابل تعویق در مقابل سفارشی
رویکرد 5: پیش بارگیری
خلاصه ای از جایی که می توانیم JS خود را برای بهبود CRP قرار دهیم
مقدمه ای بر تجزیه نظری
تجزیه نظری چیست؟
تفریح: بیایید با هم مسیر رندر بحرانی را تحلیل کنیم:
مقدمه بخش
چرا پنل شبکه مهم است
معرفی پنل شبکه
معنی همه ستون ها در پنل شبکه چیست؟
سربرگ های پاسخ و درخواست
برگه زمان‌بندی و پشته آبشار
سه درخواست رایج شبکه که خواهید دید
فازهای زمانی - مقدمه
فازهای زمانی - توضیح مفصل
CDN - مقدمه
تجزیه و تحلیل درخواست های فایل در پنل شبکه
پنل شبکه - نمای کلی سطح بالا
تجزیه و تحلیل CRP فایل ما - بدون CSS و بدون JS
ستون اندازه چیست؟
چگونه تعداد منابع حیاتی و رفت و برگشت سرور را شناسایی کنیم
بیایید جاوا اسکریپت و CSS را اضافه کنیم
ارائه فایل جدید ما با جاوا اسکریپت و CSS
تاثیر جاوا اسکریپت و CSS بر CRP ما
جاوا اسکریپت درون خطی
افزودن ASYNC به فایل ما و تأثیر آن بر CRP
مراحل بهینه سازی مسیر رندر بحرانی
فانوس دریایی حسابرسی - مقدمه
فانوس دریایی حسابرسی - مثال
HTTP/2 چیست؟ :
معرفی بخش
HTTP/1.1 - خلاصه
HTTP/2 - از کجا آمده است؟
HTTP/2 - چیست؟
HTTP/2 پرسش و پاسخ