25
تشکر

چگونه در مرورگر لاغر شویم!! – بخش دوم

افزایش کارایی صفحات وب

افزایش کارایی صفحات وب

در بخش دوم این مطلب همراه ما باشید…

jQuery

11
 همیشه از آخرین نسخه استفاده کنید

تیم جی کوئری در هر نسخه به دنبال بهبود این کتابخانه و بالا بردن Performance آن هستند. بنابراین همیشه سعی کنید از آخرین نسخه jQuery استفاده کنید.

اما یادتان باشد که نسخه 2 جی کوئری در IE های نسخه قدیم کار نمیکنند.

10
سلکتورها

انتخاب عناصر در jQuery از راه های زیادی میتواند صورت گیرد، اما به این معنی نیست که همه آنها دارای یک کارایی هستند. شما میتوانید یک عنصر را با ID, Class یا متدهای find و children انتخاب کنید.

ولی استفاده از ID بیشترین کارایی را دارد

$("#foo");
9
استفاده از for به جای each

همیشه استفاده از توابع و متدهای خود زبان JavaScript دارای کارایی بالاتری از متدهای jQuery هستند. یکی از این متدها، متد each است. شما میتوانید به جای استفاده از این متد از دستور for جاوا اسکریپت استفاده کنید.

for ( var i = 0, len = a.length; i < len; i++ ) {
    e = a&#91;i&#93;;
}
&#91;/javascript&#93;</div>
<div class="redlist">
<div class="number">8</div>
<div class="title">از جی کوئری استفاده نکنید</div>
</div>
<p dir="RTL">مگر آنکه واقعا ضروری باشد.</p>
<p dir="RTL">برای مثال چرا id یک عنصر را از متد attr خود جی کوئری بگیریم زمانی که JavaScript راه آسان تری و با سرعت بیشتری در اختیار ما میگذارد.</p>
<div class=mycode">[javascript]
$('a').on('click', function() {
  console.log( $(this).attr('id') );
});

$('a').on('click', function() {
  console.log( this.id );
});

Images

7
استفاده از تکنیک CSS Sprites

این تکنیک بدین صورت است که تمام عکس های یک گروه را درون یک عکس قرار دهیم مانند عکس زیر:

افزایش کارایی صفحات وب

افزایش کارایی صفحات وب

سپس مانند کد زیر مختصات عکس مورد نظر را میدهیم:

.icon-foo {
  background-image: url('mySprite.png');
  background-position: -10px -10px;
}

.icon-bar {
  background-image: url('mySprite.png');
  background-position: -5px -5px;
}

بدین صورت شما تعداد درخواست های HTTP خود را به شکل وسیعی کاهش میدهید همچنین اینکار در سرعت باگذاری سایت شما تاثیر خواهد گذاشت.

این تکنیک را بیشتر توسعه دهندگان میشناسند اما شاید کمتر از آن استفاده کنند، شاید به این دلیل که ابزار خودکاری برای تولید تصاویر CSS Sprites وجود ندارد. میتوانید از ابزارهای معرفی شده در GitHub استفاده کنید.

6
استفاده از Data URI

این تکنیک مشابه تکنیک قبلی است. با استفاده از Data URI شما دیگر لازم نیست یک درخواست HTTP برای بارگذاری یک عکس انجام دهید، بلکه شما کدهای عکس مورد نظر را درون فایل CSS قرار میدهید. مانند کد زیر:

/*Before*/
.icon-foo {
  background-image: url('foo.png');
}

/*After*/
.icon-foo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}

همه مرورگرها از IE8 به بالا از این تکنیک با کدگذاری base64 پشتیبانی میکنند.

از تکنیک بالا در صورتی استفاده کنید که تصاویر شما کوچک باشند، در تصاویر بزرگ اینکار باعث افزایش حجم فایل CSS میشود. میتوانید برای این تکنیک نیز از ابزارهای معرفی شده در این صفحه استفاده کنید.

5
تصاویر را به شدت تغییر اندازه ندهید

استفاده از خاصیت های Width و Height در تصاویر راه خوبی برای جلوگیری از کدهای اضافی است.

<img width="100" height="100" src="logo.jpg" alt="Logo">

اما این بدین معنا نیست که شما میتوانید یک تصویر بزرگ را با استفاده از خاصیت های Width و Height کوچک نمایش دهید.

4
بهینه سازی تصاویر

تصاویر شامل اطلاعات زیادی هستند که بر روی وب بی فایده هستند. برای مثال تصاویر JPEG شامل metadataهایی از دوربین مانند تاریخ عکس، مشخصات دوربین، مکان عکس و غیره هستند. هیج کدام از این اطلاعات در اینترنت لازم نیست و فقط باعث افزایش حجم میشوند.

امروزه ابزارهای زیادی در دسترس هستند که بدون کم کردن کیفیت عکس حجم آن را کاهش میدهند. اما شما تا جایی که امکان دارد باید از کیفیت عکس هم کم کنید.

میتوانید از ابزارهای معرفی شده در این صفحه کمک بگیرید.

Server

3
استفاده از کش مرورگر

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

اما ما میتوانیم این فرایند را در سمت سرور مدیریت کنیم. برای مثال اگر از سرورهای Apache استفاده میکنید میتوانید کدهای زیر را در فایل .htaccess قرار دهید.

ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"

کدهای بالا فایلهای مربوطه را به مدت 6 ماه کش میکند.

نکته مهم که باید به خاطر بسپارید این است که بعد از قراردادن کدهای بالا شما نباید تغییری در فایلهای کش شده ایجاد کنید. برای مثال اگر شما تغییری در فایل CSS که کش شده است اعمال کنید در سیستم کاربر همان نسخه قدیمی استفاده میشود. یک راه برای حل این مشکل تغییر نام فایل است. برای مثال پس از اولین تغییر اسم فایل را به home-v1.js و اگر بعدها دوباره تغییری در فایل ایجاد کردید نام آن را به home-v2.js تغییر دهید و به همین صورت.

یک راه رایج دیگر استفاده از پارامتر Get به صورت home.js?v1 و home.js?v2 است. در واقع ما با پرامترهای GET کاری نداریم. فقط هر زمان که تغییری در فایل ایجاد کردیم مقدار آن را تغییر میدهیم تا مرورگر فکر کند این یک فایل جدید است. اما این روش در بعضی از پراکسی های موجود در اینترنت نادیده گرفته میشود.

2
GZIP

GZIP اطلاعات شما را قبل از ارسال فشرده و در سمت کاربر آنها را از حالت فشرده خارج میکند. امروزه بیشتر سرورهای جدید از این تکنیک پشتیبانی میکنند.

برای مثال یک نوع کد GZIP در سرورهای Apache را میتوانید در کد زیر ببینید:

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript

Bouns

1
ابزارهای آنالیز؛ بهترین دوست شما

اگر هنوز هم میخواهید هر چه بیشتر کارایی و سرعت سایت خودتان را افزایش دهید میتوانید از ابزارهای آنالیز اینکار مانند YSlow و پلاگین های PageSpeed استفاده کنید.

یا میتوانید از ابزارهای آنلاین مانند WebPageTest, HTTP Archive و PageSpeed استفاده کنید.

مطالب مرتبط

چگونه در مرورگر لاغر شویم!! – بخش اول

  • مطلب خوبی بود
    اینم سایتی برای ساخت Image Sprite
    spritepad.wearekiss.com

  • fanos می‌گه:

    سلام سایتتون عالیه بی نهایت از شما متشکرم سلامت و پیروز باشید ان شاء الله

  • حمید می‌گه:

    با سلام مطالبتان خیلی خوب بود مخصوصا CSS Sprites
    یه سوال اون تشکر اول صفحه رو خودتون اسکریپتشو نوشتید

  • حسین می‌گه:

    داش محسن قربون دست میشه یه مثال برام بزنی یا بفرستی به این آدرس تو رو خدا
    hossein.func@gmail.com

  • حسین می‌گه:

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

    • محسن شفیعی می‌گه:

      سلام.
      نمیدونم منظورتون رو درست فهمیدم یا نه. شما در واقع میخواید یک عکس از کاربر بگیرید بعد اونو نمایش بدید.
      برای اینکار باید ابتدا عکس را آپلود کنید، بعد از آپلود فقط آدرس عکس روی سرور رو در دیتابیس ذخیره میکنید، در مرحله بعد هر زمان که میخواستید عکس را نمایش بدید آدرس عکس رو از دیتابیس میگیرید و درون تگ img قرار میدید.
      امیدوارم کمکی کرده باشم.

    • آروین می‌گه:

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


  • نظرات این مطلب بسته است.