داخل مرورگر چه خبره! - rendering pipeline و DOM

Поделиться
HTML-код
  • Опубликовано: 2 окт 2024

Комментарии • 52

  • @mkal1375
    @mkal1375 9 месяцев назад

    عالی

  • @mohammadreza5714
    @mohammadreza5714 9 месяцев назад +1

    بعد از اون سه تا ویدئو جای یه ویدئو برای آنالیز call stack , macro task queue جاوااسکریپت خالی میمونه 🤩😂

    • @nima_arf
      @nima_arf  9 месяцев назад

      به به 😍
      اینو مینویسم تو لیست ایده ها برای ویدیو های اینده
      با این باید thenable و promise و async/await رو هم توضیح داد

  • @جوادجیتی
    @جوادجیتی 9 месяцев назад

    perfect

  • @tahmasbtabar
    @tahmasbtabar 9 месяцев назад

    perfect

  • @amirhosein-hr7zp
    @amirhosein-hr7zp 2 месяца назад

    تسلط عالی
    دانش عالی
    انتقال مطلب عالی🎉
    خودت عالی 🎉
    واقعا عالی توضیح دادی
    یعنی به بهترین شکل توضیح دادی
    لطفاً ویدیو زیاد بزار
    خودم حمایت میکنم با معرفی کردن چنل به این خوبی به دیگران
    این کمترین کاری هست که میتونیم انجام بدیم ❤

    • @nima_arf
      @nima_arf  2 месяца назад

      ❤️❤️

  • @MSEIN2303
    @MSEIN2303 7 месяцев назад

    خیلی خیلی عالی بود. واقعا لذت بردم مخصوصا واسه توضیحات قسمت layout و piant. لطفا از این سبک بیشتر فیلم بذارین

  • @khashayarashuri1441
    @khashayarashuri1441 2 месяца назад

    بسیار عالی

  • @جوادجیتی
    @جوادجیتی 9 месяцев назад

    همیشه دوست داشتم بدونم

  • @SashaGamer479
    @SashaGamer479 9 месяцев назад

    عالی بود

  • @kimiazabeti6689
    @kimiazabeti6689 9 месяцев назад

    عالی بود ممنون

  • @hosseinsamani348
    @hosseinsamani348 9 месяцев назад

    مفید بود

  • @جوادجیتی
    @جوادجیتی 9 месяцев назад

    عالی

  • @sheyda_arf
    @sheyda_arf 9 месяцев назад

    عالی🔥

  • @HosseinKamari-j2d
    @HosseinKamari-j2d 7 месяцев назад

    ممنون عالی بود از این دست ویدیو ها حتما بسازید

  • @mahdardavari3585
    @mahdardavari3585 9 месяцев назад

    عالی نیما خیلی خوب بود لذت بردم .

  • @mahdardavari3585
    @mahdardavari3585 9 месяцев назад

    عالی نیما خیلی خوب بود لذت بردم .

  • @alifcpr
    @alifcpr 8 месяцев назад

    عالی بود 🔥🔥

  • @جوادجیتی
    @جوادجیتی 9 месяцев назад

    awsome

  • @iranflutter7428
    @iranflutter7428 9 месяцев назад

    Perfect

  • @mohammadnaderi13
    @mohammadnaderi13 9 месяцев назад

    یه سوال, وقتی ما میایم از پرتال ها استفاده میکنیم و یه جورایی یه tree جداگونه به دام‌‎امون اضافه میکنیم آیا تغییراتی که روی اونم انجام میدیم باعث میشه دوباره layout و paint ما دوباره کارشون رو انجام بدن و باعث کندی بشه مثل حالت عادی؟

    • @nima_arf
      @nima_arf  9 месяцев назад

      سلامم
      ببین فرض کن یه کامپوننت داری که وقتی استییتش میشه یه عدد زوج یه کامپوننت رندر میشه وقتی میشه عدد فرد یه کامپوننت دیگه و خب این جابه‌جا شدن کامپوننت ها باعث میشه روی درخت دام المنت ها عوض بشن استایل هاشون عوض میشه و بقیه رندر پایپ لاین اتفاق میوفته
      حالا اگر این کامپوننت تو پرتال رندر بشه هم همینه و فرقی با حالت بالا نداره
      پس باعث کندی نمیشه و ری‌اکت مطمئن میشه که ما پینت به حداقل برسه

  • @zabiharab5183
    @zabiharab5183 8 месяцев назад

    👍👍

  • @farnoodlotfali4912
    @farnoodlotfali4912 9 месяцев назад

  • @MSEIN2303
    @MSEIN2303 7 месяцев назад

    لطافا یه فیلم واسه کامپای شدن جاوااسکریپت بذارین با توضیحات جزئی تر

    • @nima_arf
      @nima_arf  7 месяцев назад

      بله حتما روش کار میکنم

  • @mohammadreza5714
    @mohammadreza5714 9 месяцев назад +1

    درسته کم ویدئو میزاری ولی از کیفیت کم نمیکنی 😍👍

  • @AmirrezaAP-jz8en
    @AmirrezaAP-jz8en 6 месяцев назад

    فوق العاده بود ممنون ازتون ❤‍

    • @nima_arf
      @nima_arf  6 месяцев назад

      😍 خوشحالم که دوسش داشتی
      ویدیو های CSR vs SSR و Virtual DOM رو هم ببین اونا هم تو همین سبکن

  • @VahidHosseinzadeh
    @VahidHosseinzadeh 2 месяца назад

    عالی بود مرسی

    • @nima_arf
      @nima_arf  2 месяца назад

      خواهش میکنم، خوشحالم که مفید بوده ❤️🔥

  • @ai-force3792
    @ai-force3792 9 месяцев назад

    خیلی مفید بود

  • @benyamin4634
    @benyamin4634 9 месяцев назад

    فقط منم که وقتی میبینم صحبت میکنی یاد جادی میوفتم :)))؟

    • @nima_arf
      @nima_arf  9 месяцев назад

      اینو باید از کسایی که هم منو دنبال میکنن هم جادی و بپرسیم

  • @theweirdamir
    @theweirdamir 9 месяцев назад

    تامبنیل یه ر کم داره درستش کنید لطفا

    • @nima_arf
      @nima_arf  9 месяцев назад +1

      اوووو
      مرسی اصلا بهش دقت نکرده بودم
      یه چند دقیقه دیگه که ویدیو جدید و بزارم اینم درستش میکنم
      مرسی

  • @MSEIN2303
    @MSEIN2303 7 месяцев назад

    ببخشید میشه توضیحات بیشتری راجب main trade بدین؟

    • @nima_arf
      @nima_arf  7 месяцев назад +1

      خب ما اینو میدونیم برنامه‌هایی که ما مینویسیم توسط CPU پردازش میشن، هر CPU یک یا چند هسته داره که هرکدوم میتونن ۱ تا ۲ ترد و همزمان پردازش کنن (بعد سیستم عامل میاد با الگوریتم time slicing میاد یه تایم خیلی خیلی کمی به ترد ها اختصاص میده و هی تند تند جابه‌جاشون میکنه بین لیست تردهایی که داریم تا ما یه سیستم عامل multitask داشته باشیم - این قسمتش ارتباط مسیتقیم به سوالی که پرسیدی نداره :دی)
      حالا مرورگر چیکار میکنه!؟ به ازای هر tab که تو مرورگر باز میشه یدونه Thread میسازه
      اون thread وظیفه اینکه style calculation, layout, paint و هندل کردن ایونت ها و اجرای کدای javascript که ما نویشتیمو داره، به این میگیم main thread
      چون ازش فقط یدونه داریم اگر کلی کار بهش بدیم و مشغول نگهش داریم نمیرسه یه سری کارو سرتایمی که باید انجام بده (مثلا paint کردن فریم جدید و نمایشش رو صفحه)
      ما میتونیم ترد های بیشتری هم بسازیم، یه API هستش به نام Web Worker که خیلی قدیمی هم هستش حتی IE 9 هم ساپورتش میکنه
      شما یه worker میسازی بعد یه سری کدارو تو اون اجرا میکنی و همزمان با main thread اجرا میشه فقط تنها مشکلش اینکه به DOM دسترسی نداری (بیشتر به درد یه پردازش سنگین میخوره فرض کن داری برنامه google sheets و توسعه میدی بعد میخوای یه اپشن به کاربر بدی که یه ستون دیتارو sort بکنه و خب اگر ۱ میلیون رکورد داشته باشه اون ستون و بخوای رو main thread این کارو انجام بدی قشنگ یه چند ثانیه‌ای اپت گیر میکنه چون Main thread درگیره، ولی اگر ببریش تو worker بعد وقتی sort تموم شد نتیجه‌شو بیاری تو ترد اصلی و رو DOM بزاری دیگه این مشکلات پیش نمیاد)

    • @nima_arf
      @nima_arf  7 месяцев назад +1

      اینجا بیشتر توضیح داده اگر دوست داشتی میتونی این مقاله رو مطالعه کنی
      developer.chrome.com/blog/inside-browser-part1

  • @xxmahdixx4261
    @xxmahdixx4261 9 месяцев назад

    ویدیو بسیار مفیده ولی صدا یکم ضعیفه و اینکه اروم حرف میزنی
    به نظرم اگه یه اهنگ با صدای خیلی کمم تو بکگراند بزاری عالی میشه ویدیوهات

    • @nima_arf
      @nima_arf  9 месяцев назад

      سلامم
      مرسی که وقت گذاشتید و ویدیو و دیدید ❤️
      من یبار دیگه نگاه کردم ویدیو رو به جز اون چند ثانیه اول که موزیک بک گراند هستش، کیفیت خوبه و صدا ضعیف نیست
      لحظه خاصی از ویدیو مدنظرتون هست که صدا کم باشه یا واضح نباشه؟

    • @xxmahdixx4261
      @xxmahdixx4261 9 месяцев назад

      نه کیفیت صدا خوبه ولی نسبت به ویدیو های کانال های دیگه صدای ی ویدیو شما کمه من مجبورم صدارو اخر بزارم تا یکم بهتر بشه
      اهنگ بکگراند ربطی به کم بودن صدا نداره منظورم این بود که تو کل
      ویدیو اهنگ باشه بهتره@@nima_arf

  • @mohamadaminmoslemi6989
    @mohamadaminmoslemi6989 9 месяцев назад

    بهترینی 🔥🔥🔥🔥

    • @nima_arf
      @nima_arf  9 месяцев назад +1

      🔥🔥🔥
      (الان باید بگم چشات بهترین میبینه؟ 😂)

    • @mohamadaminmoslemi6989
      @mohamadaminmoslemi6989 9 месяцев назад

      😍🤣@@nima_arf

  • @aminda6862
    @aminda6862 9 месяцев назад

    سلطان فرانت
    چقدر خوب بود نیما جان
    منتظر ویدئو های بعدی که گفتی هستم

  • @alirezasoltan78
    @alirezasoltan78 9 месяцев назад

    بسیار عالی بود ❤️‍🔥💥از الان منتظر ویدیوهای بعدیتم

  • @ghazaleniazi5855
    @ghazaleniazi5855 9 месяцев назад

    🔥🔥 مثل همیشه عالی

  • @arashjahanbakhshan3697
    @arashjahanbakhshan3697 9 месяцев назад

    عالی 🔥🔥

  • @mbeheshtis
    @mbeheshtis 9 месяцев назад

    عالی مثل همیشه ❤🎉

  • @FrontEndi-com
    @FrontEndi-com 9 месяцев назад

    مباحث عالی و فوق العاده کاربردی بودن . دمت گرم 💥💥💥💥💥💥💥