iranexperts

بهینه سازی سایت (2) – Content Delivery Network یا CDN

دوشنبه 6 تیر 1390 05:53 ب.ظ ویرایش: دوشنبه 6 تیر 1390 06:06 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

در مواقعی که توسعه دهنده یک سایت بزرگ باشیم , تکنیکهای بسیاری برای لود سریعتر سایت استفاده می‌شود. در اینگونه سایتها به علت اینکه کاربران سایت از سرتاسر جهان به آن وارد می‌شوند , ممکن است برای برخی از کاربران زمان لود سایت بالا باشد که یکی از علل آن مسافت زیاد تا محل سرور است. برای مثال فرض کنید ما بخواهیم به سایت یاهو که سرور آن در آمریکاست مراجعه کنیم , مسلما اگر درخواست ما به سرور یاهو در آمریکا ارسال شود , زمان پاسخدهی به آن بسیار بالا خواهد بود. اما یاهو از چه تکنیکی استفاده کرده است که به درخواست ما در حال حاضر سریعتر پاسخ داده می‌‍شود؟

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

برخی از مزایایی که استفاده از CDN ها به ارمغان می‌آورد :

- بالارفتن سرعت لود صفحات

- استفاده از تصاویری مختلف در محدوده‌های مختلف

- کمتر شدن فشار وارده به سرور مرکزی در مواقعی که ترافیک سایت بالا می‌رود

- تهیه پشتیبان از فایل‌ها به صورت غیر متمرکز

اما ممکن است سایتی که ما در حال توسعه آن باشیم یا سایتی که متعلق به ماست یک سایت محلی یا منطقه‌ای باشد , در اینصورت مسلما استفاده از CDN به صورت ذکرشده مقرون به صرفه نیست. اما با این حال هم CDN می‌تواند برای سایت های کوچک مفید باشد , چطور؟

فرض کنید ما برای ساخت یک سایت از کتابخانه جی‌کوئری هم استفاده کرده باشیم , در این صورت می‌توان گفت که اگر لینک به فایل جی‌کوئری را از یکی از CDN ها دریافت کنیم سرعت لود سایت ما بالاتر می‌رود. علت سریعتر شدن لود سایت به دلیل نزدیکی جغرافیایی نیست بلکه به این دلیل است که ممکن است کاربر قبلا به سایتی مراجه کرده باشد که همان فایل را از همان CDN بر روی کامپیوتر کاربر دانلود کرده باشد و فایل , داخل کش مرورگر قرار گرفته باشد در اینصورت به علت یکی بودن آدرس فایل‌ها اصلا نیازی به دانلود مجدد فایل نیست.

از طرفی مزیت دیگر این روش در این است که در صورتی که بازدید سایت شما زیاد شود , بابت دانلود فایلی که در CDN قرار دارد از Bandwith هاست شما استفاده نمی‌شود.

درحال حاضر پراستفاده ترین فایل CDN , فایل کتابخانه جی‌کوئری است که در سرور CDN گوگل به آدرس زیر قرار دارد :

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

برای دریافت آدرس کتابخانه‌های معروف به صورت تگ اسکریپت از CDN گوگل از این سایت استفاده کنید.

برچسب ها:جی کوئری ،CDN ،content delivery network ،بهینه سازی ،
دنبالک ها:cdn کتابخانه های معروف ،

نظرات()

بهینه سازی سایت (1) – lazy loading

شنبه 21 خرداد 1390 11:39 ق.ظ ویرایش: شنبه 21 خرداد 1390 12:05 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

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

لود غیرهمزمان(کند,تنبل) یا به اصطلاح lazy loading برای تصاویر صفحه:

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

http://deanhume.com/Home/BlogPost/set-up-iis-7-to-run-a-secure-site-locally---https/21

برای شروع ابتدا پلاگین jquery.lazyload.js را از اینجا دانلود میکنیم.

حالا هم جی‌کوئری و هم lazyload را به صفحه اضافه می‌کنیم:

در انتها پلاگین lazyload را برای تصاویر صفحه فراخوانی می‌کنیم:

$(function(){

$("img").lazyload();

});

</script>

این عبارت :

$("img").lazyload();

به این معنی است که این پلاگین را بر روی تمام تگهای img اعمال کن.
شاید زمانی که از این تکنیک به شکل بالا استفاده کنید لود شدن تصاویر در هنگام اسکرول کردن را حس نکنید. اما برای لود شدن تصویر افکت های در نظر گرفته شده که با تعیین آنها این احساس که عکس ها در همان لطظه‌ی اسکرول کردن لود می‌شوند , بیشتر احساس می‌شود.
این افکت به صورت زیر تعیین می‌شود:

$("img").lazyload({effect: "fadeIn"});

در اینصورت وقتی که تصویر داخل محدوده‌ی قابل رویت مرورگر قرار بگیرد به آرامی ظاهر می‌شود.

تنظیمات دیگری برای این پلاگین وجود دارد که می‌توانید با مراجعه به وبسایتهای زیر از آنها مطلع شوید.

http://www.appelsiini.net/projects/lazyload

https://github.com/tuupola/jquery_lazyload

برچسب ها:jquery ،lazy loading ،جی کوئری ،

نظرات()

پیاده سازی ajax از طریق jQuery در asp.net

جمعه 30 اردیبهشت 1390 04:31 ب.ظ ویرایش: جمعه 30 اردیبهشت 1390 04:54 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

در Jquery پیاده سازی ajax نسبت به روش معمولی که از طریق نوشتن توابع جاوا اسکریپت بود , نسبتا راحت تر شده است.
Jquery تعدادی تابع برای برقراری ارتباط باسرور بدون نیاز به postback خوردن صفحه ایجاد کرده که یکی از ساده ترین آنها &.ajax() است.
ساختار کلی استفاده از این تابع به شکل زیر است :

&.ajax(option);

اما option چیست؟ option متغیری است که تنظیمات ارتباط با سرور در آن قرار می گیرد. تنظیماتی از قبیل آدرس مورد نظر در سرور , پارامترهای مورد نیاز سرور , .. . .
ساختار کلی این متغیر به صورت زیر است :

Var option = {
    type: "", // type of sending   values: GET or POST
              url: "",            // server url
              data: "{}",     // parameters
              contentType: "application/json; charset=utf-8",     // request structure
              dataType: "json",                                                // data structure
              success: function(msg) {//ToDo: s.th. }        // on success function
    fail : function(msg) {//ToDo: s.th. }        // on fail function
}

Json ساختاری برای رد و بدل کردن اطلاعات است.اینجا اطلاعات بیشتری درباره‌ی json وجود دارد.
Type روش ارسال اطلاعات است که دو نوع post و get را قبول می کند.
url شامل آدرس تابع یا صفحه ی ما در سرور است که یکی از ساختارهای آن به شکل زیر است :

url : “PageName.Ext/MethodName”

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

using System.Web.Services;
[WebMethod]
public static string GetUserData(string UserID)
{
return DB.UserData(UserID).ToString();
}

و سمت کلاینت هم از طریق جی کوئری رویداد کلیک برای باتن مورد نظر تعریف می کنیم:

$(document).ready(function() {
        $('#MyButton').click(function() {
              var option = {
                    type: "POST",
                    url: "defualt.aspx/GetUserData",
                    data: "{'UserID':'101'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                            alert(msg.d);
                        }};
             $.ajax(option);
                });
            });

نکته مهمی که باید به آن اشاره شود این است که مقداری که از سمت سرور به عنوان نتیجه بر می گردد در سمت کلاینت با متغیری به نام msg قابل دسترسی است. و msg.d دسترسی به داده ی موجود در آبجکت بازگشی را ایجاد می کند.

برچسب ها:jquery ،جی کوئری ،ajax ،

نظرات()

طراحی فرم با jQuery

دوشنبه 12 اردیبهشت 1390 12:33 ب.ظ ویرایش: دوشنبه 12 اردیبهشت 1390 12:54 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

تو خیلی از سایتها وقتی داریم فرمی رو پر می‌کنیم برای اینکه به ما نشون بدن که کدوم فیلد رو داریم پر می‌کنیم یا به اصطلاح focus روی کدوم فیلده , وقتی وارد فیلد می‌شیم رنگ border و background فیلد رو تغییر می‌دن مثل عکسای پایین :

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

اول از همه باید کتابخونه‌ی جی‌کوئری رو دانلود کنیم و به صفحمون اضافه کنیم :

</head>

بعد از اینکه فرم رو طراحی کردیم (تکه ای از کد مربوط به فرم ) :

<asp:Label ID="Label1" runat="server" Text="نام کاربری : "></asp:Label>

<asp:TextBox ID="txtUserName" runat="server" ValidationGroup="ac" Width="175px"></asp:TextBox>

<asp:Label ID="Label2" runat="server" Text="کلمه عبور : "></asp:Label>

<asp:TextBox ID="txtPassWord" runat="server" TextMode="Password" ValidationGroup="ac"

Width="175px"></asp:TextBox>

شروع می‌کنیم به نوشتن دستورات جی‌کوئری . باید از دو متد focus و blur جی‌کوئری برای فهمیدن اینکه چه وقتی کاربر وارد فیلد شده و چه وقتی از اون خارج شده استفاده کنیم. برای تغییر ویژگی های فیلد هم باید از متد css جی‌کوئری استفاده کنیم.

$("#txtUserName").focus(

function() { $("#txtUserName").css("border-color", "#5bb53e")}

)

$("#txtUserName").blur(

function() { $("#txtUserName").css("border-color", "#000000") }

)

</script>

به شکل زیر توجه کنید: