ব্যবহারকারীর সময় API

আপনার ওয়েব অ্যাপ বোঝা

একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতার জন্য উচ্চ কার্যকারিতা ওয়েব অ্যাপ্লিকেশনগুলি অত্যন্ত গুরুত্বপূর্ণ। ওয়েব অ্যাপ্লিকেশানগুলি আরও জটিল হয়ে উঠলে, পারফরম্যান্সের প্রভাব বোঝা একটি বাধ্যতামূলক অভিজ্ঞতা তৈরি করার জন্য অত্যাবশ্যক৷ বিগত কয়েক বছর ধরে, নেটওয়ার্কের কার্যক্ষমতা, লোডের সময় ইত্যাদি বিশ্লেষণে সহায়তা করার জন্য ব্রাউজারে বেশ কয়েকটি ভিন্ন API উপস্থিত হয়েছে। কিন্তু এগুলি আপনার অ্যাপ্লিকেশনের গতি কমিয়ে দেওয়ার জন্য যথেষ্ট নমনীয়তার সাথে সূক্ষ্ম-দানাযুক্ত বিশদ প্রদান করে না। . ইউজার টাইমিং এপিআই লিখুন যা এমন একটি মেকানিজম প্রদান করে যা আপনি আপনার ওয়েব অ্যাপ্লিকেশনকে ইন্সট্রুমেন্ট করার জন্য ব্যবহার করতে পারেন আপনার অ্যাপ্লিকেশনটি কোথায় সময় ব্যয় করছে তা সনাক্ত করতে। এই নিবন্ধে আমরা API প্লাস এটি কিভাবে ব্যবহার করতে হয় তার উদাহরণ কভার করব।

আপনি যা পরিমাপ করতে পারবেন না তা আপনি অপ্টিমাইজ করতে পারবেন না

একটি ধীরগতির ওয়েব অ্যাপ্লিকেশনের গতি বাড়ানোর প্রথম ধাপ হল সময় কোথায় ব্যয় করা হচ্ছে তা নির্ধারণ করা। জাভাস্ক্রিপ্ট কোডের ক্ষেত্রগুলির সময়ের প্রভাব পরিমাপ করা হট স্পটগুলি সনাক্ত করার আদর্শ উপায়, যা কর্মক্ষমতা উন্নত করার উপায় খুঁজে বের করার প্রথম ধাপ। সৌভাগ্যবশত ইউজার টাইমিং এপিআই এমন একটি উপায় প্রদান করে যে আপনি আপনার জাভাস্ক্রিপ্টের বিভিন্ন অংশে এপিআই কলগুলি সন্নিবেশ করতে পারেন এবং তারপরে বিস্তারিত টাইমিং ডেটা বের করতে পারেন যা আপনাকে অপ্টিমাইজ করতে সাহায্য করতে ব্যবহার করা যেতে পারে।

উচ্চ রেজোলিউশন সময় এবং now()

সঠিক সময় পরিমাপের একটি মৌলিক অংশ হল নির্ভুলতা। পুরানো দিনে আমাদের সময় ছিল মিলিসেকেন্ড পরিমাপের আশেপাশে যা ঠিক আছে, কিন্তু একটি জ্যাঙ্ক-মুক্ত 60 FPS সাইট তৈরি করার অর্থ হল প্রতিটি ফ্রেম 16ms এ আঁকতে হবে। সুতরাং যখন আপনার শুধুমাত্র মিলিসেকেন্ড নির্ভুলতা থাকে তখন ভালো বিশ্লেষণের জন্য প্রয়োজনীয় নির্ভুলতার অভাব থাকে। উচ্চ রেজোলিউশন টাইম লিখুন, একটি নতুন টাইমিং টাইপ যা আধুনিক ব্রাউজারগুলিতে তৈরি৷ উচ্চ রেজোলিউশন টাইম আমাদেরকে ফ্লোটিং পয়েন্ট টাইম স্ট্যাম্প দেয় যা মাইক্রোসেকেন্ড রেজোলিউশনে নির্ভুল হতে পারে - আগের চেয়ে হাজার গুণ ভালো।

আপনার ওয়েব অ্যাপ্লিকেশনে বর্তমান সময় পেতে, now() পদ্ধতিতে কল করুন যা পারফরম্যান্স ইন্টারফেসের একটি এক্সটেনশন গঠন করে। নিম্নলিখিত কোড এটি কিভাবে করতে দেখায়:

var myTime = window.performance.now();

পারফরম্যান্সটাইমিং নামে আরেকটি ইন্টারফেস রয়েছে যা আপনার ওয়েব অ্যাপ্লিকেশনটি কীভাবে লোড হয় তার সাথে সম্পর্কিত বিভিন্ন সময় প্রদান করে। now() পদ্ধতিটি পারফরম্যান্স টাইমিং -এ navigationStart টাইম হওয়ার পর থেকে অতিবাহিত সময় ফেরত দেয়।

DOMHighResTimeStamp প্রকার

অতীতে ওয়েব অ্যাপ্লিকেশনের সময় করার চেষ্টা করার সময় আপনি Date.now() মতো কিছু ব্যবহার করবেন যা একটি DOMTimeStamp প্রদান করে। DOMTimeStamp তার মান হিসাবে মিলিসেকেন্ডের একটি পূর্ণসংখ্যা প্রদান করে। উচ্চ রেজোলিউশন সময়ের জন্য প্রয়োজনীয় উচ্চ নির্ভুলতা প্রদানের জন্য, DOMHighResTimeStamp নামে একটি নতুন প্রকার চালু করা হয়েছিল। এই ধরনের একটি ফ্লোটিং পয়েন্ট মান যা মিলিসেকেন্ডে সময় ফেরত দেয়। কিন্তু যেহেতু এটি ফ্লোটিং পয়েন্ট, মানটি ভগ্নাংশ মিলিসেকেন্ডের প্রতিনিধিত্ব করতে পারে এবং তাই মিলিসেকেন্ডের এক হাজার ভাগের নির্ভুলতা দিতে পারে।

ইউজার টাইমিং ইন্টারফেস

তাই এখন যেহেতু আমাদের কাছে উচ্চ রেজোলিউশনের টাইম স্ট্যাম্প আছে, আসুন সময় সংক্রান্ত তথ্য বের করতে ইউজার টাইমিং ইন্টারফেস ব্যবহার করি।

ইউজার টাইমিং ইন্টারফেস এমন ফাংশন প্রদান করে যা আমাদের অ্যাপ্লিকেশনের বিভিন্ন জায়গায় মেথড কল করতে দেয় যা একটি হ্যানসেল এবং গ্রেটেল স্টাইলের ব্রেডক্রাম্ব ট্রেইল প্রদান করতে পারে যাতে আমাদের সময় কোথায় ব্যয় করা হচ্ছে তা ট্র্যাক করতে দেয়।

mark()

আমাদের টাইমিং অ্যানালাইসিস টুলকিটের প্রধান টুল হল mark() পদ্ধতি। mark() যা করে তা হল আমাদের জন্য একটি টাইম স্ট্যাম্প সংরক্ষণ করা। mark() ক্ষেত্রে যেটা খুবই উপযোগী তা হল আমরা টাইম স্ট্যাম্পের নাম দিতে পারি এবং API একটি একক হিসাবে নাম এবং টাইম স্ট্যাম্প মনে রাখবে।

আপনার অ্যাপ্লিকেশনের বিভিন্ন স্থানে কলিং mark() আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনে সেই 'চিহ্ন'টি আঘাত করতে কতটা সময় নিয়েছে তা নির্ধারণ করতে দেয়।

স্পেসিফিকেশনে মার্কের জন্য বেশ কিছু প্রস্তাবিত নাম বলা হয়েছে যা আকর্ষণীয় হতে পারে এবং মোটামুটি স্ব-ব্যাখ্যামূলক, যেমন mark_fully_loaded , mark_fully_visible , mark_above_the_fold ইত্যাদি।

উদাহরণস্বরূপ, নিম্নলিখিত কোডটি ব্যবহার করে অ্যাপ্লিকেশনটি সম্পূর্ণরূপে লোড হওয়ার জন্য আমরা একটি চিহ্ন সেট করতে পারি:

window.performance.mark('mark_fully_loaded');

আমাদের ওয়েব অ্যাপ্লিকেশান জুড়ে নামযুক্ত চিহ্নগুলি সেট করার মাধ্যমে আমরা টাইমিং ডেটার একটি সম্পূর্ণ গুচ্ছ সংগ্রহ করতে পারি এবং অ্যাপ্লিকেশনটি কী করছে এবং কখন তা নির্ধারণ করতে আমাদের অবসর সময়ে এটি বিশ্লেষণ করতে পারি।

measure() দিয়ে পরিমাপ গণনা করা হচ্ছে

একবার আপনি একগুচ্ছ সময় চিহ্ন সেট করলে, আপনি তাদের মধ্যে অতিবাহিত সময় খুঁজে বের করতে চাইবেন। আপনি এটি করতে measure() পদ্ধতি ব্যবহার করুন।

measure() পদ্ধতিটি চিহ্নগুলির মধ্যে অতিবাহিত সময় গণনা করে এবং পারফরম্যান্স টাইমিং ইন্টারফেসে আপনার চিহ্ন এবং যে কোনও সুপরিচিত ইভেন্টের নামগুলির মধ্যে সময়ও পরিমাপ করতে পারে।

উদাহরণ স্বরূপ, আপনি DOM সম্পূর্ণ হওয়ার পর থেকে আপনার অ্যাপ্লিকেশনের অবস্থা সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত সময় বের করতে পারেন যেমন কোড ব্যবহার করে:

window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');

আপনি যখন measure() কল করেন তখন এটি আপনার সেট করা চিহ্নগুলির থেকে স্বাধীন ফলাফল সংরক্ষণ করে, যাতে আপনি পরে সেগুলি পুনরুদ্ধার করতে পারেন। আপনার অ্যাপ্লিকেশানটি চলার সময় দূরে সঞ্চয় করে, অ্যাপ্লিকেশনটি প্রতিক্রিয়াশীল থাকে এবং আপনার অ্যাপ্লিকেশনটি কিছু কাজ শেষ করার পরে আপনি সমস্ত ডেটা ডাম্প করতে পারেন যাতে এটি পরে বিশ্লেষণ করা যায়।

clearMarks() সহ চিহ্ন বাতিল করা হচ্ছে

কখনও কখনও এটি আপনার সেট আপ করেছেন এমন একগুচ্ছ চিহ্ন থেকে মুক্তি পেতে সক্ষম হওয়া দরকারী। উদাহরণস্বরূপ, আপনি আপনার ওয়েব অ্যাপ্লিকেশনে ব্যাচ রান করতে পারেন এবং তাই আপনি প্রতিটি রান নতুন করে শুরু করতে চান।

clearMarks() কল করে আপনার সেট আপ করা যেকোনো চিহ্ন থেকে মুক্তি পাওয়া যথেষ্ট সহজ।

সুতরাং নীচের উদাহরণ কোডটি আপনার বিদ্যমান সমস্ত চিহ্নগুলিকে উড়িয়ে দেবে, যাতে আপনি চাইলে আবার একটি টাইমিং রান সেট আপ করতে পারেন।

window.performance.clearMarks();

অবশ্যই, এমন কিছু পরিস্থিতি রয়েছে যেখানে আপনি আপনার সমস্ত চিহ্ন সাফ করতে চান না। সুতরাং আপনি যদি নির্দিষ্ট চিহ্নগুলি থেকে মুক্তি পেতে চান তবে আপনি যে চিহ্নটি সরাতে চান তার নামটি পাস করতে পারেন। উদাহরণস্বরূপ, নীচের কোড:

window.performance.clearMarks('mark_fully_loaded');

আমরা প্রথম উদাহরণে যে চিহ্নটি সেট করেছি তা থেকে পরিত্রাণ পায় যখন আমরা অপরিবর্তিত সেট করে রেখেছিলাম।

আপনি যে কোনও ব্যবস্থাও পরিত্রাণ পেতে চাইতে পারেন যা আপনি করেছেন এবং এটি করার জন্য একটি সংশ্লিষ্ট পদ্ধতি রয়েছে যাকে clearMeasures() বলা হয়। এটি clearMarks() মতই কাজ করে, কিন্তু পরিবর্তে আপনার করা কোনো পরিমাপের উপর কাজ করে। উদাহরণস্বরূপ, কোড:

window.performance.clearMeasures('measure_load_from_dom');

উপরের measure() উদাহরণে আমরা যে পরিমাপ করেছি তা সরিয়ে ফেলবে। আপনি যদি সমস্ত ব্যবস্থা অপসারণ করতে চান তবে এটি clearMarks() মতোই কাজ করে - এতে আপনি যুক্তি ছাড়াই clearMeasures() কল করেন।

টাইমিং ডেটা বের করা হচ্ছে

চিহ্ন সেট করা এবং ব্যবধান পরিমাপ করা সবই ভাল এবং ভাল, কিন্তু কিছু সময়ে আপনি কিছু বিশ্লেষণ করার জন্য সেই সময় ডেটা পেতে চান। এটি সত্যিই খুব সহজ, আপনাকে যা করতে হবে তা হল PerformanceTimeline ইন্টারফেস ব্যবহার করা।

উদাহরণস্বরূপ, getEntriesByType() পদ্ধতিটি আমাদের সমস্ত মার্ক টাইম বা আমাদের সমস্ত পরিমাপের সময় একটি তালিকা হিসাবে পেতে দেয় যাতে আমরা এটির উপর পুনরাবৃত্তি করতে পারি এবং ডেটা হজম করতে পারি। কি চমৎকার যে তালিকাটি কালানুক্রমিক ক্রমানুসারে ফিরে আসে, তাই আপনি আপনার ওয়েব অ্যাপ্লিকেশনে আঘাত করা ক্রম অনুসারে চিহ্নগুলি দেখতে পারেন।

নীচের কোড:

var items = window.performance.getEntriesByType('mark');

আমাদের ওয়েব অ্যাপ্লিকেশনে আঘাত করা সমস্ত চিহ্নের একটি তালিকা ফেরত দেয়, যখন কোডটি:

var items = window.performance.getEntriesByType('measure');

আমরা যে সমস্ত ব্যবস্থা করেছি তার একটি তালিকা ফেরত দেয়।

আপনি তাদের দেওয়া নির্দিষ্ট নাম ব্যবহার করে এন্ট্রিগুলির একটি তালিকাও ফিরে পেতে পারেন৷ সুতরাং উদাহরণস্বরূপ, কোড:

var items = window.performance.getEntriesByName('mark_fully_loaded');

startTime প্রপার্টিতে 'মার্ক_ফুলি_লোডেড' টাইম স্ট্যাম্প ধারণকারী একটি আইটেম সহ একটি তালিকা আমাদের ফেরত দেবে।

একটি XHR অনুরোধের সময় নির্ধারণ (উদাহরণ)

এখন যেহেতু আমাদের কাছে ইউজার টাইমিং API-এর একটি শালীন ছবি রয়েছে, আমরা এটি বিশ্লেষণ করতে ব্যবহার করতে পারি যে আমাদের ওয়েব অ্যাপ্লিকেশনে আমাদের সমস্ত XMLHttpRequest কত সময় নেয়৷

প্রথমে আমরা একটি ফাংশন কল ইস্যু করার জন্য আমাদের send() অনুরোধগুলিকে সংশোধন করব যা চিহ্নগুলি সেট আপ করে এবং একই সাথে একটি ফাংশন কল দিয়ে আমাদের সাফল্যের কলব্যাকগুলিকে পরিবর্তন করব যা অন্য একটি চিহ্ন সেট করে এবং তারপরে অনুরোধ কতক্ষণের জন্য একটি পরিমাপ তৈরি করে নিয়েছে

তাই সাধারণত আমাদের XMLHttpRequest দেখতে এরকম কিছু হবে:

var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
  do_something(e.responseText);
}
myReq.send();

আমাদের উদাহরণের জন্য আমরা অনুরোধের সংখ্যা ট্র্যাক করতে একটি গ্লোবাল কাউন্টার যোগ করব এবং প্রতিটি অনুরোধের জন্য একটি পরিমাপ সংরক্ষণ করতে এটি ব্যবহার করব। এটি করার জন্য কোডটি এরকম দেখাচ্ছে:

var reqCnt = 0;

var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
  window.performance.mark('mark_end_xhr');
  reqCnt++;
  window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr');
  do_something(e.responseText);
}
window.performance.mark('mark_start_xhr');
myReq.send();

উপরের কোডটি আমাদের পাঠানো প্রতিটি XMLHttpRequest এর জন্য একটি অনন্য নামের মান সহ একটি পরিমাপ তৈরি করে। আমরা অনুমান করছি যে অনুরোধগুলি ক্রমানুসারে চলে - সমান্তরাল অনুরোধগুলির জন্য কোডটি আরও জটিল হতে হবে এমন অনুরোধগুলি পরিচালনা করার জন্য যেগুলি অর্ডারের বাইরে চলে যায়, আমরা এটি পাঠকের জন্য একটি অনুশীলন হিসাবে রেখে দেব৷

একবার ওয়েব অ্যাপ্লিকেশনটি একগুচ্ছ অনুরোধ করার পরে আমরা নীচের কোডটি ব্যবহার করে সেগুলিকে কনসোলে ডাম্প করতে পারি:

var items = window.performance.getEntriesByType('measure');
for (var i = 0; i < items.length; ++i) {
  var req = items[i];
  console.log('XHR ' + req.name + ' took ' + req.duration + 'ms');
}

উপসংহার

ইউজার টাইমিং এপিআই আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনের যেকোনো দিক প্রয়োগ করার জন্য অনেক দুর্দান্ত সরঞ্জাম দেয়। আপনার অ্যাপ্লিকেশনে হট-স্পটগুলিকে সংকুচিত করা আপনার ওয়েব অ্যাপ্লিকেশন জুড়ে API কলগুলি ছিটিয়ে এবং সময় কোথায় ব্যয় করা হচ্ছে তার একটি পরিষ্কার চিত্র তৈরি করার জন্য তৈরি সময়ের ডেটা পোস্ট-প্রসেস করে সহজেই অর্জন করা যেতে পারে। কিন্তু যদি আপনার ব্রাউজার এই API সমর্থন না করে? কোনও সমস্যা নেই, আপনি এখানে একটি দুর্দান্ত পলিফিল খুঁজে পেতে পারেন যা এপিআইকে খুব ভালভাবে অনুকরণ করে এবং ওয়েবপেজটেস্ট.অর্গের সাথেও সুন্দরভাবে খেলতে পারে। তাই আপনি কি জন্য অপেক্ষা করছেন? এখন আপনার অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীর সময় API ব্যবহার করে দেখুন, আপনি কীভাবে তাদের গতি বাড়ানো যায় তা নিয়ে কাজ করবেন এবং আপনার ব্যবহারকারীরা তাদের অভিজ্ঞতাকে আরও ভাল করার জন্য আপনাকে ধন্যবাদ জানাবে।