"> افزایش سرعت اجرای CSS | ام اس پی سافت

افزایش سرعت اجرای CSS

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

بعضی از سلکتورهای مشابه رو میتونیم خلاصه کنیم، حالت غیر خلاصه:

.my_element{
background-color:#036;
background-image:url(image.gif);
background-position:20px 10px;
background-repeat:repeat-x;
}

حالت خلاصه:

.my_element{
background:#036 url(image.gif) 20px 10px repeat-x;
}

همونطور که دیدیم ، کد خیلی کوتاهتر میشه :) برای عملگرهایی مثل font وborder و margin و padding و outline هم میشه خلاصه نویسی کرد.

۲٫ رنگ ها

رنگ‌هایی که به صورت کد مبنای ۱۶ نوشته میشن ، (مثل #۰۰ffff و #ee5511 و…) درصورتی که از ۶ رقم کد، رقم‌ها دو به دو برابر باشند ( مثل #ee5511 یا #eeeeee ) میتونیم اون‌ها رو با ۳ کارکتر بنویسیم. ( مثل e51# یا #eee )

.my_element{color:#ff0000;background-color:99ee11;}
.my_element{color:#f00;background:#9e1;}

وقتی قرارباشه از رنگ های زیادی درصفحه استفاده بشه، نصف شدن کارکتر رنگ ها بی تاثیر نخواهد بود.

۳٫ کاهش حجم عکس

تصاویری که در یک صفحه وب استفاده می شوند، باید تا حد ممکن فشرده و کم حجم باشند.

“به این نکته نیز دقت کنید که نه کیفیت تصویر رو فدای حجمش کنید و نه حجم تصویر رو فدای کیفیت کنید.”

برای کسب بهترین نتیجه میتونید از گزینه Save for Web and Devices در منوی file نرم‌افزار فتوشاپ (Alt+Shift+Ctrl+S) استفاده کنید. تا جایی که کیفیت تصویر مناسب است، حجم آن را کاهش دهید.

۴٫ استفاده از روح  در تصاویر!

از کلمه “روح” تعجب نکنید! CSS sprites یکی از مفیدترین و بهترین ترفندها برای کاهش زمان load صفحه است.

معمولا در قالب یک وبسایت ، از چندین عکس برای استفاده در بکگراند المنت‌ها استفاده میشه که مرورگر کاربر برای بارگذاری هر تصویر؛ یک “درخواست” (Request) به سرور ارسال میکند و سرور تصویر درخواستی را به مرورگر می‌فرستد.

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

پس اگر در صفحه ای به جای ۳ فایل png از یک فایل png استفاده کنیم، مرورگر به جای ۳ درخواست، فقط یک درخواست به سرور ارسال می کند.

برای این‌کار تصاویر مورد نظر رو در یک تصویر قرارمیدیم. مثل این عکس:

 افزایش سرعت اجرای CSS

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

 افزایش سرعت اجرای CSS

کد نمونه:

.some_element{width:15px;height:15px; background:url(image.png) -71px -34px; }

توضیح کد: طول و عرض ۱۵ پیکسل ؛ استفاده از تصویر image.png به عنوان بکگراند ؛ تعیین مکان بکگراند: تصویر بکگراند ۷۱ پیکسل به سمت چپ و ۳۴ پیکسل به سمت بالا جابجا می‌شود.

۵٫ استفاده از CSS خارجی

کد های CSS را در یک فایل با فرمت CSS ذخیره کنید و با کد زیر آن را در صفحه بارگذاری کنید.

<link rel='stylesheet' href='.file_name.css' type='text/css' media='all' />

اجرای کد از فایل های CSS خارجی ، به مراتب سریع تر از کد های سی‌اس‌اسی است که در تگ <style> قرار میگیرند

۶٫ از Expressions استفاده نکنید

هرگز از Expression در CSS استفاده نکنید. Expression اجرای مستقیم جاوا اسکریپت در داخل کد های CSS است و فقط توسط مرورگر اینترنت اکسپلورر پشتیبانی می شود. مثال:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

۷. از کدهای تکراری استفاده نکنید

اگر در کد شما ۵ عنصر باید دارای بکگراند طوسی باشد، به جای ۵ بار ، یک بار کد را بنویسید:

/* Slow Code: */

.div1{background:#ccc;}
.div2{background:#ccc;  color:#F00;}
.div3{background:#ccc;}
.div4{background:#ccc;  margin:5px 2px;}
.div5{background:#ccc;}

/* Fast Code: */

.div1,.div2,.div3,.div4,.div5{background:#ccc;}
.div2{color:#F00;}
.div4{margin:5px 2px;}

اگر چند عنصر متوالی دارای یک کلاس هستند ، کلاس را به یک عنصر والد آنها نسبت دهید و از طریق والد کد را به آن‌ها اختصاص دهید:

<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
<div>
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>

۸. حذف کامنت‌ها و کدهای اضافه

در صورت امکان کامنت ها برای کم شدن حجم فایل CSS حذف کنید.

همچنین برخی کدها که تاثیری در صفحه ندارند را تشخیص دهید و (پس از اطمینان از آنکه حذف آن‌ها آسیبی به قالب صفحه‌ها نمی‌رساند) آن‌ها را حذف کنید.

.div1{color:red;}
.div1{color:green;}

در کد بالا خط دوم کد ، تاثیر خط اول را از بین می برد ، پس با حذف خط اول، آسیبی به صفحه وارد نمی شود

  • پسورد: www.mspsoft.com
مسعود شریفی پور

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

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم