ভূমিকা
এইচটিএমএল 5-এর বেশিরভাগেরই লক্ষ্য উপাদান এবং কৌশলগুলির জন্য নেটিভ ব্রাউজার সমর্থন সরবরাহ করা যা আমরা এখনও পর্যন্ত জাভাস্ক্রিপ্ট লাইব্রেরির মাধ্যমে অর্জন করেছি। এই বৈশিষ্ট্যগুলি ব্যবহার করা, উপস্থিত থাকাকালীন, আপনার ব্যবহারকারীদের জন্য আরও দ্রুত অভিজ্ঞতা প্রদান করতে পারে৷ এই টিউটোরিয়ালে, আমি Yahoo-এর ব্যতিক্রমী পারফরম্যান্স সাইট বা Google-এর পেজ স্পিড ডক্সে যে চমৎকার পারফরম্যান্স রিসার্চ দেখেছেন সেগুলোর সংক্ষিপ্ত বিবরণ দেব না এবং আসুন ওয়েবটিকে আরও দ্রুততর করে তুলি । পরিবর্তে আমি আজকে কীভাবে HTML5 এবং CSS3 ব্যবহার করার জন্য আপনার ওয়েব অ্যাপগুলিকে আরও প্রতিক্রিয়াশীল করে তুলতে পারে তার উপর ফোকাস করব৷
টিপ 1: কুকিজের জায়গায় ওয়েব স্টোরেজ ব্যবহার করুন
কয়েক বছর ধরে অনন্য ব্যবহারকারীর ডেটা ট্র্যাক করার জন্য কুকিজ ব্যবহার করা হলেও, তাদের গুরুতর অসুবিধা রয়েছে৷ সবচেয়ে বড় ত্রুটি হল যে আপনার সমস্ত কুকি ডেটা প্রতিটি HTTP অনুরোধ শিরোনামে যোগ করা হয়েছে। এটি প্রতিক্রিয়া সময়ের উপর একটি পরিমাপযোগ্য প্রভাব ফেলতে পারে, বিশেষ করে XHR-এর সময়। তাই একটি সর্বোত্তম অনুশীলন হল কুকির আকার হ্রাস করা । HTML5-এ আমরা এর চেয়ে ভালো করতে পারি: কুকিজের জায়গায় sessionStorage এবং localStorage ব্যবহার করুন।
এই দুটি ওয়েব স্টোরেজ অবজেক্ট সেশনের দৈর্ঘ্য বা অনির্দিষ্টকালের জন্য ক্লায়েন্টসাইডে ব্যবহারকারীর ডেটা বজায় রাখতে ব্যবহার করা যেতে পারে। তাদের ডেটা প্রতিটি HTTP অনুরোধের মাধ্যমে সার্ভারে স্থানান্তরিত হয় না। তাদের একটি এপিআই রয়েছে যা আপনাকে কুকিজ থেকে মুক্তি পেয়ে খুশি করবে। এখানে উভয় 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: JavaScript অ্যানিমেশনের পরিবর্তে CSS ট্রানজিশন ব্যবহার করুন
CSS ট্রানজিশন আপনাকে দুটি রাজ্যের মধ্যে একটি আকর্ষণীয় ভিজ্যুয়াল ট্রানজিশন দেয়। টেক্সট-শ্যাডো, অবস্থান, ব্যাকগ্রাউন্ড বা রঙ ম্যানিপুলেট করার মতো বেশিরভাগ শৈলী বৈশিষ্ট্যগুলি পরিবর্তন করা যেতে পারে। আপনি ছদ্ম-নির্বাচক অবস্থায় রূপান্তরগুলি ব্যবহার করতে পারেন যেমন :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: সার্ভার রাউন্ডট্রিপের পরিবর্তে ক্লায়েন্ট-সাইড ডাটাবেস ব্যবহার করুন
ওয়েব এসকিউএল ডাটাবেস এবং ইনডেক্সডডিবি ক্লায়েন্টসাইডে ডাটাবেস পরিচয় করিয়ে দেয়। XMLHttpRequest বা ফর্ম জমা দিয়ে সার্ভারে ডেটা পোস্ট করার সাধারণ প্যাটার্নের পরিবর্তে, আপনি এই ক্লায়েন্টসাইড ডাটাবেসগুলি ব্যবহার করতে পারেন। এইচটিটিপি অনুরোধগুলি হ্রাস করা সমস্ত পারফরম্যান্স ইঞ্জিনিয়ারদের একটি প্রাথমিক লক্ষ্য, তাই এগুলিকে ডেটাস্টোর হিসাবে ব্যবহার করা XHR এর মাধ্যমে অনেক ট্রিপ সংরক্ষণ করতে পারে বা সার্ভারে পোস্ট তৈরি করতে পারে। localStorage এবং sessionStorage কিছু ক্ষেত্রে ব্যবহার করা যেতে পারে, যেমন ফর্ম জমা দেওয়ার অগ্রগতি ক্যাপচার করা, এবং ক্লায়েন্ট-সাইড ডাটাবেস এপিআইগুলির তুলনায় লক্ষণীয়ভাবে দ্রুত হতে দেখা গেছে। উদাহরণস্বরূপ, যদি আপনার কাছে একটি ডেটা গ্রিড উপাদান থাকে বা শত শত বার্তা সহ একটি ইনবক্স থাকে, একটি ডাটাবেসে স্থানীয়ভাবে ডেটা সংরক্ষণ করা আপনাকে HTTP রাউন্ডট্রিপ সংরক্ষণ করবে যখন ব্যবহারকারী অনুসন্ধান, ফিল্টার বা সাজাতে চান। বন্ধুদের একটি তালিকা বা একটি পাঠ্য ইনপুট স্বয়ংসম্পূর্ণ প্রতিটি কীস্ট্রোকে ফিল্টার করা যেতে পারে, যা অনেক বেশি প্রতিক্রিয়াশীল ব্যবহারকারীর অভিজ্ঞতা তৈরি করে।
টিপ 4: জাভাস্ক্রিপ্টের উন্নতি যথেষ্ট কর্মক্ষমতা সুবিধা দেয়
JavaScript 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 ফাইলটিকে প্রতিস্থাপন করে যা আমরা কিছু সময়ের জন্য অন্তর্ভুক্ত করতে অভ্যস্ত। নেটিভ JSON একটি বাহ্যিক স্ক্রিপ্ট ব্যবহার করার চেয়ে অনেক দ্রুত এবং নিরাপদ এবং এটি ইতিমধ্যেই IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 এবং Chrome-এ রয়েছে৷ নেটিভ String.trim হল লংহ্যান্ড জেএস সমতুল্যের চেয়ে দ্রুততর হওয়ার আরেকটি ভাল উদাহরণ নয়, সম্ভাব্য আরও সঠিক। এই জাভাস্ক্রিপ্ট সংযোজনগুলির কোনটিই প্রযুক্তিগতভাবে HTML5 নয়, তবে তারা সম্প্রতি উপলব্ধ প্রযুক্তির ছাতার মধ্যে পড়ে।
টিপ 5: লাইভ সাইটের জন্য ক্যাশে ম্যানিফেস্ট ব্যবহার করুন, শুধু অফলাইন অ্যাপ নয়
দুই বছর আগে, Wordpress Google Gears ব্যবহার করে Wordpress Turbo নামে একটি বৈশিষ্ট্য যুক্ত করেছিল। এটি মূলত স্থানীয়ভাবে অ্যাডমিন প্যানেলে ব্যবহৃত অনেক সংস্থানকে ক্যাশ করে, তাদের ফাইল অ্যাক্সেসের গতি বাড়িয়ে দেয়। আমরা সেই আচরণটিকে HTML5 এর অ্যাপ্লিকেশন ক্যাশে এবং cache.manifest এর সাথে প্রতিলিপি করতে পারি। অ্যাপ ক্যাশে মেয়াদ Expires শিরোনাম সেট করার উপর একটি সামান্য সুবিধা আছে; যেহেতু আপনি স্ট্যাটিক রিসোর্সগুলিকে নির্দেশ করে একটি ঘোষণামূলক ফাইল তৈরি করেন যা ক্যাশেযোগ্য হতে পারে, ব্রাউজারগুলি এটিকে অপ্টিমাইজ করতে পারে, সম্ভবত আপনার ব্যবহারের আগে সেগুলিকে প্রিক্যাচ করতে পারে। একটি টেমপ্লেট হিসাবে আপনার সাইটের মৌলিক কাঠামো বিবেচনা করুন. আপনার কাছে এমন ডেটা রয়েছে যা পরিবর্তিত হতে পারে তবে এটির চারপাশের HTML সাধারণত বেশ সামঞ্জস্যপূর্ণ থাকে। অ্যাপ ক্যাশের সাহায্যে আপনি আপনার এইচটিএমএলকে বিশুদ্ধ টেমপ্লেটের একটি সিরিজ হিসাবে বিবেচনা করতে পারেন, cache.manifest-এর মাধ্যমে মার্কআপটি ক্যাশ করতে পারেন এবং তারপর বিষয়বস্তু আপডেট করার জন্য JSON-কে তারের উপর দিয়ে সরবরাহ করতে পারেন। এই মডেলটি একটি আইফোন বা অ্যান্ড্রয়েড নেটিভ নিউজ অ্যাপের মতোই।
টিপ 6: ভিজ্যুয়াল অভিজ্ঞতা বাড়াতে হার্ডওয়্যার ত্বরণ সক্ষম করুন
নেতৃস্থানীয় ব্রাউজারে, অনেক ভিজ্যুয়াল ক্রিয়াকলাপ GPU-স্তরের ত্বরণ লাভ করতে পারে, যা অত্যন্ত গতিশীল ভিজ্যুয়াল অপারেশনগুলিকে অনেক মসৃণ করে তুলতে পারে। ফায়ারফক্স মাইনফিল্ড এবং IE9- এর জন্য হার্ডওয়্যার ত্বরণ ঘোষণা করা হয়েছে এবং Safari সংস্করণ 5-এ হার্ডওয়্যার-স্তরের ত্বরণ যোগ করেছে। (এটি মোবাইল সাফারিতে অনেক আগে এসেছে।) Chromium সবেমাত্র Windows এর জন্য 3D রূপান্তর এবং হার্ডওয়্যার ত্বরণ যোগ করেছে, অন্য দুটি প্ল্যাটফর্ম শীঘ্রই আসছে। .
GPU ত্বরণ শুধুমাত্র একটি মোটামুটি সীমাবদ্ধ অবস্থার মধ্যেই শুরু হয়, তবে 3D রূপান্তর এবং অ্যানিমেটেড অপাসিটি হল সুইচটি ট্রিপ করার সবচেয়ে সাধারণ উপায়। এটি চালু করার একটি কিছুটা হ্যাকি কিন্তু বাধাহীন উপায় হল:
.hwaccel { -webkit-transform: translateZ(0); }
কোন গ্যারান্টি, যদিও. :) হার্ডওয়্যার ত্বরণ সমর্থিত এবং সক্ষম হলে, অ্যানিমেটেড অনুবাদ, ঘূর্ণন, স্কেলিং এবং অস্বচ্ছতা অবশ্যই GPU কম্পোজিংয়ের সাথে মসৃণ হবে। তারা সরাসরি GPU তে পরিচালনা করার সুবিধা পাবে এবং স্তর বিষয়বস্তু পুনরায় আঁকার প্রয়োজন হবে না। যাইহোক, পৃষ্ঠার বিন্যাসকে প্রভাবিত করে এমন যেকোন সম্পত্তি এখনও অপেক্ষাকৃত ধীর হবে।
টিপ 7: CPU-ভারী ক্রিয়াকলাপগুলির জন্য, ওয়েব কর্মী সরবরাহ করে
ওয়েব কর্মীদের দুটি উল্লেখযোগ্য সুবিধা রয়েছে: 1) তারা দ্রুত। 2) যখন তারা আপনার কাজগুলিকে চাপ দেয়, ব্রাউজারটি প্রতিক্রিয়াশীল থাকে। কর্মরত শ্রমিকদের জন্য HTML5 স্লাইড ডেক দেখুন। কিছু সম্ভাব্য পরিস্থিতি যেখানে আপনি ওয়েব ওয়ার্কার ব্যবহার করতে পারেন:
- একটি দীর্ঘ নথির পাঠ্য বিন্যাস
- সিনট্যাক্স হাইলাইটিং
- ইমেজ প্রসেসিং
- ইমেজ সংশ্লেষণ
- বড় অ্যারে প্রক্রিয়া করা হচ্ছে
টিপ 8: HTML5 ফর্ম বৈশিষ্ট্য এবং ইনপুট প্রকার
HTML5 ইনপুট প্রকারের একটি নতুন সেট প্রবর্তন করে, search , tel , url , email , datetime , date , month , week , time , datetime-local , number , range এবং color অন্তর্ভুক্ত করতে আমাদের text , password এবং file সেট আপগ্রেড করে৷ এর জন্য ব্রাউজার সমর্থন পরিবর্তিত হয়, অপেরা এই মুহূর্তে সবচেয়ে বেশি প্রয়োগ করছে। বৈশিষ্ট্য সনাক্তকরণের মাধ্যমে আপনি নির্ধারণ করতে পারেন যে ব্রাউজারটির নেটিভ সমর্থন আছে কিনা (এবং একটি ডেটপিকার বা রঙ চয়নকারীর মতো একটি UI অফার করবে) এবং যদি না হয় তবে আপনি এই সাধারণ কাজগুলি সম্পাদন করতে JS উইজেটগুলি ব্যবহার করা চালিয়ে যেতে পারেন। প্রকারগুলি ছাড়াও, আমাদের সাধারণ ইনপুট ক্ষেত্রগুলিতে কিছু দরকারী বৈশিষ্ট্য যুক্ত করা হয়েছে৷ ইনপুট placeholder ডিফল্ট পাঠ্য অফার করে যা আপনি যখন সেগুলিতে ক্লিক করেন তখন পরিষ্কার হয় এবং autofocus ফোকাস করে যাতে আপনি সেই ক্ষেত্রের সাথে অবিলম্বে যোগাযোগ করতে পারেন। ইনপুট যাচাইকরণ হল আরেকটি জিনিস যা HTML5 এর সাথে প্রবেশ করে। required অ্যাট্রিবিউট যোগ করার মানে হল যে ক্ষেত্রটি পূরণ না হওয়া পর্যন্ত ব্রাউজার ফর্মটি জমা দিতে দেবে না। এছাড়াও pattern অ্যাট্রিবিউট আপনাকে ইনপুটের বিরুদ্ধে পরীক্ষা করার জন্য একটি কাস্টম রেগুলার এক্সপ্রেশন নির্দিষ্ট করতে দেয়; অবৈধ মান সঙ্গে ফর্ম জমা ব্লক. এই ঘোষণামূলক সিনট্যাক্সটি শুধুমাত্র উৎস পঠনযোগ্যতার ক্ষেত্রেই নয় বরং প্রয়োজনীয় জাভাস্ক্রিপ্টের একটি উল্লেখযোগ্য হ্রাসও একটি বড় আপগ্রেড। আবার, আপনি একটি ফলব্যাক সমাধান পরিবেশন করতে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করতে পারেন যদি এই বর্তমানের জন্য স্থানীয় সমর্থন না থাকে। এখানে নেটিভ উইজেটগুলি ব্যবহার করার অর্থ হল এই উইজেটগুলি বন্ধ করার জন্য আপনাকে ভারী জাভাস্ক্রিপ্ট এবং CSS পাঠাতে হবে না, পৃষ্ঠা লোডের গতি বাড়ানো এবং সম্ভবত উইজেট প্রতিক্রিয়াশীলতা উন্নত করা। এই ইনপুট বর্ধিতকরণের কিছু চেষ্টা করার জন্য HTML5 স্লাইড ডেক দেখুন।
টিপ 9: ভারী ইমেজ স্প্রাইট অনুরোধ করার পরিবর্তে CSS3 প্রভাব ব্যবহার করুন
CSS3 অনেক নতুন স্টাইলিং সম্ভাবনা সরবরাহ করে যা ভিজ্যুয়াল ডিজাইনকে নির্ভুলভাবে উপস্থাপন করতে আমাদের চিত্রের ব্যবহারকে প্রতিস্থাপন করে। 100 বাইট CSS দিয়ে একটি 2k ইমেজ প্রতিস্থাপন করা একটি বিশাল জয়, উল্লেখ করার মতো নয় যে আপনি আরেকটি HTTP অনুরোধ সরিয়েছেন। নিজেকে পরিচিত করার জন্য কয়েকটি বৈশিষ্ট্য হল:
- রৈখিক এবং রেডিয়াল গ্রেডিয়েন্ট
- বৃত্তাকার কোণগুলির জন্য সীমানা-ব্যাসার্ধ
- ড্রপ ছায়া এবং আভা জন্য বক্স-ছায়া
- আলফা অস্বচ্ছতার জন্য RGBA
- ঘূর্ণন জন্য রূপান্তর
- সিএসএস মাস্ক
উদাহরণস্বরূপ, আপনি গ্রেডিয়েন্টের মাধ্যমে খুব পালিশ বোতাম তৈরি করতে পারেন এবং অন্যান্য অনেক ইফেক্ট ছাড়া-ইমেজ প্রতিলিপি করতে পারেন । এইগুলির বেশিরভাগের জন্য ব্রাউজার সমর্থন খুব কঠিন, এবং আপনি একটি ফলব্যাক ক্ষেত্রে ছবিগুলি ব্যবহার করার জন্য বৈশিষ্ট্যগুলিকে সমর্থন করে না এমন ব্রাউজারগুলিকে ধরতে Modernizr- এর মতো একটি লাইব্রেরি ব্যবহার করতে পারেন৷
টিপ 10: XHR এর চেয়ে কম ব্যান্ডউইথ সহ দ্রুত ডেলিভারির জন্য ওয়েবসকেট
ধূমকেতুর ক্রমবর্ধমান জনপ্রিয়তার প্রতিক্রিয়ায় WebSockets ডিজাইন করা হয়েছিল। XHR মডেলের ধূমকেতুর পরিবর্তে এখন WebSockets ব্যবহার করার প্রকৃত সুবিধা রয়েছে।
WebSockets এর খুব হালকা ফ্রেমিং আছে, এবং তাই এটি যে ব্যান্ডউইথ ব্যবহার করে তা XHR এর তুলনায় প্রায়শই হালকা হয়। কিছু রিপোর্ট তারের জুড়ে পাঠানো বাইটে 35% হ্রাস নির্দেশ করে। উপরন্তু, উচ্চ ভলিউমে কর্মক্ষমতা পার্থক্য যখন এটি বার্তা বিতরণ আসে আরো স্পষ্ট; ওয়েবসকেটের চেয়ে 3500% বেশি সময় নিয়ে এই পরীক্ষায় XHR রেকর্ড করা হয়েছে। সবশেষে, এরিকসন ল্যাবস WebSockets-এর কার্যকারিতা বিবেচনা করে এবং আরও উল্লেখযোগ্য প্রসেসিং প্রয়োজনীয়তার কারণে HTTP-এর উপর পিং টাইমগুলি WebSockets-এর তুলনায় 3-5 গুণ বেশি ছিল। তারা উপসংহারে পৌঁছেছে যে WebSocket প্রোটোকল রিয়েলটাইম অ্যাপ্লিকেশনের জন্য স্পষ্টভাবে আরও উপযুক্ত।
অতিরিক্ত সম্পদ
পরিমাপ এবং কর্মক্ষমতা সুপারিশের জন্য, আপনার অবশ্যই ফায়ারফক্স এক্সটেনশন পেজ স্পিড এবং YSlow ব্যবহার করা উচিত। অতিরিক্তভাবে, ক্রোমের জন্য স্পিড ট্রেসার এবং IE-এর জন্য DynaTrace Ajax বিশ্লেষণের লগিংয়ের আরও বিশদ স্তর সরবরাহ করে।