যখন ট্যাব বা উইন্ডো সক্রিয় না থাকে তখন ব্রাউজারগুলি জাভাস্ক্রিপ্ট কীভাবে বিরতি দেয় / পরিবর্তন করতে পারে?

Question

পটভূমি: আমি কিছু ব্যবহারকারীর ইন্টারফেস পরীক্ষা করছি যা লোকেরা মনোযোগ দিচ্ছে কিনা তা সনাক্ত করা দরকার। তবে, এই প্রশ্নটি পৃষ্ঠাটির দৃশ্যমানতা API সম্পর্কে নয় ।

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

• যখন ট্যাব সক্রিয় না থাকে তখন আইওএস 5 জাভাস্ক্রিপ্ট থামিয়ে দেয়
• setIntervalsetTimeoutট্যাবগুলি সক্রিয় না হলে এবং বিলম্ব হ্রাস পায় - এটি সবেমাত্র প্রদর্শিত হওয়া শুরু হয়েছে এবং অন্যান্য জিনিসগুলির চারপাশে জেসমিন ইউনিট পরীক্ষাগুলিকে গোলমাল করতে পারে।
• requestAnimationFrame ট্যাব সক্রিয় না হলে ধীর হয়ে যায় (যুক্তিসঙ্গত, এটি কেন কাউকে বেশি প্রভাব ফেলবে তা ভাবতে পারে না)

আমার নিম্নলিখিত প্রশ্নগুলি রয়েছে:

• মোবাইল ব্রাউজারগুলি ব্যতীত, কোনও ট্যাব সক্রিয় না থাকায় ডেস্কটপ ব্রাউজারগুলি কি কখনও জেএস কার্যকর করতে বিরতি দেয়? কখন এবং কোন ব্রাউজারগুলি?
• কোন ব্রাউজার setIntervalপুনরাবৃত্তি হ্রাস ? এটি কি কেবল সীমাবদ্ধতা বা শতাংশে কমেছে? উদাহরণস্বরূপ, যদি আমার কাছে 5000ms পুনরাবৃত্তের তুলনায় 10 মিমি পুনরাবৃত্তি হয় তবে প্রতিটি কীভাবে প্রভাবিত হবে?
• কেবল ট্যাবটির বিপরীতে উইন্ডোটি ফোকাসের বাইরে থাকলে কী এই পরিবর্তনগুলি ঘটে ? (আমি ধারণা করি এটি সনাক্ত করা আরও শক্ত হবে, কারণ এটির জন্য ওএস এপিআই প্রয়োজন))
• সক্রিয় ট্যাবে অন্য কোনও প্রভাব রয়েছে যা পর্যবেক্ষণ করা হবে না? তারা কি এমন জিনিসগুলিকে গুছিয়ে ফেলতে পারে যা অন্যথায় সঠিকভাবে কার্যকর করতে পারে (যেমন উপরে বর্ণিত জেসমিন পরীক্ষা)?

Comments

যদি তাদের বিরতি দেওয়া হয়, ফেসবুকের মতো সাইটগুলি পটভূমির ট্যাবগুলিতে কোনও চ্যাট বার্তা গ্রহণ করবে না।

— জোসেফ

হ্যাঁ কোনও বিরতি নেই, তবে আমার মনে আছে যে ট্যাব / উইন্ডোটি অস্পষ্ট করা হলে 1000 মিমি থেকে কম setInterval/ setTimeoutবারের পরিমাণ 1000 মিমি হয়ে যায়

— আয়ান

@ প্রফপিকল ওয়েবমাস্টার্স? সত্যি? এটি একটি জেএস প্রোগ্রামিং প্রশ্ন।

— অ্যান্ড্রু মাও

ট্যাব / উইন্ডোটি অস্পষ্ট হলে 1000 এলিমি setInterval/ setTimeoutবারের নীচে @ এলএন / বারগুলি 1000 মিমিগুলিতে পরিবর্তন করা হয়। আপনি কী জানাতে চেয়েছিলেন তা পরিষ্কার নয়

— আমল এম কুলকার্নি

+1 দুর্দান্ত প্রশ্ন। ব্রাউজারের আচরণগুলির সাথে তুলনা করে পাশাপাশি দেখতে ভাল হবে, কারণ আমি বিশ্বাস করি যে ট্যাবগুলি সক্রিয় না থাকা অবস্থায় ক্ল্যাম্পিং আচরণ কোনও মানের অংশ নয়।

— আপক্রিক

Answer 1

টেস্ট এক

আমি এই উদ্দেশ্যে বিশেষত একটি পরীক্ষা লিখেছি:
ফ্রেম রেট বিতরণ: সেটইন্টারভাল বনাম অনুরোধঅ্যানিমেশনফ্রেম

^{দ্রষ্টব্য: এই পরীক্ষাটি বেশ সিপিইউ নিবিড়। requestAnimationFrameআইই 9- এবং অপেরা 12- দ্বারা সমর্থিত নয়।}

পরীক্ষা প্রকৃত সময় এটি একটি লাগে লগ setIntervalএবং requestAnimationFrameবিভিন্ন ব্রাউজারে চালানোর জন্য, এবং আপনি একটি বন্টন আকারে ফলাফল দেয়। setIntervalএটি বিভিন্ন সেটিংসে কীভাবে চলে তা দেখতে আপনি মিলিসেকেন্ডের সংখ্যাটি পরিবর্তন করতে পারেন। বিলম্বের ক্ষেত্রে setTimeoutএকইভাবে কাজ করে setInterval। requestAnimationFrameসাধারণত ব্রাউজারের উপর নির্ভর করে 60fps এ ডিফল্ট হয়। আপনি যখন অন্য কোনও ট্যাবে স্যুইচ করেন বা একটি নিষ্ক্রিয় উইন্ডো থাকে তখন কী ঘটে তা দেখার জন্য কেবল পৃষ্ঠাটি খুলুন, একটি ভিন্ন ট্যাবে স্যুইচ করুন এবং কিছুক্ষণ অপেক্ষা করুন। এটি একটি নিষ্ক্রিয় ট্যাবে এই ফাংশনগুলির জন্য লাগছে প্রকৃত সময়টি লগ করা অবিরত থাকবে।

পরীক্ষা দুটি

আরেকটি উপায় এটি পরীক্ষা করার জন্য বারবার টাইমস্ট্যাম্প লগ ইন করার নেই setIntervalএবং requestAnimationFrameএবং একটি বিচ্ছিন্ন কনসোলে মনে করছেন। আপনি যখন ট্যাব বা উইন্ডোটিকে নিষ্ক্রিয় করে তুলছেন তখন এটি প্রায়শই আপডেট হয় (বা এটি যদি কখনও আপডেট হয়) can

• জন্য পরীক্ষা setInterval
• জন্য পরীক্ষা requestAnimationFrame

ফলাফল

যখন ট্যাবটি নিষ্ক্রিয় থাকে তখন Chrome
ক্রোম সর্বনিম্ন অন্তর setInterval1000 মিমি সীমাবদ্ধ করে । ব্যবধানটি যদি 1000 মিমি থেকে বেশি হয় তবে এটি নির্দিষ্ট বিরতিতে চলবে। উইন্ডোটি ফোকাসের বাইরে থাকলে কিছু যায় আসে না, আপনি যখন অন্য কোনও ট্যাবে স্যুইচ করেন কেবল তখন বিরতি সীমিত থাকে। requestAnimationFrameট্যাব নিষ্ক্রিয় থাকে যখন থামানো হয়।

// Provides control over the minimum timer interval for background tabs.
const double kBackgroundTabTimerInterval = 1.0;

^{https://codereview.chromium.org/6546021/patch/1001/2001}

ফায়ারফক্স
ক্রোমের অনুরূপ, setIntervalযখন ট্যাবটি (উইন্ডো নয়) নিষ্ক্রিয় থাকে তখন ফায়ারফক্স নূন্যতম ব্যবধানকে প্রায় 1000 মিমি পর্যন্ত সীমাবদ্ধ করে । যাইহোক, requestAnimationFrameট্যাবটি নিষ্ক্রিয় থাকাকালীন দ্রুত ধীরে ধীরে চলতে থাকে, প্রতিটি ফ্রেম 1s, 2s, 4s, 8s ইত্যাদি নিয়ে থাকে।

// The default shortest interval/timeout we permit
#define DEFAULT_MIN_TIMEOUT_VALUE 4 // 4ms
#define DEFAULT_MIN_BACKGROUND_TIMEOUT_VALUE 1000 // 1000ms

^{https://hg.mozilla.org/releases/mozilla-release/file/0bf1cadfb004/dom/base/nsGlobalWindow.cpp#l296}

ইন্টারনেট এক্সপ্লোরার
আইই setIntervalট্যাবটি নিষ্ক্রিয় থাকলে বিলম্ব সীমাবদ্ধ করে না , তবে এটি requestAnimationFrameনিষ্ক্রিয় ট্যাবগুলিতে বিরতি দেয় । উইন্ডোটি ফোকাসের বাইরে আছে কিনা তা বিবেচ্য নয়।

এজ
14 প্রান্ত থেকে শুরু করে, setIntervalনিষ্ক্রিয় ট্যাবগুলিতে 1000 মিমি সংযুক্ত থাকে। requestAnimationFrameনিষ্ক্রিয় ট্যাবগুলিতে সর্বদা বিরতি দেওয়া হয়।

সাফারি
ক্রোমের মতো, setIntervalট্যাবটি নিষ্ক্রিয় থাকলে 1000 মিমি থেকে সাফারি ক্যাপ দেয় । requestAnimationFrameপাশাপাশি বিরতি দেওয়া হয়।

অপেরা
ওয়েবকিট ইঞ্জিনটি গ্রহণের পর থেকে অপেরা ক্রোমের মতো একই আচরণ প্রদর্শন করে। ট্যাবটি নিষ্ক্রিয় থাকাকালীন setInterval1000 মিমিগুলিতে ক্যাপড থাকে এবং requestAnimationFrameবিরতি দেওয়া হয়।

সারসংক্ষেপ

নিষ্ক্রিয় ট্যাবগুলির জন্য অন্তর পুনরাবৃত্তি:

           setInterval      requestAnimationFrame 
ক্রোম
9- প্রভাবিত নয় সমর্থিত নয়
10 প্রভাবিত হয়নি
11+> = 1000ms বিরাম দেওয়া হয়েছে

ফায়ারফক্স
3- প্রভাবিত নয় সমর্থিত নয়
4 প্রভাবিত 1s
5+> = 1000ms 2 n s (নিষ্ক্রিয়তার পর থেকে ফ্রেমের সংখ্যা)

আই ই
9- প্রভাবিত নয় সমর্থিত নয়
10+ প্রভাবিত হয়নি বিরতিতে

প্রান্ত
13- প্রভাবিত বিরতি নেই
14+> = 1000ms বিরাম দেওয়া হয়েছে

আফ্রিকায় শিকার অভিযান
5- প্রভাবিত নয় সমর্থিত
6 প্রভাবিত বিরতি নেই
7+> = 1000ms বিরাম দেওয়া হয়েছে

অপেরা
12- প্রভাবিত নয় সমর্থিত নয়
15+> = 1000ms বিরাম দেওয়া হয়েছে

Comments

দুর্দান্ত উত্তর। setIntervalএবং অন্যান্য কার্যাবলী জন্য অন্য কোন সম্ভাব্য পরিচিত পার্থক্য requestAnimationFrame?

— অ্যান্ড্রু মাও

@ অ্যান্ড্রুমাও যেটি সম্পর্কে আমি সচেতন তা নয়। আমি যখন জেএস পুনরায় সক্ষম করেছিলাম setIntervalএবং কীভাবে নির্ভরযোগ্যতার সাথে এটি সনাক্ত করতে একটি লাইব্রেরিতে কাজ করছিলাম তখন আমি এই সমস্যাটি জুড়ে এসেছি requestAnimationFrame। জিনিস আমি জানি যে setTimeoutআচরণ করবে একভাবে করতে setInterval, তারা উভয় ফায়ারফক্স এবং Chrome একই ন্যূনতম পটভূমি ব্যবধান, এবং অন্যান্য ব্রাউজারে কোন আপাত সীমা আছে যে।

— অ্যান্টনি

ফায়ারফক্স সেট অন্তর্বর্তী সর্বনিম্ন মান স্পষ্টতই about:configব্রাউজারে url খোলার মাধ্যমে এবং dom.min_background_timeout_valueমানকে 1000 এর চেয়ে অন্য কোনও কিছুতে পরিবর্তন করা যেতে পারে

— জোনাস বার্লিন

ব্রাউজারটি ন্যূনতম করা হলে আমি কি প্রতি 5 সেকেন্ডে পৃষ্ঠাটি পুনরায় লোড করতে এটি ব্যবহার করতে পারি?, আমার প্রশ্নটি এখানে is

— শাইজুট

নোট করুন যে requestAnimationFrameব্যবহারকারী যদি সহজেই অ্যাপ্লিকেশনটি সরিয়ে দেয় (ক্রোমের বাইরে Alt + ট্যাব) ক্রোম সেই হারকে বিরতি দেয় / হ্রাস করে না । যতক্ষণ না ক্রোমে ট্যাব সক্রিয় থাকে ততক্ষণ "ফ্রেমের হার" কমবেশি স্থির থাকে।

— মার্চ

Answer 2

আমি কি বলেছিলেন: নিষ্ক্রিয় ট্যাবগুলির সালে ক্রোম , আপনার সব setTimeout(জন্য একই হতে হবে setInterval) কম অপেক্ষা 1000ms বৃত্তাকার হয় 1000ms । আমি মনে করি দীর্ঘ সময়সীমা পরিবর্তন করা হয়নি।

ক্রোম 11 এবং ফায়ারফক্স 5.0 থেকে আচরণ বলে মনে হচ্ছে : https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout#Inactive_tabs

তদ্ব্যতীত, পুরো উইন্ডোটি নিষ্ক্রিয় থাকাকালীন এটি এ জাতীয় আচরণ করে বলে মনে করি না (তবে এটি তদন্ত করা বেশ সহজ বলে মনে হয়)।

Comments

jQuery এর focusএবং blurইভেন্টগুলি উভয় ট্যাব এবং উইন্ডো স্যুইচগুলি সনাক্ত করে বলে মনে হচ্ছে, সুতরাং এটি উভয়ভাবেই অনুমেয়ভাবে কাজ করতে পারে। তবে আমি অবাক হই যে এটি উইন্ডোটি প্রকৃতরূপে দৃশ্যমান কিনা তা কীভাবে সনাক্ত করে।

— অ্যান্ড্রু মাও

প্রকৃতপক্ষে এটি অভ্যন্তরীণ ব্রাউজার বাস্তবায়ন হওয়ায় jQuery বা জাভাস্ক্রিপ্টের সাথে এর কোনও সংযোগ নেই ।

আপনি কি এখনই 2016 এর শেষের দিকে এটি নিশ্চিত করতে পারবেন?

— vsync

Answer 3

এগুলির পরিপূরকটির জন্য একটি নতুন উত্তর: ক্রোম 78.0.০.৩৯০৪.১০৮ এ আমি এই সমস্ত টাইমআউটগুলি লক্ষ্য করি (কেবলমাত্র 1000 মিমির নীচে নয়) যখন আমি অন্য ট্যাবে চলে যাই তখন প্রত্যাশার চেয়ে খানিক বেশি সময় নেয় এবং তারপরে ফিরে আসি। আমি যে আচরণটি দেখছি সেটি আরও সঠিকভাবে বর্ণনা করা হয়েছে "নিষ্ক্রিয় ট্যাবগুলিতে সমস্ত সময়সীমা কিছু অতিরিক্ত পরিমাণে, সর্বোচ্চ 1000 মিমি অবধি দেরি হতে পারে।" :

let timeouts = [ 500, 1000, 2000, 3000, 10000 ];

let minExcess = document.getElementsByClassName('minExcess')[0];

timeouts.forEach(ms => {
  let elem = document.getElementsByClassName(`t${ms}`)[0];
  let cnt = 0;
  
  let lastMs = +new Date();
  let f = () => {
    let curMs = +new Date();
    let disp = document.createElement('p');
    let net = curMs - lastMs;
    lastMs = curMs;
        
    setTimeout(f, ms);
    if (minExcess.value && (net - ms) < parseInt(minExcess.value)) return;
    
    disp.innerText = `${net},`;
    elem.appendChild(disp);
    if (++cnt > 10) elem.firstElementChild.remove();
    
  };
  setTimeout(f, ms);
  
});

body { font-size: 80%; }
div {
  max-height: 80px;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.1);
  margin-bottom: 2px;
  white-space: nowrap;
}
p { margin: 0; }
div > p {
  margin: 0;
  display: inline-block;
  vertical-align: top;
  margin-right: 2px;
}
input { margin: 0 0 10px 0; }
.t500:before { display: block; content: '500ms'; font-weight: bold; }
.t1000:before { display: block; content: '1000ms'; font-weight: bold; }
.t2000:before { display: block; content: '2000ms'; font-weight: bold; }
.t3000:before { display: block; content: '3000ms'; font-weight: bold; }
.t10000:before { display: block; content: '10000ms'; font-weight: bold; }

<p>Ignore any values delayed by less than this amount:</p>
<input type="text" class="minExcess" value="200" pattern="^[0-9]*$"/>
<div class="timeout t500"></div>
<div class="timeout t1000"></div>
<div class="timeout t2000"></div>
<div class="timeout t3000"></div>
<div class="timeout t10000"></div>