12
تشکر

5 نکته برای بالابردن کارایی CSS و JavaScript

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

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

آیا شده که مشتری رو به خاطر دیر لود شدن سایت در مرورگر از دست بدهید؟ اما منظور ما در اینجا اندازه فایل نیست بلکه مقدار زمانی است که مرورگر صرف فهمیدن و انجام دادن کدهای میکند.

در این مطلب به نکاتی اشاره میکنیم که رعایت آنها باعث میشود مروگر زمان کمتری را برای اجرای کدهای ما اختصاص دهد.

1- تکرار نکنید

این جمله فراتر از تکرار کردن کدها در CSS به جای تعریف یک کلاس برای همه آنها است. برای مثال شما میتوانید خصوصیاتی را که برای یک تگ مینویسید برای تگ والدش تعریف کنید و دیگر برای آن تگ کد ننویسید. برای مثال در کد زیر ابتدا برای خود div یک سری خصوصیات تعریف کردیم. سپس به تگ های داخل p خصوصیت دیگری دادیم.

div {
  background: red;
  width: 400px;
  height: 300px;
}
div p {
  font-size: 25px;
}

در حالی که میتوانیم مانند زیر هم بنویسیم.

div {
  background: red;
  width: 400px;
  height: 300px;
  font-size: 25px;
}

2- از راست به چپ بنویسید!!

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

$(“body #container div a”)

کد بالا از نظر ما اینطور پردازش میشود: “سلام مرورگر!! تگ body را پیدا کن و در داخل آن به دنبال تگی با آی دی container بگرد و در داخل این تگ به دنبال تگ div برو و از درون آن تگ a را انتخاب کن.”

اما در واقع مرورگر برعکس اینکار را انجام میدهد. مرورگر ابتدا کل صفحه را به دنبال تگ های a میگردد. سپس چک میکند که کدام یک از این aها والد آنها یک div است سپس از میان تگ های باقی مانده چک میکند که کدام یک از آنها درون تگی با آی دی container است و در آخر از میان تگ های باقیمانده چک میکند که کدام یک از آن ها فرزند body است.

اما در JavaScript راه های بهتری هم هست. کد بالا را میتوان مانند زیر نوشت.

$(“#container”).find(“div”).find(“a”)

در CSS شما گزینه های زیادی ندارید. اما استفاده از id میتواند راهگشا باشد.

3- IDها خیلی سریعند

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

4- انتخاب سلکتور های کوتاه

همیشه سلکتور های خود را کوتاه بنویسید برای مثال به جای نوشتن ul li a میتوان ul a نوشت.

5- تعریف به جای متغیرها

در استفاده از زبان JavaScript شما میتوانید Objectهایی که اسم های طولانی دارند را درون یک متغیر با اسامی کوتاه قرار دهید. به این صورت هم خودتان راحت میشوید هم حجم فایل شما کم خواهد شد.

برای مثال کد زیر را در نظر بگیرید:

var e1= document.getElementById('ID1'),
e2= document.getElementById('ID2');

میتوان به این صورت هم نوشت:

var doc= document,
e1= doc.getElementById('ID1'),
e2= doc.getElementById('ID2');
  • hesam می‌گه:

    با سلام
    سپاسگذاریم بخاطر
    اموزشهای مفیدی که ارائه میدهید
    پیشنهاد میکنم اگر بتوانید مطالب ارائه شده را بصورت منسجم تر و با استراتژی اموزشی پیاده نمایید
    بسیار موثرتر خواهد بود.
    بعنوان نمونه یک کورس را بصورت حرفه ایی بر روی
    ساختار دستوراتcss تمرکز کنید از کل به جز .تکنیک های برتر و
    میانبر ها .
    به نظر بنده اینگونه آپارنت به سایت آموزشی تخصصی تری معرفی خواهد شد

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

      سلام دوست عزیز
      ممنون از اینکه نظرتون رو دادید.
      درباره مطالب آپارنت باید بگم من از گذاشتن مطالب تکراری که در سایت های دیگه به وفور پیدا میشه، اجتناب میکنم.
      یکی از همین موارد آموزش های زبان های مختلف مانند CSS, HTML, jQuery و … است.
      بیشتر تمرکز آپارنت روی تکنولوژی های جدید تحت وب مانند HTML5, CSS3 و غیره است.
      با این حال اگه مورد خاصی مد نظر دارید میتونید بیان کنید تا جزء برنامه ها قرار بگیره.
      خیلی ممنون.

  • علی می‌گه:

    خسته نباشید آقای شفیعی.
    مرسی

  • علی می‌گه:

    واقعاً کاربردی و جامع بود.مرسی محسن جان


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