Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
‫ﮐﻨﺪ‬ ‫ﺳﺎﯾﺖ‬ ‫ﯾﮏ‬ ‫ﺑﻔﮫﻤﯿﻢ‬ ‫ﭼﻄﻮر‬
.‫اﺳﺖ‬
!‫ﮐﻨﯿﻢ‬ ‫ﭼﯿﮑﺎر‬ ‫ﺑﻌﺪش‬ ‫و‬
‫@ﺗﺳﮑوﻟو‬ ‫دوﻟوﭘر‬ - ‫ﮐﺷﺎورز‬ ‫ﮐﺎظم‬
‫ﭼﯽ؟‬ ‫ﯾﻌﻨﯽ‬ ‫ﺷﺪه‬ ‫ﮐﻨﺪ‬ ‫ﺳﺎﯾﺖ‬ ‫ﻣﯿﮕﯿﻢ‬ ‫وﻗﺘﯽ‬
●‫ﺻﻔﺤﻪ‬ ‫ﺑﻪ‬ ‫ﻣﺮﺑﻮط‬ ‫ﻓﺎﯾﻠﮫﺎی‬ ‫ﺷﺪن‬ ‫ﻟﻮد‬
●‫ﺻﻔﺤﻪ‬ ‫اﻟﻤﺎﻧﮫﺎی‬ ‫ﺑﺎ‬ ‫ﺗﻌﺎﻣﻞ‬
...
‫ﮐﻨﺪه؟‬ ‫ﺻﻔﺤﻪ‬ ‫ﯾﻪ‬ ‫ﺑﻔﮫﻤﯿﻢ‬ ‫ﭼﻄﻮری‬
.1‫و‬ ‫رم‬ ‫ﮔﯿﮕﺎﺑﺎﯾﺖ‬ ٣ ‫ﺑﺎ‬ ‫ﺟﺪﯾﺪ‬ ‫ﺧﯿﻠﯽ‬ ‫ﺧﯿﻠﯽ‬ ‫ﻣﺪل‬ ‫ھﻮﺷﻤﻨﺪ‬ ‫ھﻤﺮاه‬ ‫ﺗﻠﻔﻦ‬ ‫دﺳﺘﮕ...
‫ھﺴﺖ؟‬ ‫ﭼﯽ‬ DevTools
Chrome Devtools
Elements ‫ﺗﺐ‬
HTML ‫درﺧﺘﯽ‬ ‫ﻧﻤﺎی‬
‫و‬ HTML ‫ﺳﺮﯾﻊ‬ ‫ﺗﻐﯿﯿﺮ‬
CSS
Network ‫ﺗﺐ‬
‫اطﻼﻋﺎت‬ ‫و‬ ‫ﻟﯿﺴﺖ‬
‫درﺧﻮاﺳﺖھﺎ‬ ‫ﺗﻤﺎم‬
‫ﺳﺮور‬ ‫از‬
Timeline ‫ﺗﺐ‬
‫ﺑﻪ‬ ‫ﻣﺮﺑﻮط‬ ‫اطﻼﻋﺎت‬
‫ﻣﺮورﮔﺮ‬ ‫ﮐﻪ‬ ‫ﮐﺎرھﺎﯾﯽ‬
‫و‬ ‫ﭘﺮدازش‬ ‫ﺑﺮای‬
‫اﻧﺠﺎم‬ ‫ﺻﻔﺤﻪ‬ ‫ﻧﻤﺎﯾﺶ‬
‫ﻣﯿﺪھﺪ‬
Profile ‫ﺗﺐ‬
‫ﺑﻪ‬ ‫ﻣﺮﺑﻮط‬ ‫اطﻼﻋﺎت‬
‫زﻣﺎن‬ ‫و‬ ‫ﺳﺮﻋﺖ‬
‫ﺗﻮاﺑﻊ‬ ‫در‬ ‫ﺷﺪه‬ ‫ﺻﺮف‬
‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
Audits ‫ﺗﺐ‬
‫اﺷﺘﺒﺎھﺎت‬ ‫ﻧﻤﺎﯾﺶ‬
‫ﺻﻔﺤﺎت‬ ‫در‬ ‫راﯾﺞ‬
(‫ﻣﻨﺎﺑﻊ‬ ‫و‬ ‫)ﺷﺒﮑﻪ‬
‫ﭼﯽ؟‬ ‫ھﺎ‬ ‫ﺗﺐ‬ ‫ﺑﺎﻗﯽ‬
❖‫ﻣﯿﮑﻨﻪ‬ ‫اﺳﺘﻔﺎده‬ ‫ﺻﻔﺤﻪ‬ ‫ﮐﻪ‬ ‫ﻣﻨﺎﺑﻌﯽ‬ :Resources ‫ﺗﺐ‬
❖(HTML/Javascript/CSS) ‫ﺻﻔﺤﻪ‬ ‫در‬ ‫ﺷﺪ‬ ‫اﺳ...
‫اﯾﻦ‬ ‫از‬ ‫ﭼﺠﻮری‬
‫طﺮاﺣﯽ‬ ‫ﺑﺮای‬
‫واﮐﻨﺶﮔﺮا‬
‫ﮐﻨﯿﻢ؟‬ ‫اﺳﺘﻔﺎده‬
‫اﯾﻦ‬ ‫از‬ ‫ﭼﺠﻮری‬
‫طﺮاﺣﯽ‬ ‫ﺑﺮای‬
‫واﮐﻨﺶﮔﺮا‬
‫ﮐﻨﯿﻢ؟‬ ‫اﺳﺘﻔﺎده‬
‫ﮐﻨﯿﻢ؟‬ ‫ﺗﺴﺖ‬ ‫ﻣﻮﺑﺎﯾﻞ‬ ‫رو‬ ‫ﭼﺠﻮری‬ !‫ﺷﺪ‬ ‫دﺳﮑﺘﺎپ‬ ‫ھﻤﻮن‬ ‫اﯾﻨﮑﻪ‬
‫در‬ ‫ﺗﺒﮫﺎ‬ ‫ﻟﯿﺴﺖ‬
‫و‬ ‫ﻣﺮوﮔﺮ‬
‫ﺑﺮﻧﺎﻣﻪھﺎی‬
‫ﻣﻮﺑﺎﯾﻞ‬
‫ﺳﺎﯾﺖ‬ ‫ﯾﮏ‬ ‫ﻧﻤﺎی‬
‫ﺑﻪ‬ ‫ﻣﻮﺑﺎﯾﻞ‬ ‫روی‬
‫ﻗﺎﺑﻞ‬ ‫ﮐﺎﻣﻞ‬ ‫ﺻﻮرت‬
.‫اﺳﺖ‬ ‫ﻣﺸﺎھﺪه‬
‫ﻣﯿﺪه؟‬ ‫ﻧﺸﻮن‬ ‫رو‬ ‫ﺻﻔﺤﻪ‬ ‫ﭼﺠﻮری‬ ‫ﺑﺮاوزر‬
!‫ﺑﺮﻧﺎﻣﻪﻧﻮﯾﺴﯿﻪ؟‬ ‫زﺑﻮن‬ ‫ﻣﮕﻪ‬ ‫ﻣﯿﺸﻪ؟‬ ‫ﮐﻨﺪ‬ ‫ھﻢ‬ CSS ‫ﻣﯿﮕﯽ‬ ‫داری‬
YES!
not really!
‫ﻣﯿﺸﻪ؟‬ ‫ﮐﻨﺪ‬ ‫ﺑﯿﺸﺘﺮ‬ CSS ‫ﮐﺠﺎی‬
‫ﺷﺪن‬ ‫ﮐﻮﭼﮏ‬ ‫و‬ ‫ﺑﺰرگ‬ ‫اﻧﯿﻤﯿﺸﻦ‬ ‫ﻣﺜﻞ‬ ،‫ﺑﺸﻪ‬ Layout ‫دوﺑﺎرهی‬ ‫ﭘﺮدازش‬ ‫ﺑﺎﻋﺚ‬ ‫ﮐﻪ‬ ‫ﭼﯿﺰ...
‫ﻣﯿﺸﻪ؟‬ Re-Flow ‫و‬ Layout ‫ﺗﻐﯿﯿﺮ‬ ‫ﺑﺎﻋﺚ‬ ‫ﭼﯽ‬
‫ﻣﺜﻼ؟‬ ‫ﭼﯽ‬
width, height, top, left, right, bottom, margin, padding, border-width,
border-collapse, box-sizing, clear, di...
‫ﻣﯿﺎد؟‬ ‫ﭘﯿﺶ‬ ‫ﻣﺸﮑﻞ‬ ‫ﮐﺠﺎ‬ ‫ﺑﻔﮫﻤﻢ‬ ‫ﻣﯿﺘﻮﻧﻢ‬ ‫ﭼﺠﻮری‬
Beauty and the Beast
(hint: makeup!)
!‫ﺷﺪ؟‬ ‫ﭼﯽ‬
‫زﻣﯿﻨﻪی‬ ،‫ﻣﺎت‬ ‫ﻻﯾﻪھﺎی‬ ،(!‫)ھﺮﮔﺰ‬ text-shadow ‫از‬ ‫اﺳﺘﻔﺎده‬ ،(box-shadow) ‫اﺿﺎﻓﯽ‬ ‫ﺳﺎﯾﻪی‬
‫اﻟﻤﻨﺖھﺎ‬ ‫ﻣﮑﺎن‬ ...
‫آﺧﻪ؟‬ ‫ﭼﯽ‬ ‫ﯾﻌﻨﯽ‬
Simple is the new beauty
just kidding!
!‫ﮐﻨﯿﺪ‬ ‫اﺳﺘﻔﺎده‬ transform ‫از‬ ‫ﻣﮑﺎن‬ ‫و‬ ‫اﻧﺪازه‬ ‫ﺗﻐﯿﯿﺮ‬ ‫ﺑﺮای‬
!‫ﮐﻨﯿﺪ‬ ‫اﺳﺘﻔﺎده‬ jQuery.animate ‫ﺟﺎی‬ ‫ﺑﻪ‬ Velocity.j...
requestAnimationFrame
Debounce
‫ﭼﯽ؟‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
Javascript is Fast*, DOM is slow**
*Not so fast to launch apollo!
**From React.js docs
‫ﮐﻨﯿﺪ‬ ‫ﭘﺮھﯿﺰ‬ Layout Thrashing ‫از‬
❖(FastDom ‫ﯾﺎ‬ ‫و‬ React ‫از‬ ‫اﺳﺘﻔﺎده‬ ،‫ﯾﮑﺠﺎ‬ ‫ﮐﺮدن‬ ‫)اﺿﺎﻓﻪ‬ ‫ﺳﺮھﻢ‬ ‫ﭘﺸﺖ‬ ‫اﻟﻤﻨﺖ‬ ...
!‫رو‬ ‫اﯾﻨﺎ‬ ‫ﮐﻨﻪ‬ ‫ﺣﻔﻆ‬ ‫داره‬ ‫ﺣﺎل‬ ‫ﮐﯽ‬ !‫ﺷﺪ‬ ‫ﻗﺎﻧﻮن‬ ‫ﮐﻪ‬ ‫ھﻤﺶ‬
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:...
● https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
● https://stackoverflow.com/questions...
روشهای نوین بررسی سرعت عملکرد رابط‌کاربری در نسخه‌ی موبایل
روشهای نوین بررسی سرعت عملکرد رابط‌کاربری در نسخه‌ی موبایل
روشهای نوین بررسی سرعت عملکرد رابط‌کاربری در نسخه‌ی موبایل
روشهای نوین بررسی سرعت عملکرد رابط‌کاربری در نسخه‌ی موبایل
روشهای نوین بررسی سرعت عملکرد رابط‌کاربری در نسخه‌ی موبایل
روشهای نوین بررسی سرعت عملکرد رابط‌کاربری در نسخه‌ی موبایل
Upcoming SlideShare
Loading in …5
×

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

592 views

Published on

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

Published in: Education
  • Be the first to comment

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

  1. 1. ‫ﮐﻨﺪ‬ ‫ﺳﺎﯾﺖ‬ ‫ﯾﮏ‬ ‫ﺑﻔﮫﻤﯿﻢ‬ ‫ﭼﻄﻮر‬ .‫اﺳﺖ‬ !‫ﮐﻨﯿﻢ‬ ‫ﭼﯿﮑﺎر‬ ‫ﺑﻌﺪش‬ ‫و‬ ‫@ﺗﺳﮑوﻟو‬ ‫دوﻟوﭘر‬ - ‫ﮐﺷﺎورز‬ ‫ﮐﺎظم‬
  2. 2. ‫ﭼﯽ؟‬ ‫ﯾﻌﻨﯽ‬ ‫ﺷﺪه‬ ‫ﮐﻨﺪ‬ ‫ﺳﺎﯾﺖ‬ ‫ﻣﯿﮕﯿﻢ‬ ‫وﻗﺘﯽ‬ ●‫ﺻﻔﺤﻪ‬ ‫ﺑﻪ‬ ‫ﻣﺮﺑﻮط‬ ‫ﻓﺎﯾﻠﮫﺎی‬ ‫ﺷﺪن‬ ‫ﻟﻮد‬ ●‫ﺻﻔﺤﻪ‬ ‫اﻟﻤﺎﻧﮫﺎی‬ ‫ﺑﺎ‬ ‫ﺗﻌﺎﻣﻞ‬ ○‫ﺻﻔﺤﻪ‬ ‫اﺳﮑﺮول‬ ○‫اﻟﻤﻨﺘﮫﺎ‬ ‫روی‬ ‫ﮐﺮدن‬ ‫ﮐﻠﯿﮏ‬ ○‫اطﻼﻋﺎت‬ ‫ورود‬ ●‫زﻣﺎن‬ ،Latency ،‫ﺷﺒﮑﻪ‬ ‫ﻣﺸﮑﻞ‬ ،‫ﻓﺎﯾﻠﮫﺎ‬ ‫ﺣﺠﻢ‬ ‫ﺳﺮور‬ ‫ﭘﺎﺳﺦ‬ ●‫و‬ ‫اطﻼﻋﺎت‬ ‫زﯾﺎد‬ ‫ﺣﺠﻢ‬ ،CSS ،‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ … ‫و‬ Layout ،‫اﻟﻤﻨﺘﮫﺎ‬
  3. 3. ‫ﮐﻨﺪه؟‬ ‫ﺻﻔﺤﻪ‬ ‫ﯾﻪ‬ ‫ﺑﻔﮫﻤﯿﻢ‬ ‫ﭼﻄﻮری‬ .1‫و‬ ‫رم‬ ‫ﮔﯿﮕﺎﺑﺎﯾﺖ‬ ٣ ‫ﺑﺎ‬ ‫ﺟﺪﯾﺪ‬ ‫ﺧﯿﻠﯽ‬ ‫ﺧﯿﻠﯽ‬ ‫ﻣﺪل‬ ‫ھﻮﺷﻤﻨﺪ‬ ‫ھﻤﺮاه‬ ‫ﺗﻠﻔﻦ‬ ‫دﺳﺘﮕﺎه‬ ‫ﻋﺪد‬ ‫ﯾﮏ‬ ‫آﯾﺎ‬ ‫ﻣﯽﮐﻨﯿﻢ‬ ‫ﺑﺮرﺳﯽ‬ ‫ﺻﻔﺤﻪ‬ ‫روی‬ ‫ﺑﺮ‬ ‫اﻧﮕﺸﺖ‬ ‫ﺣﺮﮐﺎت‬ ‫ﺑﺎ‬ ‫و‬ ‫ﺑﺮداﺷﺘﻪ‬ ‫ﺳﯽﭘﯽﯾﻮ‬ ‫ﻣﺪل‬ ‫ﺟﺪﯾﺪﺗﺮﯾﻦ‬ !‫ﻧﻪ‬ ‫ﯾﺎ‬ ‫ﻣﯿﮑﻨﺪ‬ ‫ﮐﺎر‬ ‫ﺧﻮب‬ ‫ﺳﺎﯾﺖ‬ .2:‫ﻣﻨﺎﺳﺐ‬ ‫اﺑﺰارھﺎی‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ○Chrome DevTools* ○Firefox Firebug, Developer Edition ○Safari Web Inspector ○Internet Explorer/Edge Developer Tools
  4. 4. ‫ھﺴﺖ؟‬ ‫ﭼﯽ‬ DevTools Chrome Devtools
  5. 5. Elements ‫ﺗﺐ‬ HTML ‫درﺧﺘﯽ‬ ‫ﻧﻤﺎی‬ ‫و‬ HTML ‫ﺳﺮﯾﻊ‬ ‫ﺗﻐﯿﯿﺮ‬ CSS
  6. 6. Network ‫ﺗﺐ‬ ‫اطﻼﻋﺎت‬ ‫و‬ ‫ﻟﯿﺴﺖ‬ ‫درﺧﻮاﺳﺖھﺎ‬ ‫ﺗﻤﺎم‬ ‫ﺳﺮور‬ ‫از‬
  7. 7. Timeline ‫ﺗﺐ‬ ‫ﺑﻪ‬ ‫ﻣﺮﺑﻮط‬ ‫اطﻼﻋﺎت‬ ‫ﻣﺮورﮔﺮ‬ ‫ﮐﻪ‬ ‫ﮐﺎرھﺎﯾﯽ‬ ‫و‬ ‫ﭘﺮدازش‬ ‫ﺑﺮای‬ ‫اﻧﺠﺎم‬ ‫ﺻﻔﺤﻪ‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ﻣﯿﺪھﺪ‬
  8. 8. Profile ‫ﺗﺐ‬ ‫ﺑﻪ‬ ‫ﻣﺮﺑﻮط‬ ‫اطﻼﻋﺎت‬ ‫زﻣﺎن‬ ‫و‬ ‫ﺳﺮﻋﺖ‬ ‫ﺗﻮاﺑﻊ‬ ‫در‬ ‫ﺷﺪه‬ ‫ﺻﺮف‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬
  9. 9. Audits ‫ﺗﺐ‬ ‫اﺷﺘﺒﺎھﺎت‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ﺻﻔﺤﺎت‬ ‫در‬ ‫راﯾﺞ‬ (‫ﻣﻨﺎﺑﻊ‬ ‫و‬ ‫)ﺷﺒﮑﻪ‬
  10. 10. ‫ﭼﯽ؟‬ ‫ھﺎ‬ ‫ﺗﺐ‬ ‫ﺑﺎﻗﯽ‬ ❖‫ﻣﯿﮑﻨﻪ‬ ‫اﺳﺘﻔﺎده‬ ‫ﺻﻔﺤﻪ‬ ‫ﮐﻪ‬ ‫ﻣﻨﺎﺑﻌﯽ‬ :Resources ‫ﺗﺐ‬ ❖(HTML/Javascript/CSS) ‫ﺻﻔﺤﻪ‬ ‫در‬ ‫ﺷﺪ‬ ‫اﺳﺘﻔﺎده‬ ‫ﮐﺪھﺎی‬ ‫ﻣﺘﻦ‬ :Sources ‫ﺗﺐ‬ ❖‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﮐﺎﻣﻨﺪھﺎی‬ ‫اﺟﺮای‬ :Console ‫ﺗﺐ‬
  11. 11. ‫اﯾﻦ‬ ‫از‬ ‫ﭼﺠﻮری‬ ‫طﺮاﺣﯽ‬ ‫ﺑﺮای‬ ‫واﮐﻨﺶﮔﺮا‬ ‫ﮐﻨﯿﻢ؟‬ ‫اﺳﺘﻔﺎده‬
  12. 12. ‫اﯾﻦ‬ ‫از‬ ‫ﭼﺠﻮری‬ ‫طﺮاﺣﯽ‬ ‫ﺑﺮای‬ ‫واﮐﻨﺶﮔﺮا‬ ‫ﮐﻨﯿﻢ؟‬ ‫اﺳﺘﻔﺎده‬
  13. 13. ‫ﮐﻨﯿﻢ؟‬ ‫ﺗﺴﺖ‬ ‫ﻣﻮﺑﺎﯾﻞ‬ ‫رو‬ ‫ﭼﺠﻮری‬ !‫ﺷﺪ‬ ‫دﺳﮑﺘﺎپ‬ ‫ھﻤﻮن‬ ‫اﯾﻨﮑﻪ‬
  14. 14. ‫در‬ ‫ﺗﺒﮫﺎ‬ ‫ﻟﯿﺴﺖ‬ ‫و‬ ‫ﻣﺮوﮔﺮ‬ ‫ﺑﺮﻧﺎﻣﻪھﺎی‬ ‫ﻣﻮﺑﺎﯾﻞ‬
  15. 15. ‫ﺳﺎﯾﺖ‬ ‫ﯾﮏ‬ ‫ﻧﻤﺎی‬ ‫ﺑﻪ‬ ‫ﻣﻮﺑﺎﯾﻞ‬ ‫روی‬ ‫ﻗﺎﺑﻞ‬ ‫ﮐﺎﻣﻞ‬ ‫ﺻﻮرت‬ .‫اﺳﺖ‬ ‫ﻣﺸﺎھﺪه‬
  16. 16. ‫ﻣﯿﺪه؟‬ ‫ﻧﺸﻮن‬ ‫رو‬ ‫ﺻﻔﺤﻪ‬ ‫ﭼﺠﻮری‬ ‫ﺑﺮاوزر‬
  17. 17. !‫ﺑﺮﻧﺎﻣﻪﻧﻮﯾﺴﯿﻪ؟‬ ‫زﺑﻮن‬ ‫ﻣﮕﻪ‬ ‫ﻣﯿﺸﻪ؟‬ ‫ﮐﻨﺪ‬ ‫ھﻢ‬ CSS ‫ﻣﯿﮕﯽ‬ ‫داری‬ YES! not really!
  18. 18. ‫ﻣﯿﺸﻪ؟‬ ‫ﮐﻨﺪ‬ ‫ﺑﯿﺸﺘﺮ‬ CSS ‫ﮐﺠﺎی‬ ‫ﺷﺪن‬ ‫ﮐﻮﭼﮏ‬ ‫و‬ ‫ﺑﺰرگ‬ ‫اﻧﯿﻤﯿﺸﻦ‬ ‫ﻣﺜﻞ‬ ،‫ﺑﺸﻪ‬ Layout ‫دوﺑﺎرهی‬ ‫ﭘﺮدازش‬ ‫ﺑﺎﻋﺚ‬ ‫ﮐﻪ‬ ‫ﭼﯿﺰی‬ ‫ھﺮ‬ .‫اﻟﻤﻨﺖ‬ ‫ﯾﮏ‬ width .‫ﺑﺸﻪ‬ Re-flow ‫ﺑﺎﻋﺚ‬ ‫ﮐﻪ‬ ‫ﭼﯿﺰی‬ ‫ھﺮ‬ (!‫ﻧﺎﻣﺸﺨﺺ‬ ‫)ﺣﺪ‬ ‫ﺑﺸﻪ‬ ‫ﺣﺪ‬ ‫از‬ ‫ﺑﯿﺶ‬ Paint ‫ﺑﺎﻋﺚ‬ ‫ﮐﻪ‬ ‫ﭼﯿﺰی‬ ‫ھﺮ‬ !‫ﻧﻪ‬ CSSOM ‫و‬ DOM ‫وﻟﯽ‬ ،‫ﺳﺮﯾﻌﻪ‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ،‫ﺑﮑﺸﻪ‬ ‫طﻮل‬ ‫ﮐﻪ‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺘﯽ‬ ‫ﮐﺪ‬
  19. 19. ‫ﻣﯿﺸﻪ؟‬ Re-Flow ‫و‬ Layout ‫ﺗﻐﯿﯿﺮ‬ ‫ﺑﺎﻋﺚ‬ ‫ﭼﯽ‬
  20. 20. ‫ﻣﺜﻼ؟‬ ‫ﭼﯽ‬ 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, …
  21. 21. ‫ﻣﯿﺎد؟‬ ‫ﭘﯿﺶ‬ ‫ﻣﺸﮑﻞ‬ ‫ﮐﺠﺎ‬ ‫ﺑﻔﮫﻤﻢ‬ ‫ﻣﯿﺘﻮﻧﻢ‬ ‫ﭼﺠﻮری‬
  22. 22. Beauty and the Beast (hint: makeup!)
  23. 23. !‫ﺷﺪ؟‬ ‫ﭼﯽ‬ ‫زﻣﯿﻨﻪی‬ ،‫ﻣﺎت‬ ‫ﻻﯾﻪھﺎی‬ ،(!‫)ھﺮﮔﺰ‬ text-shadow ‫از‬ ‫اﺳﺘﻔﺎده‬ ،(box-shadow) ‫اﺿﺎﻓﯽ‬ ‫ﺳﺎﯾﻪی‬ ‫اﻟﻤﻨﺖھﺎ‬ ‫ﻣﮑﺎن‬ ‫و‬ ‫ﺳﺎﯾﺰ‬ ‫ﺗﻐﯿﺮ‬ ،‫اﺿﺎﻓﻪ‬ ‫اﻧﯿﻤﯿﺸﻦ‬ ،(transparent/opaque) ‫ﻣﺎت‬ ‫و‬ ‫ﺷﻔﺎف‬ ‫ﻋﮑﺲ‬ ،‫ﺷﻔﺎف‬ .‫ﻟﻤﺲ‬ ‫و‬ ‫ﻣﺎوس‬ ‫ﺣﺮﮐﺖ‬ ‫ﺑﺎ‬
  24. 24. ‫آﺧﻪ؟‬ ‫ﭼﯽ‬ ‫ﯾﻌﻨﯽ‬ Simple is the new beauty just kidding!
  25. 25. !‫ﮐﻨﯿﺪ‬ ‫اﺳﺘﻔﺎده‬ transform ‫از‬ ‫ﻣﮑﺎن‬ ‫و‬ ‫اﻧﺪازه‬ ‫ﺗﻐﯿﯿﺮ‬ ‫ﺑﺮای‬ !‫ﮐﻨﯿﺪ‬ ‫اﺳﺘﻔﺎده‬ jQuery.animate ‫ﺟﺎی‬ ‫ﺑﻪ‬ Velocity.js ‫از‬ (UX) ‫اﺿﺎﻓﻪ‬ ‫و‬ ‫ﺑﯽارزش‬ ‫اﻧﯿﻤﯿﺸﻦھﺎی‬ ‫ﺣﺪف‬ .‫ﮐﻨﯿﺪ‬ ‫ﭘﺮھﯿﺰ‬ ‫ارﺗﺒﺎطﻨﺪ‬ ‫در‬ ‫ﻣﺎت‬ ‫ﻗﺴﻤﺖھﺎی‬ ‫ﺑﺎ‬ ‫ﮐﻪ‬ ‫ﺗﺮﮐﯿﺒﯽ‬ ‫اﻧﯿﻤﯿﺸﻦ‬ ‫از‬ requestAnimationFrame ‫و‬ debounce ‫)از‬ ‫ﮐﻨﯿﺪ‬ ‫ﭘﺮھﯿﺰ‬ ‫ﺟﺪا‬ onscroll ‫در‬ ‫زﯾﺎد‬ ‫ﮐﺎر‬ ‫اﻧﺠﺎم‬ ‫از‬ (‫ﮐﻨﯿﺪ‬ ‫اﺳﺘﻔﺎده‬ !‫ﮐﻪ‬ ‫ﻧﻤﯿﺸﻪ‬ ‫اﯾﻨﺠﻮری‬
  26. 26. requestAnimationFrame
  27. 27. Debounce
  28. 28. ‫ﭼﯽ؟‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ Javascript is Fast*, DOM is slow** *Not so fast to launch apollo! **From React.js docs
  29. 29. ‫ﮐﻨﯿﺪ‬ ‫ﭘﺮھﯿﺰ‬ Layout Thrashing ‫از‬ ❖(FastDom ‫ﯾﺎ‬ ‫و‬ React ‫از‬ ‫اﺳﺘﻔﺎده‬ ،‫ﯾﮑﺠﺎ‬ ‫ﮐﺮدن‬ ‫)اﺿﺎﻓﻪ‬ ‫ﺳﺮھﻢ‬ ‫ﭘﺸﺖ‬ ‫اﻟﻤﻨﺖ‬ ‫زﯾﺎد‬ ‫ﺗﻌﺪاد‬ ‫ﮐﺮدن‬ ‫اﺿﺎﻓﻪ‬ ❖‫آن‬ ‫ﺗﻐﯿﯿﺮ‬ ‫ﺑﺎ‬ ‫ھﻤﺰﻣﺎن‬ style ‫ﺑﻪ‬ ‫دﺳﺘﺮﺳﯽ‬ ❖(requestAnimationFrame ‫از‬ ‫)اﺳﺘﻔﺎده‬ frame ‫ھﺮ‬ ‫در‬ style ‫زﯾﺎد‬ ‫ﺗﻐﯿﯿﺮ‬ ❖DOM ‫ﺣﺠﯿﻢ‬ ‫و‬ ‫ﭘﯿﭽﯿﺪه‬ ‫ﺳﺎﺧﺘﺎر‬ ❖(‫آﺧﺮ‬ ‫رﻓﺮﻧﺲھﺎی‬ ‫و‬ ‫ﻗﺒﻠﯽ‬ ‫)اﺳﻼﯾﺪھﺎی‬ Layout ‫ﺗﻐﯿﯿﺮ‬ ❖(Flexbox ‫از‬ ‫)اﺳﺘﻔﺎده‬ ‫اﻟﻤﺎﻧﮫﺎ‬ ‫ﭼﯿﺪﻣﺎن‬ ‫ﭘﯿﭽﯿﺪه‬ ‫ﺳﺎﺧﺘﺎر‬ ❖(Just don't) ‫اﻟﻤﻨﺖ‬ ‫زﯾﺎدی‬ ‫ﺗﻌﺪاد‬ ‫ھﻤﺰﻣﺎن‬ ‫ﺗﻐﯿﯿﺮ‬ ❖(Just don't) ‫ﻣﯿﮕﺬارد‬ ‫ﺗﺎﺛﯿﺮ‬ ‫داﺧﻠﯽ‬ ‫اﻟﻤﻨﺖ‬ ‫زﯾﺎد‬ ‫ﺗﻌﺪاد‬ ‫روی‬ ‫ﮐﻪ‬ ‫ﺑﺎﻻﺗﺮ‬ ‫اﻟﻤﻨﺖ‬ ‫ﮐﻼس‬ ‫ﺗﻐﯿﯿﺮ‬ ❖(‫ﮐﺪ‬ ‫ﮐﺮدن‬ ‫ﺑﮫﯿﻨﻪ‬ ،WebWorker ‫از‬ ‫)اﺳﺘﻔﺎده‬ ‫زﻣﺎﻧﺒﺮ‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﮐﺪ‬
  30. 30. !‫رو‬ ‫اﯾﻨﺎ‬ ‫ﮐﻨﻪ‬ ‫ﺣﻔﻆ‬ ‫داره‬ ‫ﺣﺎل‬ ‫ﮐﯽ‬ !‫ﺷﺪ‬ ‫ﻗﺎﻧﻮن‬ ‫ﮐﻪ‬ ‫ھﻤﺶ‬ Tools not Rules
  31. 31. !‫ﻣﺜﺎل‬ rayansaba.com
  32. 32. ‫ﻣﻮﺑﺎﯾﻞ‬ ‫ﻧﻤﺎی‬ - ‫دﺳﮑﺘﺎپ‬ - ‫ﮐﺮوم‬ ‫ﮐﺎر‬ ‫ﺧﻮب‬ ‫و‬ ‫روان‬ *‫ﺗﻘﺮﯾﺒﺎ‬ ‫ﭼﯿﺰ‬ ‫ھﻤﻪ‬ .‫ﻣﯿﮑﻨﺪ‬ ‫اﺳﺖ‬ ‫ﮐﻨﺪ‬ ‫ﻧﺴﺒﺘﺎ‬ ‫ﮐﺎرھﺎ‬ ‫*ﺑﻌﻀﯽ‬ .‫ﺗﺤﻤﻞ‬ ‫ﻗﺎﺑﻞ‬ ‫وﻟﯽ‬
  33. 33. ‫اﻧدروﯾد‬ - ‫ﮐروم‬ (‫ﮐوﭼﮏ‬ ‫)ﻟﮓ‬ ‫روان‬ ‫ﺗﻘرﯾﺑﺎ‬ ‫اﺳﮑرول‬ !‫اﺳت‬ ‫ﮐﻧد‬ ‫ﺑﯾﻧﮭﺎت‬ ‫ﺑﺎﻻ‬ ‫ﻣﻧوی‬ ‫ﮐردن‬ ‫ﺑﺎز‬ .‫اﺳت‬ ‫ﮐﻧد‬ ‫ﺻﻔﺣﮫ‬ ‫ﺑﺎﻻی‬ ‫اﺳﻼﯾدر‬
  34. 34. ‫ﭘﯿﻮﺳﺖ‬ ‫ﻣﺎھﻨﺎﻣﻪی‬ ‫ﻟﮓ‬ ‫ﺑﺪون‬ ‫ھﻨﮕﺎم‬ ‫ﺑﺎﻻ‬ ‫ﻣﻨﻮی‬ ‫ﭘﺮش‬ (js ‫)ﻣﺸﮑﻞ‬ ‫اﺳﮑﺮول‬
  35. 35. Thank You
  36. 36. 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
  37. 37. ● 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

×