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

به این کار در اصطلاح Minify میگویند …

واضح است فشرده سازی یک مشکل جدید را پیش می آورد که همان از بین رفتن چیدمان ( قانون Child & Parent ) کد ها میباشد . پس باید به خاطر داشته باشید زمانی که کدنویسی شما به طور کامل انجام شد , قبل از آپلود کد بر روی سایت این فشرده سازی را انجام دهید .

برای فشرده سازی و همچنین خارج سازی کد از فشرده سازی , سایت معروفی را در اینجا به شما معرفی خواهم کرد که با ورود به آن میتوانید کد های HTML , CSS و JS خود را به راحتی Minify و Beautiful بسازید .

نکته : Beautiful همان قانون Child & Parent یا برعکس Minify میباشد .

معرفی وب سایت : http://minifycode.com

طبیعتا در هر وب سایتی که روزانه در دنیا طراحی میشود , احتمال خیلی کمی وجود دارد که در آن از فایل های js استفاده نشود . منطور از js , همان جاوا اسکریپت , jquery , angular و دیگر کتابخانه ها میباشد .

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

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

در ادامه قصد دارم آموزشی را ارائه دهم که با کمک آن میتوانید از این نوع اجرا در مرورگر جلوگیری به عمل آورده و بارگذاری script را به تعویق بیاندازید .

خاصیت های defer و async یک وجه مشترک و یک تفاوت دارند .
وجه مشترک هر دو این است که مروگر منتظر لود شدن کامل فایل جاوا اسکریپت نمانده و همزمان با لود کردن این فایل، ادامه فایل HTML رو هم لود میکند , که این کار باعث میشود صفحه خیلی زودتر در مرورگر نمایش داده شود
اما تفاوت بین defer و async این است که، اسکریپتهایی که به صورت async تعریف شده باشند، به محض اینکه به طور کامل لود شوند ، اجرا خواهند شد .

اما اسکریپتهای نوع defer حتی اگر به طور کامل هم لود شوند ، منتظر مانده تا کل سند HTML لود شود و بعد از آن اجرا میشوند .
وقتی که زمان اجرای یک اسکریپت اهمیتی نداشته باشد ( اکثر اوقات ) بهتره از async استفاده شود . ولی زمانی که لازمه حتماً بعد از لود شدن کامل عناصر HTML برنامه اجرا شود باید از defer استفاده کنید .

توجه : این دو خاصیت فقط برای فایل های اسکریپت External قابل استفاده است . یعنی زمانی که یک فایل مثلا به نام vms.js داریم و توسط تگ زیر به فایل HTML خود ضمیمه میکنیم .

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

<script defer src="vms.js"></script>

گرداوری و آموزش : وحید مجیدی

پخش اختصاصی