Lee Stott
2daab5271b
|
3 weeks ago | |
|---|---|---|
| .. | ||
| README.md | 3 weeks ago | |
| assignment.md | 4 weeks ago | |
README.md
پروژه افزونه مرورگر بخش ۳: آشنایی با وظایف پس‌زمینه و عملکرد
آزمون پیش از درس
مقدمه
در دو درس قبلی این ماژول، یاد گرفتید که چگونه یک فرم و بخش نمایش برای داده‌های دریافت‌شده از یک API بسازید. این یک روش استاندارد برای ایجاد حضور در وب است. حتی یاد گرفتید که چگونه داده‌ها را به صورت غیرهمزمان دریافت کنید. افزونه مرورگر شما تقریباً کامل شده است.
تنها مدیریت برخی وظایف پس‌زمینه باقی مانده است، از جمله به‌روزرسانی رنگ آیکون افزونه. بنابراین، این زمان مناسبی است تا درباره نحوه مدیریت این نوع وظایف توسط مرورگر صحبت کنیم. بیایید این وظایف مرورگر را در زمینه عملکرد دارایی‌های وب شما هنگام ساخت آن‌ها بررسی کنیم.
اصول عملکرد وب
"عملکرد وب‌سایت به دو چیز بستگی دارد: سرعت بارگذاری صفحه و سرعت اجرای کد در آن." -- زک گروس‌بارت
موضوع اینکه چگونه وب‌سایت‌های خود را برای انواع دستگاه‌ها، کاربران و شرایط به سرعت بالا برسانید، به طرز قابل پیش‌بینی گسترده است. در اینجا چند نکته وجود دارد که هنگام ساخت یک پروژه وب استاندارد یا افزونه مرورگر باید به آن‌ها توجه کنید.
اولین کاری که باید انجام دهید تا مطمئن شوید سایت شما به طور کارآمد اجرا می‌شود، جمع‌آوری داده‌هایی درباره عملکرد آن است. اولین جایی که می‌توانید این کار را انجام دهید، ابزارهای توسعه‌دهنده مرورگر وب شماست. در Edge، می‌توانید دکمه "تنظیمات و بیشتر" (آیکون سه نقطه در گوشه بالا سمت راست مرورگر) را انتخاب کنید، سپس به مسیر More Tools > Developer Tools بروید و تب Performance را باز کنید. همچنین می‌توانید از میانبرهای صفحه‌کلید Ctrl + Shift + I در ویندوز یا Option + Command + I در مک برای باز کردن ابزارهای توسعه‌دهنده استفاده کنید.
تب Performance شامل یک ابزار پروفایلینگ است. یک وب‌سایت را باز کنید (برای مثال، https://www.microsoft.com) و دکمه 'Record' را کلیک کنید، سپس سایت را تازه‌سازی کنید. ضبط را در هر زمان متوقف کنید، و می‌توانید روتین‌هایی را که برای 'script'، 'render' و 'paint' سایت تولید شده‌اند مشاهده کنید:
✅ به مستندات مایکروسافت درباره پنل Performance در Edge مراجعه کنید.
نکته: برای دریافت یک خوانش دقیق از زمان راه‌اندازی وب‌سایت خود، کش مرورگر خود را پاک کنید.
عناصر تایم‌لاین پروفایل را انتخاب کنید تا روی رویدادهایی که هنگام بارگذاری صفحه شما اتفاق می‌افتند زوم کنید.
یک نمای کلی از عملکرد صفحه خود را با انتخاب بخشی از تایم‌لاین پروفایل و مشاهده پنل خلاصه دریافت کنید:
پنل Event Log را بررسی کنید تا ببینید آیا رویدادی بیش از ۱۵ میلی‌ثانیه طول کشیده است:
✅ پروفایلر خود را بشناسید! ابزارهای توسعه‌دهنده را در این سایت باز کنید و ببینید آیا گلوگاهی وجود دارد. کدام دارایی کندترین بارگذاری را دارد؟ سریع‌ترین کدام است؟
بررسی‌های پروفایلینگ
به طور کلی، برخی "مناطق مشکل‌دار" وجود دارند که هر توسعه‌دهنده وب باید هنگام ساخت یک سایت مراقب آن‌ها باشد تا از سورپرایزهای ناخوشایند هنگام استقرار در تولید جلوگیری کند.
اندازه دارایی‌ها: وب در سال‌های اخیر "سنگین‌تر" و در نتیجه کندتر شده است. بخشی از این وزن به استفاده از تصاویر مربوط می‌شود.
✅ به آرشیو اینترنت نگاهی بیندازید تا نمای تاریخی از وزن صفحات و موارد دیگر را مشاهده کنید.
یک روش خوب این است که مطمئن شوید تصاویر شما بهینه شده‌اند و با اندازه و وضوح مناسب برای کاربران شما ارائه می‌شوند.
پیمایش DOM: مرورگر باید مدل شیء سند (DOM) خود را بر اساس کدی که می‌نویسید بسازد، بنابراین به نفع عملکرد خوب صفحه است که تگ‌های خود را به حداقل برسانید و فقط از آنچه صفحه نیاز دارد استفاده کنید و آن را استایل دهید. به این نکته، CSS اضافی مرتبط با یک صفحه می‌تواند بهینه شود؛ استایل‌هایی که فقط در یک صفحه نیاز هستند، نیازی به گنجاندن در فایل اصلی استایل ندارند.
جاوااسکریپت: هر توسعه‌دهنده جاوااسکریپت باید مراقب اسکریپت‌های "مسدودکننده رندر" باشد که باید قبل از پیمایش و نقاشی بقیه DOM به مرورگر بارگذاری شوند. استفاده از defer با اسکریپت‌های داخلی خود را در نظر بگیرید (همانطور که در ماژول Terrarium انجام شده است).
✅ برخی سایت‌ها را در یک وب‌سایت تست سرعت سایت امتحان کنید تا درباره بررسی‌های رایج برای تعیین عملکرد سایت بیشتر بدانید.
حالا که ایده‌ای از نحوه رندر دارایی‌های مرورگر دارید، بیایید به آخرین مواردی که باید برای تکمیل افزونه خود انجام دهید نگاهی بیندازیم:
ایجاد یک تابع برای محاسبه رنگ
در فایل /src/index.js، یک تابع به نام calculateColor() بعد از مجموعه متغیرهای const که برای دسترسی به DOM تنظیم کرده‌اید اضافه کنید:
function calculateColor(value) {
let co2Scale = [0, 150, 600, 750, 800];
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
let closestNum = co2Scale.sort((a, b) => {
return Math.abs(a - value) - Math.abs(b - value);
})[0];
console.log(value + ' is closest to ' + closestNum);
let num = (element) => element > closestNum;
let scaleIndex = co2Scale.findIndex(num);
let closestColor = colors[scaleIndex];
console.log(scaleIndex, closestColor);
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}
اینجا چه اتفاقی می‌افتد؟ شما یک مقدار (شدت کربن) را از تماس API که در درس قبلی تکمیل کردید، ارسال می‌کنید و سپس محاسبه می‌کنید که مقدار آن چقدر به شاخص ارائه‌شده در آرایه رنگ‌ها نزدیک است. سپس نزدیک‌ترین مقدار رنگ را به کروم runtime ارسال می‌کنید.
کروم.runtime دارای یک API است که انواع وظایف پس‌زمینه را مدیریت می‌کند و افزونه شما از آن استفاده می‌کند:
"از API کروم.runtime برای بازیابی صفحه پس‌زمینه، بازگرداندن جزئیات مربوط به manifest، و گوش دادن و پاسخ دادن به رویدادها در چرخه عمر برنامه یا افزونه استفاده کنید. همچنین می‌توانید از این API برای تبدیل مسیر نسبی URLها به URLهای کاملاً واجد شرایط استفاده کنید."
✅ اگر این افزونه مرورگر را برای Edge توسعه می‌دهید، ممکن است تعجب کنید که از API کروم استفاده می‌کنید. نسخه‌های جدیدتر مرورگر Edge بر روی موتور مرورگر Chromium اجرا می‌شوند، بنابراین می‌توانید از این ابزارها استفاده کنید.
توجه داشته باشید، اگر می‌خواهید یک افزونه مرورگر را پروفایل کنید، ابزارهای توسعه‌دهنده را از داخل خود افزونه راه‌اندازی کنید، زیرا این افزونه یک نمونه مرورگر جداگانه است.
تنظیم رنگ پیش‌فرض آیکون
حالا، در تابع init()، آیکون را به صورت سبز عمومی تنظیم کنید تا با دوباره فراخوانی اکشن updateIcon کروم شروع شود:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
فراخوانی تابع، اجرای تماس
سپس، تابعی که تازه ایجاد کردید را با افزودن آن به وعده بازگشتی توسط API سیگنال CO2 فراخوانی کنید:
//let CO2...
calculateColor(CO2);
و در نهایت، در فایل /dist/background.js، شنونده‌ای برای این تماس‌های اکشن پس‌زمینه اضافه کنید:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
return context.getImageData(50, 50, 100, 100);
}
در این کد، شما یک شنونده برای هر پیامی که به مدیر وظایف پس‌زمینه می‌رسد اضافه می‌کنید. اگر نام آن 'updateIcon' باشد، کد بعدی اجرا می‌شود تا یک آیکون با رنگ مناسب با استفاده از API Canvas رسم شود.
✅ در درس‌های بازی فضایی درباره API Canvas بیشتر خواهید آموخت.
حالا، افزونه خود را دوباره بسازید (npm run build)، آن را تازه‌سازی و راه‌اندازی کنید و تغییر رنگ را مشاهده کنید. آیا زمان مناسبی برای انجام کارهای دیگر یا شستن ظروف است؟ حالا می‌دانید!
تبریک می‌گوییم، شما یک افزونه مرورگر مفید ساخته‌اید و درباره نحوه عملکرد مرورگر و نحوه پروفایل کردن عملکرد آن بیشتر یاد گرفته‌اید.
🚀 چالش
برخی وب‌سایت‌های متن‌باز که مدت‌ها پیش ایجاد شده‌اند را بررسی کنید و بر اساس تاریخچه GitHub آن‌ها ببینید آیا می‌توانید تعیین کنید که چگونه در طول سال‌ها برای عملکرد بهینه شده‌اند، اگر اصلاً بهینه شده باشند. رایج‌ترین نقطه درد کدام است؟
آزمون پس از درس
مرور و مطالعه شخصی
در نظر داشته باشید که برای یک خبرنامه عملکرد ثبت‌نام کنید.
برخی از روش‌هایی که مرورگرها عملکرد وب را ارزیابی می‌کنند را با بررسی تب‌های عملکرد در ابزارهای وب آن‌ها بررسی کنید. آیا تفاوت‌های عمده‌ای پیدا می‌کنید؟
تکلیف
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است حاوی خطاها یا نادرستی‌هایی باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفه‌ای انسانی توصیه می‌شود. ما هیچ مسئولیتی در قبال سوءتفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.