همانطور که ما سایت‌هایی را می‌سازیم که بیشتر به جاوا اسکریپت متکی هستند، گاهی اوقات هزینه‌هایی را که ارسال می‌کنیم به روشی پرداخت می‌کنیم که همیشه نمی‌توانیم به راحتی آن را ببینیم. در این مقاله، به این خواهیم پرداخت که چرا اگر می‌خواهید سایت شما به سرعت در دستگاه‌های تلفن همراه بارگیری و تعامل داشته باشد، کمی نظم می‌تواند به شما کمک کند. ارائه جاوا اسکریپت کمتر می تواند به معنای زمان کمتر در انتقال شبکه، صرف کمتر فشرده سازی کد و زمان کمتری برای تجزیه و کامپایل این جاوا اسکریپت باشد.
شبکه
وقتی اکثر توسعه دهندگان به هزینه جاوا اسکریپت فکر می کنند، از نظر هزینه دانلود و اجرا به آن فکر می کنند. ارسال بایت های بیشتر جاوا اسکریپت از طریق سیم، هر چه سرعت اتصال کاربر کندتر باشد، بیشتر طول می کشد.
این می تواند یک مشکل باشد، زیرا نوع اتصال شبکه موثر یک کاربر ممکن است در واقع 3G، 4G یا Wi-Fi نباشد. می‌توانید از Wi-Fi کافی‌شاپ استفاده کنید، اما به یک نقطه اتصال تلفن همراه با سرعت ۲G متصل باشید.
می توانید هزینه انتقال شبکه جاوا اسکریپت را از طریق زیر کاهش دهید :
- فقط ارسال کد مورد نیاز یک کاربر .
- از تقسیم کد برای تقسیم جاوا اسکریپت خود به موارد مهم و غیر ضروری استفاده کنید. بسته‌کننده‌های ماژول مانند بسته وب از تقسیم کد پشتیبانی می‌کنند.
- بارگذاری تنبل در کدهایی که غیر بحرانی هستند.
- کوچک سازی
- از UglifyJS برای کوچک کردن کد ES5 استفاده کنید.
- برای کوچک کردن ES2015+ از babel-minify یا uglify-es استفاده کنید.
- فشرده سازی
- حذف کدهای استفاده نشده
- فرصت‌هایی را برای کدهایی که می‌توانند با پوشش کد DevTools حذف یا بارگذاری شوند، شناسایی کنید.
- از babel-preset-env و فهرست مرورگر برای جلوگیری از انتقال ویژگی های موجود در مرورگرهای مدرن استفاده کنید. توسعه دهندگان پیشرفته ممکن است تجزیه و تحلیل دقیق بسته های وب بسته خود را پیدا کنند که به شناسایی فرصت هایی برای کاهش وابستگی های غیر ضروری کمک می کند.
- برای حذف کد، بهینه سازی های پیشرفته Closure Compiler و پلاگین های برش کتابخانه مانند lodash-babel-plugin یا ContextReplacementPlugin webpack را برای کتابخانه هایی مانند Moment.js ببینید.
- ذخیره کد برای به حداقل رساندن سفرهای شبکه
- از حافظه پنهان HTTP برای اطمینان از اینکه مرورگرها به طور موثر پاسخ های حافظه پنهان را ذخیره می کنند، استفاده کنید. تعیین طول عمر بهینه برای اسکریپت ها (حداکثر سن) و نشانه های اعتبارسنجی عرضه (ETag) برای جلوگیری از انتقال بایت های بدون تغییر.
- ذخیره سازی Service Worker می تواند شبکه برنامه شما را انعطاف پذیر کند و به شما امکان دسترسی مشتاقانه به ویژگی هایی مانند حافظه پنهان کد V8 را بدهد.
- برای جلوگیری از واکشی مجدد منابعی که تغییر نکرده اند، از کش طولانی مدت استفاده کنید. اگر از Webpack استفاده می کنید، به هش نام فایل مراجعه کنید.
تجزیه / کامپایل
پس از دانلود، یکی از سنگین‌ترین هزینه‌های جاوا اسکریپت، زمانی است که موتور JS این کد را تجزیه/کامپایل کند . در Chrome DevTools ، تجزیه و کامپایل بخشی از زمان زرد رنگ «اسکریپت‌نویسی» در پانل عملکرد است.
برگه های Bottom-Up و Call Tree زمان بندی دقیق تجزیه/کامپایل را به شما نشان می دهند:
اما، چرا این مهم است؟
صرف زمان طولانی برای تجزیه / کامپایل کد می تواند به شدت سرعت تعامل کاربر با سایت شما را به تاخیر بیندازد. هر چه جاوا اسکریپت بیشتری بفرستید، تجزیه و کامپایل آن قبل از تعامل سایت شما بیشتر طول می کشد.
بایت به بایت، پردازش جاوا اسکریپت برای مرورگر گران‌تر از تصویر یا فونت وب با اندازه معادل است - تام دیل
در مقایسه با جاوا اسکریپت، هزینه‌های متعددی برای پردازش تصاویر با اندازه‌های هم ارز وجود دارد (آنها هنوز باید رمزگشایی شوند!) اما به طور متوسط سخت‌افزار موبایل، JS احتمالاً تأثیر منفی بر تعامل صفحه دارد.
وقتی از کند بودن تجزیه و کامپایل صحبت می کنیم. زمینه مهم است - ما در اینجا در مورد تلفن های همراه متوسط صحبت می کنیم. کاربران متوسط می توانند تلفن هایی با CPU و GPU کند، بدون حافظه نهان L2/L3 داشته باشند و حتی ممکن است حافظه آنها محدود باشد.
قابلیت‌های شبکه و قابلیت‌های دستگاه همیشه با هم مطابقت ندارند. کاربر با اتصال Fiber شگفت انگیز لزوماً بهترین CPU را برای تجزیه و ارزیابی جاوا اسکریپت ارسال شده به دستگاه خود ندارد. این در معکوس نیز صدق می کند... یک اتصال شبکه وحشتناک، اما یک CPU فوق العاده سریع. - کریستوفر باکستر، لینکدین
در زیر می‌توانیم هزینه تجزیه ~ 1 مگابایت جاوا اسکریپت غیرفشرده (ساده) را روی سخت‌افزارهای پایین و پیشرفته ببینیم. بین سریع‌ترین تلفن‌های موجود در بازار و تلفن‌های معمولی، بین ۲ تا ۵ برابر زمان تجزیه/کامپایل کد تفاوت وجود دارد .
در مورد یک سایت دنیای واقعی، مانند CNN.com چطور؟
در iPhone 8 رده بالا، تجزیه/کامپایل کردن JS CNN فقط 4 ثانیه طول می کشد در حالی که برای یک گوشی متوسط (Moto G4) 13 ثانیه طول می کشد . این می تواند به طور قابل توجهی بر سرعت تعامل کامل کاربر با این سایت تأثیر بگذارد.
این امر اهمیت تست کردن سخت افزار متوسط (مانند Moto G4) را به جای فقط تلفنی که ممکن است در جیب شما باشد، برجسته می کند. با این حال، زمینه اهمیت دارد: برای دستگاه و شرایط شبکه که کاربران شما دارند بهینه سازی کنید.
آیا واقعاً جاوا اسکریپت زیادی ارسال می کنیم؟ اشتباه، احتمالا :)
با استفاده از بایگانی HTTP (حدود 500 هزار سایت برتر) برای تجزیه و تحلیل وضعیت جاوا اسکریپت در تلفن همراه ، می بینیم که 50٪ سایت ها بیش از 14 ثانیه طول می کشد تا تعاملی شوند. این سایت ها تا 4 ثانیه را صرف تجزیه و کامپایل JS می کنند.
زمان لازم برای واکشی و پردازش JS و سایر منابع را در نظر بگیرید و شاید تعجب آور نباشد که کاربران می توانند مدتی منتظر بمانند تا اینکه صفحات احساس کنند آماده استفاده هستند. ما قطعاً می توانیم در اینجا بهتر عمل کنیم.
حذف جاوا اسکریپت غیر بحرانی از صفحات شما می تواند زمان انتقال، تجزیه و کامپایل فشرده CPU و سربار حافظه احتمالی را کاهش دهد. این همچنین به تعامل سریعتر صفحات شما کمک می کند.
زمان اجرا
فقط تجزیه و کامپایل نیست که می تواند هزینه داشته باشد. اجرای جاوا اسکریپت (در حال اجرا کد پس از تجزیه / کامپایل) یکی از عملیاتی است که باید در رشته اصلی اتفاق بیفتد. زمان های طولانی اجرا همچنین می تواند نشان دهد که کاربر چقدر زود می تواند با سایت شما تعامل داشته باشد.
اگر اسکریپت برای بیش از 50 میلی‌ثانیه اجرا شود، زمان تعامل با کل مدت زمانی که برای دانلود، کامپایل و اجرای JS طول می‌کشد به تأخیر می‌افتد - الکس راسل.
برای رفع این مشکل، جاوا اسکریپت از قرار گرفتن در تکه های کوچک برای جلوگیری از قفل شدن موضوع اصلی سود می برد. بررسی کنید که آیا می توانید میزان کار انجام شده در طول اجرا را کاهش دهید.
دیگر هزینه ها
جاوا اسکریپت می تواند بر عملکرد صفحه به روش های دیگری تأثیر بگذارد:
- حافظه صفحات ممکن است به دلیل GC (جمع‌آوری زباله) به طور مکرر به حالت jank یا مکث ظاهر شوند. هنگامی که یک مرورگر حافظه را بازیابی می کند، اجرای JS متوقف می شود، بنابراین مرورگری که به طور مکرر زباله جمع آوری می کند، می تواند اجرای را بیشتر از آنچه ما دوست داریم متوقف کند. از نشت حافظه و مکث های مکرر gc خودداری کنید تا صفحات بدون jank نگه دارند.
- در طول زمان اجرا، جاوا اسکریپت طولانی مدت می تواند رشته اصلی را مسدود کند که باعث ایجاد صفحاتی که پاسخگو نیستند. تقسیم کار به قطعات کوچکتر (با استفاده از
requestAnimationFrame()یاrequestIdleCallback()برای زمان بندی) می تواند مشکلات پاسخگویی را به حداقل برساند که می تواند به بهبود Interaction to Next Paint (INP) کمک کند.
الگوهایی برای کاهش هزینه تحویل جاوا اسکریپت
وقتی می‌خواهید زمان‌های تجزیه/کامپایل و انتقال شبکه را برای جاوا اسکریپت کند نگه دارید، الگوهایی وجود دارند که می‌توانند کمک کنند مانند قطعه‌سازی مبتنی بر مسیر یا PRPL .
PRPL
PRPL (Push، Render، Pre-cache، Lazy-load) الگویی است که برای تعامل از طریق تقسیم کد و ذخیره سازی تهاجمی بهینه می شود:
بیایید تاثیری که می تواند داشته باشد را تجسم کنیم.
ما زمان بارگذاری سایت‌های محبوب تلفن همراه و برنامه‌های وب پیشرو را با استفاده از آمار تماس‌های زمان اجرا V8 تجزیه و تحلیل می‌کنیم. همانطور که می بینیم، زمان تجزیه (به رنگ نارنجی نشان داده شده است) بخش قابل توجهی از جایی است که بسیاری از این سایت ها وقت خود را در آن سپری می کنند:
Wego ، سایتی که از PRPL استفاده می‌کند، می‌تواند زمان تجزیه کمی را برای مسیرهای خود حفظ کند و خیلی سریع تعاملی می‌شود. بسیاری از سایت‌های دیگر در بالا، بودجه‌های تقسیم کد و عملکرد را برای کاهش هزینه‌های JS خود اتخاذ کردند.
بوت استرپینگ پیشرو
بسیاری از سایت‌ها دید محتوا را با هزینه تعاملی بهینه می‌کنند. زمانی که بسته‌های جاوا اسکریپت بزرگی دارید، توسعه‌دهندگان گاهی اوقات از رندر سمت سرور استفاده می‌کنند. سپس زمانی که جاوا اسکریپت در نهایت واکشی شد، آن را "ارتقا" کنید تا کنترل کننده های رویداد را ضمیمه کنید.
مراقب باشید - این هزینه های خاص خود را دارد. شما 1) به طور کلی یک پاسخ HTML بزرگتر ارسال می کنید که می تواند تعامل ما را تحریک کند، 2) می توانید کاربر را در یک دره عجیب و غریب رها کنید که در آن نیمی از تجربه واقعاً نمی تواند تعاملی باشد تا زمانی که جاوا اسکریپت پردازش را به پایان برساند.
Bootstrapping پیشرو ممکن است رویکرد بهتری باشد. یک صفحه با حداقل عملکرد (که فقط از HTML/JS/CSS مورد نیاز برای مسیر فعلی تشکیل شده است) ارسال کنید. با رسیدن منابع بیشتر، برنامه می‌تواند ویژگی‌های بیشتری را بارگیری و باز کند.
کد بارگیری متناسب با آنچه در نظر است جام مقدس است. PRPL و Progressive Bootstrapping الگوهایی هستند که می توانند به انجام این امر کمک کنند.
نتیجه گیری
اندازه انتقال برای شبکه های پایین بسیار مهم است. زمان تجزیه برای دستگاه های متصل به CPU مهم است. پایین نگه داشتن این مسائل
تیم ها با اتخاذ بودجه های عملکردی سختگیرانه برای پایین نگه داشتن زمان انتقال جاوا اسکریپت و تجزیه/کامپایل خود موفق شده اند. برای راهنمایی در مورد بودجه تلفن همراه، " آیا می توانید آن را بپردازید؟: بودجه های عملکرد وب در دنیای واقعی " الکس راسل را ببینید.
اگر سایتی می‌سازید که دستگاه‌های تلفن همراه را هدف قرار می‌دهد، تمام تلاش خود را برای توسعه بر روی سخت‌افزار معرف انجام دهید، زمان تجزیه و کامپایل جاوا اسکریپت خود را پایین نگه دارید و برای اطمینان از اینکه تیم شما می‌تواند هزینه‌های جاوا اسکریپت خود را زیر نظر داشته باشد، بودجه عملکردی را اتخاذ کنید.
بیشتر بدانید
- Chrome Dev Summit 2017 - بهترین روش‌های بارگیری مدرن
- عملکرد راه اندازی جاوا اسکریپت
- حل بحران عملکرد وب - نولان لاوسون
- توانایی پرداختش را داری؟ بودجه عملکرد در دنیای واقعی - الکس راسل
- ارزیابی چارچوب ها و کتابخانه های وب - کریستوفر باکستر
- نتایج آزمایش Cloudflare با Brotli برای فشرده‌سازی (توجه داشته باشید که Brotli پویا با کیفیت بالاتر می‌تواند رندر صفحه اولیه را به تاخیر بیندازد، بنابراین با دقت ارزیابی کنید. احتمالاً می‌خواهید به‌جای آن فشرده‌سازی استاتیکی انجام دهید.)
- عملکرد آینده - سام ساکون