Profiling Archives - وب دیزاین https://wd7.ir/tag/profiling Web Design Mon, 09 Oct 2017 10:03:46 +0000 fa-IR hourly 1 https://wordpress.org/?v=6.8.5 با سرعت وارد دنیایی مجازی شوید –قسمت 3 https://wd7.ir/get-into-the-virtual-world-quickly-part-3.html https://wd7.ir/get-into-the-virtual-world-quickly-part-3.html#respond Mon, 09 Oct 2017 10:03:46 +0000 https://wd7.ir/?p=1770 خب در این آموزش میریم سروقت Firefox Developer Tools وارد قسمت Performance می‌شویم. برای این کار Firefox را بازکنید و ابزار Performance tools را با روش زیر بیاورید: 1- فشار دادن همزمان دکمه‌های Shift + F5 2- راست کلیک در صفحه Firefox و انتخاب گزینه Inspect Element و تب Performance را انتخاب می‌کنید. 3- یا […]

The post با سرعت وارد دنیایی مجازی شوید –قسمت 3 appeared first on وب دیزاین.

]]> خب در این آموزش میریم سروقت Firefox Developer Tools وارد قسمت Performance می‌شویم.
برای این کار Firefox را بازکنید و ابزار Performance tools را با روش زیر بیاورید:
1- فشار دادن همزمان دکمه‌های Shift + F5
2- راست کلیک در صفحه Firefox و انتخاب گزینه Inspect Element و تب Performance را انتخاب می‌کنید.
3- یا در نوار منو Firefox گزینه Developer از زیر منوی این گزینه Performance را بیاورید.

آشنایی با محیط ابزار Performance:

 

محیط Performance شامل قسمت‌های زیر می‌باشد:

1- نوارابزار (Toolbar)
2- نمای ضبط (Recordings pane)
3- نمای کلی ضبط (Recording overview)
4- نمای جزئیات ضبط (Details pane)

نوارابزار (Toolbar):

نوارابزار شامل دکمه‌های:
1- شروع و توقف یک ضبط (Recording)
2- بارگذاری (load) یک فایل ضبط‌شده ذخیره‌شده
3- دکمه پاک کردن پنل ضبط‌شده.
4- فیلتر کردن موارد یا مارکرهایی که در نمای آبشار نمایش داده می‌شوند
5- ابزار فعال جزئیات را تغییر می‌توان داد.
6- دسترسی به پنجره تنظیمات.

 

نمای ضبط (Recordings pane):

در این قسمت ضبط‌های (Recordings) که الآن انجام داده‌اید و یا بارگذاری کرده‌اید را به نمایش می‌گذارد. فایل‌های ضبط‌شده با کلیک بر روی گزینه save می‌توان آن فایل را ذخیره کرد و فایل ها با پسوند JSON ذخیره می‌شوند.

نمای کلی ضبط (Recording overview):

نمای کلی Record را که به نمایش می‌گذارد. این نما شامل دو قسمت است یکی نمای آبشاری و دیگری نمودار سرعت گراف‌ها. نمای آبشاری دارای رنگ‌های مختلفی می‌باشد که هر رنگ بیانگر یک رویداد می‌باشد.
یک الگوی که اغلب در نمای آبشار مشاهده می‌کنید چیزی شبیه به این است:

 

 

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

نمای جزئیات ضبط (Details pane):

که می‌تواند شامل سه قسمت زیر باشد:
1- Waterfall
2- Call Tree
3- Flame Chart

همچنان ادامه دارد… .

 

 

The post با سرعت وارد دنیایی مجازی شوید –قسمت 3 appeared first on وب دیزاین.

]]> https://wd7.ir/get-into-the-virtual-world-quickly-part-3.html/feed 0 با سرعت وارد دنیایی مجازی شوید –قسمت 2 https://wd7.ir/get-to-the-virtual-world-quickly-part-2.html https://wd7.ir/get-to-the-virtual-world-quickly-part-2.html#respond Wed, 27 Sep 2017 07:20:25 +0000 https://wd7.ir/?p=1629 برای تحلیل سایت خود آماده هستید که قدم‌به‌قدم جلو برویم، در قدم اول یکی از سایت‌های که از قبل اسمی از آن آوردیم را انتخاب می‌کنیم و آدرس سایت خود را وارد می‌کنیم منتظر می‌مانیم تا تحلیل سایت به اتمام برسد. من در اینجا سایت http://tools.pingdom.com/fpt را انتخاب کردم.   بعد از اتمام تحلیل در […]

The post با سرعت وارد دنیایی مجازی شوید –قسمت 2 appeared first on وب دیزاین.

]]> برای تحلیل سایت خود آماده هستید که قدم‌به‌قدم جلو برویم، در قدم اول یکی از سایت‌های که از قبل اسمی از آن آوردیم را انتخاب می‌کنیم و آدرس سایت خود را وارد می‌کنیم منتظر می‌مانیم تا تحلیل سایت به اتمام برسد. من در اینجا سایت http://tools.pingdom.com/fpt را انتخاب کردم.

 

بعد از اتمام تحلیل در صفحه اول با گزینه Download HAR روبه‌رو می‌شوید که باید درباره HAR توضیح مختصری داد:

 

HAR:

HAR یک ابزار بصری هست که کار تجزیه‌وتحلیل بارگذاری سایتمان را برای ما آسان کرده. باید HAR را دریافت کرد تا بتوانید تجزیه‌وتحلیل خود را انجام دهید. برای دریافت HAR می‌توان از سایت‌ها استفاده کرد یا اگر از مرورگر گوگل کروم استفاده می‌کنید، در صفحه راست کلیک کنید و Inspector انتخاب کنید و گزینه را بزنید Save as HAR with Content را انتخاب کرده و یا اگر از مرورگر Firefox استفاده می‌کنید افزونه Firebug را نصب کنید تا بتوانید از HAR همان افزونه استفاده ببرید. حال اگر مرورگر شما از HAR پشتیبانی نمی‌کند از سرویس‌های رایگان مانند چنین سایت‌های استفاده کنید که هم می‌توانید آنلاین اطلاعات سایت را مشاهده کنید هم به‌صورت جدا HAR را دانلود کنید.

 

در این سایت در قسمت مشخص‌شده به‌صورت رایگان HAR خود را دریافت کرده و ذخیره کنید یا در همان صفحه به‌صورت آنلاین نتیجه را مشاهده کنید.

 

در قسمت بعد اطلاعات مختصری در رابطه با سایت موردنظرمان که من در اینجا سایت شهاب نت را انتخاب کردم می‌دهد. این اطلاعات شامل:

  • درجه عملکرد در اینجا 71 و c می‌باشد.
  • زمان بار شدن سایت که 19 s می‌باشد.
  • تا 24% امکان بهینگی وجود دارد.
  • سایز صفحه 9 MB
  • 55 بار هم درخواست برای گرفتن داده‌ها به سرور را داشته.

در قسمت بعد این سایت، راهبردها و پیشنهاد‌هایی برای بهینگی سایت به ما می‌دهد؛ و درجه‌بندی‌های مختلف دارد از بهترین حالت A رنگ سبز تا بدترین وضعیت در این سایت C رنگ قرمز را دارد. با انتخاب پیشنهاد‌ها و اعمال کردن پیشنهاد‌ها می‌توان رنگ‌های قرمز را به سبز تبدیل کرد که نتیجه این کار به بهبود عملکرد سایتمان کمک می‌کند.

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

که شامل:

  • سایز محتوای سایت بر اساس نوع آن محتوا (عکس، جاوا اسکریپت،css و…)
  • تعداد و درصد درخواست سایتمان بر اساس نوع محتوا (عکس، جاوا اسکریپت،css و…)
  • اندازه و سایز محتوا برحسب دامنه (دامنه خود سایت، دامنه فونت‌ها و سایر لینک‌های دیگر …)
  • تعداد و درصد درخواست برحسب دامنه (دامنه خود سایت، دامنه فونت‌ها و سایر لینک‌های دیگر …)

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

این رنگ‌ها شامل این اطلاعت هستند:

 

  • DNS: مرورگر وب به دنبال اطلاعات DNS است.
  • SSL: مرورگر وب یک دستاورد SSL را انجام می‌دهد.
  • Connect: مرورگر وب در حال اتصال به سرور است.
  • Send: مرورگر وب اطلاعات را به سرور ارسال می‌کند.
  • Wait: مرورگر وب در انتظار اطلاعات از سرور است.
  • Receive: مرورگر وب اطلاعات از سرور دریافت می‌کند.

 

 

خود این مسائل و رنگ‌ها آنالیز و توضیحات جدایی دارد که در سری بعدی توضیحاتی خواهیم داد، پس منتظرمان باشید.

 

The post با سرعت وارد دنیایی مجازی شوید –قسمت 2 appeared first on وب دیزاین.

]]> https://wd7.ir/get-to-the-virtual-world-quickly-part-2.html/feed 0 با سرعت وارد دنیایی مجازی شوید –قسمت 1 https://wd7.ir/%d8%a8%d8%a7-%d8%b3%d8%b1%d8%b9%d8%aa-%d9%88%d8%a7%d8%b1%d8%af-%d8%af%d9%86%db%8c%d8%a7%db%8c%db%8c-%d9%85%d8%ac%d8%a7%d8%b2%db%8c-%d8%b4%d9%88%db%8c%d8%af-%d9%82%d8%b3%d9%85%d8%aa-1.html https://wd7.ir/%d8%a8%d8%a7-%d8%b3%d8%b1%d8%b9%d8%aa-%d9%88%d8%a7%d8%b1%d8%af-%d8%af%d9%86%db%8c%d8%a7%db%8c%db%8c-%d9%85%d8%ac%d8%a7%d8%b2%db%8c-%d8%b4%d9%88%db%8c%d8%af-%d9%82%d8%b3%d9%85%d8%aa-1.html#respond Sat, 22 Jul 2017 08:24:34 +0000 https://shahab-net.ir/?p=1111 Profiling(پروفایلینگ): در اینجا به‌صورت مختصر با مبحث پروفایلینگ آشنا می‌شویم، پروفایلینگ بیشترین آنالیز خود را بر روی برنامه‌ای کد نویسی شده توسط زبان‌های برنامه‌نویسی داینامیک انجام می‌دهد، مثلاً درصد استفاده حافظه استفاده‌شده توسط برنامه، پیچیدگی برنامه و… . بیشترین کاربرد پروفایلینگ در برنامه‌نویسی مربوط به بهینه‌سازی آن برنامه یا قسمت‌های از برنامه، می‌باشد. این مبحث […]

The post با سرعت وارد دنیایی مجازی شوید –قسمت 1 appeared first on وب دیزاین.

]]> Profiling(پروفایلینگ):

در اینجا به‌صورت مختصر با مبحث پروفایلینگ آشنا می‌شویم، پروفایلینگ بیشترین آنالیز خود را بر روی برنامه‌ای کد نویسی شده توسط زبان‌های برنامه‌نویسی داینامیک انجام می‌دهد، مثلاً درصد استفاده حافظه استفاده‌شده توسط برنامه، پیچیدگی برنامه و… . بیشترین کاربرد پروفایلینگ در برنامه‌نویسی مربوط به بهینه‌سازی آن برنامه یا قسمت‌های از برنامه، می‌باشد.

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

امید بر این می‌باشد که آموزش‌های ما به بهترین صورت ممکن شما رو برای داشتن سایت بهینه کمک و یاری کند با بهترین و جذاب‌ترین امکانات که در دنیایی مجازی وجود دارد. در سری اول این مبحث، به معرفی چندین ابزار که برای بهبودسازی وب‌سایت مورداستفاده قرار می‌گیرد معرفی می‌کنیم و در آموزش سری های بعد به معرفی Gecko Profiler که یک پروفایل حرفه‌ای برای فایرفاکس می‌باشد می‌پردازیم.

معرفی چند ابزار بسیار عالی برای سرعت بخشیدن به وب‌سایت شما:

در این سایت‌ها کافی است که شما آدرس سایت را وارد کنید تا خود این سایت زمان بار شدن، سرعت، درخواست‌ها، سایز صفحه و … سایت شما را برای شما محاسبه کند. به‌صورت مجزا تمام قسمت‌های یک سایت را محاسبه و متقابلاً درصد بهینگی آن‌ها را محاسبه می‌کند، شما با این امکانات می‌توانید سایت خود را بهینه کنید. این محاسبات قابل‌ جمع‌آوری و نگهداری هستند تا بتوانیم به‌راحتی مقایسه بعد و قبل از بهینه‌سازی را انجام دهیم. (توجه کنید ما در این سایت‌ها باید آدرس‌های صحیح یک وب‌سایت بارشده را وارد کنیم).

قدم به قدم خواهیم جلو رفت برای بهینه سازی به کمک یکی از وب سایت های بالا و  سایر ابزار های پروفایلینگ،منتظر باشید…

 

 

 

The post با سرعت وارد دنیایی مجازی شوید –قسمت 1 appeared first on وب دیزاین.

]]> https://wd7.ir/%d8%a8%d8%a7-%d8%b3%d8%b1%d8%b9%d8%aa-%d9%88%d8%a7%d8%b1%d8%af-%d8%af%d9%86%db%8c%d8%a7%db%8c%db%8c-%d9%85%d8%ac%d8%a7%d8%b2%db%8c-%d8%b4%d9%88%db%8c%d8%af-%d9%82%d8%b3%d9%85%d8%aa-1.html/feed 0