ভারী-রানিং জাভাস্ক্রিপ্ট শনাক্ত করুন

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

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

লং অ্যানিমেশন ফ্রেম API হল একটি লাইটওয়েট API যা ফিল্ডে ভারী-রানিং জাভাস্ক্রিপ্ট শনাক্ত করতে ব্যবহার করা যেতে পারে। একটি ভারী-চলমান স্ক্রিপ্ট হয় একটি দীর্ঘ-চলমান স্ক্রিপ্ট হতে পারে, অথবা এমন একটি স্ক্রিপ্ট যা পৃষ্ঠা লাইফসাইকেল চলাকালীন একাধিকবার চলে।

কীভাবে প্রয়োগ করতে হয়

PerformanceObserver ইন্টারফেস ব্যবহার করে লং অ্যানিমেশন ফ্রেম মনিটর করা হয়। কোনও অ্যানিমেশন ফ্রেম রেন্ডার করতে ৫০ মিলিসেকেন্ডের বেশি সময় লাগলে এটি একটি long-animation-frame এন্ট্রি নির্গত করে। এন্ট্রিতে লং অ্যানিমেশন ফ্রেম সম্পর্কে তথ্য থাকে, যার মধ্যে ফ্রেমের সময়সীমা এবং ফ্রেম চলাকালীন এক্সিকিউট করা স্ক্রিপ্ট অন্তর্ভুক্ত।

long-animation-frame এন্ট্রিতে scripts প্রপার্টি আছে যা PerformanceScript অবজেক্টের একটি অ্যারে। প্রতিটি PerformanceScript অবজেক্টে লং অ্যানিমেশন ফ্রেম চলাকালীন এক্সিকিউট করা স্ক্রিপ্ট সম্পর্কে তথ্য থাকে, যার মধ্যে স্ক্রিপ্টের sourceURL এবং duration অন্তর্ভুক্ত।

লং অ্যানিমেশন ফ্রেমের জন্য দায়ী সবচেয়ে দীর্ঘ সময় ধরে চলা স্ক্রিপ্ট শনাক্ত করার উদাহরণ

// Accumulate all script entries across the page lifecycle so no
// data is lost between observer callbacks.
const allScripts = [];

const observer = new PerformanceObserver(list => {
  // Collect all script entries across frames to find the biggest offenders.
  allScripts.push(...list.getEntries().flatMap(entry => entry.scripts));

  // Group by sourceURL so you can identify which scripts contribute
  // the most total time, even if each individual invocation is short.
  const scriptSource = [...new Set(allScripts.map(script => script.sourceURL))];
  const scriptsBySource = scriptSource.map(sourceURL => ([sourceURL,
      allScripts.filter(script => script.sourceURL === sourceURL)
  ]));
  const processedScripts = scriptsBySource.map(([sourceURL, scripts]) => ({
    sourceURL,
    count: scripts.length,
    totalDuration: scripts.reduce((subtotal, script) => subtotal + script.duration, 0)
  }));

  // Only include scripts above a certain threshold to reduce noise.
  const heavyScripts = processedScripts.filter(script => {
    return script.totalDuration > 100;
  });

  // Sort by total duration so the worst offenders appear first,
  // making it easier to prioritize optimization efforts.
  heavyScripts.sort((a, b) => b.totalDuration - a.totalDuration);

  // Log to the console for local debugging. In production, replace
  // this with a call to send the data to your analytics service.
  console.table(heavyScripts);
});

// Use buffered: true to capture any long frames that occurred before
// this observer was registered.
observer.observe({type: 'long-animation-frame', buffered: true});

পেশাদার পদ্ধতি

• JS সেল্ফ-প্রোফাইলিং API-এর মতো বিকল্পের পরিবর্তে লং অ্যানিমেশন ফ্রেম API ব্যবহার করা উচিত, কারণ বিকল্পগুলি বেশি রানটাইম ওভারহেড বহন করে।
• লং অ্যানিমেশন ফ্রেম API-তে অনেক বিবরণ থাকে, তাই মূল তথ্যের সারসংক্ষেপ করুন।
• প্রোডাকশনে অ্যানালিটিক্স পরিষেবায় প্রয়োজনীয় তথ্য পাঠান।

ব্রাউজার সাপোর্ট ও ফলব্যাক স্ট্র্যাটেজি

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