آموزش اسرار توسعه وب فاش شد - مسیر رندر بحرانی، HTTP، AJAX و موارد دیگر [ویدئو]

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

معرفی Introduction

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

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

• معرفی Introduction

• معرفی Introduction

• آنچه این دوره شامل می شود What This Course Covers

• آنچه این دوره شامل می شود What This Course Covers

• نحوه استفاده از مرورگرها برای درخواست داده How Browsers Used to Make Data Requests

• نحوه استفاده از مرورگرها برای درخواست داده How Browsers Used to Make Data Requests

• AJAX - مقدمه AJAX - Introduction

• AJAX - مقدمه AJAX - Introduction

• گام سریع به عقب Quick Step Back

• گام سریع به عقب Quick Step Back

• XMLHttpRequest - مقدمه XMLHttpRequest - Introduction

• XMLHttpRequest - مقدمه XMLHttpRequest - Introduction

• ساختن شی XMLHttpRequest Building the XMLHttpRequest Object

• ساختن شی XMLHttpRequest Building the XMLHttpRequest Object

• برخورد با داده های پاسخ Dealing with the Response Data

• برخورد با داده های پاسخ Dealing with the Response Data

• مثال دیگر - نمایش زمان از یک سرور Another Example - Displaying Time from a Server

• مثال دیگر - نمایش زمان از یک سرور Another Example - Displaying Time from a Server

• ساخت تابع زمان سفارشی ما Building Our Custom Time Function

• ساخت تابع زمان سفارشی ما Building Our Custom Time Function

• مثال دیگر - واکشی یک تصویر و نام شخص Another Example - Fetching an Image and Person's Name

• مثال دیگر - واکشی یک تصویر و نام شخص Another Example - Fetching an Image and Person's Name

• تعریف تابع requestListener ما Defining Our requestListener Function

• تعریف تابع requestListener ما Defining Our requestListener Function

• XMLHttpRequest - خلاصه ای از تصویر و نام ما XMLHttpRequest - Summary of Our Picture and Name Example

• XMLHttpRequest - خلاصه ای از تصویر و نام ما XMLHttpRequest - Summary of Our Picture and Name Example

• Fetch - مقدمه Fetch - Introduction

• Fetch - مقدمه Fetch - Introduction

• Fetch - تنظیم آن Fetch - Setting It Up

• Fetch - تنظیم آن Fetch - Setting It Up

• Fetch - متد .json() چیست Fetch - What Is the .json() Method

• Fetch - متد .json() چیست Fetch - What Is the .json() Method

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

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

• جایگزینی XMLHttpRequest با Fetch for Our Picture and Name Example Replacing XMLHttpRequest with Fetch for Our Picture and Name Example

• جایگزینی XMLHttpRequest با Fetch for Our Picture and Name Example Replacing XMLHttpRequest with Fetch for Our Picture and Name Example

• نتیجه Conclusion

• نتیجه Conclusion

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

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

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

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

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

• درخواست مرورگرها - مقدمه Browsers Request - Introduction

• درخواست مرورگرها - مقدمه Browsers Request - Introduction

• بسته ها Packets

• بسته ها Packets

• بسته ها - پنج لایه توضیح داده شده است Packets - Five Layers Explained

• بسته ها - پنج لایه توضیح داده شده است Packets - Five Layers Explained

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

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

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

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

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

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

• یک قدم به عقب بردارید - این چیزها عملی است Take a Step Back - This Stuff Is Practical

• یک قدم به عقب بردارید - این چیزها عملی است Take a Step Back - This Stuff Is Practical

• خلاصه بخش Section Summary

• خلاصه بخش Section Summary

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

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

• معرفی Polyfill Polyfill Introduction

• معرفی Polyfill Polyfill Introduction

• مرورگر چیست What Is a Browser

• مرورگر چیست What Is a Browser

• آیا مرورگرها از مجموعه ای از استانداردها پیروی می کنند Do Browsers Follow a Set of Standards

• آیا مرورگرها از مجموعه ای از استانداردها پیروی می کنند Do Browsers Follow a Set of Standards

• پلی پر چیست؟ What Is a Polyfill?

• پلی پر چیست؟ What Is a Polyfill?

• آزمایش اینکه آیا روش forEach() در مرورگر ما وجود دارد یا خیر Testing Whether the forEach() Method Exists in Our Browser

• آزمایش اینکه آیا روش forEach() در مرورگر ما وجود دارد یا خیر Testing Whether the forEach() Method Exists in Our Browser

• ()forEach چیست؟ What Is forEach()?

• ()forEach چیست؟ What Is forEach()?

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

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

• Custom forEach() Polyfill - مقدمه Custom forEach() Polyfill - Introduction

• Custom forEach() Polyfill - مقدمه Custom forEach() Polyfill - Introduction

• سفارشی forEach() Polyfill - مرحله اول Custom forEach() Polyfill - First Step

• سفارشی forEach() Polyfill - مرحله اول Custom forEach() Polyfill - First Step

• سفارشی forEach() Polyfill - تابع Callback Custom forEach() Polyfill - Callback Function

• سفارشی forEach() Polyfill - تابع Callback Custom forEach() Polyfill - Callback Function

• این چیه؟ What Is THIS?

• این چیه؟ What Is THIS?

• سفارشی forEach() Polyfill - Final Custom forEach() Polyfill - Final

• سفارشی forEach() Polyfill - Final Custom forEach() Polyfill - Final

• خلاصه بخش Section Summary

• خلاصه بخش Section Summary

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

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

• معرفی Introduction

• معرفی Introduction

• موتور JS، موتور رندر و چسبی که همه چیز را با هم نگه می دارد (مرورگر) JS Engine, Rendering Engine, and the Glue that Holds It All Together (Browser)

• موتور 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)

• مرورگر چگونه کار می کند (مراحلی که برای واکشی داده ها و نمایش آنها انجام می شود) How the Browser Works (the Steps It Takes to Fetch Data and Display It)

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

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

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

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

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

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

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

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

• Tab Performance - DevTools Performance Tab - DevTools

• Tab Performance - DevTools Performance Tab - DevTools

• Call Tree - روشی جایگزین برای تجزیه و تحلیل فعالیت های وب سایت شما Call Tree - an Alternative Way to Analyze Your Website's Activities

• Call Tree - روشی جایگزین برای تجزیه و تحلیل فعالیت های وب سایت شما Call Tree - an Alternative Way to Analyze Your Website's Activities

• گزارش از پایین به بالا و رویداد - روشی جایگزین برای تجزیه و تحلیل فعالیت های وب سایت شما Bottom-Up and Event Log - an Alternative Way to Analyze Your Website's Activities

• گزارش از پایین به بالا و رویداد - روشی جایگزین برای تجزیه و تحلیل فعالیت های وب سایت شما Bottom-Up and Event Log - an Alternative Way to Analyze Your Website's Activities

• CSSOM - مقدمه CSSOM - Introduction

• CSSOM - مقدمه CSSOM - Introduction

• چرا باید درخت CSS داشته باشیم؟ Why Do We Need to Have a CSS Tree?

• چرا باید درخت CSS داشته باشیم؟ Why Do We Need to Have a CSS Tree?

• نحوه مشاهده فرآیند CSSOM برای وب سایت شما - محاسبه مجدد سبک How to View the CSSOM Process for Your Website - Recalculate Style

• نحوه مشاهده فرآیند CSSOM برای وب سایت شما - محاسبه مجدد سبک How to View the CSSOM Process for Your Website - Recalculate Style

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

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

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

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

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

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

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

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

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

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

• Render Tree - Layout Render Tree - Layout

• Render Tree - Layout Render Tree - Layout

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

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

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

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

• گام به عقب Step Back

• گام به عقب Step Back

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

Render Blocking Resources Render Blocking Resources

• Render Blocking Resources - مقدمه Render Blocking Resources - Introduction

• Render Blocking Resources - مقدمه Render Blocking Resources - Introduction

• چگونه CSS را مسدود کنیم بدون رندر (نکته: پرسش های رسانه ای) How to Make CSS Non-Render Blocking (Hint: Media Queries)

• چگونه CSS را مسدود کنیم بدون رندر (نکته: پرسش های رسانه ای) How to Make CSS Non-Render Blocking (Hint: Media Queries)

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

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

• آیا JavaScript Render Blocking است؟ Is JavaScript Render Blocking?

• آیا JavaScript Render Blocking است؟ Is JavaScript Render Blocking?

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

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

• ترتیب کد شما مهم است - قسمت 1 The Order of Your Code Matters - Part 1

• ترتیب کد شما مهم است - قسمت 1 The Order of Your Code Matters - Part 1

• ترتیب کد شما مهم است - قسمت 2 (راه حل) The Order of Your Code Matters - Part 2 (Solution)

• ترتیب کد شما مهم است - قسمت 2 (راه حل) The Order of Your Code Matters - Part 2 (Solution)

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

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

• نمونه ای از جاوا اسکریپت که باید برای CSS منتظر بمانید Example of JavaScript Having to Wait for the CSS

• نمونه ای از جاوا اسکریپت که باید برای CSS منتظر بمانید Example of JavaScript Having to Wait for the CSS

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

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

• جاوا اسکریپت مسدود کردن رندر است JavaScript Is Render Blocking

• جاوا اسکریپت مسدود کردن رندر است JavaScript Is Render Blocking

• رویکرد 1: جاوا اسکریپت را در پایین صفحه خود قرار دهید Approach 1: Placing JavaScript at the Bottom of Your Page

• رویکرد 1: جاوا اسکریپت را در پایین صفحه خود قرار دهید Approach 1: Placing JavaScript at the Bottom of Your Page

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

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

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

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

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

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

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

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

• رویکرد 4: شنونده رویداد سفارشی - قسمت 1 Approach 4: Custom Event Listener - Part 1

• رویکرد 4: شنونده رویداد سفارشی - قسمت 1 Approach 4: Custom Event Listener - Part 1

• رویکرد 4: شنونده رویداد سفارشی - قسمت 2 (بیایید کل رندر را تجزیه و تحلیل کنیم) Approach 4: Custom Event Listener - Part 2 (Let's Analyze the Entire Render)

• رویکرد 4: شنونده رویداد سفارشی - قسمت 2 (بیایید کل رندر را تجزیه و تحلیل کنیم) Approach 4: Custom Event Listener - Part 2 (Let's Analyze the Entire Render)

• Async در مقابل Defer در مقابل سفارشی Async Versus Defer Versus Custom

• Async در مقابل Defer در مقابل سفارشی Async Versus Defer Versus Custom

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

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

• خلاصه ای از جایی که می توانیم JS خود را برای بهبود CRP قرار دهیم Summary of Where We Can Place Our JS to Improve the CRP

• خلاصه ای از جایی که می توانیم JS خود را برای بهبود CRP قرار دهیم Summary of Where We Can Place Our JS to Improve the CRP

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

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

• تجزیه نظری چیست؟ What Is Speculative Parsing?

• تجزیه نظری چیست؟ What Is Speculative Parsing?

Render Blocking Resources Render Blocking Resources

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

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

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

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

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

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

• معنی همه ستون ها در پنل شبکه چیست؟ What Do All the Columns Mean in the Network Panel

• معنی همه ستون ها در پنل شبکه چیست؟ What Do All the Columns Mean in the Network Panel

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

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

• برگه زمان بندی و پشته آبشار Timing Tab and Waterfall Stack

• برگه زمان بندی و پشته آبشار Timing Tab and Waterfall Stack

• سه درخواست رایج شبکه که خواهید دید Three Most Common Network Requests You Will See

• سه درخواست رایج شبکه که خواهید دید Three Most Common Network Requests You Will See

• فازهای زمانی - مقدمه Time Phases - Introduction

• فازهای زمانی - مقدمه Time Phases - Introduction

• فازهای زمانی - توضیح مفصل Time Phases - Detailed Explanation

• فازهای زمانی - توضیح مفصل Time Phases - Detailed Explanation

• CDN - مقدمه CDN - An Introduction

• CDN - مقدمه CDN - An Introduction

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

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

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

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

• تجزیه و تحلیل CRP فایل ما - بدون CSS و بدون JS Analyzing Our File's CRP - No CSS and No JS

• تجزیه و تحلیل CRP فایل ما - بدون CSS و بدون JS Analyzing Our File's CRP - No CSS and No JS

• ستون اندازه چیست؟ What Is the Size Column?

• ستون اندازه چیست؟ What Is the Size Column?

• نحوه شناسایی تعداد منابع حیاتی و رفت و برگشت سرور How to Identify the Number of Critical Resources and Server Round Trips

• نحوه شناسایی تعداد منابع حیاتی و رفت و برگشت سرور How to Identify the Number of Critical Resources and Server Round Trips

• بیایید جاوا اسکریپت و CSS را اضافه کنیم Let's Add JavaScript and CSS

• بیایید جاوا اسکریپت و CSS را اضافه کنیم Let's Add JavaScript and CSS

• رندر کردن فایل جدید ما با جاوا اسکریپت و CSS Rendering Our New File with JavaScript and CSS

• رندر کردن فایل جدید ما با جاوا اسکریپت و CSS Rendering Our New File with JavaScript and CSS

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

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

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

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

• افزودن ASYNC به فایل ما و تأثیر آن بر CRP Adding ASYNC to Our File, and Its Impact on the CRP

• افزودن ASYNC به فایل ما و تأثیر آن بر CRP Adding ASYNC to Our File, and Its Impact on the CRP

• مراحلی که باید برای بهینه سازی مسیر رندر بحرانی انجام دهید Steps to Take to Optimize the Critical Rendering Path

• مراحلی که باید برای بهینه سازی مسیر رندر بحرانی انجام دهید Steps to Take to Optimize the Critical Rendering Path

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

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

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

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

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

HTTP/2 چیست؟ What Is HTTP/2?

• معرفی بخش Section introduction

• معرفی بخش Section introduction

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

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

• HTTP/2 - از کجا آمده است؟ HTTP/2 - Where Did It Come From?

• HTTP/2 - از کجا آمده است؟ HTTP/2 - Where Did It Come From?

• HTTP/2 - چیست؟ HTTP/2 - What Is It?

• HTTP/2 - چیست؟ HTTP/2 - What Is It?

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

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

HTTP/2 چیست؟ What Is HTTP/2?