Tag Archives: html

کمینه سازی 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 طراحی و منتشر شده است.

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

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

لیبل Label

لیبل یا Label چیست؟

واژه لیبل (Label) به طور کلی به معنای برچسبی است که برای کمک به توصیف یا شناسایی یک شئ یا محتوای آن به کار می‌رود. با اینحال این واژه در حوزه‌های مختلف رایانه از زبان های برنامه نویسی گرفته تا واسط های کاربری گرافیکی، دستورات خط فرمان و … مفاهیم و کاربردهای ویژه‌ای دارد.

کاربردها و مفاهیم تخصصی Label

در حوزه زبان های برنامه نویسی، لیبل به دنباله‌ای از کاراکترها گفته می‌شود که مکانی را در سورس کد مشخص می‌کند. مشخصه (Identifier) این لیبل‌ها معمولا به یک نماد کلن یا : ختم می‌شود. در اغلب زبان‌ها از این قابلیت برای مشخص نمودن مقصد دستور GOTO استفاده می‌شود. به همین دلیل مشخصه‌ای که برای تعریف یک لیبل استفاده می‌شود می‌بایست در کل بلاک مربوط به تابع دربرگیرنده آن منحصربفرد باشد.

در قطعه کد زیر که به زبان C++ نوشته شده است نحوه ایجاد لیبل و استفاده از آن در دستور GOTO نمایش داده شده است:

...
label:
...
goto label;
...

label در برخی از سیستم عامل ها (از جمله DOS و Microsoft Windows)، به عنوان یک دستور خط فرمان شناخته می‌شود که از آن برای ایجاد یا تغییر برچسب یک پارتیشن استفاده می‌شود. در مثال زیر نحوه استفاده از این دستور برای تغییر برچسب پارتیشن D به Software نمایش داده شده است:

label D: Software

در زبان HTML نیز تگی به نام <label> وجود دارد که از آن برای تعریف و اختصاص دادن یک برچسب به برخی از المان‌های دیگر نظیر <input> و <textarea> استفاده می‌شود. در مثال زیر، نحوه استفاده از این تگ نمایش داده شده است:

لیبل label
نمونه استفاده از تگ label در یک قطعه کد HTML

نتیجه اجرای قطعه کد فوق را می‌توانید در ادامه مشاهده کنید:


 

به علاوه Label در حوزه واسط های کاربری گرافیکی نیز عنوان نوعی المان یا کنترل (Control) است که معمولا برای نمایش برچسب یک کنترل دیگر (نظیر text box) به کار می‌رود. در تصویر زیر دو کنترل Label با متن‌های Name و Mail را مشاهده می‌کنید. این برچسب ها همانند آنچه در مثال مربوط به المان‌های HTML گفته شد به کاربر کمک می‌کنند تا متوجه شود المان متناظر با هر برچسب برای چه کاربردی در نظر گرفته شده است.

کنترل لیبل Label Control
نمونه‌ای از دو کنترل Label که برچسب‌هایی به دو کنترل Text box اختصاص داده‌اند. کاربر با توجه به این برچسب ها متوجه می‌شود در فیلد متنی اول می‌بایست نام و در فیلد دوم نشانی ایمیل خود را وارد نماید.

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

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

اچ تی ام ال HTML

اچ تی ام ال یا HTML چیست؟

اچ تی ام ال (HTML) یک زبان نشانه گذاری استاندارد است که برای ایجاد صفحات و اپلیکیشن‌های وب مورد استفاده قرار می‌گیرد. عنوان این زبان برگرفته از سرواژه‌های عبارت HyperText Markup Language به معنای “زبان نشانه‌گذاری ابرمتن” می‌باشد. اچ‌تی‌ام‌ال در کنار CSS و JavaScript به عنوان فناوری‌های اصلی مورد استفاده در دنیای وب شناخته می‌شود.

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

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

<tagName>محتویات تگ</tagName>

به عنوان مثال، قطعه کد HTML زیر از تگ آغازین <p> و تگ پایانی </p> برای تعریف یک پاراگراف استفاده می‌کند. چنین تگ‌هایی می‌توانند تگ‌های دیگری را به عنوان زیرمجموعه خود دربربگیرند.

<p>This is a Paragraph.</p>

گونه‌ی دیگری از تگ‌های اچ تی ام ال نیز وجود دارد که نیازی به بسته شدن (تگ پایانی) ندارند. المان‌های <br> و <img> از این دسته هستند. در داخل تگ‌های آغازین ممکن است خاصیت (Attribute) هایی نیز قید شود. این خاصیت‌ها اطلاعات بیشتری راجع به المان موردنظر ارائه می‌کنند و همواره به صورت جفت‌های “نام خاصیت” و “مقدار” مشخص می‌شوند. به عنوان مثال در نمونه زیر برای تعریف یک المان تصویری از تگ <img> و سه خاصیت src برای تعیین مسیر و نام فایل تصویری، width برای عرض تصویر و height برای ارتفاع آن استفاده شده است. توجه کنید مقدار خاصیت‌ها همواره با استفاده از یک علامت تساوی به “نام خاصیت” منسوب می‌شود. همانطور که گفته شد این المان به تگ پایانی نیاز ندارد.

<img src="/pictures/flower.jpg?x55557" width="200" height="250">

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

پسوند فایل‌های اچ‌تی‌ام‌ال به صورت .htm یا .html می‌باشد.

نمونه‌ای از کد HTML
نمونه‌ای از کد اج‌تی‌ام‌ال