Vue 3 অ্যাডমিন UI পারফরম্যান্স চেকলিস্ট — ভারী লিস্ট দ্রুত করার জন্য

কেন ভারী অ্যাডমিন লিস্ট ধীর লাগে\n\nব্যবহারকারীরা সাধারণত বলে না, “এই কম্পোনেন্ট অকার্যকর।” তারা বলে যে স্ক্রিনটি আটকে আছে: স্ক্রল স্টাটার করে, টাইপিং দেরি করে, এবং ক্লিকগুলো এক ছন্দ পরে লাগে। তথ্য সঠিক থাকলেও সেই বিলম্ব মানুষকে স্থির করে দেয়। তারা টুলটিতে বিশ্বাস কমিয়ে দেয়।\n\nঅ্যাডমিন UI দ্রুত ভারী হয়ে যায় কারণ লিস্টগুলো কেবল "লিস্ট" নয়। একটি টেবিলে হাজারো রো, অনেক কলাম, এবং ব্যাজ, মেনু, অবতার, টুলটিপ, ইনলাইন এডিটরের মত কাস্টম সেল থাকতে পারে। সেখানেই সোর্টিং, একাধিক ফিল্টার, লাইভ সার্চ যোগ করলে পেজ প্রতিটি ছোট পরিবর্তনে অনেক কাজ করতে শুরু করে।\n\nমানুষ সাধারণত প্রথমে যা লক্ষ্য করে তা সহজ: স্ক্রলিং ফ্রেম খোয়ায়, সার্চ টাইপিং পিছিয়ে লাগে, রো মেনু ধীরে খোলে, বাল্ক সিলেক্ট ফ্রিজ করে, এবং লোডিং স্টেট ফ্লিকার বা পেজ রিসেট করে।\n\nভিতরের দিকে, প্যাটার্নটাও সহজ: অনেক জিনিস খুব ঘন ঘন পুনঃরেন্ডার হয়। একটি কীস্ট্রোক ফিল্টারিং ট্রিগার করে, ফিল্টারিং টেবিল আপডেট করে, আর প্রতিটি রো তার সেলগুলো পুনর্নির্মাণ করে। যদি প্রতিটি রো সস্তা হয়, আপনি সামলে নিতে পারেন। কিন্তু যদি প্রতিটি রো এক ধরনের ছোট অ্যাপ হয়, আপনি প্রতিবারই সেই খরচ ভোগ করবেন।\n\nVue 3 অ্যাডমিন UI পারফরম্যান্স চেকলিস্টটি বেঞ্চমার্ক জেতার জন্য নয়। এটি টাইপিং মসৃণ রাখা, স্ক্রল স্থির রাখা, ক্লিক দ্রুত রাখা, এবং প্রোগ্রেস দৃশ্যমান রাখা—ইউজারের অভিজ্ঞতা ব্যাহত না করে।\n\nভালো খবর: ছোট পরিবর্তনগুলো সাধারণত বড় রিরাইটের থেকে বেশি ফল দেয়। কম রো রেন্ডার করুন (ভার্চুয়ালাইজেশন), কীস্ট্রোক প্রতি কাজ কমান (ডেবাউনস), ব্যয়বহুল সেলগুলোকে পুনরায় চালানো বন্ধ করুন (মেমোইজেশন), এবং এমন লোডিং স্টেট ডিজাইন করুন যা পেজ জাম্প করায় না।\n\n## পরিবর্তন করার আগে মাপুন\n\nবেসলাইন ছাড়া টিউন করলে ভুল জিনিস "ফিক্স" করা সহজ। একটি ধীর অ্যাডমিন স্ক্রিন বেছে নিন (ইউজার্স টেবল, টিকিট কিউ, অর্ডার লিস্ট) এবং একটি লক্ষ্য নির্ধারণ করুন যা আপনি অনুভব করতে পারেন: দ্রুত স্ক্রল এবং সার্চ ইনপুট যা কখনো দেরি করে না।\n\nপ্রথমে ধীরতা পুনরায় তৈরি করুন, তারপর প্রোফাইল করুন।\n\nব্রাউজারের Performance প্যানেলে একটি সংক্ষিপ্ত সেশন রেকর্ড করুন: লিস্ট লোড করুন, কয়েক সেকেন্ড দ্রুত স্ক্রল করুন, তারপর সার্চ-এ টाइপ করুন। মেইন থ্রেডে লম্বা টাস্ক এবং বারবার লেআউট/পেইন্ট কাজ দেখুন যখন কিছুই নতুন ঘটছে না।\n\nতারপর Vue Devtools খুলে দেখুন আসলে কী রেন্ডার হচ্ছে। যদি একটি কীস্ট্রোক সম্পূর্ণ টেবিল, ফিল্টার এবং পেজ হেডারকে রেন্ডার করায়, সেটাই সাধারণত ইনপুট ডিলেকে ব্যাখ্যা করে।\n\nকিছু সংখ্যার উপর নজর রাখুন যাতে পরে উন্নতি নিশ্চিত করতে পারেন:\n\n- প্রথম ব্যবহারযোগ্য লিস্ট পর্যন্ত সময় (শুধু স্পিনার নয়)\n- স্ক্রলিং ফিল (মসৃণ বনাম চপি)\n- টাইপিংয়ে ইনপুট ডিলে (টেক্সট কি সঙ্গে সঙ্গে আসে?)\n- টেবিল কম্পোনেন্টের রেন্ডার সময়\n- লিস্ট API কলের নেটওয়ার্ক সময়\n\nশেষে, বোতলনেক কোথায় তা নিশ্চিত করুন। দ্রুত একটি টেস্ট হল নেটওয়ার্ক শব্দ কমানো। যদি ক্যাশড ডেটা থাকলেও UI এখনও স্টাটার করে, তাহলে বেশিরভাগ ক্ষেত্রেই রেন্ডারিং সমস্যা। যদি UI মসৃণ থাকে কিন্তু ফলাফল দেরিতে আসে, তাহলে নেটওয়ার্ক সময়, কুয়েরি সাইজ এবং সার্ভার-সাইড ফিল্টারিং-এ ফোকাস করুন।\n\n## বড় লিস্ট এবং টেবিল ভার্চুয়ালাইজ করুন\n\nযখন একটি অ্যাডমিন স্ক্রিন একসাথে শত বা হাজার রো রেন্ডার করে, ভার্চুয়ালাইজেশন প্রায়ই সবচেয়ে বড় বিজয় দেয়। প্রতিটি রো DOM-এ রাখার পরিবর্তে, আপনি কেবল ভিউপোর্টে যা দেখা যায় তা রেন্ডার করেন (এবং একটি ছোট বাফার)। এতে রেন্ডার টাইম কমে, মেমরি ব্যবহার কমে, এবং স্ক্রল স্থির লাগে।\n\n### সঠিক পদ্ধতি বেছে নিন\n\nভাচুয়াল স্ক্রলিং (উইন্ডোয়িং) তখন ভাল যখন ব্যবহারকারীরা দীর্ঘ ডেটাসেটে মসৃণভাবে স্ক্রল করতে চান। পেজিনেশন ভালো যখন মানুষ পেজ-বাই-পেজ ঝাপ দেয় এবং সার্ভার-সাইড কুয়েরি সহজ রাখতে চান। "লোড মোর" প্যাটার্নও কাজ করতে পারে যখন আপনি কম কন্ট্রোল চান কিন্তু বিশাল DOM ট্রি এড়াতে চান।\n\nএকটি আনুমানিক নিয়ম:\n\n- 0–200 রো: সাধারণ রেন্ডারিং প্রায়ই ঠিক থাকে\n- 200–2,000 রো: UX অনুযায়ী ভার্চুয়ালাইজেশন বা পেজিনেশন\n- 2,000+ রো: ভার্চুয়ালাইজেশন প্লাস সার্ভার-সাইড ফিল্টারিং/সোর্টিং\n\n### ভার্চুয়ালাইজেশনকে স্থিতিশীল রাখুন\n\nভার্চুয়াল লিস্টগুলো সবচেয়ে ভাল কাজ করে যখন প্রতিটি রো-র উচ্চতা পূর্বানুমানযোগ্য। যদি রো উচ্চতা রেন্ডারের পর পরিবর্তিত হয় (ইমেজ লোডিং, টেক্সট মোড়ানো, এক্সপান্ডিং সেকশন), তাহলে স্ক্রলারকে আবার মাপ নিতে হয়। এতে জাম্পি স্ক্রল এবং লেআউট থ্র্যাশ দেখা দেয়।\n\nএটি স্থিতিশীল রাখুন:\n\n- সম্ভব হলে ফিক্সড রো উচ্চতা ব্যবহার করুন, অথবা কিছু পরিচিত উচ্চতার সেট রাখুন\n- পরিবর্তনশীল কনটেন্ট (ট্যাগ, নোট) ক্ল্যাম্প করুন এবং বিস্তারিত ভিউ-তে দেখান\n- প্রতিটি রোতে একটি শক্তিশালী, ইউনিক কী ব্যবহার করুন (কখনো অ্যারে ইনডেক্স নয়)\n- স্টিকি হেডার থাকলে হেডারটি ভার্চুয়ালাইজড বডির বাইরে রাখুন\n- যদি পরিবর্তনশীল উচ্চতা সাপোর্ট করতে হয়, মেজারিং সক্রিয় করুন এবং সেলগুলো সাদাসিধে রাখুন\n\nউদাহরণ: যদি একটি টিকিট টেবিলে 10,000 রো থাকে, টেবিল বডি ভার্চুয়ালাইজ করুন এবং রো উচ্চতা কনসিসটেন্ট রাখুন (স্ট্যাটাস, সাবজেক্ট, আসাইনড টু)। লম্বা মেসেজগুলো বিস্তারিত ড্রয়ারে রাখুন যাতে স্ক্রল মসৃণ থাকে।\n\n## ডেবাউনসড সার্চ এবং স্মার্ট ফিল্টারিং\n\nএকটি সার্চ বক্স দ্রুত টেবিলকেও ধীর করে দিতে পারে। সমস্যা প্রায়ই ফিল্টার নিজেই নয়—এটি চেইন রিঅ্যাকশান: প্রতিটি কীস্ট্রোক রেন্ডার, ওয়াচার, এবং প্রায়ই একটি রিকোয়েস্ট ট্রিগার করে।\n\nডেবাউন্স মানে "ব্যবহারকারী টাইপ করা বন্ধ করার পর একটু অপেক্ষা করুন, তারপর একবার কাজ করুন।" বেশিরভাগ অ্যাডমিন স্ক্রিনে 200 থেকে 400 মি.সেক. প্রতিক্রিয়াশীল কিন্তু টুইচি নয়। এছাড়াও স্পেস ট্রিম করুন এবং যদি উপযুক্ত হয় তাহলে 2–3 ক্যারেক্টারের কম সার্চ উপেক্ষা করুন।\n\nফিল্টারিং কৌশলকে ডেটাসেটের সাইজ এবং নিয়ম অনুযায়ী মিলান:\n\n- যদি কিছু শত রো এবং আগেই লোড করা থাকে, ক্লায়েন্ট-সাইড ফিল্টারিং ঠিক আছে।\n- হাজার হাজার রো হলে বা পারমিশন কড়া হলে সার্ভার-সাইড কুয়েরি করুন।\n- যদি ফিল্টার খরচ বেশি (তারিখ রেঞ্জ, জটিল স্ট্যাটাস লজিক), সেগুলো সার্ভারে ঠেলে দিন।\n- যদি দুইটাই লাগবে, মিশ্র পদ্ধতি নিন: দ্রুত ক্লায়েন্ট-ন্যারো করা, তারপর চূড়ান্ত ফলাফরের জন্য সার্ভার কুয়েরি।\n\nসার্ভার কল করলে stale ফলাফল হ্যান্ডেল করুন। ব্যবহারকারী যদি "inv" টাইপ করে দ্রুত "invoice" সম্পন্ন করে, আগের রিকোয়েস্ট পরে এসে UI ভুল ডেটা দেখাতে পারে। আগের রিকোয়েস্ট বাতিল করুন (AbortController ব্যবহার করে fetch-এ, অথবা আপনার ক্লায়েন্টের ক্যানসেল ফিচার), অথবা রিকোয়েস্ট আইডি ট্র্যাক করে পুরোনো রেসপন্স উপেক্ষা করুন।\n\nলোডিং স্টেটও স্পিডের মতোই গুরুত্বপূর্ণ। প্রতিটি কীস্ট্রোকের জন্য পুরো পেজে স্পিনার দেখাবেন না। একটি শান্ত প্রবাহ এভাবে দেখুন: ব্যবহারকারী টাইপ করার সময় কিছুই ঝলকান নেই। যখন অ্যাপ সার্চ করছে, ইনপুটের পাশে একটি ছোট ইনলাইন সূচক দেখান। যখন ফলাফল আপডেট হয়, "Showing 42 results" মত শান্ত ও পরিষ্কার বার্তা দেখান। যদি কোনো ফলাফল না থাকে, "No matches" বলুন বরং খালি গ্রিড রেখে দেওয়ার।\n\n## মেমোইজড কম্পোনেন্ট এবং স্থিতিশীল রেন্ডারিং\n\nবহু ধীর অ্যাডমিন টেবিল ধীর কারণ "অতিরিক্ত ডেটা" নয়—কারণ একই সেলগুলো বারবার রেন্ডার করে।\n\n### কী রেন্ডার করছে তা খুঁজে বের করুন\n\nপুনরাবৃত্ত আপডেট সাধারণত কয়েকটি সাধারণ অভ্যাস থেকে আসে:\n\n- প্রপ হিসেবে বড় reactive অবজেক্ট পাঠানো, যেখানে মাত্র কয়েকটি ফিল্ড দরকার\n- টেমপ্লেটে inline ফাংশন তৈরি করা (প্রতি রেন্ডারে নতুন)\n- বড় অ্যারে বা রো অবজেক্টে deep watcher ব্যবহার করা\n- প্রতিটি সেলের জন্য টেমপ্লেটে নতুন অ্যারে/অবজেক্ট বানানো\n- প্রতিটি আপডেটে ফর্ম্যাটিং কাজ করা (তারিখ, কারেন্সি, পার্সিং)\n\nযখন প্রপ্স এবং হ্যান্ডলারদের identity বদলে যায়, Vue ধরে নেয় চাইল্ড-কম্পোনেন্ট আপডেট করা দরকার, এমন না হলেও।\n\n### প্রপ স্থিতিশীল করুন, তারপর মেমোইজ করুন\n\nছোট, স্থিতিশীল প্রপ পাঠানো শুরু করুন। প্রতিটি সেলে পুরো row অবজেক্ট পাস করার বদলে row.id এবং সেলটিতে দেখানো নির্দিষ্ট ফিল্ডগুলো পাস করুন। দরজিভিত্তিক মান computed-এ সরান যাতে তা কেবলই তার ইনপুট বদলালে পুনরায় গণনা করে।\n\nরো-এর এমন অংশ যা কদাচিৎই বদলে, সেখানে v-memo কাজে লাগবে। স্থিতিশীল ইনপুটের উপর ভিত্তি করে স্ট্যাটিক অংশগুলো মেমোইজ করুন (উদাহরণ: row.id এবং row.status) যাতে সার্চ টাইপ বা হোভারিং পুরো সেলগুলোকে পুনরায় চালায় না।\n\nএছাড়াও ব্যয়বহুল কাজগুলো রেন্ডার পাথ থেকে আলাদা রাখুন। তারিখগুলো একবার প্রি-ফর্ম্যাট করুন (উদাহরণ: id দিয়ে computed ম্যাপ), বা যেখানে যুক্তিযোজ্য সেখানে সার্ভারে ফর্ম্যাট করুন। সাধারণ একটি বাস্তব সাফল্য হলো "Last updated" কলাম থেকে প্রতিটি রো-তে new Date() চালানো বন্ধ করা—এগুলো ছোট UI আপডেটে শত শত বার চালানো উচিত নয়।\n\nলক্ষ্যটি সোজা: identity স্থিতিশীল রাখুন, কাজগুলো টেমপ্লেট থেকে সরান, এবং কেবলই যে অংশ বদলেছে তা আপডেট করুন।\n\n## স্মার্ট লোডিং স্টেট যা দ্রুত অনুভব করায়\n\nএকটি লিস্ট প্রায়ই ধীর মনে হয় কারণ UI বারবার ঝাঁকুনি খায়। ভাল লোডিং স্টেট অপেক্ষাকে ভবিষ্যৎনির্ধারণীয় করে।\n\nযদি ডেটার আকার জানা থাকে (টেবিল, কার্ড, টাইমলাইন), স্কেলেটন রো সহায়ক। একটি স্পিনার কী জন্য অপেক্ষা করছে তা বলে না। স্কেলেটন প্রত্যাশা নির্ধারণ করে: কয়টি রো, কোথায় অ্যাকশন থাকবে, এবং লেআউট কেমন হবে।\n\nযখন আপনি ডেটা রিফ্রেশ করেন (পেজিং, সোর্টিং, ফিল্টার), নতুন রিকোয়েস্ট চলাকালীন পুরানো ফলাফল স্ক্রিনে রাখুন। একটি সূক্ষ্ম "refreshing" ইঙ্গিত দেখান সার্বিক মুছে ফেলার বদলে। ব্যবহারকারীরা আপডেট হওয়ার সময়ও পড়ে থাকতে বা কিছু ডাবল-চেক করতে পারে।\n\n### পার্শিয়াল লোডিং পুরো ব্লকিং-এর চেয়েও ভালো\n\nসবকিছুই জমে থাকা দরকার নেই। যদি টেবিল লোড হচ্ছে, ফিল্টার বার দৃশ্যমান রাখুন কিন্তু সাময়িকভাবে disable করুন। যদি রো-অ্যাকশন অতিরিক্ত ডেটা চায়, ক্লিক করা রো-তে পেন্ডিং স্টেট দেখান, পুরো পেজ নয়।\n\nএকটি স্থিতিশীল প্যাটার্ন দেখতে এমনটি হওয়া উচিত:\n\n- প্রথম লোড: স্কেলেটন রো\n- রিফ্রেশ: পুরানো রো দৃশ্যমান রাখুন, একটি ছোট "updating" ইঙ্গিত দেখান\n- ফিল্টার: ফেচ চলাকালীন ডিসেবল করুন, কিন্তু তাদের সরান না\n- রো অ্যাকশন: প্রতি-রো পেন্ডিং স্টেট\n- এরর: ইনলাইন দেখান, লেআউট ভেঙে না ফেলে\n\n### লেআউট শিফট প্রতিরোধ করুন\n\nটুলবার, এম্পটি স্টেট এবং পেজিনেশনের জন্য জায়গা সংরক্ষণ করুন যাতে ফলাফল পরিবর্তনের সময় কন্ট্রোলগুলো না সরে যায়। টেবিল এরিয়ার জন্য একটি ফিক্সড মিন-হাইট সহায়ক, এবং হেডার/ফিল্টার বার সবসময় রেন্ডার করে রাখা পেজ জাম্প এড়ায়।\n\nকনক্রিট উদাহরণ: একটি টিকিট স্ক্রিনে "Open" থেকে "Solved" পরিবর্তন করলে লিস্ট খালি হওয়া উচিত নয়। বর্তমান রো রাখুন, স্ট্যাটাস ফিল্টার সাময়িকভাবে ডিসেবল করুন, এবং শুধুমাত্র আপডেট হওয়া টিকিটে পেন্ডিং স্টেট দেখান।\n\n## ধাপে ধাপে: একটি ধীর লিস্ট এক দুপুরেই ঠিক করুন\n\nএকটি ধীর স্ক্রিন বেছে নিন এবং এটিকে একটি ছোট মেরামতের মতো ব্যবহার করুন। লক্ষ্য পারফেকশন নয়—এটি একটি স্পষ্ট উন্নতি যা স্ক্রলিং এবং টাইপিং-এ অনুভবযোগ্য।\n\n### দ্রুত একটি দুপুরের প্ল্যান\n\nপ্রথমে নির্দিষ্ট ব্যথার স্থান নাম করুন। পেজ খুলুন এবং তিনটি কাজ করুন: দ্রুত স্ক্রল করুন, সার্চ বক্সে টাইপ করুন, এবং পেজ বা ফিল্টার বদলান। প্রায়ই এই তিনটির মধ্যে কেবল একটি টুকুই সত্যিই খারাপ থাকে, এবং সেটাই বলে কী ঠিক করতে হবে।\n\nতারপর সরল সিকোয়েন্স মেনে চলুন:\n\n- বোতলনেক শনাক্ত করুন: জ্যাঙ্কি স্ক্রলিং, ধীর টাইপিং, ধীর নেটওয়ার্ক, অথবা মিশ্র।\n- DOM আকার কমান: ভার্চুয়ালাইজেশন, অথবা ডিফল্ট পেজ সাইজ কমান যতক্ষণ UI স্থিতিশীল না হয়।\n- সার্চ শান্ত করুন: ইনপুট ডেবাউনস করুন এবং পুরোনো রিকোয়েস্ট বাতিল করুন যাতে ফলাফল অর্ডারে না আসে।\n- রো স্থিতিশীল রাখুন: কনসিস্টেন্ট কী, টেমপ্লেটে নতুন অবজেক্ট না বানানো, রো রেন্ডার মেমোইজ করুন যদি ডেটা বদলে না।\n- উপলদ্ধি-গতির উন্নতি করুন: পুরো পেজ ব্লক করার বদলে রো-লেভেল স্কেলেটন বা একটি ছোট ইনলাইন স্পিনার দেখান।\n\nপ্রতিটি ধাপের পরে একই কর্মটি পুনরায় টেস্ট করুন যা খারাপ লাগছিল। যদি ভার্চুয়ালাইজেশন স্ক্রল মসৃণ করে, অগ্রসর হন। যদি টাইপিং এখনও ধীর, ডেবাউনস এবং রিকোয়েস্ট ক্যানসেলিং সাধারণত পরের বড় জয়।\n\n### অনুকরণীয় ছোট উদাহরণ\n\nধরুন একটি "Users" টেবিল আছে 10,000 রো-সহ। স্ক্রল চপি কারণ ব্রাউজার অনেক রো পেইন্ট করছে। ভার্চুয়ালাইজ করুন যাতে কেবল দৃশ্যমান রো রেন্ডার হয়।\n\nএরপর সার্চ দেরি করে কারণ প্রতিটি কীস্ট্রোক একটি রিকোয়েস্ট ট্রিগার করছে। 250–400 মি.সেক ডেবাউনস যোগ করুন, এবং আগের রিকোয়েস্ট AbortController (অথবা আপনার HTTP ক্লায়েন্টের ক্যানসেল) দিয়ে বাতিল করুন যাতে কেবল সর্বশেষ কুয়েরি তালিকা আপডেট করে।\n\nশেষে, প্রতিটি রোকে সস্তা করে নিন। প্রপগুলোকে সরল রাখুন (সম্ভব হলে id এবং প্রিমিটিভ), রো আউটপুট মেমোইজ করুন যাতে অনঅফেক্টেড রোরা পুনরায় ড্র করে না, এবং পুরো পেজ ব্লক না করে টেবিল বডিতেই লোডিং দেখান যাতে পেজ প্রতিক্রিয়াশীল থাকে।\n\n## সাধারণ ভুলগুলো যা UI ধীর রাখে\n\nটিমগুলো সাধারণত কিছু ফিক্স প্রয়োগ করে, একটু উন্নতি দেখে আটকে যায়। সাধারণত কারণ: ব্যয়বহুল অংশটি কেবল "লিস্ট" নয়—এটা প্রতিটি রো যখন রেন্ডার করে, আপডেট করে এবং ডেটা ফেচ করে তখন যা করে।\n\nভার্চুয়ালাইজেশন সাহায্য করে, কিন্তু এটাকে ক্যানসেল করা সহজ। যদি প্রতিটি দৃশ্যমান রো এখনও ভারী চার্ট মাউন্ট করে, ইমেজ ডিকোড করে, অনেক ওয়াচার চালায়, বা ব্যয়বহুল ফর্ম্যাটিং করে, তাহলে স্ক্রলিং এখনও খারাপ লাগবে। ভার্চুয়ালাইজেশন কেবল কতগুলো রো DOM-এ আছে তা সীমিত করে, প্রতিটি রো কত ভারি তা নয়।\n\nকী-গুলি আরেকটি শান্ত পারফরম্যান্স কিলার। যদি আপনি অ্যারে ইনডেক্স কী ব্যবহার করেন, Vue সঠিকভাবে রো ট্র্যাক করতে পারে না যখন আপনি ইনসার্ট, ডিলিট, বা সোর্ট করেন। এটি প্রায়ই রিমাউন্ট করে এবং ইনপুট ফোকাস রিসেট করে। স্থিতিশীল id ব্যবহার করুন যাতে Vue DOM এবং কম্পোনেন্ট ইনস্ট্যান্সগুলো পুনরায় ব্যবহার করতে পারে।\n\nডেবাউনসও প্রলাপ হতে পারে। যদি ডিলে খুব লম্বা হয়, UI ভাঙা মনে হয়: মানুষ টাইপ করে কিছুই ঘটে না, তারপর ফলাফল ঝট করে চলে আসে। একটি ছোট ডিলে সাধারণত ভাল কাজ করে, এবং আপনি এখনও তাত্ক্ষণিক ফিডব্যাক দেখাতে পারেন যেমন "Searching..." যাতে ব্যবহারকারী জানে অ্যাপটি শুনেছে।\n\nপাঁচটি ভুল যা বেশিরভাগ ধীর লিস্ট অডিটে দেখা যায়:\n\n- লিস্ট ভার্চুয়ালাইজ করুন, কিন্তু প্রতিটি দৃশ্যমান রো-তে ভারী সেল (ইমেজ, চার্ট, জটিল কম্পোনেন্ট) রাখুন।\n- ইনডেক্স-ভিত্তিক কী ব্যবহার করা, ফলে সোর্ট/আপডেটে রো রিমাউন্ট হয়।\n- সার্চ ডেবাউনস এত দীর্ঘ করা যে তা ল্যাগি মনে হয়।\n- বিস্তৃত reactive পরিবর্তনের থেকে রিকোয়েস্ট ট্রিগার করা (পুরো ফিল্টার অবজেক্ট ওয়াচ করা, URL স্টেট অতিরিক্ত সিঙ্ক করা)।\n- একটি গ্লোবাল পেজ লোডার ব্যবহার করা যা স্ক্রল পজিশন মুছে ফেলে এবং ফোকাস চুরি করে।\n\nআপনি যদি Vue 3 অ্যাডমিন UI পারফরম্যান্স চেকলিস্ট ব্যবহার করছেন, তাহলে "কি রেন্ডার করে" এবং "কি রিফেচ করে"—দুটোকেই প্রথম দফার সমস্যা হিসেবে বিবেচনা করুন।\n\n## দ্রুত পারফরম্যান্স চেকলিস্ট\n\nযখন একটি টেবিল বা লিস্ট আটকে লাগা শুরু করে, এই চেকলিস্ট ব্যবহার করুন। লক্ষ্য: মসৃণ স্ক্রলিং, অনুমেয় সার্চ, এবং কম অপ্রত্যাশিত রেন্ডার।\n\n### রেন্ডারিং এবং স্ক্রলিং\n\nঅধিকাংশ "ধীর লিস্ট" সমস্যা বেশি রেন্ডার করা ও ঘন ঘন করার কারণে।\n\n- স্ক্রিনে যদি শতাধিক রো দেখানো যায়, ভার্চুয়ালাইজেশন ব্যবহার করুন যাতে DOM-এ কেবল স্ক্রিনে যা আছে তা থাকে (এবং একটি ছোট বাফার)।\n- রো উচ্চতা কনসিস্টেন্ট রাখুন। পরিবর্তনশীল উচ্চতা ভার্চুয়ালাইজেশন ভাঙতে পারে এবং জ্যাঙ্ক সৃষ্টি করে।\n- inline প্রপ হিসেবে নতুন অবজেক্ট ও অ্যারে পাস করা এড়ান (উদাহরণ :style="{...}")। এগুলো একবার তৈরি করে পুনরায় ব্যবহার করুন।\n- রো ডেটার উপর গভীর ওয়াচার নিয়ে সতর্ক থাকুন। পরিবর্তে computed ভ্যালু এবং টার্গেটেড ওয়াচ ব্যবহার করুন যেগুলো প্রকৃতপক্ষে বদলে।\n- বাস্তব রেকর্ড id-র মতো স্থিতিশীল কী ব্যবহার করুন, অ্যারে ইনডেক্স নয়।\n\n### সার্চ, লোডিং, এবং রিকোয়েস্ট\n\nনেটওয়ার্ক ধীর হলেও লিস্টকে দ্রুত অনুভব করান।\n\n- সার্চ ডেবাউনস করুন (প্রায় 250–400 মি.সেক), ইনপুটে ফোকাস রাখুন, এবং stale রিকোয়েস্ট বাতিল করুন যাতে পুরানো রেসপন্স নতুনটিকে ওভাররাইট না করে।\n- নতুন ফলাফল লোড হলে পুরোনো ফলাফল দৃশ্যমান রাখুন। একটি সূক্ষ্ম "updating" স্টেট ব্যবহার করুন টেবিল ক্লিয়ার করার বদলে।\n- পেজিনেশন পূর্বানুমানযোগ্য রাখুন (ফিক্সড পেজ সাইজ, স্পষ্ট নেক্সট/প্রিভ আচরণ, রিসেট এড়ানো)।\n- সম্পর্কিত কলগুলো ব্যাচ করুন (উদাহরণ: কাউন্ট + লিস্ট ডেটা) বা প্যারালেলে ফেচ করে একবারে রেন্ডার করুন।\n- একটি ফিল্টার সেটের শেষ সফল রেসপন্স ক্যাশ করে রাখুন যাতে সাধারণ ভিউতে ফিরে আসা দ্রুত অনুভব হয়।\n\n## উদাহরণ: লোডে চাপের নিচে একটি টিকেটিং অ্যাডমিন স্ক্রিন\n\nএকটি সাপোর্ট টিম টিকিটিং স্ক্রিন সারাদিন খোলা রাখে। তারা কাস্টমার নাম, ট্যাগ, বা অর্ডার নম্বর দিয়ে সার্চ করে, আর লাইভ ফিড টিকিট স্ট্যাটাস আপডেট করে (নতুন রিপ্লাই, প্রায়োরিটি চেঞ্জ, SLA টাইমার)। টেবিল সহজেই 10,000 রো ছুঁতে পারে।\n\nপ্রথম ভার্সন টেকনিক্যালি কাজ করলেও অতি খারাপ অনুভূত হ ল। টাইপিংয়ে ক্যারেক্টার দেরিতে আসে। টেবিল টপ-এ চলে যায়, স্ক্রল পজিশন রিসেট হয়, এবং অ্যাপ প্রতিটি কীস্ট্রোকে রিকোয়েস্ট পাঠায়। ফলাফল পুরানো ও নতুনের মাঝে ঝলকায়।\n\nকি পরিবর্তন করা হলো:\n\n- সার্চ ইনপুটে ডেবাউনস (250–400 মি.সেক) যোগ করা এবং শুধুমাত্র ইউজার বিরতি দিলে কুয়েরি চালানো।\n- নতুন রিকোয়েস্ট চলাকালীন পূর্ববর্তী ফলাফল দৃশ্যমান রাখা।\n- রো ভার্চুয়ালাইজ করা যাতে DOM-এ কেবল দৃশ্যমান অংশই রেন্ডার হয়।\n- টিকেট রো মেমোইজ করা যাতে অন সম্পর্কিত লাইভ আপডেটে পুনরায় রেন্ডার না হয়।\n- ভারী সেল কনটেন্ট (অবতার, রিচ স্নিপেট, টুলটিপ) লেজি-লোড করা শুধুমাত্র রো দৃশ্যমান হলে।\n\nডেবাউনস করার পর টাইপিং ল্যাগ আর দেখা যায়নি এবং অনাবশ্যক রিকোয়েস্টগুলো কমলো। পূর্ববর্তী ফলাফল রেখে দিলে ফ্লিকার বন্ধ হয়ে স্ক্রিন স্থিতিশীল মনে হল এমনকি নেটওয়ার্ক ধীর হলেও।\n\nভার্চুয়ালাইজেশন সবচেয়ে বড় ভিজ্যুয়াল বিজয় ছিল: স্ক্রল মসৃণ থাকল কারণ ব্রাউজার আর হাজারো রো একই সময়ে ম্যানেজ করে না। রো মেমোইজ করলে একক টিকিট বদলালে "পুরো টেবিল" আপডেট হওয়া রোধ হল।\n\nআরেকটি টিউনিং: লাইভ ফিড আপডেটগুলো ব্যাচ করে কয়েক শত মি.সেকেন্ডে প্রয়োগ করা হলো যাতে UI ক্রমাগত রিফ্লো না করে।\n\nফলাফল: স্থির স্ক্রল, দ্রুত টাইপিং, এবং কম অপ্রত্যাশ্য আচরণ।\n\n## পরবর্তী ধাপ: পারফরম্যান্সকে ডিফল্ট বানান\n\nএকটি দ্রুত অ্যাডমিন UI পরে থেকে দ্রুত রাখা সহজ ততটাই বেশি কঠিন। এই চেকলিস্টকে প্রতিটি নতুন স্ক্রিনের মান হিসেবে বিবেচনা করুন, এককালীন ক্লিনআপ হিসেবে নয়।\n\nব্যবহারকারীরা সবচেয়ে বেশি যেখানে অনুভব করে সেই ফিক্সগুলোকে অগ্রাধিকার দিন। বড় বিজয় সাধারণত ব্রাউজারকে কী আঁকতে হবে তা কমানো এবং টাইপিং-এ কতো দ্রুত প্রতিক্রিয়া দেখাতে পারে তার মধ্যে থেকে আসে।\n\nমুল ধারণা দিয়ে শুরু করুন: DOM আকার কমান (লম্বা লিস্ট ভার্চুয়ালাইজ করুন, লুকানো রো রেন্ডার করবেন না), তারপর ইনপুট ডিলে কমান (সার্চ ডেবাউনস করুন, প্রতিটি কীস্ট্রোকে ভারী ফিল্টারিং থেকে সরিয়ে দিন), তারপর রেন্ডারিং স্থিতিশীল করুন (রো কম্পোনেন্ট মেমোইজ করুন, প্রপ স্থিতিশীল রাখুন)। ছোট রিফ্যাক্টরগুলো শেষে রাখুন।\n\nতারপর, কিছু গার্ডরেইল যোগ করুন যাতে নতুন স্ক্রিনগুলো রিগ্রেস না করে। উদাহরণ: যেকোনো লিস্ট 200 রো-র উপরে হলে ভার্চুয়ালাইজেশন বাধ্যতামূলক, প্রত্যেক সার্চ ইনপুট ডেবাউনস করা থাকবে, এবং প্রতিটি রো-তে স্থিতিশীল id কী ব্যবহার করা হবে।\n\nপুনঃব্যবহারযোগ্য বিল্ডিং ব্লকগুলো এটিকে সহজ করে—একটি ভার্চুয়াল টেবিল কম্পোনেন্ট sensible ডিফল্ট-সহ, একটি ডেবাউনস করা সার্চ বার, এবং টেবিল লেআউট মিলিয়ে স্কেলেটন/এম্পটি স্টেটগুলি একটি উইকি পেজের চেয়েও বেশি কাজ করবে।\n\nএকটি ব্যবহারিক অভ্যাস: নতুন অ্যাডমিন স্ক্রিন মার্জ করার আগে 10x ডাটা এবং স্লো-নেটওয়ার্ক প্রিসেট নিয়ে একবার টেস্ট করুন। যদি তখনও ভাল লাগে, বাস্তবে ব্যবহারেও ভাল লাগবে।\n\nযদি আপনি দ্রুত ইন্টার্নাল টুলস বানাচ্ছেন এবং চান এই প্যাটার্নগুলো স্ক্রিন জুড়ে কনসিস্টেন্ট থাকে, তাহলে AppMaster (appmaster.io) একটি ভাল উপায় হতে পারে। এটি প্রকৃত Vue 3 ওয়েব অ্যাপ জেনারেট করে, তাই একটি লিস্ট ভারী হলে একই প্রোফাইলিং ও অপ্টিমাইজেশন পদ্ধতি প্রযোজ্য।