بهترین روش ها برای یک برنامه وب سریعتر با HTML5

Paul Irish

معرفی

هدف بیشتر HTML5 ارائه پشتیبانی بومی مرورگر برای مؤلفه‌ها و تکنیک‌هایی است که تاکنون از طریق کتابخانه‌های جاوا اسکریپت به دست آورده‌ایم. استفاده از این ویژگی‌ها، در صورت وجود، می‌تواند تجربه بسیار سریع‌تری را برای کاربران شما به ارمغان آورد. در این آموزش، من تحقیقات عملکرد عالی را که در سایت عملکرد استثنایی یاهو یا اسناد سرعت صفحه گوگل دیده‌اید و اجازه دهید وب سایت را سریع‌تر کنیم، مرور نمی‌کنم. در عوض، من بر این تمرکز خواهم کرد که چگونه استفاده از HTML5 و CSS3 امروز می‌تواند برنامه‌های وب شما را پاسخگوتر کند.

نکته 1: از فضای ذخیره سازی وب به جای کوکی ها استفاده کنید

در حالی که کوکی ها برای سال ها برای ردیابی داده های منحصر به فرد کاربر استفاده می شوند، معایب جدی دارند. بزرگترین نقص این است که تمام داده های کوکی شما به هر هدر درخواست HTTP اضافه می شود. این می‌تواند تأثیر قابل‌اندازه‌گیری بر زمان پاسخ ، به‌ویژه در طول XHR داشته باشد. بنابراین بهترین روش کاهش اندازه کوکی است. در HTML5 ما می توانیم بهتر از این کار کنیم: از sessionStorage و localStorage به جای کوکی ها استفاده کنیم.

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

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                  ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}

نکته 2: به جای انیمیشن جاوا اسکریپت از CSS Transitions استفاده کنید

CSS Transition به شما یک انتقال بصری جذاب بین دو حالت می دهد. اکثر خصوصیات سبک را می توان تغییر داد، مانند دستکاری متن-سایه، موقعیت، پس زمینه یا رنگ. می‌توانید از انتقال به حالت‌های انتخابگر شبه مانند :hover یا از فرم‌های HTML5، :invalid و :valid ( مثلاً با حالت‌های اعتبارسنجی فرم ) استفاده کنید. اما آنها بسیار قدرتمندتر هستند و زمانی که هر کلاسی را به یک عنصر اضافه می کنید، می توانند فعال شوند.

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

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

نکته 3: از پایگاه داده های سمت سرویس گیرنده به جای رفت و برگشت سرور استفاده کنید

پایگاه داده Web SQL و IndexedDB پایگاه های داده را به سمت مشتری معرفی می کنند. به جای الگوی رایج ارسال داده ها به سرور از طریق XMLHttpRequest یا ارسال فرم، می توانید از این پایگاه داده های سمت مشتری استفاده کنید. کاهش درخواست‌های HTTP هدف اصلی همه مهندسان عملکرد است، بنابراین استفاده از آنها به‌عنوان ذخیره‌گاه داده می‌تواند بسیاری از سفرها را از طریق XHR ذخیره کند یا پست‌ها را به سرور بازگرداند. localStorage و sessionStorage می توان در برخی موارد استفاده کرد، مانند ثبت پیشرفت ارسال فرم، و به طور قابل توجهی سریعتر از APIهای پایگاه داده سمت کلاینت هستند. به عنوان مثال، اگر یک جزء شبکه داده یا یک صندوق ورودی با صدها پیام دارید، ذخیره داده ها به صورت محلی در یک پایگاه داده باعث صرفه جویی در رفت و آمدهای HTTP در زمانی که کاربر مایل به جستجو، فیلتر کردن یا مرتب سازی است، می شود. لیستی از دوستان یا تکمیل خودکار ورودی متن را می توان در هر ضربه کلید فیلتر کرد و تجربه کاربری بسیار پاسخگوتری را ایجاد کرد.

نکته 4: بهبودهای جاوا اسکریپت مزایای عملکرد قابل توجهی را به همراه دارد

بسیاری از روش های اضافی به نمونه اولیه آرایه در جاوا اسکریپت 1.6 اضافه شد . اینها در حال حاضر در اکثر مرورگرها در دسترس هستند، به جز IE. مثلا:

// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]

// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

در بیشتر موارد، استفاده از این روش‌های بومی سرعت بسیار بالاتری نسبت به حلقه‌های معمولی شما دارد، مانند: for (var i = 0, len = arr.length; i < len; i++) . تجزیه بومی JSON (از طریق JSON.parse() ) جایگزین فایل json2.js می شود که ما مدتی به اضافه کردن آن عادت داشتیم. Native JSON بسیار سریعتر و ایمن تر از استفاده از اسکریپت خارجی است و در حال حاضر در IE8، Opera 10.50، Firefox 3.5، Safari 4.0.3 و Chrome وجود دارد. Native String.trim مثال خوب دیگری از این است که نه تنها سریعتر از معادلهای longhand JS است، بلکه به طور بالقوه صحیح تر است. هیچ یک از این افزودنی‌های جاوا اسکریپت از نظر فنی HTML5 نیستند، اما در چتر فناوری‌هایی قرار می‌گیرند که اخیراً در دسترس هستند.

نکته 5: از مانیفست کش برای سایت های زنده استفاده کنید، نه فقط برای برنامه های آفلاین

دو سال پیش، وردپرس از Google Gears برای اضافه کردن ویژگی به نام Wordpress Turbo استفاده کرد. اساساً بسیاری از منابع مورد استفاده در پنل مدیریت را به صورت محلی ذخیره می کرد و دسترسی به فایل ها را سرعت می بخشد. ما می توانیم آن رفتار را با applicationCache HTML5 و cache.manifest تکرار کنیم. حافظه پنهان برنامه نسبت به تنظیم سرصفحه Expires مزیت کمی دارد. از آنجایی که شما یک فایل اعلامی می سازید که نشان دهنده منابع استاتیکی است که می توانند کش شوند، مرورگرها می توانند آن را به شدت بهینه کنند، شاید حتی قبل از استفاده شما آنها را پیش کش کنند. ساختار اصلی سایت خود را به عنوان یک الگو در نظر بگیرید. شما داده‌هایی دارید که ممکن است تغییر کنند، اما HTML اطراف آن معمولاً ثابت می‌ماند. با حافظه پنهان برنامه می‌توانید با HTML خود به‌عنوان مجموعه‌ای از الگوهای خالص رفتار کنید، نشانه‌گذاری را از طریق cache.manifest ذخیره کنید، و سپس JSON را از طریق سیم برای به‌روزرسانی محتوا تحویل دهید. این مدل بسیار شبیه به کاری است که یک برنامه خبری بومی آیفون یا اندروید انجام می دهد.

نکته 6: شتاب سخت افزاری را برای بهبود تجربه بصری فعال کنید

در مرورگرهای پیشرو، بسیاری از عملیات بصری می توانند از شتاب در سطح GPU استفاده کنند، که می تواند عملیات بصری بسیار پویا را بسیار روان تر کند. شتاب سخت‌افزاری برای Firefox Minefield و IE9 اعلام شده است و Safari در نسخه 5 شتاب سخت‌افزاری را اضافه کرده است. (خیلی زودتر به Mobile Safari رسید.) Chromium به تازگی تبدیل‌های سه بعدی و شتاب سخت‌افزاری را برای ویندوز اضافه کرده است و دو پلتفرم دیگر به زودی عرضه می‌شوند. .

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

.hwaccel {  -webkit-transform: translateZ(0); }

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

نکته 7: برای عملیات های سنگین CPU، Web Workers ارائه می دهند

Web Workers دو مزیت قابل توجه دارند: 1) سریع هستند. 2) در حالی که آنها وظایف شما را انجام می دهند، مرورگر پاسخگو باقی می ماند. نگاهی به عرشه اسلاید HTML5 برای کارگران در حال اجرا داشته باشید. برخی از موقعیت های ممکن که می توانید از Web Workers استفاده کنید:

• قالب بندی متن یک سند طولانی
• برجسته سازی نحو
• پردازش تصویر
• سنتز تصویر
• پردازش آرایه های بزرگ

نکته 8: ویژگی های فرم HTML5 و انواع ورودی

HTML5 مجموعه جدیدی از انواع ورودی را معرفی می کند و مجموعه text ، password و file ما را ارتقا می دهد تا شامل search ، tel ، url ، email ، datetime ، date ، month ، week ، time ، datetime-local ، number ، range و color . پشتیبانی مرورگرها برای این موارد متفاوت است و Opera در حال حاضر بیشتر اجرا می شود. با تشخیص ویژگی می‌توانید تعیین کنید که آیا مرورگر از پشتیبانی بومی برخوردار است (و یک رابط کاربری مانند انتخابگر تاریخ یا انتخابگر رنگ ارائه می‌کند) و اگر نه، می‌توانید به استفاده از ویجت‌های JS برای انجام این وظایف رایج ادامه دهید. علاوه بر انواع، چند ویژگی مفید به فیلدهای ورودی معمولی ما اضافه شده است. placeholder ورودی متنی پیش‌فرض را ارائه می‌دهد که با کلیک کردن روی آن‌ها پاک می‌شود و autofocus بر روی بارگذاری صفحه تمرکز می‌کند تا بتوانید بلافاصله با آن فیلد تعامل داشته باشید. اعتبار سنجی ورودی چیز دیگری است که با HTML5 راه پیدا کرده است. افزودن ویژگی required به این معنی است که pattern اجازه نخواهد داد فرم تا زمانی که آن فیلد پر شود ارسال شود. با مقادیر نامعتبر ارسال فرم را مسدود می کند. این نحو بیانی یک ارتقاء بزرگ نه تنها در خوانایی منبع بلکه کاهش قابل توجه جاوا اسکریپت ضروری است. مجدداً، اگر پشتیبانی بومی برای این موارد وجود ندارد، می‌توانید از تشخیص ویژگی برای ارائه راه‌حل بازگشتی استفاده کنید. استفاده از ویجت‌های بومی در اینجا به این معنی است که شما نیازی به ارسال جاوا اسکریپت و css سنگین مورد نیاز برای برداشتن این ویجت‌ها ندارید، که باعث افزایش سرعت بارگذاری صفحه و احتمالاً بهبود پاسخگویی ویجت می‌شود. برای امتحان برخی از این پیشرفت‌های ورودی ، عرشه اسلاید HTML5 را بررسی کنید.

نکته 9: از افکت های CSS3 به جای درخواست اسپرایت های سنگین تصویر استفاده کنید

CSS3 بسیاری از امکانات طراحی جدید را ارائه می دهد که جایگزین استفاده ما از تصاویر برای نمایش دقیق طراحی بصری می شود. جایگزین کردن یک تصویر 2k با 100 بایت CSS یک پیروزی بزرگ است، ناگفته نماند که درخواست HTTP دیگری را حذف کرده اید. تعدادی از خواصی که باید با آنها آشنا شوید عبارتند از:

• گرادیان های خطی و شعاعی
• شعاع حاشیه برای گوشه های گرد
• جعبه سایه برای درخشش و سایه ها
• RGBA برای کدورت آلفا
• تبدیل برای چرخش
• ماسک های CSS

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

نکته 10: WebSocket برای تحویل سریعتر با پهنای باند کمتر از XHR

WebSockets در پاسخ به محبوبیت روزافزون Comet طراحی شد. در واقع مزایایی برای استفاده از WebSockets در حال حاضر، به جای مدل Comet بیش از XHR وجود دارد.

WebSockets قاب بندی بسیار سبکی دارد و بنابراین پهنای باندی که مصرف می کند اغلب سبک تر از XHR است. برخی گزارش ها کاهش 35 درصدی بایت های ارسال شده از طریق سیم را نشان می دهد. علاوه بر این، در حجم بالاتر، تفاوت عملکرد هنگام تحویل پیام آشکارتر است. XHR در این تست با داشتن زمان مجموع 3500٪ بیشتر از WebSockets ثبت شده است. در نهایت، آزمایشگاه اریکسون عملکرد WebSockets را در نظر گرفت و دریافت که زمان پینگ بر روی HTTP 3-5 برابر بیشتر از WebSockets به دلیل نیازهای پردازشی قابل توجه است. آنها به این نتیجه رسیدند که پروتکل WebSocket به وضوح برای برنامه های بیدرنگ مناسب تر است.

منابع اضافی

برای توصیه های اندازه گیری و عملکرد، مطمئناً باید از افزونه های فایرفاکس Page Speed ​​و YSlow استفاده کنید. علاوه بر این، Speed ​​Tracer برای کروم و DynaTrace Ajax برای اینترنت اکسپلورر سطح دقیق تری از ثبت تجزیه و تحلیل را ارائه می دهند.