آموزش *به روز شده* اسرار توسعه وب 2023 - CRP، HTTP، AJAX و غیره

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

معرفی Introduction

• معرفی Introduction

• بررسی اجمالی دوره Course Overview

• آنچه این دوره شامل می شود What this course covers

• چگونه مرورگرها برای درخواست داده استفاده می کردند How browsers used to make data requests

• AJAX - مقدمه AJAX - introduction

• آیا AJAX هنوز هم مربوط به امروز است؟ Is AJAX still relevant today?

• گامی سریع به عقب Quick step back

• XMLHttpRequest - مقدمه XMLHttpRequest - introduction

• مکث: کنسول چیست Pause: what is the console

• ساخت شی XMLHttpRequest Building the XMLHttpRequest object

• برخورد با داده های پاسخ Dealing with the response data

• ذخیره سازی و فایل ها Storage and files

• مثال دیگر - نمایش زمان از یک سرور Another example - displaying time from a server

• ساخت تابع زمان سفارشی ما Building our custom time function

• آیا نظم مهم است؟ Is order important?

• مثال دیگر - واکشی یک تصویر و نام افراد Another example - fetching an image and persons name

• تعریف تابع requestListener ما Defining our requestListener function

• XMLHttpRequest - خلاصه ای از نمونه تصویر و نام ما XMLHttpRequest - summary of our picture and name example

• واکشی - مقدمه Fetch - introduction

• واکشی - تنظیم آن Fetch - setting it up

• Fetch - متد .json() چیست Fetch - what is the .json() method

• واکشی - با POST Fetch - with POST

• جایگزینی XMLHttpRequest با Fetch برای مثال تصویر و نام ما Replacing XMLHttpRequest with Fetch for our picture and name example

• نتیجه Conclusion

• مرورگرها و AJAX Browsers and AJAX

پروتکل HTTP، TCP و بسته ها HTTP protocol, TCP and Packets

• عملکرد اصلی مرورگر The Browser's main functionality

• مرورگرها و W3C Browsers and W3C

• درخواست مرورگرها - مقدمه Browsers request - intro

• بسته ها Packets

• بسته ها - 5 لایه توضیح داده شده است Packets - 5 Layers Explained

• بسته ها - مثال Packets - Example

• پروتکل HTTP - مقدمه HTTP Protocol - Intro

• HTTP - درخواست و پاسخ HTTP - Request and Response

• یک قدم به عقب بردارید - این چیزها عملی است Take a step back - this stuff is practical

• مرورگرها Browsers

پیشرفته - ساخت Polyfill سفارشی Advanced - Building a Custom Polyfill

• هشدار سریع Quick caveat

• قبل از ادامه ... Before you continue ...

• پلی پر چیست؟ What is a polyfill?

• آزمایش اینکه آیا متد forEach() در مرورگر ما وجود دارد یا خیر Testing whether the forEach() method exists in our Browser

• () forEach چیست What is forEach()

• مثال عملی forEach() Practical example of forEach()

• سفارشی forEach() polyfill - مقدمه Custom forEach() polyfill - introduction

• سفارشی forEach() polyfill - مرحله اول Custom forEach() polyfill - first step

• صبر کن ... Wait ...

• سفارشی forEach() polyfill - تابع callback Custom forEach() polyfill - callback function

• این چیه What is THIS

• سفارشی forEach() polyfill - نهایی Custom forEach() polyfill - final

• Outro Outro

• پلی پرها Polyfills

مسیر رندر بحرانی - DOM، CSSOM، درخت رندر Critical Rendering Path - DOM, CSSOM, Render Tree

• معرفی Introduction

• موتور JS، موتور رندر و چسبی که همه را در کنار هم نگه می دارد (مرورگر) JS Engine, Rendering Engine and the glue that holds it all together (Browser)

• مرورگر چگونه کار می کند (مراحلی که برای واکشی داده ها و نمایش آنها انجام می شود) How the Browser works (the steps it takes to fetch data and display it)

• مسیر رندر بحرانی - مقدمه Critical Rendering Path - Introduction

• بررسی اجمالی مسیر رندر بحرانی Critical Rendering Path Overview

• ساخت DOM - قسمت 1 Constructing the DOM - Part 1

• ساخت DOM - قسمت 2 Constructing the DOM - Part 2

• جمع بندی سریع Quick Recap

• Tab Performance - DevTools Performance Tab - DevTools

• Call Tree - راهی جایگزین برای تجزیه و تحلیل فعالیت های وب سایت شما Call Tree - an alternative way to analyse your website's activities

• گزارش از پایین به بالا و رویداد - راهی جایگزین برای تجزیه و تحلیل فعالیت های وب سایت شما Bottom-Up & Event Log - an alternative way to analyse your website's activities

• CSSOM - مقدمه CSSOM - Introduction

• چرا باید یک درخت CSS داشته باشیم؟ Why do we need to have a CSS Tree?

• نحوه مشاهده فرآیند CSSOM برای وب سایت خود - محاسبه مجدد سبک How to view the CSSOM process for your website - Recalculate Style

• درخت رندر - مقدمه Render Tree - Introduction

• درخت رندر - چالش Render Tree - Challenge

• درخت رندر - راه حل Render Tree - Solution

• خلاصه سریع - درخت رندر Quick Recap - Render Tree

• مقایسه DOM، CSSOM و Render Tree Comparing the DOM, CSSOM and Render Tree

• Render Tree - Layout Render Tree - Layout

• مشاهده فرآیند Layout در DevTools Viewing the Layout process in DevTools

• درخت رندر - رنگ Render Tree - Paint

• گام به عقب Step Back

• مسیر رندر بحرانی Critical Rendering Path

Render Blocking Resources Render Blocking Resources

• Render Blocking Resources - Intro Render Blocking Resources - Intro

• نحوه مسدود کردن CSS بدون رندر (نکته: پرسش‌های رسانه‌ای) How to make CSS non-render blocking (hint: Media Queries)

• انواع رسانه - مثال Media Types - Example

• چگونه به فایل های CSS خود ارجاع دهیم How to reference your CSS files

• آیا رندر جاوا اسکریپت مسدود شده است؟ Is JavaScript render blocking?

• جاوا اسکریپت و DOM JavaScript and the DOM

• ترتیب کد شما مهم است - قسمت 1 The order of your code matters - part 1

• ترتیب کد شما مهم است - بخش 2 (راه حل) The order of your code matters - part 2 (solution)

• جاوا اسکریپت و CSSOM JavaScript and the CSSOM

• مثالی از جاوا اسکریپت که باید منتظر CSS باشد Example of JavaScript having to wait for the CSS

• گام به عقب: DOM در مقابل CSSOM در مقابل جاوا اسکریپت Step Back: DOM vs CSSOM vs JavaScript

• جاوا اسکریپت در حال مسدود کردن رندر است JavaScript is render blocking

• روش 1: جاوا اسکریپت را در پایین صفحه خود قرار دهید Approach 1: Placing JavaScript at the bottom of your page

• زمان پرسش و پاسخ Q&A time

• روش 2: استفاده از Async Approach 2: Using Async

• مقایسه رویکرد 1 (پایین) با رویکرد 2 (ناهمگام) Comparing Approach 1 (Bottom) vs Approach 2 (Async)

• رویکرد 3: به تعویق انداختن Approach 3: Defer

• مقایسه رویکرد 2 (Async) با رویکرد 3 (به تعویق انداختن) Comparing Approach 2 (Async) vs Approach 3 (Defer)

• رویکرد 4: شنونده رویداد سفارشی - قسمت 1 Approach 4: Custom event listener - part 1

• رویکرد 4: شنونده رویداد سفارشی - قسمت 2 (+ اجازه می دهد کل رندر را تجزیه و تحلیل کنیم) Approach 4: Custom event listener - part 2 (+ lets analyze the entire render)

• Async در مقابل Defer در مقابل Custom Async vs Defer vs Custom

• رویکرد 5: پیش بارگذاری Approach 5: Preload

• هشدار سریع Quick caveat

• پیش بارگذاری - اطلاعات بیشتر Preload - More Information

• پیش بارگذاری و تصاویر و نحوه تأثیر آنها بر CRP Preload & images and how they affect the CRP

• خلاصه ای از جایی که می توانیم JS خود را برای بهبود CRP قرار دهیم Summary of where we can place our JS to improve the CRP

• نمای کلی - یک صفحه Overview - One Page

• مقدمه ای بر تجزیه نظری Introduction to speculative parsing

• تجزیه نظری چیست What is speculative parsing

• تجزیه حدسی - بررسی سریع Speculative Parsing - Quick Review

• رندر آزمون مسدود کردن Render Blocking Quiz

سرگرم شدن: بیایید مسیر رندر بحرانی را با هم تحلیل کنیم Having Fun: Lets Analyze the Critical Rendering Path Together

• معرفی بخش Section introduction

• چرا پنل شبکه مهم است؟ Why is the Network Panel important

• معرفی پنل شبکه Introduction to Network Panel

• همه ستون ها در پنل شبکه به چه معنا هستند What do the all the columns mean in the Network Panel

• سرفصل های پاسخ و درخواست Response and Request Headers

• زبانه زمان بندی و پشته آبشار Timing tab and waterfall stack

• 3 رایج ترین درخواست های شبکه که خواهید دید 3 most common network requests you'll see

• مراحل زمانی - مقدمه Time phases - introduction

• چرخه حیات یک درخواست Lifecycle of a request

• مراحل زمانی - توضیح دقیق Time phases - detailed explanation

• CDN - مقدمه CDN - an introduction

• تجزیه و تحلیل درخواست های فایل در پنل شبکه Analyzing File Requests in the Network Panel

• Placeimg در حال خاموش شدن است Placeimg is shutting down

• پنل شبکه - نمای کلی سطح بالا Network Panel - High Level Overview

• در حال تجزیه و تحلیل CRP فایل ما - بدون CSS و بدون JS Analyzing our file's CRP - no CSS and no JS

• ستون اندازه چیست؟ What is the size column?

• نحوه شناسایی تعداد منابع حیاتی و رفت و برگشت سرور How to identify number of critical resources and server round trips

• اجازه دهید جاوا اسکریپت و CSS را اضافه کنیم Lets add JavaScript and CSS

• در حال ارائه فایل جدید با جاوا اسکریپت و CSS Rendering our new file with JavaScript and CSS

• تاثیر جاوا اسکریپت و CSS بر CRP ما Impact that JavaScript and CSS has on our CRP

• جاوا اسکریپت درون خطی Inline JavaScript

• افزودن ASYNC به فایل ما و تاثیر آن بر CRP Adding ASYNC to our file, and its impact on the CRP

• مراحل بهینه سازی مسیر رندر بحرانی Steps to take to optimize the Critical Rendering Path

• فانوس دریایی حسابرسی برای نجات Audit Lighthouse to the rescue

• فانوس حسابرسی - مقدمه Audit Lighthouse - Introduction

• فانوس حسابرسی - مثال Audit Lighthouse - Example

• چرا سرعت موبایل اغلب کمتر از سرعت دسکتاپ است؟ Why is mobile speed often slower than desktop speed?

• امتحان آبشار، زمان بندی و CRP Waterfall, Timing and CRP Quiz

FYI: HTTP/2 چیست FYI: What is HTTP/2

• معرفی بخش Section intro

• HTTP/1.1 - خلاصه HTTP/1.1 - Recap

• HTTP/2 - از کجا آمده است؟ HTTP/2 - where did it come from?

• HTTP/2 - آیا می دانستید؟ HTTP/2 - Did you know?

• HTTP/2 - چیست؟ HTTP/2 - what is it?

• نظر سریع در مورد HTTP/2 Quick comment on HTTP/2

• HTTP/2 پرسش و پاسخ HTTP/2 Questions and Answers

• آزمون HTTP/2 HTTP/2 Quiz

• سخنی سریع در مورد HTTP/3 Quick word about HTTP/3

بستن نظرات Closing Comments

• آفرین Well Done

• سخنرانی جایزه - بعد کجا؟ Bonus Lecture - where to next?