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

آدی عثمانی
Addy Osmani

همانطور که ما سایت‌هایی را می‌سازیم که بیشتر به جاوا اسکریپت متکی هستند، گاهی اوقات هزینه‌هایی را که ارسال می‌کنیم به روشی پرداخت می‌کنیم که همیشه نمی‌توانیم به راحتی آن را ببینیم. در این مقاله، به این خواهیم پرداخت که چرا اگر می‌خواهید سایت شما به سرعت در دستگاه‌های تلفن همراه بارگیری و تعامل داشته باشد، کمی نظم می‌تواند به شما کمک کند. ارائه جاوا اسکریپت کمتر می تواند به معنای زمان کمتر در انتقال شبکه، صرف کمتر فشرده سازی کد و زمان کمتری برای تجزیه و کامپایل این جاوا اسکریپت باشد.

وقتی اکثر توسعه دهندگان به هزینه جاوا اسکریپت فکر می کنند، از نظر هزینه دانلود و اجرا به آن فکر می کنند. ارسال بایت های بیشتر جاوا اسکریپت از طریق سیم، هر چه سرعت اتصال کاربر کندتر باشد، بیشتر طول می کشد.

هنگامی که یک مرورگر منبعی را درخواست می کند، آن منبع باید واکشی شود و سپس از حالت فشرده خارج شود. در مورد منابعی مانند جاوا اسکریپت، آنها باید قبل از اجرا تجزیه و کامپایل شوند.

این می تواند یک مشکل باشد، زیرا نوع اتصال شبکه موثر یک کاربر ممکن است در واقع 3G، 4G یا Wi-Fi نباشد. می‌توانید از Wi-Fi کافی‌شاپ استفاده کنید، اما به یک نقطه اتصال تلفن همراه با سرعت ۲G متصل باشید.

می توانید هزینه انتقال شبکه جاوا اسکریپت را از طریق زیر کاهش دهید :

  • فقط ارسال کد مورد نیاز یک کاربر .
    • از تقسیم کد برای تقسیم جاوا اسکریپت خود به موارد مهم و غیر ضروری استفاده کنید. بسته‌کننده‌های ماژول مانند بسته وب از تقسیم کد پشتیبانی می‌کنند.
    • بارگذاری تنبل در کدهایی که غیر بحرانی هستند.
  • کوچک سازی
  • فشرده سازی
    • حداقل، از gzip برای فشرده سازی منابع مبتنی بر متن استفاده کنید.
    • استفاده از Brotli ~ q11 را در نظر بگیرید. بروتلی از gzip در نسبت فشرده سازی بهتر عمل می کند. این به CertSimple کمک کرد تا 17٪ در اندازه بایت های فشرده JS و LinkedIn در زمان بارگذاری آنها صرفه جویی کند.
  • حذف کدهای استفاده نشده
  • ذخیره کد برای به حداقل رساندن سفرهای شبکه
    • از حافظه پنهان HTTP برای اطمینان از اینکه مرورگرها به طور موثر پاسخ های حافظه پنهان را ذخیره می کنند، استفاده کنید. تعیین طول عمر بهینه برای اسکریپت ها (حداکثر سن) و نشانه های اعتبارسنجی عرضه (ETag) برای جلوگیری از انتقال بایت های بدون تغییر.
    • ذخیره سازی Service Worker می تواند شبکه برنامه شما را انعطاف پذیر کند و به شما امکان دسترسی مشتاقانه به ویژگی هایی مانند حافظه پنهان کد V8 را بدهد.
    • برای جلوگیری از واکشی مجدد منابعی که تغییر نکرده اند، از کش طولانی مدت استفاده کنید. اگر از Webpack استفاده می کنید، به هش نام فایل مراجعه کنید.

تجزیه / کامپایل

پس از دانلود، یکی از سنگین‌ترین هزینه‌های جاوا اسکریپت، زمانی است که موتور JS این کد را تجزیه/کامپایل کند . در Chrome DevTools ، تجزیه و کامپایل بخشی از زمان زرد رنگ «اسکریپت‌نویسی» در پانل عملکرد است.

ALT_TEXT_HERE

برگه های Bottom-Up و Call Tree زمان بندی دقیق تجزیه/کامپایل را به شما نشان می دهند:

ALT_TEXT_HERE
پانل عملکرد Chrome DevTools > پایین به بالا. با فعال کردن Runtime Call Stats V8، می توانیم زمان صرف شده در مراحلی مانند تجزیه و کامپایل را مشاهده کنیم.

اما، چرا این مهم است؟

ALT_TEXT_HERE

صرف زمان طولانی برای تجزیه / کامپایل کد می تواند به شدت سرعت تعامل کاربر با سایت شما را به تاخیر بیندازد. هر چه جاوا اسکریپت بیشتری بفرستید، تجزیه و کامپایل آن قبل از تعامل سایت شما بیشتر طول می کشد.

بایت به بایت، پردازش جاوا اسکریپت برای مرورگر گران‌تر از تصویر یا فونت وب با اندازه معادل است - تام دیل

در مقایسه با جاوا اسکریپت، هزینه‌های متعددی برای پردازش تصاویر با اندازه‌های هم ارز وجود دارد (آنها هنوز باید رمزگشایی شوند!) اما به طور متوسط ​​سخت‌افزار موبایل، JS احتمالاً تأثیر منفی بر تعامل صفحه دارد.

ALT_TEXT_HERE
جاوا اسکریپت و بایت های تصویر هزینه های بسیار متفاوتی دارند. تصاویر معمولاً رشته اصلی را مسدود نمی کنند یا از تعاملی شدن رابط ها هنگام رمزگشایی و شطرنجی جلوگیری نمی کنند. اما JS می تواند تعامل را به دلیل هزینه های تجزیه، کامپایل و اجرا به تاخیر بیندازد.

وقتی از کند بودن تجزیه و کامپایل صحبت می کنیم. زمینه مهم است - ما در اینجا در مورد تلفن های همراه متوسط ​​صحبت می کنیم. کاربران متوسط ​​می توانند تلفن هایی با CPU و GPU کند، بدون حافظه نهان L2/L3 داشته باشند و حتی ممکن است حافظه آنها محدود باشد.

قابلیت‌های شبکه و قابلیت‌های دستگاه همیشه با هم مطابقت ندارند. کاربر با اتصال Fiber شگفت انگیز لزوماً بهترین CPU را برای تجزیه و ارزیابی جاوا اسکریپت ارسال شده به دستگاه خود ندارد. این در معکوس نیز صدق می کند... یک اتصال شبکه وحشتناک، اما یک CPU فوق العاده سریع. - کریستوفر باکستر، لینکدین

در زیر می‌توانیم هزینه تجزیه ~ 1 مگابایت جاوا اسکریپت غیرفشرده (ساده) را روی سخت‌افزارهای پایین و پیشرفته ببینیم. بین سریع‌ترین تلفن‌های موجود در بازار و تلفن‌های معمولی، بین ۲ تا ۵ برابر زمان تجزیه/کامپایل کد تفاوت وجود دارد .

ALT_TEXT_HERE
این نمودار زمان تجزیه را برای یک بسته 1 مگابایتی جاوا اسکریپت (~250 کیلوبایت gzip شده) در دستگاه های دسکتاپ و تلفن همراه با کلاس های مختلف برجسته می کند. وقتی به هزینه تجزیه نگاه می کنیم، باید ارقام غیرفشرده را در نظر بگیریم، به عنوان مثال ~250KB gzipped JS به ~1MB کد از حالت فشرده خارج می شود.

در مورد یک سایت دنیای واقعی، مانند CNN.com چطور؟

در iPhone 8 رده بالا، تجزیه/کامپایل کردن JS CNN فقط 4 ثانیه طول می کشد در حالی که برای یک گوشی متوسط ​​(Moto G4) 13 ثانیه طول می کشد . این می تواند به طور قابل توجهی بر سرعت تعامل کامل کاربر با این سایت تأثیر بگذارد.

ALT_TEXT_HERE
در بالا شاهد مقایسه عملکرد تراشه A11 Bionic اپل با اسنپدراگون 617 در سخت افزار متوسط ​​تر اندروید هستیم.

این امر اهمیت تست کردن سخت افزار متوسط ​​(مانند Moto G4) را به جای فقط تلفنی که ممکن است در جیب شما باشد، برجسته می کند. با این حال، زمینه اهمیت دارد: برای دستگاه و شرایط شبکه که کاربران شما دارند بهینه سازی کنید.

ALT_TEXT_HERE
Google Analytics می‌تواند بینشی در مورد کلاس‌های دستگاه تلفن همراه که کاربران واقعی شما با آن به سایت شما دسترسی دارند، ارائه دهد. این می‌تواند فرصت‌هایی را برای درک محدودیت‌های واقعی CPU/GPU که با آن‌ها کار می‌کنند، فراهم کند.

آیا واقعاً جاوا اسکریپت زیادی ارسال می کنیم؟ اشتباه، احتمالا :)

با استفاده از بایگانی HTTP (حدود 500 هزار سایت برتر) برای تجزیه و تحلیل وضعیت جاوا اسکریپت در تلفن همراه ، می بینیم که 50٪ سایت ها بیش از 14 ثانیه طول می کشد تا تعاملی شوند. این سایت ها تا 4 ثانیه را صرف تجزیه و کامپایل JS می کنند.

ALT_TEXT_HERE

زمان لازم برای واکشی و پردازش JS و سایر منابع را در نظر بگیرید و شاید تعجب آور نباشد که کاربران می توانند مدتی منتظر بمانند تا اینکه صفحات احساس کنند آماده استفاده هستند. ما قطعاً می توانیم در اینجا بهتر عمل کنیم.

حذف جاوا اسکریپت غیر بحرانی از صفحات شما می تواند زمان انتقال، تجزیه و کامپایل فشرده CPU و سربار حافظه احتمالی را کاهش دهد. این همچنین به تعامل سریعتر صفحات شما کمک می کند.

زمان اجرا

فقط تجزیه و کامپایل نیست که می تواند هزینه داشته باشد. اجرای جاوا اسکریپت (در حال اجرا کد پس از تجزیه / کامپایل) یکی از عملیاتی است که باید در رشته اصلی اتفاق بیفتد. زمان های طولانی اجرا همچنین می تواند نشان دهد که کاربر چقدر زود می تواند با سایت شما تعامل داشته باشد.

ALT_TEXT_HERE

اگر اسکریپت برای بیش از 50 میلی‌ثانیه اجرا شود، زمان تعامل با کل مدت زمانی که برای دانلود، کامپایل و اجرای JS طول می‌کشد به تأخیر می‌افتد - الکس راسل.

برای رفع این مشکل، جاوا اسکریپت از قرار گرفتن در تکه های کوچک برای جلوگیری از قفل شدن موضوع اصلی سود می برد. بررسی کنید که آیا می توانید میزان کار انجام شده در طول اجرا را کاهش دهید.

دیگر هزینه ها

جاوا اسکریپت می تواند بر عملکرد صفحه به روش های دیگری تأثیر بگذارد:

  • حافظه صفحات ممکن است به دلیل GC (جمع‌آوری زباله) به طور مکرر به حالت jank یا مکث ظاهر شوند. هنگامی که یک مرورگر حافظه را بازیابی می کند، اجرای JS متوقف می شود، بنابراین مرورگری که به طور مکرر زباله جمع آوری می کند، می تواند اجرای را بیشتر از آنچه ما دوست داریم متوقف کند. از نشت حافظه و مکث های مکرر gc خودداری کنید تا صفحات بدون jank نگه دارند.
  • در طول زمان اجرا، جاوا اسکریپت طولانی مدت می تواند رشته اصلی را مسدود کند که باعث ایجاد صفحاتی که پاسخگو نیستند. تقسیم کار به قطعات کوچکتر (با استفاده از requestAnimationFrame() یا requestIdleCallback() برای زمان بندی) می تواند مشکلات پاسخگویی را به حداقل برساند که می تواند به بهبود Interaction to Next Paint (INP) کمک کند.

الگوهایی برای کاهش هزینه تحویل جاوا اسکریپت

وقتی می‌خواهید زمان‌های تجزیه/کامپایل و انتقال شبکه را برای جاوا اسکریپت کند نگه دارید، الگوهایی وجود دارند که می‌توانند کمک کنند مانند قطعه‌سازی مبتنی بر مسیر یا PRPL .

PRPL

PRPL (Push، Render، Pre-cache، Lazy-load) الگویی است که برای تعامل از طریق تقسیم کد و ذخیره سازی تهاجمی بهینه می شود:

ALT_TEXT_HERE

بیایید تاثیری که می تواند داشته باشد را تجسم کنیم.

ما زمان بارگذاری سایت‌های محبوب تلفن همراه و برنامه‌های وب پیشرو را با استفاده از آمار تماس‌های زمان اجرا V8 تجزیه و تحلیل می‌کنیم. همانطور که می بینیم، زمان تجزیه (به رنگ نارنجی نشان داده شده است) بخش قابل توجهی از جایی است که بسیاری از این سایت ها وقت خود را در آن سپری می کنند:

ALT_TEXT_HERE

Wego ، سایتی که از PRPL استفاده می‌کند، می‌تواند زمان تجزیه کمی را برای مسیرهای خود حفظ کند و خیلی سریع تعاملی می‌شود. بسیاری از سایت‌های دیگر در بالا، بودجه‌های تقسیم کد و عملکرد را برای کاهش هزینه‌های JS خود اتخاذ کردند.

بوت استرپینگ پیشرو

بسیاری از سایت‌ها دید محتوا را با هزینه تعاملی بهینه می‌کنند. زمانی که بسته‌های جاوا اسکریپت بزرگی دارید، توسعه‌دهندگان گاهی اوقات از رندر سمت سرور استفاده می‌کنند. سپس زمانی که جاوا اسکریپت در نهایت واکشی شد، آن را "ارتقا" کنید تا کنترل کننده های رویداد را ضمیمه کنید.

مراقب باشید - این هزینه های خاص خود را دارد. شما 1) به طور کلی یک پاسخ HTML بزرگتر ارسال می کنید که می تواند تعامل ما را تحریک کند، 2) می توانید کاربر را در یک دره عجیب و غریب رها کنید که در آن نیمی از تجربه واقعاً نمی تواند تعاملی باشد تا زمانی که جاوا اسکریپت پردازش را به پایان برساند.

Bootstrapping پیشرو ممکن است رویکرد بهتری باشد. یک صفحه با حداقل عملکرد (که فقط از HTML/JS/CSS مورد نیاز برای مسیر فعلی تشکیل شده است) ارسال کنید. با رسیدن منابع بیشتر، برنامه می‌تواند ویژگی‌های بیشتری را بارگیری و باز کند.

ALT_TEXT_HERE
Progressive Bootstrapping اثر پل لوئیس

کد بارگیری متناسب با آنچه در نظر است جام مقدس است. PRPL و Progressive Bootstrapping الگوهایی هستند که می توانند به انجام این امر کمک کنند.

نتیجه گیری

اندازه انتقال برای شبکه های پایین بسیار مهم است. زمان تجزیه برای دستگاه های متصل به CPU مهم است. پایین نگه داشتن این مسائل

تیم ها با اتخاذ بودجه های عملکردی سختگیرانه برای پایین نگه داشتن زمان انتقال جاوا اسکریپت و تجزیه/کامپایل خود موفق شده اند. برای راهنمایی در مورد بودجه تلفن همراه، " آیا می توانید آن را بپردازید؟: بودجه های عملکرد وب در دنیای واقعی " الکس راسل را ببینید.

ALT_TEXT_HERE
این مفید است که در نظر بگیریم که تصمیمات معماری که می‌گیریم چقدر می‌تواند ما را برای منطق برنامه‌ها بگذارد.

اگر سایتی می‌سازید که دستگاه‌های تلفن همراه را هدف قرار می‌دهد، تمام تلاش خود را برای توسعه بر روی سخت‌افزار معرف انجام دهید، زمان تجزیه و کامپایل جاوا اسکریپت خود را پایین نگه دارید و برای اطمینان از اینکه تیم شما می‌تواند هزینه‌های جاوا اسکریپت خود را زیر نظر داشته باشد، بودجه عملکردی را اتخاذ کنید.

بیشتر بدانید