ورود به حساب ثبت نام جدید فراموشی کلمه عبور
برای ورود به حساب کاربری خود، نام کاربری و کلمه عبورتان را در زیر وارد کرده و روی “ ورود به حساب” کلیک کنید.





اگر فرم ثبت نام برای شما نمایش داده نمیشود، اینجا را کلیک کنید.









اگر فرم بازیابی کلمه عبور برای شما نمایش داده نمیشود، اینجا را کلیک کنید.





نمایش نتایج: از 1 به 1 از 1
Like Tree1Likes
  • 1 Post By adminmsp

موضوع: افزایش سرعت اجرای کد های css

  1. #1
    adminmsp
    مدیر کل و موسس سایت
    تاریخ عضویت
    1970 Jan
    محل سکونت
    M.S.P Soft
    نوشته ها
    1,588
    759
    429

    افزایش سرعت اجرای کد های 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; } 


    همونطور که دیدیم ، کد خیلی کوتاهتر میشه icon smile افزایش سرعت اجرای CSS برای عملگرهایی مثل 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) استفاده کنید. تا جایی که کیفیت تصویر مناسب است، حجم آن را کاهش دهید.

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

    4. استفاده از روح در تصاویر!

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

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

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

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

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

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

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

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

    کد نمونه:

    .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 بار ، یک بار کد را بنویسید:

     .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;} 


    در کد بالا خط دوم کد ، تاثیر خط اول را از بین می برد ، پس با حذف خط اول، آسیبی به صفحه وارد نمی شود.
    shahrokhdj likes this.
    با M.S.P Soft به دنياي برنامه نويسي وارد شويد[برای نمایش لینک باید عضو شوید. ]
  2. 2
نمایش نتایج: از 1 به 1 از 1

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. دانلود سورس الارم ساعت به زبان vc++
    توسط MspSoft در انجمن برنامه نویسی با MFC و ++Visual C
    پاسخ: 0
    آخرين نوشته: 2012-12-20, 03:48 PM
  2. برنامه ی ساعت الارم دار در زبان c
    توسط ole در انجمن برنامه نویسی با C
    پاسخ: 1
    آخرين نوشته: 2012-12-20, 03:30 PM
  3. ساعت analog به زبان c++
    توسط vahid4251 در انجمن برنامه نویسی با زبان C و ++C
    پاسخ: 0
    آخرين نوشته: 2012-04-12, 12:23 PM
  4. تبديل يك عدد به ساعت ، دقيقه و ثانيه
    توسط MspSoft در انجمن برنامه نویسی در 6 VB
    پاسخ: 0
    آخرين نوشته: 2012-02-16, 11:29 AM
  5. پاسخ: 0
    آخرين نوشته: 2012-02-03, 12:54 PM

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

Content Relevant URLs by vBSEO 3.6.0 RC 2