18
تشکر

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

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

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

در سایت browserdiet.com چندی از متخصصان وب از شرکت های مختلفی مانند تویتر، گوگل، اپرا و چند شرکت دیگر راهنمای سرگرم کننده ای درست کرده اند که رعایت آنها باعث افزایش کارایی صفحه وب شما میشود. این راهنماها در بخش های مختلفی اعم از HTML, CSS, JavaScript, jQuery, Images, Server است.

 در این مطلب به نکته هایی که در این سایت به آنها اشاره شده است میپردازیم. این مطلب کاربردی را از دست ندهید.

در ادامه همراه ما باشید…

HTML

25
خودداری از نوشتن کدهای inline و embedded

در کل سه راه برای متصل کردن کدهای CSS و JavaScript به صفحه وجود دارد:

1) inline: به این معنی که داخل تگ کدها را قرار دهیم، خصوصیت style برای CSS و خصوصیت هایی مانند onclick و … برای JavaScript

2) Embedded: تعریف تگ های style و script داخل خود صفحه

3) External: قرار دادن کدها در یک صفحه دیگر و فراخوانی آنها با استفاده از تگ های link و خصوصیت src در تگ script

دو گزینه اول باعث کاهش درخواست های HTTP شما میشود، اما همچنین باعث افزایش حجم فایل HTML نیز خواهد شد. این دو گزینه برای مواردی که استثنا هستند و یا زمانی که تغییرات خیلی کمی میخواهید با آنها اعمال کنید مناسب هستند. و یا در صفحاتی که مطمئن هستنید کاربر فقط یکبار به آن مراجعه میکند و دیگر در آینده مراجعه نمیکند برای کاهش درخواست های HTTP تقریبا مناسب است.

اما باز هم سعی کنید از استفاده از دو گزینه ابتدایی خودداری کنید.

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

24
استایل ها بالا، اسکریپت ها پایین

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

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

23
کوچک کردن فایل HTML

توسعه دهنده همیشه باید بر روی کدهای دارای کامنت مناسب و متن ایندنت گذاری شده کار کند. مانند کد زیر:

<p>Lorem ipsum dolor sit amet.</p>

<!-- My List -->
<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

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

HTML Compressor

HTML Compressor

 

22
استفاده از async

async یک خاصیت مربوط به تگ script است. کد زیر را در نظر بگیرید:

<script src="example.js"></script>

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

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

<script async src="example.js"></script>

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

برای مثال شما یک پلاگین جاوا اسکریپت دارید که برای اجرا شدن نیاز دارد ابتدا خود کتابخانه جی کوئری اجرا شده باشد.

CSS

21
کوچک کردن فایل CSS

این نکته دقیقا مانند نکته شماره 23 است با این تفاوت که برای فایل های CSS استفاده میشود.

شما همچنین میتوانید از پیش پردازنده های CSS مانند Sass, Less و Stylus استفاده کنید.

20
ترکیب چند فایل CSS

یکی از بهترین روش ها برای ماژولار کردن کدها، جدا کردن آنها و قرار دادنشان در یک فایل جدا است، مانند کد زیر:

<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">

با اینحال اینکار باعث افزایش درخواست های HTTP میشود. همچنین مروگر قادر به رسیدگی تعداد محدودی درخواست موازی است. پس بهتر است مانند زیر عمل کنید:

<link rel="stylesheet" href="main.css" media="all">
19
ترجیح دادن تگ link به @import

دو روش برای قرار دادن یک فایل خارجی CSS به صفحه وجود دارد. اولین روش استفاده از تگ link است:

<link rel="stylesheet" href="style.css">

و روش دیگر استفاده از دستور @import در درون تگ style است:

@import url('style.css')

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

JavaScript

18
بارگذاری محتوای ثالث (third-party) مخرب

حتما برای شما هم اتفاق افتاده است که مجبور باشید محتوایی از سایت دیگر را بر روی سایتتان قرار دهید مانند ویدئوهای Youtube یا هر سایت دیگر.

معمولا این سایت ها تعدادی فایل اسکریپت فراخوانی میکنند، که در لود صفحه تاثیر زیادی دارند. میتوانید آنها را مانند کد زیر به صورت async فراخوانی کنید:

var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
17
طول آرایه در جاوا اسکریپت

حلقه ها مهمترین بخش در جاوا اسکریپت هستند، یک امر مهم در استفاده از حلقه ادامه حلقه ها تا پایان آرایه است، که برای این منظور از متد length استفاده میکنند.

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

var arr = new Array(1000),
    len, i;

for (i = 0; i < arr.length; i++) {
  // Bad - size needs to be recalculated 1000 times
}

for (i = 0, len = arr.length; i < len; i++) {
  // Good - size is calculated only 1 time and then stored
}
&#91;/javascript&#93;</div>
<div class="redlist">
<div class="number">16</div>
<div class="title">خودداری از استفاده document.write</div>
</div>
<p dir="RTL">دستور document.write همزمان یا بعد از window.onload اجرا میشود، همچنین این دستور ممکن است در یک صفحه جدید اجرا یا کلا در صفحه اجرا نشود.</p>
<p dir="RTL">امروزه برنامه نویسان از این دستور خیلی کم استفاده میکنند.</p>

<div class="redlist">
<div class="number">15</div>
<div class="title">ارجاع هرچه کمتر به DOM</div>
</div>
<p dir="RTL">این نکته مشابه نکته 17 است. همیشه باید سعی کرد ارجاع کمتری به DOM داشته باشید. دو قطعه کد زیر را ببینید و تفاوت آنها را تشخیص دهید.</p>
<div class="mycode">[javascript]
var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis&#91;i&#93;.style.width = div.offsetWidth + 'px';
}
&#91;/javascript&#93;</div>
<div class="mycode">[javascript]
var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    widthToSet = div.offsetWidth,
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis&#91;i&#93;.style.width = widthToSet + 'px';
}
&#91;/javascript&#93;</div>
<div class="redlist">
<div class="number">14</div>
<div class="title">جلوگیری از دستکاری های غیر ضروری DOM</div>
</div>
<p dir="RTL">هر بار دستکاری غیر ضرروی DOM زمان زیادی را میگیرد. اگرچه موتورهای جاوا اسکریپت قدرتمند هستند اما همیشه سعی کنید DOM را به صورت غیر ضروری دستکاری نکنید. معنای غیر ضروری را میتوانید در دو قطعه کد زیر ببینید.</p>
<p dir="RTL">در کد اول، در هربار اجرای حلقه، DOM هم دستکاری میشود، یعنی در کل حدود 100 بار!!</p>
<p dir="RTL">اما در کد دوم فقط یک بار DOM دستکاری میشود، ولی همان کارایی کد اول را دارد.</p>
<div class="mycode">[javascript]
// really bad!
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}
// much better
var myList = "";

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

document.getElementById("myList").innerHTML = myList;
13
کم کردن حجم فایل اسکریپت

مانند CSS و HTML میتوانید در فایل های JavaScript هم فضاهای خالی را از بین ببرید و باعث کم شدن حجم فایل شوید. برای مثال کد زیر را میتوان در یک خط هم نوشت(در زمان Publish):

BrowserDiet.app = function() {

  var foo = true;

  return {
    bar: function() {
      // do something
    }
  };

};
BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
12
ترکیب چند فایل اسکریپت داخل یک فایل

همانطور که میدانید مشابه این نکته هم برای زبان CSS داشتیم.

شما میتوانید چند فایل اسکریپت را داخل یک فایل داشته باشید تا درخواست های HTTP را کاهش دهید.

<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>
<script src="main.js"></script>

در مطلب بعدی نکاتی را برای بالا بردن کارایی در استفاده از Images و Server خواهیم گفت (12 نکته دیگر).

  • mahdikhanzadi می‌گه:

    روش های دیگه ای هم وجود داره مثلا تکرار کمتر تگ های link و script , بهتره فایل های سی اس اس رو ترکیب کرد و همچنین فایل های جاوا اسکریپت رو هم ترکیب کرد.
    از متغیرهای عمومی توی جاوا اسکریپت استفاده نکرد , از فیلتر ها و ترانزیشن کمتر استفاده کرد چون با محاسباتشون مرورگر سرعت کمتری پیدا میکنه

  • Ali Amini می‌گه:

    سلام
    مثل همیشه عالی بود

  • مسعود می‌گه:

    چه فایده داره شما که اصلا جواب ایمیل نمیدی!

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

      سلام دوست عزیز
      من تا جایی که بتونم جواب میدم. اما اگه شما هم بودین نمیتونستین به همه ایمیلها جواب بدید. معمولا من به ایمیل هایی که بیشتر از چند روز طول بکشه و نتونم در اون چند روز جواب بدم، پاکشون میکنم چون فرض رو بر این میزارم که احتمالا به جواب مورد نظر رسیدن.
      بازم ببخشید. اگه میتونید دوباره ایمیل کنید، اگه بتونم کمک کنم، دریغ نمیکنم.

  • سجاد می‌گه:

    خیلی خوب بود
    ممنون

  • سمیرا می‌گه:

    سلام
    مطالبتون واقعا مفید هستن
    ممنون.
    ممکنه ایمیلتونو داشته باشم؟


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