روشهای نوین بررسی سرعت عملکرد رابطکاربری در نسخهی...

چطور بفھمیم یک سایت کند است.

و بعدش چیکار کنیم!

کاظم کشاورز - دولوپر @تسکولو

وقتی میگیم سایت کند شده یعنی چی؟

لود شدن فایلھای مربوط به صفحه●

تعامل با المانھای صفحه●

اسکرول صفحه○

کلیک کردن روی المنتھا○

ورود اطالعات○

حجم فایلھا، مشکل شبکه، Latency، زمان ●

پاسخ سرور

جاوااسکریپت، CSS، حجم زیاد اطالعات و ●

المنتھا، Layout و …

چطوری بفھمیم یه صفحه کنده؟

یک عدد دستگاه تلفن ھمراه ھوشمند مدل خیلی خیلی جدید با ٣ گیگابایت رم و 1.

جدیدترین مدل سیپییو برداشته و با حرکات انگشت بر روی صفحه بررسی میکنیم آیا

سایت خوب کار میکند یا نه!

استفاده از ابزارھای مناسب:2.

○Chrome DevTools*

○Firefox Firebug, Developer Edition

○Safari Web Inspector

○Internet Explorer/Edge Developer Tools

DevTools چی ھست؟

Chrome Devtools

Elements تب

HTML نمای درختی

تغییر سریع HTML و

CSS

Network تب

لیست و اطالعات

تمام درخواستھا

از سرور

Timeline تب

اطالعات مربوط به

کارھایی که مرورگر

برای پردازش و

نمایش صفحه انجام

میدھد

Profile تب

اطالعات مربوط به

سرعت و زمان

صرف شده در توابع

جاوااسکریپت

Audits تب

نمایش اشتباھات

رایج در صفحات

(شبکه و منابع)

باقی تب ھا چی؟

تب Resources: منابعی که صفحه استفاده میکنه❖❖(HTML/Javascript/CSS) متن کدھای استفاده شد در صفحه :Sources تبتب Console: اجرای کامندھای جاوااسکریپت❖

چجوری از این

برای طراحی

واکنشگرا

استفاده کنیم؟

چجوری از این

برای طراحی

واکنشگرا

استفاده کنیم؟

اینکه ھمون دسکتاپ شد! چجوری رو موبایل تست کنیم؟

لیست تبھا در

مروگر و

برنامهھای

موبایل

نمای یک سایت

روی موبایل به

صورت کامل قابل

مشاھده است.

براوزر چجوری صفحه رو نشون میده؟

داری میگی CSS ھم کند میشه؟ مگه زبون برنامهنویسیه؟!

YES!not really!

کجای CSS بیشتر کند میشه؟

ھر چیزی که باعث پردازش دوبارهی Layout بشه، مثل انیمیشن بزرگ و کوچک شدن width یک المنت.

ھر چیزی که باعث Re-flow بشه.

ھر چیزی که باعث Paint بیش از حد بشه (حد نامشخص!)

کد جاوااسکریپتی که طول بکشه، جاوااسکریپت سریعه، ولی DOM و CSSOM نه!

چی باعث تغییر Layout و Re-Flow میشه؟

چی مثال؟

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, …

چجوری میتونم بفھمم کجا مشکل پیش میاد؟

Beauty and the Beast(hint: makeup!)

چی شد؟!

سایهی اضافی (box-shadow)، استفاده از text-shadow (ھرگز!)، الیهھای مات، زمینهی

شفاف، عکس شفاف و مات (transparent/opaque)، انیمیشن اضافه، تغیر سایز و مکان المنتھا

با حرکت ماوس و لمس.

یعنی چی آخه؟

Simple is the new beautyjust kidding!

برای تغییر اندازه و مکان از transform استفاده کنید!

از Velocity.js به جای jQuery.animate استفاده کنید!

(UX) حدف انیمیشنھای بیارزش و اضافه

از انیمیشن ترکیبی که با قسمتھای مات در ارتباطند پرھیز کنید.

requestAnimationFrame و debounce جدا پرھیز کنید (از onscroll از انجام کار زیاد دراستفاده کنید)

اینجوری نمیشه که!

requestAnimationFrame

Debounce

جاوااسکریپت چی؟

Javascript is Fast*, DOM is slow***Not so fast to launch apollo!

**From React.js docs

از Layout Thrashing پرھیز کنید

❖(FastDom و یا React اضافه کردن یکجا، استفاده از) اضافه کردن تعداد زیاد المنت پشت سرھم

دسترسی به style ھمزمان با تغییر آن❖

❖(requestAnimationFrame استفاده از) frame در ھر style تغییر زیاد

❖DOM ساختار پیچیده و حجیم

تغییر Layout (اسالیدھای قبلی و رفرنسھای آخر)❖

❖(Flexbox استفاده از) ساختار پیچیده چیدمان المانھا

❖(Just don't) تغییر ھمزمان تعداد زیادی المنت

❖(Just don't) تغییر کالس المنت باالتر که روی تعداد زیاد المنت داخلی تاثیر میگذارد

کد جاوااسکریپت زمانبر (استفاده از WebWorker، بھینه کردن کد)❖

ھمش که قانون شد! کی حال داره حفظ کنه اینا رو!

Tools not Rules

مثال!

rayansaba.com

کروم - دسکتاپ - نمای موبایل

ھمه چیز تقریبا* روان و خوب کار

میکند.

*بعضی کارھا نسبتا کند است

ولی قابل تحمل.

کروم - اندروید

اسکرول تقریبا روان (لگ کوچک)

باز کردن منوی باال بینھات کند است!

اسالیدر باالی صفحھ کند است.

ماھنامهی پیوست

بدون لگ

پرش منوی باال ھنگام

(js مشکل) اسکرول

Thank You

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

● 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