JavaScript Engine কি?(Specially V8)

ওয়েব ডেভেলপমেন্ট
,
1

V8_(JavaScript_engine)-Logo.wine
V8_(JavaScript_engine)-Logo.wine3000×2000 36.1 KB

JavaScript Engine (বিশেষ V8) সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে। আপনি জানবেন JavaScript Engine কি, কিভাবে এটি কাজ করে এবং কেন এটি Modern Web Development এ অত্যন্ত গুরুত্বপূর্ণ। V8 Engine এর কাঠামো, এর বিভিন্ন components যেমন Lexer, Parser, Interpreter, এবং JIT Compiler নিয়ে আলোচনা করা হয়েছে। এছাড়াও, Execution Context, Call Stack, এবং Memory Management এর ভূমিকা কিভাবে JavaScript code কিভাবে machine code রুপান্থর হয়। আপনি যদি JavaScript Engine এর in-depth যেতে চান, তাহলে এই পোস্টটি আপনার জন্য।

JavaScript Engine কি?

JavaScript Engine হলো JavaScript Language এর code run করার জন্য একটা machine যেখানে আমরা JavaScript code run করতে পারি।

কেন দরকার এই machine এর? এটা যদি বুঝতে চান তাহলে আমি আগে একটা post করেছিলাম Runtime Environmes নিয়ে,আপনি এইটা একটু পড়ে আসেন Runtime Environment;

আমি recommend করব তারপর এইটা continue করেন আপনার জন্য ভালো হবে।

JavaScript Engine কোনগুলো?

মার্কেটে অনেক ধরনের JavaScript Engine আছে। তবে প্রত্যেকটা Browser এ একটি করে JavaScript Engine রয়েছে। কয়েকটি জনপ্রিয় JavaScript Engine গুলোর নাম :–

  • Google Chrome — V8 Engine
  • Mozilla Firefox — SpiderMonkey
  • Safari — JavaScriptCore (Nitro)
  • Microsoft Edge — Chakra
  • Nodejs & Deno — V8 Engine (Server-Side)
  • Bun — WebKit’s JavaScriptCore (Server-Side)

এই Engine গুলোর মধ্যে V8 Engine কে বর্তমানে সবচেয়ে জনপ্রিয় এবং powerful হিসেবে ধরা হয়। আমি এই post এ সবগুলো ইঞ্জিন নিয়ে আলোচনা করা সম্ভব নয়। তাই আমি এখানে চেষ্টা করবো শুধুমাত্র V8 Engine নিয়ে কথা বলতে। এই V8 Engine কিভাবে কাজ করে বুঝতে পারলে আশা করছি বাকি Engine গুলো বোঝা খুব বেশি কঠিন হবে না আপনার জন্য আশা করি!

কিভাবে কাজ করে JavaScript Engine?

আমরা যখন কোন JavaScript file Runtime Environments এর মধ্যে run করি। তখন Runtime Environment এর একটা পার্ট হলো JavaScript Engine।

JavaScript file টা Runtime Environments যাওয়ার সাথে সাথে Runtime Environments এই JavaScript file কে V8 Engine এর কাছে দিয়ে দেয় এবং বলে দেয় V8 Engine এইটা তোমার কাজ তুমি কর। তখন V8 Engine এই file টাকে নিয়ে তার নিজের ভিতরে অনেক কিছু ব্যবহার করে এই file টাকে machine code করে Computer কে দিয়ে দেয়। কি কি ব্যবহার করে সেগুলা আমরা দেখব।

V8 Engine কি কি থাকে এবং কিভাবে JavaScript code machine code হয়?

আমরা আগেই বলেছি V8 Engine নিয়ে দেখবো। একটা JavaScript file আসার সাথে সাথে V8 Engine নিজের কাছে নিয়ে নেয়। তারপর যেই কাজগুলো হয় সেগুলা চলেন দেখি,

  • Lexer: এইটা V8 Engine এর একটি component, যার কাজ হলো JavaScript file এর মধ্যে থাকা code গুলোকে tokenize করা। Code দেখতে এমন দেখায় Tokenization of console.log(“hello world”);
— `console`— Identifier
— `.`— Punctuation
— `log` — Identifier
— `(`— Punctuation
— `”hello world”`— String Literal
— `)` — Punctuation
— `;`— Punctuation
— `[“var”, “x”, “=”, “5”, “+”, “3”, “;”]` একটা variable declare এরকম দেখায়।
  • Parser: ওই Tokenize করা code গুলোকে Parser ব্যবহার করে AST বা (Abstract Syntax Tree) তৈরি করে। আচ্ছা, চলেন দেখি একটা function কে AST করলে কেমন দেখায়,
JavaScript code just একটা hello function লিখছি;

function hello() {
     console.log("hello world");
  }

এইবার আসেন এই JavaScript code AST বা (Abstract Syntax Tree) দেখতে কেমন হয়।

Program
   └── FunctionDeclaration
       ├── id: Identifier (hello)
       ├── params: []
       └── body: BlockStatement
           └── body:
               └── ExpressionStatement
                   └── expression: CallExpression
                       ├── callee: MemberExpression
                       │   ├── object: Identifier (console)
                       │   └── property: Identifier (log)
                       └── arguments:
                           └── Literal ("hello world")

ঠিক এই রকম হয় এইটা কিন্তু hello function তার AST; কি রকম code হইছে দেখেছেন। আপনার যদি ইচ্ছা হয় যে আরও explore করবেন AST;

  • Interpreter: Interpreter কি? সোজা কথা " দোভাষী " Interpreter আমাদের সোর্স code এর প্রথম লাইন থেকে শুরু করে লাইন বাই লাইন low-level code এ রূপান্তর করে। এর সুবিধা হলো code এর যেকোনো লাইনে যদি কোনো error পাওয়া যায়, তাহলে Interpreter আমাদেরকে সাথে সাথেই জানিয়ে দিতে পারে। অর্থাৎ, Debuging করা অনেক সহজ হয়। V8 Engine এর Interpreter টি Ignition নামে পরিচিত।

Ignition কিভাবে কাজ করে?

_Bytecode generate: AST বা (Abstract Syntax Tree) থেকে bytecode তৈরি করে।

_Memory Usage: Interpreter ভেতরে Bytecode execute করার জন্য memory হিসেবে রেজিস্টার ব্যবহার করা হয়। Ignition এখানে প্রত্যেকটা object এর জন্য একেকটা ‘shape/আকৃতি’ তৈরি করে; যেটা আসলে object এর মত। Object ছাড়া আর কিছুই না।

_Inlining Caching: Object ‘shape/আকৃতি’ তৈরি করে রাখার কারণে পরবর্তীতে ‘Inlining Caching’ ও অন্যান্য optimization করতে সুবিধা হয়।

_Profiler/Monitor: একইসাথে profiling করে; এটি দেখে কোন অংশগুলি (hot code path) detect করে। কিভাবে detect করে hot code path? Interpreter যখন লাইন ধরে ধরে কোড execute করতে থাকে, profiler তখন কোন স্টেটমেন্ট কতবার run হচ্ছে এটার হিসাব করে রাখে। Code এর একই অংশ যদি একাধিকবার execute হয়, profiler তখন এটিকে ‘ওয়ার্ম (Warm)’ হিসেবে শনাক্ত করে।

এই সংখ্যাটি বাড়তে থাকলে এক সময় এটিকে ‘hot code path’ বলা হয়। অর্থাৎ, programmer যে অংশগুলো সবচেয়ে বেশি সংখ্যকবার run করছে, monitor/profiler সেগুলোকে বের করে আনে। monitor/profiler দ্বারা শনাক্ত হওয়া hot code path পার্টগুলো JIT (Just-In-Time) compiler কাছে পাঠানো হয়।

  • JIT (Just-In-Time): Hot-Code-Path থেকে পাওয়া একাধিকবার execute হওয়া code অংশগুলো Baseline Compiler দিয়ে Bytecode generate করে। Bytecode কিন্তু মেশিন কোডের মতো fast নয়। অনেকবার run হওয়া কোড যদি সরাসরি machine code এ রূপান্তর করে সেটাকে বারবার ব্যবহার করা যায়, তাহলে program অনেক ভালো পারফর্ম করবে। Optimizing Compiler আমাদের জন্য এই কাজটিই করে দেয়।
  • TurboFan: TurboFan এখন Ignition এবং JIT (Just-in-Time) থেকে যেই code গুলো পায়, সবগুলোকে highly-optimized machine code generate করে execute করে।
  • Execution Context: Execution Context একটি environment যেখানে JavaScript Code run করা যায়। যখন JavaScript code run করা হয়, তখন Execution Context এর মধ্য দিয়েই execute হয়। আসলে Execution Context নিয়ে আলাদা একটা article লিখব; next article হবে ইনশাআল্লাহ। তখন code করে দেখাবো এটা একটা বিশাল পার্ট। তবে Just high-level overview দেখি,

Execution Context তিন ধরনেরঃ-

_Global Execution Context : এটি একটি default execution context। একটা JavaScript file এর মধ্যে যেই code গুলো কোনো function এর ভিতরে নাই, সেগুলো Global Execution Context এ থাকে। Browser Window নামে থাকে এবং Nodejs Global নামে থাকে।

_Function Execution Context: Function Execution Context হল, যে যখন কোন function call বা function invocation করা হয়; তখন সেই function এর জন্য JavaScript engine একটি নতুন Execution Context তৈরি করে। প্রতিটি function এর জন্য নিজস্ব একটা করে Execution Context তৈরি করে। একাধিক function থাকলে একাধিক Execution Context তৈরি করবে।

_Eval Execution Context: সত্যি বলতে, আমি কখনই এটা দিয়ে কোনোদিন code করি নাই। যখন আমি Execution Context নিয়ে পড়াশোনা করছিলাম, তখন একটু জেনেছিলাম।

  • Callstack: JavaScript code execution sequence গুলো maintenance করার জন্য ব্যবহার করা হয়। এর মূল কাজ হলো function গুলোর call বা invoke এবং তাদের execution এর order track করা। এটা একটা stack data-structure LIFO (first-in-last-out) এটাও একটা বড় পার্ট। আমরা আগেই দেখেছি যে Execution Context এর সাথে অনেকটাই related এই দুইটা একসাথে next article এ দেখব ইনশাআল্লাহ।
  • Heap: Heap ও একটি data-structure; Dynamic Allocation; আমরা যখন JavaScript code করি তখন কিন্তু আমরা কোনো type বলে দেই? অবশ্যই না; তাই heap যতটুকু memory দরকার পরে heap data-structure system থেকে pull করে নিয়ে নেয়। তবে এইটা কিন্তু large amount memory নেয়। আসলে heap data-structure javascript code এর object, array এবং function গুলা store করে থাকে। এই জন্য দেখবেন এইগুলা reference হয়ে থাকে। আপনি দেখবেন অনেক টাইমে যে nested object গুলার ক্ষেত্রে। যাই হোক আমি ওইদিকে যাচ্ছি না।

Heap Mark & Sweep algorithm ব্যবহার করে garbage collection করে। এই Mark & Sweep algorithm এর মধ্যেও অনেক কিছু করে; আপনার ইচ্ছা হলে আপনি একটু Google করে দেখতে পারেন।

Conclusion

আমরা দেখেছি JavaScript Engine কি এবং বিশেষ করে V8 Engine এর বিভিন্ন components নিয়ে আলোচনা করেছি। আমরা দেখেছি কিভাবে V8 Engine code কে প্রথমে Lexer এবং Parser এর মাধ্যমে AST বা (Abstract Syntax Tree) করে।

পরে Interpreter এবং JIT Compiler থেকে সবগুলোকে নিয়ে TurboFan highly-optimized machine code generate করে execute করে।

Callstack এবং Execution Context এর মতো concept এর উপর কিছু ধারনা দেওয়ার চেষ্টা করেছি। এছাড়াও Heap এবং Garbage Collection নিয়েও একটু দেখেছি।

Callstack এবং Execution Context নিয়ে আরও in-depth আলোচনা করব ইনশাআল্লাহ। আশা করি এই article টি আমাদের JavaScript Engine নিয়ে কিছু নতুন ধারণা দিয়েছে।

আপনার যদি পুরো জিনিসগুলো একটা চার্ট আকারে দেখতে চান তাহলে। আপনি দেখে নিন আসলে এই চার্ট টা অনেক বড় আপনি টাইম নিয়ে দেখলে ভাল বুঝবেন অনেক কিছু দেওয়া আছে।

লিখতে গিয়ে আমারও ভুল হয় আমাকে comments করে জানাবেন। আমি ঠিক করবো ইনশাআল্লাহ।

#Web #Web_Developer javascript #Coding software #Developer

1 Like