روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی...
TRANSCRIPT
![Page 1: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/1.jpg)
چطور بفھمیم یک سایت کند است.
و بعدش چیکار کنیم!
کاظم کشاورز - دولوپر @تسکولو
![Page 2: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/2.jpg)
وقتی میگیم سایت کند شده یعنی چی؟
لود شدن فایلھای مربوط به صفحه●
تعامل با المانھای صفحه●
اسکرول صفحه○
کلیک کردن روی المنتھا○
ورود اطالعات○
حجم فایلھا، مشکل شبکه، Latency، زمان ●
پاسخ سرور
جاوااسکریپت، CSS، حجم زیاد اطالعات و ●
المنتھا، Layout و …
![Page 3: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/3.jpg)
چطوری بفھمیم یه صفحه کنده؟
یک عدد دستگاه تلفن ھمراه ھوشمند مدل خیلی خیلی جدید با ٣ گیگابایت رم و 1.
جدیدترین مدل سیپییو برداشته و با حرکات انگشت بر روی صفحه بررسی میکنیم آیا
سایت خوب کار میکند یا نه!
استفاده از ابزارھای مناسب:2.
○Chrome DevTools*
○Firefox Firebug, Developer Edition
○Safari Web Inspector
○Internet Explorer/Edge Developer Tools
![Page 4: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/4.jpg)
DevTools چی ھست؟
Chrome Devtools
![Page 5: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/5.jpg)
Elements تب
HTML نمای درختی
تغییر سریع HTML و
CSS
![Page 6: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/6.jpg)
Network تب
لیست و اطالعات
تمام درخواستھا
از سرور
![Page 7: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/7.jpg)
Timeline تب
اطالعات مربوط به
کارھایی که مرورگر
برای پردازش و
نمایش صفحه انجام
میدھد
![Page 8: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/8.jpg)
Profile تب
اطالعات مربوط به
سرعت و زمان
صرف شده در توابع
جاوااسکریپت
![Page 9: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/9.jpg)
Audits تب
نمایش اشتباھات
رایج در صفحات
(شبکه و منابع)
![Page 10: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/10.jpg)
باقی تب ھا چی؟
تب Resources: منابعی که صفحه استفاده میکنه❖❖(HTML/Javascript/CSS) متن کدھای استفاده شد در صفحه :Sources تبتب Console: اجرای کامندھای جاوااسکریپت❖
![Page 11: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/11.jpg)
چجوری از این
برای طراحی
واکنشگرا
استفاده کنیم؟
![Page 12: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/12.jpg)
چجوری از این
برای طراحی
واکنشگرا
استفاده کنیم؟
![Page 13: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/13.jpg)
اینکه ھمون دسکتاپ شد! چجوری رو موبایل تست کنیم؟
![Page 14: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/14.jpg)
لیست تبھا در
مروگر و
برنامهھای
موبایل
![Page 15: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/15.jpg)
نمای یک سایت
روی موبایل به
صورت کامل قابل
مشاھده است.
![Page 16: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/16.jpg)
براوزر چجوری صفحه رو نشون میده؟
![Page 17: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/17.jpg)
داری میگی CSS ھم کند میشه؟ مگه زبون برنامهنویسیه؟!
YES!not really!
![Page 18: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/18.jpg)
کجای CSS بیشتر کند میشه؟
ھر چیزی که باعث پردازش دوبارهی Layout بشه، مثل انیمیشن بزرگ و کوچک شدن width یک المنت.
ھر چیزی که باعث Re-flow بشه.
ھر چیزی که باعث Paint بیش از حد بشه (حد نامشخص!)
کد جاوااسکریپتی که طول بکشه، جاوااسکریپت سریعه، ولی DOM و CSSOM نه!
![Page 19: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/19.jpg)
چی باعث تغییر Layout و Re-Flow میشه؟
![Page 20: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/20.jpg)
چی مثال؟
width, height, top, left, right, bottom, margin, padding, border-width, border-collapse, box-sizing, clear, direction, display, flex, float, font, line-height, max-width, max-height, outline, overflow, position, resize, text-
align, text-shadow, visiblity, …
![Page 21: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/21.jpg)
چجوری میتونم بفھمم کجا مشکل پیش میاد؟
![Page 22: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/22.jpg)
Beauty and the Beast(hint: makeup!)
![Page 23: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/23.jpg)
![Page 24: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/24.jpg)
چی شد؟!
سایهی اضافی (box-shadow)، استفاده از text-shadow (ھرگز!)، الیهھای مات، زمینهی
شفاف، عکس شفاف و مات (transparent/opaque)، انیمیشن اضافه، تغیر سایز و مکان المنتھا
با حرکت ماوس و لمس.
![Page 25: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/25.jpg)
یعنی چی آخه؟
Simple is the new beautyjust kidding!
![Page 26: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/26.jpg)
برای تغییر اندازه و مکان از transform استفاده کنید!
از Velocity.js به جای jQuery.animate استفاده کنید!
(UX) حدف انیمیشنھای بیارزش و اضافه
از انیمیشن ترکیبی که با قسمتھای مات در ارتباطند پرھیز کنید.
requestAnimationFrame و debounce جدا پرھیز کنید (از onscroll از انجام کار زیاد دراستفاده کنید)
اینجوری نمیشه که!
![Page 27: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/27.jpg)
requestAnimationFrame
![Page 28: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/28.jpg)
Debounce
![Page 29: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/29.jpg)
جاوااسکریپت چی؟
Javascript is Fast*, DOM is slow***Not so fast to launch apollo!
**From React.js docs
![Page 30: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/30.jpg)
از Layout Thrashing پرھیز کنید
❖(FastDom و یا React اضافه کردن یکجا، استفاده از) اضافه کردن تعداد زیاد المنت پشت سرھم
دسترسی به style ھمزمان با تغییر آن❖
❖(requestAnimationFrame استفاده از) frame در ھر style تغییر زیاد
❖DOM ساختار پیچیده و حجیم
تغییر Layout (اسالیدھای قبلی و رفرنسھای آخر)❖
❖(Flexbox استفاده از) ساختار پیچیده چیدمان المانھا
❖(Just don't) تغییر ھمزمان تعداد زیادی المنت
❖(Just don't) تغییر کالس المنت باالتر که روی تعداد زیاد المنت داخلی تاثیر میگذارد
کد جاوااسکریپت زمانبر (استفاده از WebWorker، بھینه کردن کد)❖
![Page 31: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/31.jpg)
ھمش که قانون شد! کی حال داره حفظ کنه اینا رو!
Tools not Rules
![Page 32: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/32.jpg)
مثال!
rayansaba.com
![Page 33: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/33.jpg)
کروم - دسکتاپ - نمای موبایل
ھمه چیز تقریبا* روان و خوب کار
میکند.
*بعضی کارھا نسبتا کند است
ولی قابل تحمل.
![Page 34: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/34.jpg)
کروم - اندروید
اسکرول تقریبا روان (لگ کوچک)
باز کردن منوی باال بینھات کند است!
اسالیدر باالی صفحھ کند است.
![Page 35: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/35.jpg)
![Page 36: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/36.jpg)
ماھنامهی پیوست
بدون لگ
پرش منوی باال ھنگام
(js مشکل) اسکرول
![Page 37: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/37.jpg)
![Page 38: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/38.jpg)
![Page 39: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/39.jpg)
![Page 40: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/40.jpg)
![Page 41: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/41.jpg)
Thank You
![Page 42: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/42.jpg)
Resources
● https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en
● https://speakerdeck.com/paullewis/making-a-silky-smooth-web
● https://vimeo.com/125121010
● https://github.com/reddit/reddit-mobile/issues/247
● http://www.paulirish.com/2015/advanced-performance-audits-with-devtools/
● http://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
● https://gist.github.com/paulirish/5d52fb081b3570c81e3a
● https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away?hl=en
● https://developer.chrome.com/devtools
● https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-
thrashing?hl=en
![Page 43: روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی موبایل](https://reader033.vdocuments.site/reader033/viewer/2022051101/587880b21a28ab466c8b5e41/html5/thumbnails/43.jpg)
● https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
● https://stackoverflow.com/questions/27392133/in-the-dev-tools-timeline-what-are-the-empty-green-rectangles
● http://www.paulirish.com/2015/advanced-performance-audits-with-devtools
● https://developers.google.com/web/fundamentals/performance/rendering/?hl=en