এই পোস্টটি Chromium কন্ট্রিবিউটর আহমেদ এলওয়াসেফির কাছ থেকে, কিভাবে তিনি Google Summer of Code-এর মাধ্যমে একজন অবদানকারী হয়েছিলেন এবং অ্যাক্সেসিবিলিটি পারফরম্যান্সের সমস্যাগুলি তিনি চিহ্নিত করেছেন এবং ঠিক করেছেন তা শেয়ার করেছেন।
কায়রোর জার্মান ইউনিভার্সিটিতে কম্পিউটার ইঞ্জিনিয়ারিং-এ আমার শেষ বর্ষে আসার সময়, আমি ওপেন সোর্সে অবদান রাখার সুযোগগুলি অন্বেষণ করার সিদ্ধান্ত নিয়েছি। আমি Chromium-এর শিক্ষানবিস-বান্ধব সমস্যাগুলির তালিকা অন্বেষণ শুরু করেছি এবং নিজেকে বিশেষভাবে অ্যাক্সেসযোগ্যতার দিকে আকৃষ্ট করেছি। গাইডেন্সের জন্য আমার অনুসন্ধান আমাকে অ্যারন লেভেন্থালের কাছে নিয়ে গিয়েছিল, যার দক্ষতা এবং সাহায্য করার ইচ্ছা আমাকে একটি প্রকল্পের জন্য তার সাথে দলবদ্ধ হতে অনুপ্রাণিত করেছিল। এই সহযোগিতাটি আমার Google সামার অফ কোড অভিজ্ঞতায় পরিণত হয়েছে, যেখানে আমি Chromium অ্যাক্সেসিবিলিটি টিমের সাথে কাজ করার জন্য গৃহীত হয়েছিলাম৷
Google Summer of Code সফলভাবে সম্পন্ন করার পর, আমি একটি অমীমাংসিত স্ক্রলিং সমস্যার সমাধান করতে থাকি, কর্মক্ষমতা উন্নত করার ইচ্ছা দ্বারা চালিত। Google-এর OpenCollective প্রোগ্রাম থেকে দুটি অনুদানের জন্য ধন্যবাদ, আমি এই প্রকল্পে কাজ চালিয়ে যেতে সক্ষম হয়েছি এবং আরও ভাল কার্যক্ষমতার জন্য কোড স্ট্রীমলাইন করার উপর দৃষ্টি নিবদ্ধ করে অতিরিক্ত কাজগুলি গ্রহণ করতে পেরেছি।
এই ব্লগ পোস্টটি গত দেড় বছরে Chromium-এর সাথে আমার যাত্রা শেয়ার করে, বিশেষ করে পারফরম্যান্সের ক্ষেত্রে আমরা যে প্রযুক্তিগত উন্নতি করেছি তার বিশদ বিবরণ দেয়।
অ্যাক্সেসিবিলিটি কোড কীভাবে Chrome-এর কার্যক্ষমতাকে প্রভাবিত করে
Chrome-এর অ্যাক্সেসিবিলিটি কোড স্ক্রিন রিডারদের মতো সহায়ক প্রযুক্তিগুলিকে ওয়েব অ্যাক্সেস করতে সাহায্য করে৷ যাইহোক, যখন সক্রিয় করা হয়, এটি লোড হওয়ার সময়, কর্মক্ষমতা এবং ব্যাটারির জীবনকে প্রভাবিত করতে পারে। অতএব, প্রয়োজন না হলে, কর্মক্ষমতা হ্রাস এড়াতে এই কোডটি নিষ্ক্রিয় থাকে। প্রায় 5-10% ব্যবহারকারীর অ্যাক্সেসিবিলিটি কোড সক্রিয় থাকে, প্রায়শই পাসওয়ার্ড ম্যানেজার এবং অ্যান্টিভাইরাস সফ্টওয়্যারের মতো সরঞ্জামগুলির কারণে যা প্ল্যাটফর্ম অ্যাক্সেসিবিলিটি API ব্যবহার করে। এই টুলগুলি পৃষ্ঠার বিষয়বস্তুর সাথে ইন্টারঅ্যাক্ট করতে এবং সংশোধন করতে এই APIগুলির উপর নির্ভর করে, যেমন পাসওয়ার্ড পরিচালক এবং ফর্ম ফিলারগুলির জন্য পাসওয়ার্ড ক্ষেত্রগুলি সনাক্ত করা৷
মূল মেট্রিক্সে মোট অবনতি এখনও জানা যায়নি, তবে একটি সাম্প্রতিক পরীক্ষা অটো ডিসেবল অ্যাকসেসিবিলিটি (যখন এটি ব্যবহার করা হয় না তখন অ্যাক্সেসিবিলিটি বন্ধ করা) বলা হয়েছে, দেখায় যে এটি বেশ বেশি। ক্রোমের অ্যাক্সেসিবিলিটি কোডবেসের দুটি প্রধান ক্ষেত্রে প্রচুর পরিমাণে গণনা এবং যোগাযোগের কারণে সমস্যাটি ঘটে: রেন্ডারার এবং ব্রাউজার। রেন্ডারার ওয়েব বিষয়বস্তু এবং বিষয়বস্তুর পরিবর্তন সম্পর্কে তথ্য সংগ্রহ করে, নোডের একটি গাছের জন্য অ্যাক্সেসিবিলিটি বৈশিষ্ট্য গণনা করে। যেকোন নোংরা নোডগুলিকে তারপর সিরিয়ালাইজ করা হয় এবং একটি পাইপের মাধ্যমে ব্রাউজার প্রক্রিয়ার প্রধান UI থ্রেডে পাঠানো হয়। এই থ্রেডটি নোডের অভিন্ন ট্রিতে এই তথ্যগুলি গ্রহণ করে এবং ডিসিরিয়ালাইজ করে এবং অবশেষে এটিকে তৃতীয় পক্ষের সহায়ক প্রযুক্তি যেমন স্ক্রিন রিডারগুলির জন্য একটি উপযুক্ত ফর্মে রূপান্তর করে।
Chromium অ্যাক্সেসযোগ্যতার উন্নতি
নিম্নলিখিত প্রকল্পগুলি সামার অফ কোডের সময় এবং তারপরে Google OpenCollective প্রোগ্রাম দ্বারা অর্থায়নে সম্পন্ন হয়েছিল৷
ক্যাশে উন্নতি
ক্রোমে, অ্যাক্সেসিবিলিটি ট্রি নামে একটি বিশেষ ডেটা স্ট্রাকচার আছে যা DOM ট্রিকে মিরর করে। এটি সহায়ক প্রযুক্তিগুলিকে ওয়েব সামগ্রী অ্যাক্সেস করতে সহায়তা করতে ব্যবহৃত হয়। কখনও কখনও, যখন একটি ডিভাইসের এই গাছ থেকে তথ্যের প্রয়োজন হয়, তখন এটি প্রস্তুত নাও হতে পারে, তাই ব্রাউজারকে সেই অনুরোধগুলিকে পরবর্তীতে শিডিউল করতে হবে৷
পূর্বে, এই সময়সূচীটি ক্লোজার নামক একটি পদ্ধতি ব্যবহার করে পরিচালনা করা হয়েছিল, যা একটি সারিতে কলব্যাক স্থাপন করা জড়িত ছিল। কিভাবে বন্ধ প্রক্রিয়া করা হয় এই পদ্ধতির অতিরিক্ত কাজ যোগ করা হয়েছে.
এটি উন্নত করার জন্য, আমরা enums ব্যবহার করে একটি সিস্টেমে স্যুইচ করেছি। প্রতিটি কাজ একটি নির্দিষ্ট enum মান বরাদ্দ করা হয়, এবং একবার অ্যাক্সেসিবিলিটি ট্রি প্রস্তুত হলে, সেই কাজের জন্য সঠিক পদ্ধতি বলা হয়। এই পরিবর্তনটি কোডটিকে বোঝা সহজ করে দিয়েছে এবং 20% এর বেশি পারফরম্যান্স উন্নত করেছে।
স্ক্রোল কর্মক্ষমতা সমস্যা খুঁজে বের করা এবং ঠিক করা
এরপরে, আমি অন্বেষণ করেছি কিভাবে কর্মক্ষমতা উন্নত হয় যখন আমরা বাউন্ডিং বক্স সিরিয়ালাইজেশন বন্ধ করি। বাউন্ডিং বক্সগুলি হল একটি ওয়েব পৃষ্ঠার উপাদানগুলির অবস্থান এবং আকার, যার মধ্যে প্রস্থ, উচ্চতা এবং তাদের মূল উপাদানের সাথে সম্পর্কিত তাদের অবস্থানের মতো বিবরণ রয়েছে৷
এটি পরীক্ষা করার জন্য, আমরা অস্থায়ীভাবে কোডটি সরিয়ে দিয়েছি যা বাউন্ডিং বাক্সগুলি পরিচালনা করে এবং প্রভাব দেখতে পারফরম্যান্স পরীক্ষা চালায়। একটি পরীক্ষা, focus-links.html প্রায় 1618% এর বিশাল উন্নতি দেখিয়েছে। এই আবিষ্কার আরও কাজের ভিত্তি হয়ে ওঠে।
ধীর পরীক্ষা তদন্ত
আমি তদন্ত শুরু করেছি কেন সেই নির্দিষ্ট পরীক্ষাটি বাউন্ডিং বাক্সের সাথে ধীর ছিল। সমস্ত পরীক্ষাই ছিল একের পর এক একাধিক লিঙ্কের উপর ফোকাস। অতএব, মূল সমস্যাটি অবশ্যই উপাদানগুলিতে ফোকাস করা বা ফোকাস অ্যাকশনের সাথে ঘটে যাওয়া স্ক্রোলিং হতে হবে। এটি পরীক্ষা করার জন্য, আমি কর্মক্ষমতা পরীক্ষায় focus() কলে {preventScroll: true} যোগ করেছি, স্ক্রোলিং বন্ধ করে দিয়েছি।
স্ক্রলিং অক্ষম থাকার ফলে, বাউন্ডিং বক্স গণনা সক্রিয় থাকার সময় পরীক্ষার সময় 1.2 মিলিসেকেন্ডে নেমে আসে। এটি দেখায় যে স্ক্রোলিং ছিল আসল সমস্যা।
আমি ফোকাস-লিঙ্ক পরীক্ষার প্রতিলিপি করার জন্য scroll-in-page.html নামে একটি নতুন পরীক্ষা তৈরি করেছি, কিন্তু ফোকাস ব্যবহার করার পরিবর্তে, এটি scrollIntoView() সহ উপাদানগুলির মাধ্যমে স্ক্রোল করে। আমি মসৃণ এবং তাত্ক্ষণিক স্ক্রোলিং উভয়ই পরীক্ষা করেছি, বাউন্ডিং বক্স গণনা সহ এবং ছাড়াই।
ফলাফলগুলি দেখায় যে তাত্ক্ষণিক স্ক্রলিং এবং বাউন্ডিং বাক্সগুলির সাথে, প্রক্রিয়াটি প্রায় 66 মি. মসৃণ স্ক্রোলিং প্রায় 124ms এ এমনকি ধীর ছিল। যখন আমরা বাউন্ডিং বাক্সগুলি বন্ধ করে দিয়েছিলাম, তখন কোনও সময় লাগেনি কারণ কোনও ইভেন্ট ট্রিগার হয়নি৷
মামলাটি আমরা জানতাম, কিন্তু কেন এমন হচ্ছে?
আমরা এখন শিখেছি যে স্ক্রলিং হল অ্যাক্সেসিবিলিটি সিরিয়ালাইজেশনে অনেক ধীরগতির উৎস, কিন্তু আমাদের এখনও কেন তা খুঁজে বের করতে হবে। এটি বিশ্লেষণ করার জন্য, ব্রাউজার প্রক্রিয়ায় করা কাজগুলিকে ভেঙে ফেলার জন্য perf এবং pprof নামে দুটি টুল ব্যবহার করা হয়েছিল। এই টুলগুলি প্রায়শই প্রোফাইলিংয়ের জন্য C++ এ ব্যবহৃত হয়। নিম্নলিখিত গ্রাফগুলি আকর্ষণীয় অংশের একটি স্নিপেট দেখায়।
তদন্ত করার পরে, আমরা দেখতে পেয়েছি যে সমস্যাটি ডিসিরিয়ালাইজেশন কোড নয়, বরং এটিতে কলের ফ্রিকোয়েন্সি। এটি বোঝার জন্য, Chromium-এ অ্যাক্সেসিবিলিটি আপডেটগুলি কীভাবে কাজ করে তা আমাদের দেখতে হবে। আপডেট পৃথকভাবে পাঠানো হয় না; পরিবর্তে, AXObjectCache নামে একটি কেন্দ্রীয় অবস্থান রয়েছে যা সমস্ত বৈশিষ্ট্য সংরক্ষণ করে। যখন একটি নোড পরিবর্তিত হয়, তখন বিভিন্ন পদ্ধতি ক্যাশে সূচিত করে যে নোডটিকে পরবর্তী সিরিয়ালাইজেশনের জন্য নোংরা হিসাবে চিহ্নিত করতে। তারপরে, অপরিবর্তিত বৈশিষ্ট্য সহ নোংরা নোটের সমস্ত বৈশিষ্ট্য সিরিয়ালাইজ করা হয় এবং ব্রাউজারে পাঠানো হয়। যদিও এই নকশাটি কোডটিকে সরল করে এবং একটি একক আপডেট পাথ থাকার মাধ্যমে জটিলতা কমায়, এটি যখন দ্রুত "নোংরা হিসাবে চিহ্নিত" ইভেন্টগুলি হয়, যেমন স্ক্রোলিং থেকে আসা ঘটনাগুলি ধীর হয়ে যায়৷ scrollX এবং scrollY মান পরিবর্তন করার একমাত্র জিনিস; তবুও, আমরা প্রতিবার তাদের সাথে বাকি বৈশিষ্ট্যগুলিকে সিরিয়ালাইজ করি। এখানে আপডেটের হার প্রতি সেকেন্ডে বিশ বারের বেশি পৌঁছেছে!
বাউন্ডিং বক্স সিরিয়ালাইজেশন একটি দ্রুত সিরিয়ালাইজেশন পাথ ব্যবহার করে এই সমস্যাটির সমাধান করে যা শুধুমাত্র বাউন্ডিং বক্সের বিশদ পাঠায়, অন্যান্য বৈশিষ্ট্যগুলিকে প্রভাবিত না করে দ্রুত আপডেট করার অনুমতি দেয়। এই পদ্ধতিটি দক্ষতার সাথে বাউন্ডিং বক্স পরিবর্তনগুলি পরিচালনা করে।
স্ক্রোলিং ফিক্স
সমাধানটি পরিষ্কার ছিল: বাউন্ডিং বক্স সিরিয়ালাইজেশন সহ বর্তমান স্ক্রোল অফসেটগুলি অন্তর্ভুক্ত করুন। এটি নিশ্চিত করে যে স্ক্রোলিং আপডেটগুলি দ্রুত পথের মাধ্যমে প্রক্রিয়া করা হয়, অপ্রয়োজনীয় বিলম্ব ছাড়াই কর্মক্ষমতা বৃদ্ধি করে। বাউন্ডিং বক্স ডেটা সহ স্ক্রোল অফসেটগুলি প্যাক করার মাধ্যমে, আমরা মসৃণ এবং আরও দক্ষ আপডেটের জন্য প্রক্রিয়াটিকে অপ্টিমাইজ করি, অ্যাক্সেসিবিলিটি চালু থাকা ব্যবহারকারীদের জন্য একটি কম বিরক্তিকর অভিজ্ঞতা তৈরি করি৷ ফিক্স বাস্তবায়নের পরে স্ক্রলিং পরীক্ষায় উন্নতি 825% পর্যন্ত ।
কোড সরলীকরণ
এই সময়ের মধ্যে, আমি পেঁয়াজের স্যুপ নামক একটি প্রকল্পের অংশ হিসাবে কোডের গুণমানের উপর ফোকাস করেছি, যা স্তর জুড়ে অপ্রয়োজনীয়ভাবে ছড়িয়ে পড়া কোড হ্রাস করে বা সরিয়ে কোডটিকে সরল করে।
রেন্ডারার থেকে ব্রাউজারে অ্যাক্সেসিবিলিটি ডেটাকে যেভাবে ক্রমিকভাবে সাজানো হয় তা প্রবাহিত করার লক্ষ্যে প্রথম প্রকল্প । পূর্বে, ডেটাকে তার গন্তব্যে পৌঁছানোর আগে একটি অতিরিক্ত স্তরের মধ্য দিয়ে যেতে হত, যা অপ্রয়োজনীয় জটিলতা যুক্ত করেছিল। আমরা এই প্রক্রিয়াটিকে সরলীকরণ করেছি সরাসরি তথ্য পাঠানোর অনুমতি দিয়ে, মধ্যস্থতাকারীকে কেটে দিয়ে।
অতিরিক্তভাবে, আমরা কিছু সেকেলে ইভেন্ট চিহ্নিত করেছি এবং সরিয়ে দিয়েছি যা সিস্টেমে অপ্রয়োজনীয় কাজের কারণ ছিল, যেমন একটি লেআউট সম্পূর্ণ হলে ট্রিগার হয়। আমরা এগুলিকে আরও দক্ষ সমাধান দিয়ে প্রতিস্থাপন করেছি।
এছাড়াও অন্যান্য ছোটখাটো উন্নতি হয়েছে। দুর্ভাগ্যবশত, এগুলোর জন্য কর্মক্ষমতার উন্নতি রেকর্ড করা হয়নি, কিন্তু আমরা শেয়ার করতে পেরে গর্বিত যে কোডটি আগের চেয়ে অনেক বেশি পরিষ্কার এবং স্বতঃ নথিভুক্ত। এটি ভবিষ্যতে কর্মক্ষমতা উন্নতির জন্য পথ প্রশস্ত করতে অনেক সাহায্য করে। আপনি আমার গেরিট প্রোফাইলে প্রকৃত পরিবর্তনগুলি পরীক্ষা করতে পারেন।
উপসংহার
Chromium অ্যাক্সেসিবিলিটি টিমের সাথে কাজ করা একটি ফলপ্রসূ যাত্রা হয়েছে৷ বিভিন্ন চ্যালেঞ্জ মোকাবেলা করার মাধ্যমে, স্ক্রলিং কার্যকারিতা অপ্টিমাইজ করা থেকে কোডবেসকে সরলীকরণ করার মাধ্যমে, আমি এত বড় প্রকল্পের বিকাশের সাথে সাথে প্রোফাইলিংয়ের জন্য গুরুত্বপূর্ণ সরঞ্জামগুলি শেখার বিষয়ে গভীর উপলব্ধি অর্জন করেছি। এছাড়াও, আমি শিখেছি যে প্রত্যেকের জন্য অন্তর্ভুক্ত এমন একটি ওয়েব তৈরি করার জন্য অ্যাক্সেসযোগ্যতা কতটা গুরুত্বপূর্ণ৷ আমরা যে উন্নতি করেছি তা শুধুমাত্র সহায়ক প্রযুক্তির উপর নির্ভরশীলদের জন্য ব্যবহারকারীর অভিজ্ঞতা বাড়ায় না বরং ব্রাউজারের সামগ্রিক কর্মক্ষমতা এবং দক্ষতার ক্ষেত্রেও অবদান রাখে।
কর্মক্ষমতা ফলাফল চিত্তাকর্ষক হয়েছে. উদাহরণস্বরূপ, কর্ম নির্ধারণের জন্য enums ব্যবহার করার সুইচ কর্মক্ষমতা 20% এর বেশি উন্নত করেছে। উপরন্তু, আমাদের স্ক্রলিং ফিক্সের ফলে স্ক্রলিং পরীক্ষায় 825% পর্যন্ত হ্রাস পেয়েছে। কোড সরলীকরণ পরিবর্তনগুলি কেবল কোডটিকে আরও পরিষ্কার এবং আরও রক্ষণাবেক্ষণযোগ্য করেনি, তবে ভবিষ্যতের উন্নতির জন্য পথও প্রশস্ত করেছে৷
আমি স্টেফান জাগার, ক্রিস হ্যারেলসন, এবং ম্যাসন ফ্রিডের প্রতি কৃতজ্ঞতা প্রকাশ করতে চাই সারা বছর ধরে তাদের সমর্থন এবং নির্দেশনার জন্য, এবং বিশেষ করে অ্যারন লেভেন্থালের প্রতি, যাদের ছাড়া এই সুযোগটি সম্ভব হতো না। আমি ট্যাব অ্যাটকিন্স-বিটনার এবং GSoC টিমকে তাদের সমর্থনের জন্য ধন্যবাদ জানাতে চাই।
যারা একটি অর্থপূর্ণ প্রকল্পে অবদান রাখতে এবং তাদের দক্ষতা বিকাশ করতে চান তাদের জন্য, আমি Chromium-এর সাথে জড়িত হওয়ার সুপারিশ করছি। এটি শেখার একটি দুর্দান্ত উপায়, এবং Google সামার অফ কোডের মতো প্রোগ্রামগুলি আপনার যাত্রার জন্য একটি দুর্দান্ত সূচনা পয়েন্ট অফার করে৷