افزایش سرعت اجرای CSS
537 روز پیش
پويا صادقى , آموزش CSS
با زیاد شدن قابلتهای CSS میتونیم به جای خیلی از عناصر صفحه وب مثل تصاویر ، گرادینتها ،جاوا اسکریپت و… از CSS استفاده کنیم ؛ که البته روی سرعت بارگذاری صفحه ما تاثیر زیادی داره و باعث افزایش سرعت صفحه میشه. اما استفاده از CSS هم تکنیکهای زیادی لازم داره که بیشترین بازدهی رو برای کاربر داشته باشه. این که چطور کد سیاساس رو بنویسیم تا حجم فایل رو کم کنیم؟
1. خلاصه نویسی
بعضی از سلکتورهای مشابه رو میتونیم خلاصه کنیم، حالت غیر خلاصه:
.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 هم میشه خلاصه نویسی کرد.
2. رنگ ها
رنگهایی که به صورت کد مبنای 16 نوشته میشن ، (مثل #00ffff و #ee5511 و…) درصورتی که از 6 رقم کد، رقمها دو به دو برابر باشند ( مثل #ee5511 یا #eeeeee ) میتونیم اونها رو با 3 کارکتر بنویسیم. ( مثل e51# یا #eee )
.my_element{color:#ff0000;background-color:99ee11;}
.my_element{color:#f00;background:#9e1;}
وقتی قرارباشه از رنگ های زیادی درصفحه استفاده بشه، نصف شدن کارکتر رنگ ها بی تاثیر نخواهد بود.
3. کاهش حجم عکس
تصاویری که در یک صفحه وب استفاده می شوند، باید تا حد ممکن فشرده و کم حجم باشند.
“به این نکته نیز دقت کنید که نه کیفیت تصویر رو فدای حجمش کنید و نه حجم تصویر رو فدای کیفیت کنید.”
برای کسب بهترین نتیجه میتونید از گزینه Save for Web and Devices در منوی file نرمافزار فتوشاپ (Alt+Shift+Ctrl+S) استفاده کنید. تا جایی که کیفیت تصویر مناسب است، حجم آن را کاهش دهید.
4. استفاده از روح در تصاویر!
از کلمه “روح” تعجب نکنید! CSS sprites یکی از مفیدترین و بهترین ترفندها برای کاهش زمان load صفحه است.
معمولا در قالب یک وبسایت ، از چندین عکس برای استفاده در بکگراند المنتها استفاده میشه که مرورگر کاربر برای بارگذاری هر تصویر؛ یک “درخواست” (Request) به سرور ارسال میکند و سرور تصویر درخواستی را به مرورگر میفرستد.
تعداد Request های یک صفحه باید تا حد ممکن کاهش یابد تا صفحه زودتر برای کاربر بارگذاری شود.
پس اگر در صفحه ای به جای 3 فایل png از یک فایل png استفاده کنیم، مرورگر به جای 3 درخواست، فقط یک درخواست به سرور ارسال می کند.
برای اینکار تصاویر مورد نظر رو در یک تصویر قرارمیدیم. مثل این عکس:
این عکس در صفحه نتایج جستجوی سایت گوگل قرار گرفته. تصاویر اجزای مختلف صفحه همه در یک فایل قرار گرفته اند. این تصویر همونطور که در عکس زیر میبینید، در قسمت های مختلف صفحه قرارگرفته.در همه این المنت ها از تصویر بالا به عنوان تصویربکگراند استفاده شده.
کد نمونه:
.some_element{width:15px;height:15px; background:url(image.png) -71px -34px; }
توضیح کد: طول و عرض 15 پیکسل ؛ استفاده از تصویر image.png به عنوان بکگراند ؛ تعیین مکان بکگراند: تصویر بکگراند 71 پیکسل به سمت چپ و 34 پیکسل به سمت بالا جابجا میشود.
5. استفاده از CSS خارجی
کد های CSS را در یک فایل با فرمت CSS ذخیره کنید و با کد زیر آن را در صفحه بارگذاری کنید.
اجرای کد از فایل های CSS خارجی ، به مراتب سریع تر از کد های سیاساسی است که در تگ قرار میگیرند
6. از Expressions استفاده نکنید
هرگز از Expression در CSS استفاده نکنید. Expression اجرای مستقیم جاوا اسکریپت در داخل کد های CSS است و فقط توسط مرورگر اینترنت اکسپلورر پشتیبانی می شود. مثال:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
7. از کدهای تکراری استفاده نکنید
اگر در کد شما 5 عنصر باید دارای بکگراند طوسی باشد، به جای 5 بار ، یک بار کد را بنویسید:
/* 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 class="decorated">A paragraph of decorated text</p> <p class="decorated">Second paragraph</p> <p class="decorated">Third paragraph</p> <p class="decorated">Forth paragraph</p>
<div class="decorated"> <p>A paragraph of decorated text</p> <p>Second paragraph</p> <p>Third paragraph</p> <p>Forth paragraph</p> </div>
8. حذف کامنتها و کدهای اضافه
در صورت امکان کامنت ها برای کم شدن حجم فایل CSS حذف کنید.
همچنین برخی کدها که تاثیری در صفحه ندارند را تشخیص دهید و (پس از اطمینان از آنکه حذف آنها آسیبی به قالب صفحهها نمیرساند) آنها را حذف کنید.
.div1{color:red;}
.div1{color:green;}
در کد بالا خط دوم کد ، تاثیر خط اول را از بین می برد ، پس با حذف خط اول، آسیبی به صفحه وارد نمی شود.
