بایگانی برچسب‌ها : css

کمینه سازی Minification

کمینه سازی یا Minification چیست؟

کمینه سازی سورس کد یا به اختصار کمینه سازی (Minification) اصطلاحی در حوزه برنامه نویسی است و به فرایندی گفته می‌شود که طی آن تمامی اجزا و کاراکترهای غیرضروری از سورس کد حذف می‌شود. کمینه سازی علاوه بر اینکه در نتیجه اجرای سورس کد اختلال یا تغییری به وجود نمی‌آورد، حجم فایل مربوطه را نیز کاهش می‌دهد. گاهی اوقات از واژه Minimization نیز به عنوان معادلی برای این اصطلاح استفاده می‌شود.

کاراکترهای غیر ضروری (شامل کاراکتر فاصله و خط جدید) و همچنین المان هایی نظیر کامنت ها (که برای توصیف عملکرد قسمت‌های مختلف کد استفاده می‌شوند) در حین انجام فرایند Minification از سورس کد حذف می‌شوند. از آنجایی که این اجزا و کاراکترها غالبا برای خواناتر کردن سورس کد به کار می‌روند حذف آن‌ ها تاثیری روی نتیجه اجرای کد نخواهد داشت.

فرایند کمینه سازی به خصوص در مورد سورس کدهای مرتبط با صفحات وب نظیر فایل های جاوا اسکریپت (JavaScript) به عنوان یک زبان برنامه نویسی تفسیری، شیوه نامه های آبشاری (CSS) و فایل های اچ تی ام ال (HTML) به کار می‌رود. کاهش حجم این منابع باعث می‌شود فایل ها با سرعت بیشتری به دست کلاینت ها (برای مثال مرورگرهای وب) برسد و درنتیجه منجر به کاهش زمان لازم برای لود شدن صفحات وب خواهد شد.

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

فارغ از روش‌های ساده‌ای نظیر حذف کامنت ها و فاصله ها از سورس کد، ممکن است تکنیک‌های پیشرفته‌تری نیز برای کمینه سازی مورد استفاده قرار گیرد. جایگزینی نام‌های طولانی متغیرها و توابع با نام‌هایی با تعداد کاراکتر کمتر (و حتی تک کاراکتری) در سورس کدهای بسیاری از زبان‌ها (به خصوص JavaScript) و جایگزینی ویژگی‌های مرتبط با یک ویژگی خلاصه شده (Shorthand Property) و حذف قانون‌ها یا ویژگی‌های تکراری در CSS از جمله این موارد هستند.

معکوس این فرایند که به Unminification موسوم است قادر است سورس مینیفای شده را به یک نسخه معمولی و خواناتر تبدیل کند.

ابزارهای Minification

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

برای برخی از زبان ها ابزارهای نرم افزاری متعددی در دسترس توسعه دهندگان قرار گرفته است که با روش‌های ساده تا پیشرفته به مینیفای کردن سورس کد می‌پردازند. از جمله مشهورترین این ابزارها می‌توان به HTMLMinifier برای اچ تی ام ال، CSSO برای سی اس اس و Google Closure Compiler و UglifyJS برای جاوا اسکریپت اشاره کرد.

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

کمینه سازی و فشرده سازی

با وجود اینکه کمینه سازی و فشرده سازی (Compression) داده ها هر دو می‌توانند باعث کاهش حجم فایل سورس کد شوند اما نباید آن‌ها را یکسان دانست. در واقع سورس کد کمینه شده می‌تواند بدون نیاز به انجام مرحله‌ای اضافه بلافاصله تفسیر و اجرا شود؛ این در حالیست که سورس کد فشرده شده پیش از اجرا شدن لازم است از حالت فشرده خارج شود. در عین حال مفسر می‌تواند با نسخه اصلی یا نسخه کمینه سازی شده کار کند بدون اینکه تغییری در مفسر ایجاد شود.

جالب است بدانید بسیاری از وبسایت‌ها از هر دو روش کمینه سازی و فشرده سازی فایل ها برای کاهش حجم داده هایی که باید منتقل شود استفاده می‌کنند.

مثال هایی از کمینه سازی

در مثال زیر می‌توانید نمونه‌ای از یک قانون CSS را قبل و پس از انجام Minification مشاهده کنید. همانطور که می‌بینید در این قانون علاوه بر اینکه کامنت، سمی کلن اختیاری انتهایی، کاراکترهای اضافی فاصله و خط جدید حذف شده‌اند، ویژگی خلاصه شده border نیز جایگزین سه ویژگی مجزای border-width و border-style و border-color شده است.

کمینه سازی Minification
نمونه‌ای از انجام Minification روی یک قانون CSS

در مثال زیر نیز یک قطعه کد جاوا اسکریپت و نسخه حاصل از اعمال فرایند Minification توسط Google Closure Compiler را مشاهده می‌کنید:

کمینه سازی Minification
نمونه‌ای از انجام Minification روی یک قطعه کد جاوا اسکریپت

مزایا و معایب Minification

همانطور که پیشتر به آن اشاره شد Minification قادر است با کاهش حجم سورس کد به ویژه در مورد منابع وب به لود شدن سریعتر صفحات وب و کاهش پهنای باند مورد نیاز برای انتقال داده ها منجر شود.

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

برخی از متخصصین معتقدند کمینه سازی را می‌توان روشی برای مبهم سازی (Obfuscation) سورس کد به شمار آورد؛ با این وجود مشابه با ابزارهایی که برای انجام خودکار Minification به کار می‌روند، ابزارهای ویژه‌ای نیز برای Unminification طراحی و منتشر شده است.

پیوندهای پیشنهادی تک دیک

لینک واژه در ویکیپدیا

شیوه‌نامه‌ آبشاری Cascading Style Sheet – CSS

شیوه‌نامه‌ آبشاری یا Cascading Style Sheet – CSS چیست؟

شیوه‌نامه‌ آبشاری یا Cascading Style Sheet (به اختصار CSS)، یک زبان طراحی استایل است که به منظور تعیین و توصیف ظاهر و نحوه‌ی نمایش یک سندِ نوشته شده با زبان‌های نشانه‌گذاری به کار می‌رود.

معمولا از CSS برای تعیین ظاهر و جلوه‌ی صفحات وب (فونت متون، رنگ و میزان حاشیه‌ی المان‌ها و …) استفاده می‌شود. با اینحال می‌توان از این زبان برای هر نوع سند XML (از جمله SVG و XUL) نیز استفاده نمود. CSS در کنار HTML و JavaScript از جمله زبان‌های اصلی در دنیای امروزی وب به شمار می‌رود که در اکثر وبسایت‌ها برای ایجاد صفحات جذاب و زیبا به کار می‌رود. علاوه بر این در طراحی واسط کاربری اپلیکیشن‌های وب و حتی بسیاری از اپلیکیشن‌های موبایلی، CSS یک راه حل مناسب به شمار می‌رود.

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

ساختار CSS

هر شیوه‌نامه (یا استایل شیت) شامل مجموعه‌ای از قوانین (Rule ها) می‌باشد. هر قانون نیز دارای یک یا چند گزینشگر (Selector) است که مشخص می‌کند می‌خواهید چه المان یا المان‌هایی را استایل‌بندی کنید. در هر قانون بخش دیگری به نام Declaration نیز وجود دارد که در میان آکولاد قرار گرفته و برای تعیین ویژگی‌های استایل، مورد استفاده قرار می‌گیرد. این بخش شامل جفت‌هایی به صورت “مقدار:نام ویژگی” می‌باشد که با استفاده از سمی کلن (یا ;) از یکدیگر جدا می‌شوند.

به عنوان مثال در نمونه‌ی زیر که برای استایل‌بندی یک صفحه وب نوشته شده است، تمامی المان‌های p با اندازه فونت 12 پیکسل و رنگ آبی به نمایش در می‌آیند:

p {
     color: blue;
     font-size: 12px;
 }

به سه روش متفاوت می‌توان با استفاده از سی اس اس نحوه فرمت بندی المان‌های HTML را تعیین نمود:

  • اینلاین یا درجا (Inline): در این شیوه با کمک خصوصیتی به نام Style، می‌توانیم به یک المان معین HTML، استایل منحصربفردی را اختصاص دهیم. در این حالت مطابق نمونه زیر تنها کافی است جفت “مقدار:نام ویژگی” ذکر شود:
<h1 style="color: green;"> My Heading Title </h1>
  • داخلی (Internal): در این روش، می‌توان با استفاده از تگ Style در بخش head، المان‌های مختلف موجود در یک صفحه‌ی HTML را استایل بندی نمود.
  • خارجی (External): در این روش، محتوای سند HTML از نحوه‌ی نمایش آن مجزا می‌شود. به عبارت بهتر با قرار دادن استایل در یک فایل جداگانه با پسوند css و سپس متصل کردن آن به صفحات HTML، می‌توان ظاهر چندین صفحه را همسان‌سازی و کنترل نمود.

مزایای CSS

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

علاوه بر این‌ها CSS قادر است برای رندرینگ‌ها و اندازه‌های مختلف صفحه نمایش، محتوایی ثابت را با استایلی متمایز و مناسب به نمایش درآورد.

سطوح مختلف CSS

اولین مستندات رسمی سی اس اس با عنوان CSS level 1 (به اختصار CSS 1)، در سال 1996 توسط کنسرسیوم وب جهان گستر (W3C) منتشر شد که از قابلیت‌هایی چون تعیین خواص فونت، رنگ متن، پس‌زمینه، خصوصیات متون نظیر فاصله‌ی بین خطوط و اندازه‌ی متن، تراز متن و تصویر، حاشیه، قاب و … پشتیبانی می‌کرد. CSS 2 و CSS 3 نیز با افزودن قابلیت‌هایی نظیر سایه‌دهی متن، z-order، تعیین موقعیت ثابت، نسبی و مطلق، قابلیت متحرک سازی و … به تکمیل سطح اول پرداختند.

نمونه ای از قوانین CSS برای تعیین ظاهر یک صفحه وب
نمونه ای از قوانین سی اس اس برای تعیین ظاهر یک صفحه وب