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

Поділитися
Вставка
  • Опубліковано 8 вер 2024

КОМЕНТАРІ • 52

  • @MSEIN2303
    @MSEIN2303 6 місяців тому

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

  • @khashayarashuri1441
    @khashayarashuri1441 Місяць тому

    بسیار عالی

  • @user-xr3fi1ld1p
    @user-xr3fi1ld1p 6 місяців тому

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

  • @mahdardavari3585
    @mahdardavari3585 8 місяців тому

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

  • @SashaGamer479
    @SashaGamer479 8 місяців тому

    عالی بود

  • @mkal1375
    @mkal1375 9 місяців тому

    عالی

  • @kimiazabeti6689
    @kimiazabeti6689 8 місяців тому

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

  • @AmirrezaAP-jz8en
    @AmirrezaAP-jz8en 6 місяців тому

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

    • @nima_arf
      @nima_arf  6 місяців тому

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

  • @hosseinsamani348
    @hosseinsamani348 8 місяців тому

    مفید بود

  • @mohammadreza5714
    @mohammadreza5714 9 місяців тому +1

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

    • @nima_arf
      @nima_arf  9 місяців тому

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

  • @FrontEndi-com
    @FrontEndi-com 9 місяців тому

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

  • @sheyda_arf
    @sheyda_arf 9 місяців тому

    عالی🔥

  • @amirhosein-hr7zp
    @amirhosein-hr7zp Місяць тому

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

  • @VahidHosseinzadeh
    @VahidHosseinzadeh Місяць тому

    عالی بود مرسی

    • @nima_arf
      @nima_arf  Місяць тому

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

  • @iranflutter7428
    @iranflutter7428 9 місяців тому

    Perfect

  • @alifcpr
    @alifcpr 8 місяців тому

    عالی بود 🔥🔥

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r 9 місяців тому

    awsome

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r 9 місяців тому

    perfect

  • @aminda6862
    @aminda6862 9 місяців тому

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

  • @mohamadaminmoslemi6989
    @mohamadaminmoslemi6989 9 місяців тому

    بهترینی 🔥🔥🔥🔥

    • @nima_arf
      @nima_arf  9 місяців тому +1

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

    • @mohamadaminmoslemi6989
      @mohamadaminmoslemi6989 9 місяців тому

      😍🤣@@nima_arf

  • @alirezasoltan78
    @alirezasoltan78 9 місяців тому

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

  • @mohammadreza5714
    @mohammadreza5714 9 місяців тому +1

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

  • @zabiharab5183
    @zabiharab5183 8 місяців тому

    👍👍

  • @alialipour9061
    @alialipour9061 9 місяців тому

    خیلی مفید بود

  • @ghazaleniazi5855
    @ghazaleniazi5855 9 місяців тому

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

  • @arashjahanbakhshan3697
    @arashjahanbakhshan3697 9 місяців тому

    عالی 🔥🔥

  • @mbeheshtis
    @mbeheshtis 9 місяців тому

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

  • @MSEIN2303
    @MSEIN2303 6 місяців тому

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

    • @nima_arf
      @nima_arf  6 місяців тому

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

  • @farnoodlotfali4912
    @farnoodlotfali4912 9 місяців тому

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r 9 місяців тому

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

  • @MSEIN2303
    @MSEIN2303 6 місяців тому

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

    • @nima_arf
      @nima_arf  6 місяців тому +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  6 місяців тому +1

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

  • @xxmahdixx4261
    @xxmahdixx4261 9 місяців тому

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

    • @nima_arf
      @nima_arf  9 місяців тому

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

    • @xxmahdixx4261
      @xxmahdixx4261 9 місяців тому

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

  • @mohammadnaderi13
    @mohammadnaderi13 9 місяців тому

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

    • @nima_arf
      @nima_arf  8 місяців тому

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

  • @benyamin4634
    @benyamin4634 8 місяців тому

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

    • @nima_arf
      @nima_arf  8 місяців тому

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

  • @theweirdamir
    @theweirdamir 8 місяців тому

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

    • @nima_arf
      @nima_arf  8 місяців тому +1

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

  • @mahdardavari3585
    @mahdardavari3585 8 місяців тому

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

  • @user-yi3rq7jk2r
    @user-yi3rq7jk2r 9 місяців тому

    عالی

  • @tahmasbtabar
    @tahmasbtabar 9 місяців тому

    perfect