ক্রোম 88 থেকে শুরু হওয়া চেইনযুক্ত JS টাইমারগুলির ভারী থ্রটলিং৷

Jake Archibald

Chrome 88 (জানুয়ারি 2021) বিশেষ পরিস্থিতিতে লুকানো পৃষ্ঠাগুলির জন্য চেইনযুক্ত জাভাস্ক্রিপ্ট টাইমারগুলি ভারীভাবে থ্রোটল করবে। এটি সিপিইউ ব্যবহার কমাবে, যা ব্যাটারির ব্যবহারও কমিয়ে দেবে। কিছু এজ কেস রয়েছে যেখানে এটি আচরণ পরিবর্তন করবে, তবে টাইমারগুলি প্রায়শই ব্যবহার করা হয় যেখানে একটি ভিন্ন API আরও দক্ষ এবং আরও নির্ভরযোগ্য হবে।

ঠিক আছে, যে ছিল চমত্কার পরিভাষা ভারী, এবং একটি বিট অস্পষ্ট. আসুন খনন করা যাক…

পরিভাষা

লুকানো পাতা

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

জাভাস্ক্রিপ্ট টাইমার

জাভাস্ক্রিপ্ট টাইমার দ্বারা আমি মানে setTimeout এবং setInterval , যা আপনাকে ভবিষ্যতে কোনো সময় কলব্যাকের সময় নির্ধারণ করতে দেয়। টাইমারগুলি দরকারী, এবং সেগুলি চলে যাচ্ছে না, তবে কখনও কখনও সেগুলিকে পোল স্টেট করার জন্য ব্যবহার করা হয় যখন একটি ইভেন্ট আরও দক্ষ এবং আরও সঠিক হবে৷

শৃঙ্খলিত টাইমার

আপনি setTimeout কলব্যাকের মতো একই টাস্কে setTimeout কল করলে, দ্বিতীয় আহ্বানটি 'শৃঙ্খলিত'। setInterval এর সাথে, প্রতিটি পুনরাবৃত্তি চেইনের অংশ। কোড দিয়ে বোঝা সহজ হতে পারে:

let chainCount = 0;

setInterval(() => {
  chainCount++;
  console.log(`This is number ${chainCount} in the chain`);
}, 500);

এবং:

let chainCount = 0;

function setTimeoutChain() {
  setTimeout(() => {
    chainCount++;
    console.log(`This is number ${chainCount} in the chain`);
    setTimeoutChain();
  }, 500);
}

থ্রটলিং কিভাবে কাজ করে

থ্রটলিং পর্যায়ক্রমে ঘটে:

ন্যূনতম থ্রটলিং

নিম্নলিখিতগুলির মধ্যে যেকোনো একটি সত্য হলে নির্ধারিত টাইমারগুলিতে এটি ঘটে:

• পৃষ্ঠাটি দৃশ্যমান ।
• পৃষ্ঠাটি গত 30 সেকেন্ডে শব্দ করেছে। এটি যেকোনও শব্দ তৈরির API থেকে হতে পারে, কিন্তু একটি নীরব অডিও ট্র্যাক গণনা করা হয় না।

টাইমার থ্রোটল করা হয় না, যদি না অনুরোধ করা টাইমআউট 4ms এর কম হয় এবং চেইন কাউন্ট 5 বা তার বেশি হয়, এই ক্ষেত্রে টাইমআউট 4ms এ সেট করা হয়। এটা নতুন নয়; ব্রাউজার অনেক বছর ধরে এটি করেছে।

থ্রটলিং

ন্যূনতম থ্রটলিং প্রযোজ্য না হলে নির্ধারিত টাইমারগুলির ক্ষেত্রে এটি ঘটে এবং নিম্নলিখিতগুলির মধ্যে যেকোনটি সত্য:

• চেইন কাউন্ট 5 এর কম।
• পৃষ্ঠাটি 5 মিনিটেরও কম সময়ের জন্য লুকানো হয়েছে।
• WebRTC ব্যবহার করা হচ্ছে। বিশেষত, একটি 'ওপেন' RTCDataChannel বা একটি 'লাইভ' MediaStreamTrack সহ একটি RTCPeerConnection আছে।

ব্রাউজার প্রতি সেকেন্ডে একবার এই গ্রুপে টাইমার চেক করবে। যেহেতু সেগুলি প্রতি সেকেন্ডে শুধুমাত্র একবার চেক করা হয়, একই রকম টাইমআউট সহ টাইমারগুলি একসাথে ব্যাচ করবে, ট্যাবটি কোড চালানোর জন্য প্রয়োজনীয় সময়কে একত্রিত করবে। এটাও নতুন নয়; ব্রাউজার কয়েক বছর ধরে এটি করছে।

নিবিড় থ্রটলিং

ঠিক আছে, এখানে Chrome 88-এ নতুন বিট রয়েছে। নিবিড় থ্রটলিং টাইমারগুলিতে ঘটে যা নির্ধারিত হয় যখন ন্যূনতম থ্রটলিং বা থ্রটলিং শর্তগুলির কোনোটিই প্রযোজ্য হয় না এবং নিম্নলিখিত সমস্ত শর্তগুলি সত্য হয়:

• পৃষ্ঠাটি 5 মিনিটেরও বেশি সময় ধরে লুকানো হয়েছে।
• চেইন সংখ্যা 5 বা তার বেশি।
• পৃষ্ঠাটি কমপক্ষে 30 সেকেন্ডের জন্য নীরব ছিল।
• WebRTC ব্যবহার করা হচ্ছে না।

এই ক্ষেত্রে, ব্রাউজার প্রতি মিনিটে একবার এই গ্রুপে টাইমার চেক করবে। আগের মতই, এর মানে হল টাইমারগুলি এই মিনিট-মিনিট চেকগুলিতে একসাথে ব্যাচ করবে।

ওয়ার্কঅ্যারাউন্ড

সাধারণত একটি টাইমারের একটি ভাল বিকল্প আছে, অথবা টাইমারগুলিকে অন্য কিছুর সাথে একত্রিত করা যেতে পারে যাতে CPU এবং ব্যাটারির আয়ু ভালো হয়।

রাজ্য ভোটগ্রহণ

এটি টাইমারগুলির সবচেয়ে সাধারণ (ভুল) ব্যবহার, যেখানে তারা ক্রমাগত পরীক্ষা করতে বা কিছু পরিবর্তন হয়েছে কিনা তা দেখার জন্য পোল করতে ব্যবহৃত হয়। বেশিরভাগ ক্ষেত্রেই একটি ধাক্কার সমতুল্য থাকে, যেখানে জিনিসটি আপনাকে পরিবর্তন করার সময় বলে, তাই আপনাকে পরীক্ষা চালিয়ে যেতে হবে না। একই জিনিস অর্জন করে এমন একটি ঘটনা আছে কিনা তা দেখুন।

কিছু উদাহরণ:

• ভিউপোর্টে কখন কোন উপাদান প্রবেশ করে তা যদি আপনার জানার প্রয়োজন হয়, তাহলে IntersectionObserver ব্যবহার করুন।
• কোন উপাদান কখন আকার পরিবর্তন করে তা জানতে হলে ResizeObserver ব্যবহার করুন।
• আপনার যদি জানতে হয় কখন DOM পরিবর্তন হয়, MutationObserver ব্যবহার করুন, অথবা কাস্টম এলিমেন্ট লাইফসাইকেল কলব্যাক ব্যবহার করুন।
• একটি সার্ভার পোল করার পরিবর্তে, ওয়েব সকেট , সার্ভার-প্রেরিত ইভেন্ট , পুশ মেসেজ বা স্ট্রীম নিয়ে আসা বিবেচনা করুন।
• আপনি যদি অডিও/ভিডিওতে পর্যায় পরিবর্তনের জন্য প্রতিক্রিয়া জানাতে চান, তাহলে timeupdate এবং ended মতো ইভেন্টগুলি ব্যবহার করুন বা আপনার যদি প্রতিটি ফ্রেমের সাথে কিছু করার প্রয়োজন হয় তবে requestVideoFrameCallback ।

আপনি যদি একটি নির্দিষ্ট সময়ে একটি বিজ্ঞপ্তি দেখাতে চান তবে বিজ্ঞপ্তি ট্রিগারও রয়েছে৷

অ্যানিমেশন

অ্যানিমেশন একটি চাক্ষুষ জিনিস, তাই এটি CPU সময় ব্যবহার করা উচিত নয় যখন পৃষ্ঠাটি লুকানো থাকে।

requestAnimationFrame জাভাস্ক্রিপ্ট টাইমারের চেয়ে অ্যানিমেশন কাজের সময় নির্ধারণে অনেক ভাল। এটি ডিভাইসের রিফ্রেশ হারের সাথে সিঙ্ক্রোনাইজ করে, এটি নিশ্চিত করে যে আপনি প্রতি প্রদর্শনযোগ্য ফ্রেমে শুধুমাত্র একটি কলব্যাক পান এবং সেই ফ্রেমটি তৈরি করার জন্য আপনি সর্বাধিক সময় পান। এছাড়াও, requestAnimationFrame পৃষ্ঠাটি দৃশ্যমান হওয়ার জন্য অপেক্ষা করবে, তাই পৃষ্ঠাটি লুকানো অবস্থায় এটি কোনো CPU ব্যবহার করে না।

আপনি যদি আপনার সম্পূর্ণ অ্যানিমেশন আপ-ফ্রন্ট ঘোষণা করতে পারেন, CSS অ্যানিমেশন বা ওয়েব অ্যানিমেশন API ব্যবহার করার কথা বিবেচনা করুন। এগুলির requestAnimationFrame এর মতো একই সুবিধা রয়েছে, তবে ব্রাউজারটি স্বয়ংক্রিয় সংমিশ্রণের মতো অতিরিক্ত অপ্টিমাইজেশানগুলি সম্পাদন করতে পারে এবং সেগুলি সাধারণত ব্যবহার করা সহজ৷

যদি আপনার অ্যানিমেশন কম-ফ্রেমরেট হয় (একটি জ্বলজ্বলে কার্সারের মতো), টাইমারগুলি এখনও সেরা বিকল্প, তবে আপনি উভয় জগতের সেরা পেতে requestAnimationFrame সাথে তাদের একত্রিত করতে পারেন:

function animationInterval(ms, signal, callback) {
  const start = document.timeline.currentTime;

  function frame(time) {
    if (signal.aborted) return;
    callback(time);
    scheduleFrame(time);
  }

  function scheduleFrame(time) {
    const elapsed = time - start;
    const roundedElapsed = Math.round(elapsed / ms) * ms;
    const targetNext = start + roundedElapsed + ms;
    const delay = targetNext - performance.now();
    setTimeout(() => requestAnimationFrame(frame), delay);
  }

  scheduleFrame(start);
}

ব্যবহার:

const controller = new AbortController();

// Create an animation callback every second:
animationInterval(1000, controller.signal, time => {
  console.log('tick!', time);
});

// And stop it:
controller.abort();

টেস্টিং

এই পরিবর্তনটি Chrome 88 (জানুয়ারি 2021) এ সমস্ত ক্রোম ব্যবহারকারীদের জন্য সক্ষম করা হবে। এটি বর্তমানে 50% Chrome বিটা, ডেভ এবং ক্যানারি ব্যবহারকারীদের জন্য সক্ষম করা হয়েছে৷ আপনি যদি এটি পরীক্ষা করতে চান, Chrome বিটা, ডেভ বা ক্যানারি চালু করার সময় এই কমান্ড লাইন পতাকাটি ব্যবহার করুন:

--enable-features="IntensiveWakeUpThrottling:grace_period_seconds/10,OptOutZeroTimeoutTimersFromThrottling,AllowAggressiveThrottlingWithWebSocket"

grace_period_seconds/10 আর্গুমেন্ট পুরো 5 মিনিটের পরিবর্তে পৃষ্ঠা লুকানোর 10 সেকেন্ড পরে তীব্র থ্রটলিং শুরু করে, যাতে থ্রটলিং এর প্রভাব দেখতে সহজ হয়।

ভবিষ্যৎ

যেহেতু টাইমারগুলি অত্যধিক সিপিইউ ব্যবহারের একটি উত্স, তাই আমরা ওয়েব বিষয়বস্তু না ভেঙে তাদের থ্রোটল করার উপায়গুলি এবং এপিআইগুলিকে আমরা ব্যবহার-ক্ষেত্রগুলি পূরণ করতে যোগ/পরিবর্তন করতে পারি সেগুলির দিকে নজর দিতে যাচ্ছি৷ ব্যক্তিগতভাবে, আমি দক্ষ কম-ফ্রিকোয়েন্সি অ্যানিমেশন কলব্যাকের পক্ষে animationInterval প্রয়োজনীয়তা দূর করতে চাই। আপনার যদি কোন প্রশ্ন থাকে, অনুগ্রহ করে টুইটারে আমার সাথে যোগাযোগ করুন !

আনস্প্ল্যাশে হেদার জাব্রিস্কির হেডার ছবি।