{"id":27955,"date":"2026-08-19T14:18:45","date_gmt":"2026-08-19T14:18:45","guid":{"rendered":"https:\/\/umang.pk\/2026\/08\/19\/%d8%b1%db%8c-%d8%a7%db%8c%da%a9%d9%b9-%d9%85%db%8c%da%ba-%d8%a7%d8%b9%d9%84%db%8c-%d8%aa%d8%b9%d8%af%d8%af-%d8%b1%db%8c%d8%a6%d9%84-%d9%b9%d8%a7%d8%a6%d9%85-%da%88%db%8c%d9%b9%d8%a7-%d8%b1%d9%86\/"},"modified":"2026-08-19T14:18:47","modified_gmt":"2026-08-19T14:18:47","slug":"%d8%b1%db%8c-%d8%a7%db%8c%da%a9%d9%b9-%d9%85%db%8c%da%ba-%d8%a7%d8%b9%d9%84%db%8c-%d8%aa%d8%b9%d8%af%d8%af-%d8%b1%db%8c%d8%a6%d9%84-%d9%b9%d8%a7%d8%a6%d9%85-%da%88%db%8c%d9%b9%d8%a7-%d8%b1%d9%86","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/08\/19\/%d8%b1%db%8c-%d8%a7%db%8c%da%a9%d9%b9-%d9%85%db%8c%da%ba-%d8%a7%d8%b9%d9%84%db%8c-%d8%aa%d8%b9%d8%af%d8%af-%d8%b1%db%8c%d8%a6%d9%84-%d9%b9%d8%a7%d8%a6%d9%85-%da%88%db%8c%d9%b9%d8%a7-%d8%b1%d9%86\/","title":{"rendered":"\u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0627\u0639\u0644\u06cc \u062a\u0639\u062f\u062f \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0688\u06cc\u0679\u0627: \u0631\u0646\u06af \u0628\u0641\u0631\u0632 \u0633\u06d2 \u0644\u06d2 \u06a9\u0631 \u0622\u0641 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06cc\u0646\u0648\u0633 \u062a\u06a9"},"content":{"rendered":"\n<div id=\"\">\n<p>\u0631\u062f \u0639\u0645\u0644 \u0628\u06c1\u062a \u0633\u06d2 \u0637\u0631\u06cc\u0642\u0648\u06ba \u0633\u06d2 \u0628\u06c1\u062a\u0631 \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u06a9\u0628\u06be\u06cc \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u06c1\u0632\u0627\u0631\u0648\u06ba \u0688\u06cc\u0679\u0627 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u062c\u0644\u062f \u06c1\u06cc \u0627\u062d\u0633\u0627\u0633 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u06a9\u06c1 React \u06a9\u0648\u0626\u06cc \u0641\u0627\u0626\u0631 \u06c1\u0648\u0632 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u0628\u0627\u063a \u06a9\u06cc \u0646\u0644\u06cc \u06a9\u06cc \u0637\u0631\u062d \u06c1\u06d2\u06d4<\/p>\n<p>\u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u0637\u0627\u0642\u062a \u0644\u06af\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u06af\u06be\u0627\u0633 \u0628\u06be\u0631 \u062c\u0627\u0626\u06d2 \u06af\u06cc (DOM) \u06cc\u0627 \u067e\u0627\u0626\u067e \u067e\u06be\u0679 \u062c\u0627\u0626\u06d2 \u06af\u0627 (APP)\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u062f\u0648\u0633\u0631\u0627 \u0645\u0634\u0627\u06c1\u062f\u06c1 \u06c1\u06d2 \u062c\u0648 \u067e\u06c1\u0644\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062c\u0648\u0691\u062a\u0627 \u06c1\u06d2\u06d4 \u0644\u06cc\u067e \u0679\u0627\u067e \u0645\u06cc\u06ba 8 \u0633\u06d2 16 CPU \u06a9\u0648\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u06cc React \u0627\u06cc\u067e \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06c1\u0645\u06cc\u0634\u06c1 \u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06d2 \u06af\u06cc\u06d4 \u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06c1 JavaScript\u060c DOM\u060c \u0644\u06d2 \u0622\u0624\u0679\u060c \u0627\u0648\u0631 \u067e\u06cc\u0646\u0679 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062f\u0648\u0633\u0631\u06d2 \u06a9\u0648\u0631 \u0628\u06cc\u06a9\u0627\u0631 \u0631\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0628\u06a9\u06c1 \u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06c1 \u0627\u067e\u0646\u06d2 60fps \u0641\u0631\u06cc\u0645 \u0628\u062c\u0679 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u062f\u0648\u062c\u06c1\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062f\u0648\u0646\u0648\u06ba \u0645\u0633\u0627\u0626\u0644 \u06a9\u06cc \u0627\u06cc\u06a9 \u06c1\u06cc \u0634\u06a9\u0644 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u0648 React \u06a9\u0648 \u06af\u0631\u0645 \u0631\u0627\u0633\u062a\u0648\u06ba \u0633\u06d2 \u0628\u0686\u0627\u0646\u06d2 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u06be\u0631\u06cc\u0688 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0648\u06c1 \u0646\u0645\u0648\u0646\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u0648 \u0648\u06c1\u0627\u06ba \u067e\u06c1\u0646\u0686\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1 \u0641\u06af\u0645\u0627 \u06a9\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u0627\u0646\u062c\u0646\u060c \u0628\u0644\u0648\u0645\u0628\u0631\u06af \u06a9\u06d2 \u062a\u062c\u0627\u0631\u062a\u06cc \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688\u060c \u0627\u0648\u0631 \u06c1\u0631 \u0627\u06c1\u0645 \u0633\u06af\u0646\u0644 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0628\u06be\u06cc \u06c1\u06cc\u06ba \u062c\u0648 \u0622\u067e \u0646\u06d2 \u06a9\u0628\u06be\u06cc \u062f\u06cc\u06a9\u06be\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 19 \u0627\u0644\u06cc\u06a9\u0679\u0631\u0648 \u0627\u06cc\u0646\u0633\u0641\u0627\u0644\u0648\u06af\u0631\u0627\u0641\u06a9 (\u0627\u06cc \u0627\u06cc \u062c\u06cc) \u0686\u06cc\u0646\u0644\u0632 \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u06c1\u0631 \u0627\u06cc\u06a9 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 1,000 \u0688\u06cc\u0679\u0627 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 19,000 \u0627\u067e\u0688\u06cc\u0679\u0633 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06cc\u06c1 \u0633\u0628 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a React \u0645\u06cc\u06ba \u0679\u0627\u0626\u067e \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u06a9\u0627 UI \u0633\u0633\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06af\u0627\u06d4 \u0645\u06cc\u06ba \u0688\u0631\u0627\u0645\u0627\u0626\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0628\u06cc\u06c1\u0648\u0634 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u0648\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u0622\u0631\u0679\u06cc\u06a9\u0644 \u0627\u06cc\u0646\u0688 \u0679\u0648 \u0627\u06cc\u0646\u0688 \u0622\u0631\u06a9\u06cc\u0679\u06cc\u06a9\u0686\u0631 \u06c1\u06d2 \u062c\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u06cc\u06ba \u0622\u06cc\u0627 \u06c1\u0648\u06ba\u060c \u0628\u0634\u0645\u0648\u0644 \u0631\u0646\u06af \u0628\u0641\u0631\u0632\u060c \u0648\u0631\u06a9\u0631\u0632\u060c \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0645\u06cc\u0645\u0648\u0631\u06cc\u060c \u0622\u0641 \u0645\u06cc\u0646 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af\u060c \u0627\u0648\u0631 \u067e\u0627\u0626\u06cc\u062f\u0627\u0631 \u0645\u0644\u0679\u06cc \u0679\u0627\u0626\u0645 \u0628\u0648\u062c\u06be \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062e\u0635\u0648\u0635 \u067e\u06cc\u0679\u0631\u0646\u06d4<\/p>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n<p>\u0627\u0633 \u0645\u0636\u0645\u0648\u0646 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0641\u0627\u0626\u062f\u06c1 \u0627\u0679\u06be\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06af\u06cc:<\/p>\n<ul>\n<li>\n<p><strong>React 18 \u06cc\u0627 19 \u06a9\u0627 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0639\u0644\u0645\u06d4<\/strong> \u0622\u067e \u06a9\u0648 \u0622\u0631\u0627\u0645 \u062f\u06c1 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2 <code>useState<\/code>\u060c <code>useEffect<\/code>\u060c <code>useRef<\/code>\u0645\u0627\u0624\u0646\u0679\u0646\u06af \u0627\u0648\u0631 \u0631\u06cc \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0641\u0631\u0642 \u062c\u0627\u0646\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u06cc\u06ba\u06d4<\/strong> \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0645\u062b\u0627\u0644\u06cc\u06ba TypeScript \u0645\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u0648 \u0628\u063a\u06cc\u0631 \u0631\u06a9\u06d2 \u0679\u0627\u0626\u067e \u062a\u0634\u0631\u06cc\u062d\u0627\u062a \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06cc\u06c1 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u0645\u06cc\u0646 \u062a\u06be\u0631\u06cc\u0688 \u0627\u0648\u0631 \u0627\u06cc\u0648\u0646\u0679 \u0644\u0648\u067e \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06a9\u0633\u06cc \u062d\u062f \u062a\u06a9 \u0633\u0645\u062c\u06be \u0628\u0648\u062c\u06be \u06c1\u06d2\u06d4<\/strong> \u0622\u067e \u06a9\u0648 \u0648\u06cc\u0628 \u0648\u0631\u06a9\u0631 \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u062c\u0627\u0646\u0646\u0627 \u06a9\u06c1 &quot;\u0645\u06cc\u0646 \u062a\u06be\u0631\u06cc\u0688 \u06a9\u0648 \u0645\u0633\u062f\u0648\u062f \u06a9\u0631\u0646\u06d2&#8221; \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06a9\u06cc\u0627 \u06c1\u06d2\u060c \u06cc\u06c1 \u0645\u0631\u062d\u0644\u06c1 3 \u06a9\u0648 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627 \u062f\u06d2 \u06af\u0627\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u06cc\u0646\u0648\u0633 2D \u06cc\u0627 \u0686\u0627\u0631\u0679 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0627 \u0639\u0644\u0645<\/strong> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u06cc\u06a9 \u067e\u0644\u0633 \u06c1\u06d2. \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u0627\u067e\u0646\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u06a9\u0686\u06be \u0628\u06be\u06cc \u06a9\u06be\u06cc\u0646\u0686 \u0644\u06cc\u06ba \u062a\u0648 \u0622\u067e \u062a\u06cc\u0627\u0631 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u06cc\u06a9 \u0644\u06cc\u067e \u0679\u0627\u067e \u062c\u0648 \u062c\u062f\u06cc\u062f \u062a\u0631\u06cc\u0646 \u06a9\u0631\u0648\u0645 \u06cc\u0627 \u0627\u06cc\u062c \u0686\u0644\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/strong> \u0645\u062b\u0627\u0644 \u067e\u0631 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>SharedArrayBuffer<\/code>\u060c <code>OffscreenCanvas<\/code>\u0627\u06cc\u0679\u0645\u06a9\u0633\u060c \u062c\u0633 \u0645\u06cc\u06ba \u06a9\u0631\u0648\u0645\u06cc\u0645 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0628\u0631\u0627\u0624\u0632\u0631\u0632 \u0627\u0648\u0631 \u0627\u0635\u0644\u06cc\u062a \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0646\u06c1\u0627\u0626\u06cc \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2 (\u0628\u0639\u062f \u0645\u06cc\u06ba \u0645\u0636\u0645\u0648\u0646 \u0645\u06cc\u06ba \u0627\u0633 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2)\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0648\u06cc\u0628 \u0648\u0631\u06a9\u0631\u060c \u0631\u0646\u06af \u0628\u0641\u0631\u060c \u06cc\u0627 \u0648\u06cc\u0628 \u062c\u06cc \u0627\u06cc\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0633\u06cc \u067e\u06cc\u0634\u06af\u06cc \u062a\u062c\u0631\u0628\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0645\u0636\u0645\u0648\u0646 \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u0648 \u062d\u0642\u06cc\u0642\u06cc \u062f\u0646\u06cc\u0627 \u06a9\u06d2 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u06d2 \u062a\u0646\u0627\u0638\u0631 \u0645\u06cc\u06ba \u0645\u062a\u0639\u0627\u0631\u0641 \u06a9\u0631\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-whos-already-doing-this\">\u06cc\u06c1 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06a9\u0648\u0646 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u061f<\/h2>\n<p>\u0627\u0633 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06d2 \u0646\u0645\u0648\u0646\u06d2 \u062a\u062c\u0631\u0628\u0627\u062a\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0641\u0646 \u062a\u0639\u0645\u06cc\u0631 \u06c1\u06d2 \u062c\u0648 \u0627\u0639\u0644\u06cc \u062a\u0639\u062f\u062f \u0688\u06cc\u0679\u0627 \u0627\u06a9\u0679\u06be\u0627 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<ul>\n<li>\n<p><strong>\u0679\u0631\u06cc\u0688\u0646\u06af \u0627\u0648\u0631 \u0641\u0646\u0627\u0646\u0633 \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688<\/strong> (Bloomberg, Hyperliquid, dYdX\u060c \u0645\u0627\u0631\u06a9\u06cc\u0679 \u06a9\u06d2 \u062a\u0645\u0627\u0645 \u0628\u0691\u06d2 \u0645\u0628\u0635\u0631\u06cc\u0646) \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062f\u06c1 \u06af\u0631\u0688 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u06c1\u0632\u0627\u0631\u0648\u06ba \u0642\u06cc\u0645\u062a\u0648\u06ba \u06a9\u06d2 \u0679\u06a9\u0679\u0633 \u06a9\u0648 \u0622\u06af\u06d2 \u0628\u0691\u06be\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0641\u06af\u0645\u0627<\/strong> \u06c1\u0645 \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u06d2 \u0627\u0646\u062f\u0631 WebAssembly \u0645\u06cc\u06ba \u067e\u0648\u0631\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u0627\u0646\u062c\u0646 \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06c1 \u0635\u0631\u0641 \u06a9\u0631\u0648\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>Google Docs \u0627\u0648\u0631 Microsoft Loop<\/strong> \u0627\u06cc\u06a9 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0634\u0646 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 DOM \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u06a9\u0646 \u067e\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u06d2 \u0645\u0627\u0688\u0644 \u06a9\u0648 \u0627\u0646\u062c\u0627\u0645 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0686\u0627\u0631\u0679 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc<\/strong> LightningChart\u060c uPlot\u060c Plotly\u060c \u0627\u0648\u0631 ECharts \u06a9\u06cc \u0637\u0631\u062d\u060c \u0648\u06c1 \u06a9\u06cc\u0646\u0648\u0633 \u06cc\u0627 WebGL \u067e\u0631 \u06a9\u06be\u06cc\u0646\u0686\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0631\u06cc\u067e\u0631 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 React \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u06c1\u0645 \u0639\u0644\u0627\u0645\u0627\u062a\u060c \u0627\u06cc \u0633\u06cc \u062c\u06cc\u060c \u0627\u06cc \u0627\u06cc \u062c\u06cc \u0627\u0648\u0631 \u0645\u0648\u0634\u0646 \u06a9\u06cc\u067e\u0686\u0631 \u0627\u06cc\u067e\u0633<\/strong> \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0628\u0627\u0642\u0627\u0639\u062f\u06af\u06cc \u0633\u06d2 1 \u06a9\u0644\u0648 \u06c1\u0631\u0679\u0632 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u067e\u0631\u0627\u0633\u06cc\u0633 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646\u06c1\u06cc\u06ba \u0644\u0627\u0626\u06cc\u0648 \u067e\u0644\u0627\u0679 \u0645\u06cc\u06ba \u0633\u0679\u0631\u06cc\u0645 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0622\u0628\u0632\u0631\u0648\u06cc\u0628\u0644\u0679\u06cc \u0627\u0648\u0631 \u0627\u06d2 \u067e\u06cc \u0627\u06cc\u0645 \u0679\u0648\u0644\u0632<\/strong> (\u0688\u06cc\u0679\u0627 \u0688\u0648\u06af \u0644\u0627\u0626\u06cc\u0648 \u0679\u06cc\u0644\u060c \u06af\u0631\u0627\u0641\u0627\u0646\u0627 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u067e\u06cc\u0646\u0644) \u0679\u06cc\u0628\u0632 \u06a9\u0648 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u0633\u06d2 \u0627\u0644\u06af \u0645\u062c\u0645\u0648\u0639\u06c1\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0622\u0688\u06cc\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0631 \u0627\u0648\u0631 \u0648\u06cc\u0698\u0648\u0644\u0627\u0626\u0632\u06cc\u0634\u0646 \u0679\u0648\u0644<\/strong>\u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0686\u06cc\u0632 \u062c\u0648 \u0648\u06cc\u0648\u0641\u0627\u0631\u0645 \u0688\u0633\u067e\u0644\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u06cc\u0628 \u0622\u0688\u06cc\u0648 API \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>Transformers.js \u0627\u0648\u0631 ONNX \u0631\u0646 \u0679\u0627\u0626\u0645 \u0648\u06cc\u0628<\/strong> \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631\u060c \u0622\u067e \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u067e\u0631 ML \u062a\u062e\u0645\u06cc\u0646\u06c1 \u0644\u06af\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0645\u062e\u062a\u0644\u0641 \u0688\u0648\u0645\u06cc\u0646\u060c \u0627\u06cc\u06a9 \u06c1\u06cc \u0686\u0627\u0644: React \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u06cc\u0633\u06cc \u0686\u06cc\u0632 \u06c1\u0648\u062a\u06cc \u06c1\u06d2 \u062c\u0648 \u0634\u0627\u0630 \u0648 \u0646\u0627\u062f\u0631 \u06c1\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0631\u06cc\u0641\u0631\u06cc\u0634 \u0631\u06cc\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0686\u06be \u0627\u0648\u0631 \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0636\u0631\u0648\u0631\u062a \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0627\u0645 \u0627\u0633 \u062a\u06be\u0631\u06cc\u0688 \u067e\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-the-1khz-math\">1kHz \u0631\u06cc\u0627\u0636\u06cc<\/h2>\n<p>\u0645\u0633\u0626\u0644\u06c1 \u06a9\u0648 \u0679\u06be\u0648\u0633 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0686\u06be \u0646\u0645\u0628\u0631\u06d4<\/p>\n<ul>\n<li>\n<p>\u0646\u0645\u0648\u0646\u06d2 \u06c1\u0631 1 \u0627\u06cc\u0645 \u0627\u06cc\u0633 \u0622\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>60Hz \u0688\u0633\u067e\u0644\u06d2 \u06c1\u0631 16.67ms \u067e\u0631 \u0631\u06cc\u0641\u0631\u06cc\u0634 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0644\u06c1\u0630\u0627\u060c \u062a\u0642\u0631\u06cc\u0628\u0627 \u0627\u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba <strong>16-17 \u0646\u0645\u0648\u0646\u06d2 \u0641\u06cc \u0633\u0644\u0633\u0644\u06c1<\/strong>.<\/p>\n<\/li>\n<li>\n<p>19 \u0641\u0639\u0627\u0644 \u0627\u0633\u0679\u0631\u06cc\u0645\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 (\u0627\u06cc \u0627\u06cc \u062c\u06cc \u0645\u062b\u0627\u0644)\u060c <strong>300-320 \u0646\u0645\u0648\u0646\u06d2 \u0641\u06cc \u0641\u0631\u06cc\u0645<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0622\u067e <code>setState<\/code> \u06c1\u0631 \u0646\u0645\u0648\u0646\u06d2 \u0645\u06cc\u06ba\u060c React \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 19,000 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0645\u0645\u06a9\u0646 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u0686\u06be\u0648\u0691 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 UI stutters \u0627\u0648\u0631 \u0644\u06cc\u067e \u0679\u0627\u067e \u067e\u0646\u06a9\u06be\u0627 \u0686\u0644 \u0631\u06c1\u0627 \u06c1\u06d2.<\/p>\n<p>\u0622\u067e <code>setState<\/code> ~320 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u06d2 \u0628\u06cc\u0686\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0641\u06cc \u0641\u0631\u06cc\u0645\u060c React 60 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0648\u0627\u062d\u062f \u0631\u06cc\u0641\u0631\u06cc\u0645 \u067e\u0648\u0631\u06cc \u0686\u0627\u0644 \u06c1\u06d2 \u0627\u0648\u0631 \u0630\u06cc\u0644 \u06a9\u06d2 \u062a\u0645\u0627\u0645 \u0645\u0631\u0627\u062d\u0644 \u0633\u06d2 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-where-it-usually-goes-wrong\">\u06a9\u06cc\u0627 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u063a\u0644\u0637 \u06c1\u06d2<\/h2>\n<p>\u06cc\u06c1\u0627\u06ba \u06a9\u0648\u0688 \u06a9\u0627 \u0648\u06c1 \u0648\u0631\u0698\u0646 \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u067e\u06c1\u0644\u06cc \u0628\u0627\u0631 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0627\u06cc\u067e\u0633 \u0645\u06cc\u06ba \u0622\u0632\u0645\u0627\u0646\u06d2 \u067e\u0631 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u06d4 \u0645\u0639\u0642\u0648\u0644 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062a\u0645\u0627\u0645 \u06c1\u0646\u06af\u0627\u0645\u06c1 \u0622\u0631\u0627\u0626\u06cc \u06a9\u06cc \u0648\u062c\u06c1 \u0628\u06be\u06cc \u06c1\u06d2 \u062c\u0648 \u0679\u06cc\u0645 \u0627\u06af\u0644\u06d2 \u062f\u0648 \u06c1\u0641\u062a\u06d2 \u0679\u0631\u06cc\u06a9\u0646\u06af \u0645\u06cc\u06ba \u06af\u0632\u0627\u0631\u06d2 \u06af\u06cc\u06d4<\/p>\n<pre><code class=\"language-tsx\">import { useEffect, useState } from \"react\";\n\nexport default function NaiveChart({ socket }) {\n  const [data, setData] = useState<number>([]);\n\n  useEffect(() => {\n    socket.on(\"newPoint\", (point: number) => {\n      setData((prev) => [...prev, point]); \/\/ re-renders every time\n    });\n  }, [socket]);\n\n  return <p>{data.length} points<\/p>;\n}\n<\/number><\/code><\/pre>\n<p>\u062a\u06cc\u0646\u0648\u06ba \u0645\u0633\u0627\u0626\u0644 \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1 \u0633\u0627\u062a \u0633\u0637\u0631\u0648\u06ba \u0645\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<ol>\n<li>\n<p><strong>\u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0622\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0646\u0645\u0648\u0646\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0648 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u06d2 \u06af\u0627\u06d4<\/strong> 1 kHz \u067e\u0631\u060c \u06cc\u06c1 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 1,000 \u0628\u0627\u0631 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0631\u062f \u0639\u0645\u0644 \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06a9\u0628\u06be\u06cc \u062e\u0648\u0634 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<\/li>\n<li>\n<p><code>[...prev, point]<\/code> <strong>\u06c1\u0631 \u062f\u06be\u06a9\u0627 \u0627\u06cc\u06a9 \u0646\u0626\u06cc \u0635\u0641 \u0645\u062e\u062a\u0635 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/strong> 1kHz \u067e\u0631\u060c \u06cc\u06c1 \u0627\u06cc\u06a9 \u0646\u0626\u06cc \u0635\u0641 \u0641\u06cc \u0645\u0644\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0648\u0691\u0627 \u0627\u0679\u06be\u0627\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0648 \u06cc\u06c1 \u0633\u0628 \u0635\u0627\u0641 \u06a9\u0631\u0646\u0627 \u067e\u0691\u062a\u0627 \u06c1\u06d2\u06d4 \u0688\u06be\u06cc\u0631 \u0627\u0679\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u062c\u06cc \u0633\u06cc \u0644\u0645\u0628\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u067e\u0646\u06a9\u06be\u0627 \u0686\u0644 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0635\u0641\u0648\u06ba \u06a9\u06cc \u06a9\u0648\u0626\u06cc \u0627\u0648\u067e\u0631\u06cc \u062d\u062f \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/strong> \u0627\u06af\u0631 \u06c1\u0645 \u0627\u0633\u06d2 \u0627\u06cc\u06a9 \u06af\u06be\u0646\u0679\u06d2 \u062a\u06a9 \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06c1\u0645\u0627\u0631\u06d2 \u067e\u0627\u0633 \u0645\u06cc\u0645\u0648\u0631\u06cc \u0645\u06cc\u06ba 3.6 \u0645\u0644\u06cc\u0646 \u0646\u0645\u0628\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 React \u06a9\u0648 \u06c1\u0631 \u0631\u06cc\u0646\u0688\u0631 \u0645\u06cc\u06ba \u0627\u0646 \u0633\u0628 \u06a9\u0648 \u0645\u062f\u0646\u0638\u0631 \u0631\u06a9\u06be\u0646\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ol>\n<p>\u062d\u0644 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0686\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0686\u06be\u0648\u0679\u06cc \u0686\u06be\u0648\u0679\u06cc \u0686\u06cc\u0632\u0648\u06ba \u06a9\u0627 \u0627\u06cc\u06a9 \u0688\u06be\u06cc\u0631 \u06c1\u06d2\u060c \u06c1\u0631 \u0627\u06cc\u06a9 \u0627\u0646 \u0646\u0627\u06a9\u0627\u0645\u06cc \u06a9\u06d2 \u0637\u0631\u06cc\u0642\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u062e\u0631 \u06a9\u0627\u0631 \u0648\u0627\u062d\u062f \u062f\u06be\u0627\u06af\u06d2\u060c \u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u06af\u06c1\u0631\u0627 \u0645\u0633\u0626\u0644\u06c1 \u062d\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-the-mental-model-air-traffic-control-plus-a-kitchen-brigade\">\u0630\u06c1\u0646\u06cc \u0645\u0627\u0688\u0644: \u0627\u06cc\u0626\u0631 \u0679\u0631\u06cc\u0641\u06a9 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0627\u0648\u0631 \u06a9\u0686\u0646 \u0628\u0631\u06cc\u06af\u06cc\u0688<\/h2>\n<p>\u0679\u06a9\u0691\u06d2 \u06a9\u0648 \u0633\u06cc\u062f\u06be\u0627 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0648\u0688 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0648 \u0645\u0634\u0627\u0628\u06c1\u062a\u06cc\u06ba \u06c1\u06cc\u06ba:<\/p>\n<p><strong>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u06c1\u0648\u0627\u0626\u06cc \u0679\u0631\u06cc\u0641\u06a9 \u06a9\u0646\u0679\u0631\u0648\u0644:<\/strong> \u062a\u06cc\u0646 \u06a9\u0631\u062f\u0627\u0631\u060c \u0627\u06cc\u06a9 \u06c1\u0648\u0627\u0626\u06cc \u0627\u0688\u06c1\u06d4<\/p>\n<ul>\n<li>\n<p>\u06a9\u06c1 <strong>\u06a9\u0646\u0679\u0631\u0648\u0644 \u0679\u0627\u0648\u0631<\/strong> (\u0622\u067e \u06a9\u0627 \u0627\u0633\u0679\u0648\u0631) \u06c1\u0631 \u062c\u06c1\u0627\u0632 (\u06c1\u0631 \u0646\u0645\u0648\u0646\u06c1) \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06c1\u0627\u06ba \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06a9\u06c1 <strong>\u0632\u0645\u06cc\u0646\u06cc \u0639\u0645\u0644\u06c1<\/strong> (\u0631\u062f \u0639\u0645\u0644) \u0631\u0646 \u0648\u06d2 \u0627\u0648\u0631 \u06af\u06cc\u0679\u0633 \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u06c1\u0648\u0627\u0626\u06cc \u062c\u06c1\u0627\u0632 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062f\u06c1 \u062a\u0631\u062a\u06cc\u0628\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06a9\u06c1 <strong>\u067e\u0627\u0626\u0644\u0679<\/strong> (\u0644\u0648\u067e \u0688\u0631\u0627) \u06cc\u06c1 \u062f\u0631\u0627\u0635\u0644 \u0627\u0691\u062a\u0627 \u06c1\u06d2\u06d4 \u0648\u06c1 \u0627\u062c\u0627\u0632\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u0627\u0648\u0631 \u06a9\u0648 \u0627\u0633\u06a9\u06cc\u0646 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u06c1\u0631 \u0686\u0646\u062f \u0633\u06cc\u06a9\u0646\u0688 \u0645\u06cc\u06ba \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u062c\u0628 \u0628\u06be\u06cc \u06c1\u0648\u0627\u0626\u06cc \u062c\u06c1\u0627\u0632 \u062d\u0631\u06a9\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0679\u0627\u0648\u0631 \u0632\u0645\u06cc\u0646\u06cc \u0639\u0645\u0644\u06d2 \u0633\u06d2 \u062f\u0631\u0648\u0627\u0632\u0648\u06ba \u06a9\u0648 \u062f\u0648\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0635\u0631\u0641 \u0688\u06cc\u0679\u0627 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0628 \u0646\u0638\u0627\u0645 \u0627\u0644\u0627\u0648\u0642\u0627\u062a \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u06af\u0631\u0627\u0624\u0646\u0688 \u0627\u0633\u0679\u0627\u0641 \u06af\u06cc\u0679\u0633 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06d2 \u06af\u0627\u060c \u062c\u0648 \u06a9\u06c1 \u0634\u0627\u0630 \u0648 \u0646\u0627\u062f\u0631 \u06c1\u06cc \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0679\u0627\u0648\u0631 \u06a9\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u067e\u0627\u0626\u0644\u0679 \u0645\u0633\u0644\u0633\u0644 \u0627\u067e\u0646\u06cc \u0631\u0641\u062a\u0627\u0631 \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><strong>\u062f\u0648\u0633\u0631\u0627\u060c \u06a9\u0686\u0646 \u0628\u0631\u06cc\u06af\u06cc\u0688:<\/strong> \u0686\u0648\u0679\u06cc \u06a9\u06d2 \u0648\u0642\u062a \u0631\u06cc\u0633\u062a\u0648\u0631\u0627\u06ba \u06a9\u0627 \u06a9\u0686\u0646\u06d4 \u0627\u06cc\u06a9 \u0634\u06cc\u0641 \u062a\u0645\u0627\u0645 \u067e\u06a9\u0648\u0627\u0646 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627 \u0633\u06a9\u062a\u0627\u06d4 \u06a9\u0644\u0627\u0633\u06a9 \u0628\u0631\u06cc\u06af\u06cc\u0688 \u0645\u06cc\u06ba \u0633\u0627\u0633\u060c \u0645\u0686\u06be\u0644\u06cc\u060c \u067e\u06cc\u0633\u0679\u0631\u06cc\u060c \u06af\u0627\u0631\u0688 \u0645\u06cc\u0646\u06cc\u062c\u0631\u060c \u067e\u0644\u06cc\u0679\u0646\u06af \u0627\u0648\u0631 \u0633\u0631\u0648\u0633 \u06a9\u06d2 \u0627\u0633\u0679\u06cc\u0634\u0646 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4 \u06c1\u0631 \u0627\u0633\u0679\u06cc\u0634\u0646 \u06a9\u06d2 \u067e\u0627\u0633 \u06a9\u06be\u0627\u0646\u06d2 \u06a9\u0627 \u0627\u06cc\u06a9 \u0679\u06a9\u0691\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0633\u06c1\u0648\u0644\u062a \u06a9\u0627\u0631 \u0648\u0642\u062a \u06a9\u0648 \u0645\u0631\u0628\u0648\u0637 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<ul>\n<li>\n<p>\u06a9\u06c1 <strong>\u0633\u06c1\u0648\u0644\u062a \u06a9\u0627\u0631<\/strong> \u06cc\u06c1 \u0622\u067e \u06a9\u0627 \u0645\u06cc\u0646 \u062a\u06be\u0631\u06cc\u0688 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06a9\u06c1 <strong>\u0627\u0633\u0679\u06cc\u0634\u0646<\/strong> \u06cc\u06c1 \u0622\u067e \u06a9\u0627 \u06a9\u0627\u0631\u06a9\u0646 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06a9\u06c1 <strong>\u0686\u0691\u06be\u0627\u06cc\u0627 \u06a9\u06be\u0691\u06a9\u06cc<\/strong> \u06cc\u06c1 \u0622\u067e \u06a9\u06cc \u0645\u0634\u062a\u0631\u06a9\u06c1 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06a9\u06c1 <strong>\u0645\u06cc\u0632 \u067e\u0631 \u06a9\u06be\u0627\u0646\u0627<\/strong> \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062f\u06c1 \u0641\u0631\u06cc\u0645\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u0634\u06cc\u0641 \u062c\u0648 \u062a\u0645\u0627\u0645 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc\u0648\u06ba \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u0648\u0627\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u0642\u0641 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u06c1\u06d2\u06d4 \u0628\u0631\u06cc\u06af\u06cc\u0688 \u0648\u0631\u06a9\u0631\u0632 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0628\u0631\u06cc\u06af\u06cc\u0688 \u06c1\u06d2\u06d4 \u0627\u0633 \u0644\u06cc\u06d2 \u0646\u06c1\u06cc\u06ba \u06a9\u06c1 \u0634\u06cc\u0641 \u0633\u0648\u0644\u0648\u0633\u0679 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u06cc\u0632 \u06c1\u06d2\u060c \u0628\u0644\u06a9\u06c1 \u0627\u0633 \u0644\u06cc\u06d2 \u06a9\u06c1 \u06a9\u0679\u0646\u06af\u060c \u0686\u0679\u0646\u06cc \u0627\u0648\u0631 \u0633\u06cc\u0631\u0646\u06af \u0628\u06cc\u06a9 \u0648\u0642\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0628\u0631\u06cc\u06af\u06cc\u0688 \u062a\u06cc\u0632 \u062a\u0631 \u06c1\u06d2\u06d4 \u0633\u06c1\u0648\u0644\u062a \u06a9\u0627\u0631 \u06a9\u06be\u0627\u0646\u0627 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u062a\u0627\u060c \u0648\u06c1 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0633\u0628 \u06a9\u0686\u06be \u0627\u0646 \u062f\u0648 \u062e\u06cc\u0627\u0644\u0627\u062a \u06a9\u0627 \u0627\u06cc\u06a9 \u0679\u06be\u0648\u0633 \u0627\u0637\u0644\u0627\u0642 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-1-stop-putting-samples-in-react-state\">\u0645\u0631\u062d\u0644\u06c1 1: \u0646\u0645\u0648\u0646\u06d2 \u06a9\u0648 \u0631\u062f \u0639\u0645\u0644 \u06a9\u06cc \u062d\u0627\u0644\u062a \u0645\u06cc\u06ba \u0645\u062a \u0686\u06be\u0648\u0691\u06cc\u06ba\u06d4<\/h2>\n<p>\u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0628 \u0633\u06d2 \u0628\u0691\u06cc \u063a\u0644\u0637\u06cc \u06c1\u0631 \u0646\u0645\u0648\u0646\u06d2 \u06a9\u0648 \u0631\u06cc\u0627\u0633\u062a \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc\u0634 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u060c \u062c\u0648 \u06a9\u06c1 \u0627\u06cc\u0633\u0627 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0645\u0644\u06a9 \u0641\u06cc\u0635\u0644\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 <em>\u06a9\u0648\u0646 \u0633\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646 \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/em>. \u0644\u0627\u0626\u06cc\u0648 \u067e\u0644\u0627\u0679 \u0627\u06cc\u06a9 \u062c\u0632\u0648 \u06c1\u06d2\u06d4 60,000 \u0646\u0645\u0648\u0646\u06d2 \u062c\u0648 \u0633\u06a9\u0631\u0648\u0644 \u06a9\u06cc\u06d2 \u062c\u0627 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1 60,000 \u0631\u06cc\u0627\u0633\u062a\u06cc \u0679\u06a9\u0691\u06d2 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u0648\u06c1 \u0627\u06cc\u06a9 \u0628\u0641\u0631 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e React \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u0627\u06cc\u06a9 \u0627\u0633\u0679\u0648\u0631 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0679\u0627\u0626\u067e \u0634\u062f\u06c1 \u0635\u0641\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u0646\u06af \u0628\u0641\u0631\u0632 \u0645\u0633\u062a\u0642\u0644 \u0648\u0642\u062a \u06a9\u06d2 \u0627\u0646\u062f\u0631\u0627\u062c\u0627\u062a \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0645\u062d\u062f\u0648\u062f \u06c1\u06cc\u067e \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-ts\">type Listener = () => void;\n\nexport function createSampleStore(capacity: number) {\n  const buf = new Float32Array(capacity);\n  let head = 0;\n  let size = 0;\n  const listeners = new Set<listener>();\n\n  return {\n    push(sample: number) {\n      buf[head] = sample;\n      head = (head + 1) % capacity;\n      if (size < capacity) size++;\n    },\n    pushBatch(samples: Float32Array) {\n      for (let i = 0; i < samples.length; i++) {\n        buf[head] = samples[i];\n        head = (head + 1) % capacity;\n        if (size < capacity) size++;\n      }\n    },\n    read(): Float32Array {\n      if (size < capacity) return buf.subarray(0, size);\n      const out = new Float32Array(capacity);\n      out.set(buf.subarray(head));\n      out.set(buf.subarray(0, head), capacity - head);\n      return out;\n    },\n    subscribe(l: Listener) {\n      listeners.add(l);\n      return () => listeners.delete(l);\n    },\n  };\n}\n<\/listener><\/code><\/pre>\n<p>\u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06cc\u06c1\u0627\u06ba \u06a9\u06cc\u0627 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0646\u06c1\u06cc\u06ba <code>useState<\/code>\u06a9\u0648\u0626\u06cc \u0633\u06cc\u0679\u0631 \u0646\u06c1\u06cc\u06ba\u060c \u06a9\u0686\u06be \u0628\u06be\u06cc \u0631\u062f\u0639\u0645\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627. \u06cc\u06c1 \u0635\u0631\u0641 \u0633\u0627\u062f\u06c1 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u0627\u0633\u0679\u0648\u0631 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0645\u0644\u06cc\u0646 \u062f\u06be\u06a9\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06d2 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 React \u06a9\u0648 \u06a9\u0648\u0626\u06cc \u067e\u0631\u0648\u0627\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 React \u0633\u0628\u0633\u06a9\u0631\u0627\u0626\u0628 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0628\u0635\u0631\u06cc \u0631\u0646\u06af \u0628\u0641\u0631 \u0645\u06cc\u06a9\u0627\u0646\u0632\u0645 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06c1\u06d2:<\/p>\n<p>\u06c1\u0645\u0627\u0631\u06d2 \u067e\u0627\u0633 \u06c1\u0631 \u062f\u06be\u06a9\u06d2 \u0627\u0648\u0631 \u06af\u0648\u062f \u0645\u06cc\u06ba \u0633\u0631 \u067e\u06cc\u0634 \u0642\u062f\u0645\u06cc \u06c1\u06d2\u06d4 \u062a\u0627\u0631\u06cc\u062e\u06cc \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba \u0622\u062e\u0631\u06cc N \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u06cc \u0648\u0646\u0688\u0648 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u0646\u062a\u06cc\u062c\u06c1 \u0645\u0633\u062a\u0642\u0644 \u0648\u0642\u062a \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u067e\u0627\u0628\u0646\u062f \u0688\u06be\u06cc\u0631 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0627\u0628\u06be\u06cc \u062a\u06a9 \u0641\u0627\u0631\u0645\u06cc\u0679 \u0634\u062f\u06c1 \u0628\u0641\u0631 \u0646\u06c1\u06cc\u06ba \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u06cc\u06a9 \u0622\u0633\u0627\u0646 \u062d\u0644 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0631\u0648\u0644\u0646\u06af \u0648\u0646\u0688\u0648 \u06a9\u0648 \u0627\u0633\u0679\u06cc\u0679 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0631\u06cc\u0641\u0631\u0646\u0633 \u067e\u0631 \u0688\u0627\u0644\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-tsx\">import { useEffect, useRef } from \"react\";\n\nexport default function RefChart({ socket }) {\n  const bufferRef = useRef<number>([]);\n\n  useEffect(() => {\n    socket.on(\"newPoint\", (point: number) => {\n      bufferRef.current.push(point);\n      if (bufferRef.current.length > 1000) {\n        bufferRef.current.shift();\n      }\n    });\n  }, [socket]);\n\n  return <p>Streaming {bufferRef.current.length} points<\/p>;\n}\n<\/number><\/code><\/pre>\n<p>\u06cc\u06c1 &quot;\u0627\u0633 \u0633\u06d2 10 \u06af\u0646\u0627 \u062a\u06cc\u0632 \u06c1\u06d2&#8221; <code>NaiveChart<\/code>&quot;\u0627\u0628\u06be\u06cc \u0628\u06be\u06cc \u0627\u0686\u06be\u0627 \u0646\u06c1\u06cc\u06ba&#8221; \u0648\u0631\u0698\u0646\u06d4 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06c1\u0631 \u0628\u0627\u0631 \u0622\u067e \u06a9\u06d2 \u062f\u0628\u0627\u0646\u06d2 \u067e\u0631 \u0646\u06c1\u06cc\u06ba \u0686\u0644\u06d2 \u06af\u06cc\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u06a9\u0648 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0627\u067e \u0688\u06cc\u0679 \u0646\u0638\u0631 \u0646\u06c1\u06cc\u06ba \u0622\u0626\u06d2 \u06af\u0627 \u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u06a9\u0648\u0626\u06cc \u0627\u0648\u0631 \u0686\u06cc\u0632 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u0646\u06c1 \u06a9\u06cc \u062c\u0627\u0626\u06d2\u06d4 \u0627\u0635\u0644 \u067e\u0644\u0627\u0679\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u062d\u0648\u0627\u0644\u06c1 \u062f\u06cc\u06a9\u06be\u06cc\u06ba: <code>requestAnimationFrame<\/code> \u0627\u06cc\u06a9 \u0644\u0648\u067e \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba (\u0645\u0631\u062d\u0644\u06c1 2 \u062f\u06cc\u06a9\u06be\u06cc\u06ba)\u06d4<\/p>\n<h2 id=\"heading-step-2-separate-shape-from-values\">\u0645\u0631\u062d\u0644\u06c1 2: \u0634\u06a9\u0644 \u06a9\u0648 \u0642\u062f\u0631 \u0633\u06d2 \u0627\u0644\u06af \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0631\u06cc\u0646\u0688\u0631\u0632 \u062c\u0628: <em>\u0634\u06a9\u0644<\/em> UI \u0628\u062f\u0644 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0646\u06cc\u0627 \u067e\u0644\u0627\u0679\u061f \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 \u06a9\u06cc\u0627 \u0622\u067e \u0646\u06d2 \u067e\u0644\u0627\u0679 \u06c1\u0679\u0627 \u062f\u06cc\u0627\u061f \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 \u06a9\u06cc\u0627 \u06cc\u06c1 \u0644\u0627\u0626\u0646 \u0633\u06d2 \u0628\u0627\u0644\u06a9\u0644 \u0628\u062f\u0644 \u06af\u06cc\u0627\u061f \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 1000Hz \u067e\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0645\u0646\u0679 \u0645\u06cc\u06ba \u06a9\u0626\u06cc \u0628\u0627\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0635\u0627\u0631\u0641 \u06a9\u0633\u06cc \u0686\u06cc\u0632 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u06c1 <em>\u0642\u062f\u0631<\/em> \u06c1\u0631 \u067e\u0644\u0627\u0679 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u06cc\u06c1 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0634\u0631\u062d \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u0648 \u06a9\u0628\u06be\u06cc \u0628\u06be\u06cc \u0631\u062f \u0639\u0645\u0644 \u06a9\u0648 \u06c1\u0627\u062a\u06be \u0646\u06c1\u06cc\u06ba \u0644\u06af\u0627\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2\u06d4<\/p>\n<p>\u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631:<\/p>\n<pre><code class=\"language-tsx\">function LivePlot({ store }: { store: SampleStore }) {\n  const canvasRef = useRef<htmlcanvaselement>(null);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const ctx = canvas.getContext(\"2d\")!;\n\n    let raf = 0;\n    const draw = () => {\n      const samples = store.read();\n      drawSeries(ctx, samples);\n      raf = requestAnimationFrame(draw);\n    };\n    raf = requestAnimationFrame(draw);\n    return () => cancelAnimationFrame(raf);\n  }, [store]);\n\n  return <canvas ref=\"{canvasRef}\" width=\"{1200}\" height=\"{300}\"\/>;\n}\n<\/htmlcanvaselement><\/code><\/pre>\n<p>\u0631\u062f \u0639\u0645\u0644 \u0627\u0633 \u062c\u0632\u0648 \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u06c1 <code>useEffect<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0686\u0644\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u06c1 <code>requestAnimationFrame<\/code> \u0644\u0648\u067e \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0627\u0633\u0679\u0648\u0631\u06cc\u062c \u0633\u06d2 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0630\u062e\u06cc\u0631\u0648\u06ba \u06a9\u0648 \u0627\u0633 \u0634\u0631\u062d \u067e\u0631 \u0622\u06af\u06d2 \u0628\u0691\u06be\u0627\u06cc\u0627 \u062c\u0627\u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u06a9\u0627 \u0630\u0631\u06cc\u0639\u06c1 \u0627\u0646\u062a\u0638\u0627\u0645 \u06a9\u0631\u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u0686\u0627\u06c1\u06d2 \u0645\u0627\u062e\u0630 100 \u06cc\u0627 100,000 \u0646\u0645\u0648\u0646\u06d2 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0628\u06be\u06cc\u062c\u06d2\u060c \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u06c1\u0645\u0648\u0627\u0631 60fps \u0644\u0627\u0626\u0646 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u06cc\u06d4 \u0648\u0627\u0626\u0631\u0646\u06af \u062c\u0628\u0644\u062a <code>samples<\/code> ~ \u0645\u06cc\u06ba <code>useState<\/code> \u06cc\u06c1 \u063a\u0644\u0637 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0645\u0632\u0627\u062d\u0645\u062a \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-selective-subscriptions-when-you-do-need-react-in-the-loop\">\u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0644\u0648\u067e \u0645\u06cc\u06ba \u0631\u062f\u0639\u0645\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u062a\u0648 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0633\u0628\u0633\u06a9\u0631\u067e\u0634\u0646<\/h3>\n<p>\u0628\u0639\u0636 \u0627\u0648\u0642\u0627\u062a \u0627\u06cc\u06a9 \u062c\u0632 \u0627\u0635\u0644 \u0645\u06cc\u06ba \u0688\u06cc\u0679\u0627 \u067e\u0631 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 (\u062e\u0644\u0627\u0635\u06c1 \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631\u060c \u0645\u062d\u0648\u0631 \u06a9\u06d2 \u0644\u06cc\u0628\u0644\u0632\u060c \u06cc\u0627 \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u06a9\u06cc \u0642\u062f\u0631 \u06a9\u06d2 \u0628\u06cc\u062c\u0632)\u06d4 \u0627\u0633 \u06a9\u0648 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0633\u0628\u0633\u06a9\u0631\u067e\u0634\u0646\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0630\u062e\u06cc\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0635\u0631\u0641 \u0627\u0646 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u06d2 \u062c\u0646 \u06a9\u0627 \u0622\u067e \u062e\u06cc\u0627\u0644 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 Zustand \u0627\u0633\u06d2 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">import { create } from \"zustand\";\n\nconst useDataStore = create<{ latest: number | null; setLatest: (v: number) => void }>((set) => ({\n  latest: null,\n  setLatest: (v) => set({ latest: v }),\n}));\n\nfunction LatestBadge() {\n  \/\/ Only re-renders when latest changes, not when other store fields do.\n  const latest = useDataStore((state) => state.latest);\n  return <p>Latest: {latest?.toFixed(2)}<\/p>;\n}\n<\/code><\/pre>\n<p>\u0631\u0627\u0626\u0679 \u067e\u0631 RAF \u0627\u0646\u0636\u0645\u0627\u0645 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633 \u06a9\u0648 \u062c\u0648\u0691\u06cc\u06ba (\u06a9\u0627\u0644 <code>setLatest<\/code> \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 React \u062c\u0632\u0648 \u0645\u0644\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0634\u0631\u062d \u0633\u06d2 \u0642\u0637\u0639 \u0646\u0638\u0631 60fps \u067e\u0631 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0627\u067e \u0688\u06cc\u0679 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 (\u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0641\u06cc \u0641\u0631\u06cc\u0645\u060c \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0641\u06cc \u0646\u0645\u0648\u0646\u06c1 \u0646\u06c1\u06cc\u06ba)\u06d4<\/p>\n<p><code>useSyncExternalStore<\/code>    \u06cc\u06c1 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u067e\u0628-\u0633\u0628 \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u06d2 \u06af\u0627\u060c \u0628\u0634\u0645\u0648\u0644 \u0627\u0648\u067e\u0631 \u0648\u0627\u0644\u0627 \u0631\u0646\u06af \u0628\u0641\u0631\u06d4 \u0627\u067e\u0646\u06cc \u0679\u06cc\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06c1\u0644\u06a9\u06cc \u0686\u06cc\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-3-move-heavy-work-off-the-main-thread\">\u0645\u0631\u062d\u0644\u06c1 3: \u0628\u06be\u0627\u0631\u06cc \u06a9\u0627\u0645 \u06a9\u0648 \u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06d2 \u0633\u06d2 \u06c1\u0679\u0627 \u062f\u06cc\u06ba\u06d4<\/h2>\n<p>\u0633\u06cc\u0648\u0646\u06af \u0627\u0648\u0631 \u0644\u0627\u0632\u0645\u06cc \u0688\u0631\u0627 \u0644\u0648\u067e\u0633 \u0631\u06a9\u0627\u0648\u0679 \u0645\u06cc\u06ba \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u06a9\u06d2 \u062a\u0639\u0627\u0648\u0646 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06c1 \u062e\u0648\u062f \u0627\u0628 \u0628\u06be\u06cc \u062a\u0645\u0627\u0645 \u0645\u062c\u0645\u0648\u0639\u06c1\u060c \u062a\u062c\u0632\u06cc\u06c1 \u0627\u0648\u0631 \u0631\u06cc\u0627\u0636\u06cc \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0686\u06cc\u0632 \u062c\u0648 \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 50,000 \u0646\u0645\u0648\u0646\u06d2 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0641\u06cc \u0633\u0679\u0631\u06cc\u0645 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06c1\u06d2 \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0632\u06cc\u062f \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06af\u06cc\u06d4<\/p>\n<p>\u0628\u0631\u0627\u0624\u0632\u0631 \u0641\u0631\u0627\u0631 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0686\u0627\u0631 \u0631\u0627\u0633\u062a\u06d2 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba: \u0648\u06cc\u0628 \u0648\u0631\u06a9\u0631\u0632\u060c \u0679\u0631\u0627\u0646\u0633\u067e\u0648\u0631\u0679 \u0627\u06cc\u0628\u0644 \u0627\u0634\u06cc\u0627\u0621\u060c <code>SharedArrayBuffer<\/code> + \u062c\u0648\u06c1\u0631\u06cc\u060c \u0627\u0648\u0631 <code>OffscreenCanvas<\/code>. \u06c1\u0631 \u0627\u06cc\u06a9 \u0645\u062e\u0635\u0648\u0635 \u0645\u0633\u0626\u0644\u06c1 \u062d\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1787149124_921_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u06cc\u06ba-\u0627\u0639\u0644\u06cc-\u062a\u0639\u062f\u062f-\u0631\u06cc\u0626\u0644-\u0679\u0627\u0626\u0645-\u0688\u06cc\u0679\u0627-\u0631\u0646\u06af-\u0628\u0641\u0631\u0632.png\" alt=\"\u0631\u06cc\u0646\u0688\u0631\u0631 \u06a9\u06d2 \u0639\u0645\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0631\u0627\u0624\u0632\u0631 \u067e\u0631\u0627\u0633\u06cc\u0633 \u0645\u0627\u0688\u0644 \u062c\u0633 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0627\u06c1\u0645 \u062f\u06be\u0627\u06af\u06c1\u060c \u0633\u0631\u0634\u0627\u0631 \u06a9\u0627\u0631\u06a9\u0646\u0627\u0646\u060c \u0645\u0634\u062a\u0631\u06a9\u06c1 \u06a9\u0627\u0631\u06a9\u0646\u0627\u0646\u060c \u0633\u0631\u0648\u0633 \u0648\u0631\u06a9\u0631\u0632\u060c \u0627\u0648\u0631 \u06a9\u0645\u067e\u0648\u0632\u06cc\u0679\u0631 \u062a\u06be\u0631\u06cc\u0688\u0632 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 GPU \u0639\u0645\u0644\u060c \u0628\u0634\u0645\u0648\u0644 WebGL \u0627\u0648\u0631 WebGPU \u06a9\u06d2 \u0644\u06cc\u06d2 GPU \u062a\u06be\u0631\u06cc\u0688\u0632\u06d4 \u0627\u06cc\u06a9 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u0627 \u0639\u0645\u0644\u060c \u0628\u0634\u0645\u0648\u0644 \u0628\u0627\u0632\u06cc\u0627\u0641\u062a \u0627\u0648\u0631 \u0648\u06cc\u0628 \u0633\u0627\u06a9\u0679\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u062a\u06be\u0631\u06cc\u0688\u0632\u060c \u062c\u0633 \u0645\u06cc\u06ba \u067e\u0648\u0633\u0679 \u0645\u06cc\u0633\u062c \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0627\u0648\u0631 \u0648\u0631\u06a9\u0631 \u0627\u0642\u0633\u0627\u0645 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0645\u0648\u0627\u0635\u0644\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06c1 JavaScript\u060c DOM\u060c \u0644\u06d2 \u0622\u0624\u0679\u060c \u0627\u0648\u0631 \u067e\u06cc\u0646\u0679 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u0648 \u0686\u0644\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0648\u0631\u06a9\u0631 \u0627\u06cc\u06a9 \u0627\u0644\u06af \u062a\u06be\u0644\u06af \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u06a9\u06d2 \u0627\u067e\u0646\u06d2 \u0627\u06cc\u0648\u0646\u0679 \u0644\u0648\u067e \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633\u06d2 DOM \u062a\u06a9 \u0631\u0633\u0627\u0626\u06cc \u062d\u0627\u0635\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u0648 \u0628\u0637\u0648\u0631 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0634\u06cc\u0626\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u0627\u060c \u0627\u0648\u0631 \u062a\u0645\u0627\u0645 \u06a9\u0631\u0627\u0633 \u062a\u06be\u0631\u06cc\u0688\u0688 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u063a\u06cc\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u062c\u0628 \u062a\u06a9 \u0646\u06c1 \u0628\u06be\u06cc\u062c\u06d2 \u062c\u0627\u0626\u06cc\u06ba \u0627\u0633 \u06a9\u06cc \u06a9\u0627\u067e\u06cc \u0646\u06c1\u06cc\u06ba \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0645\u0627\u0688\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u062a\u06cc\u0646 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0627\u06c1\u0645 \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u0648 DOM \u062a\u06a9 \u0631\u0633\u0627\u0626\u06cc \u062d\u0627\u0635\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/strong> \u06cc\u06c1\u06cc \u0628\u0627\u062a \u06c1\u06d2\u06d4 \u0648\u06c1 \u062e\u0627\u0644\u0635 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0688\u06cc\u0679\u0627 \u0622\u067e\u0631\u06cc\u0634\u0646\u0632\u060c \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u067e\u0627\u0631\u0633\u0646\u06af\u060c \u0631\u06cc\u0627\u0636\u06cc\u060c \u06a9\u0648\u0688\u06cc\u06a9\u0633 \u0627\u0648\u0631 \u0627\u06cc\u0645 \u0627\u06cc\u0644 \u0627\u0646\u0641\u0631\u0646\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062b\u0627\u0644\u06cc\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0648\u0627\u0635\u0644\u0627\u062a \u063a\u06cc\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631 \u06c1\u06d2\u06d4<\/strong> \u0641\u0646\u06a9\u0634\u0646 \u06a9\u06d2 \u0648\u0633\u0637 \u0645\u06cc\u06ba \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0648\u0626\u06cc \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0645\u062a\u063a\u06cc\u0631\u0627\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u0627\u0648\u0631 \u0648\u0627\u0642\u0639\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u067e\u0646\u06d2 API \u06a9\u06cc \u0645\u0646\u0635\u0648\u0628\u06c1 \u0628\u0646\u062f\u06cc \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0622\u067e \u06a9\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u06a9\u0627\u067e\u06cc (\u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u0622\u067e \u0627\u0633\u06d2 \u0645\u0646\u062a\u0642\u0644 \u06cc\u0627 \u0634\u06cc\u0626\u0631 \u06a9\u0631\u06cc\u06ba):<\/strong> \u0633\u0627\u062e\u062a\u06cc \u0646\u0642\u0644 \u0688\u06cc\u0641\u0627\u0644\u0679 \u06c1\u06d2\u061b \u0646\u0642\u0644 \u0648 \u062d\u0645\u0644 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u0627\u0634\u06cc\u0627\u0621 \u06a9\u0627\u067e\u06cc\u0627\u06ba \u0686\u06be\u0648\u0691 \u062f\u06cc\u06ba\u06d4 <code>SharedArrayBuffer<\/code> \u0645\u0633\u062a\u0642\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0686\u06be\u0648\u0691 \u062f\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-dedicated-workers-in-practice\">\u0648\u0642\u0641 \u067e\u0631\u06cc\u06a9\u0679\u06cc\u0634\u0646\u0631<\/h3>\n<p>\u062c\u0645\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u06cc \u06a9\u0645 \u0627\u0632 \u06a9\u0645 \u062a\u0639\u062f\u0627\u062f \u06c1\u06d2:<\/p>\n<pre><code class=\"language-ts\">\/\/ worker.ts\nself.onmessage = (event) => {\n  const { samples } = event.data;\n  \/\/ Decode, filter, decimate. The main thread doesn't see any of this.\n  const summary = computeStats(samples);\n  postMessage(summary);\n};\n<\/code><\/pre>\n<pre><code class=\"language-tsx\">\/\/ main thread\nimport { useEffect, useRef } from \"react\";\n\nexport default function WorkerChart({ socket, store }) {\n  const workerRef = useRef<worker>();\n\n  useEffect(() => {\n    workerRef.current = new Worker(new URL(\".\/worker.ts\", import.meta.url), {\n      type: \"module\",\n    });\n\n    workerRef.current.onmessage = (event) => {\n      store.pushBatch(event.data); \/\/ pre-processed, cheap to ingest\n    };\n\n    socket.on(\"newPoint\", (point: number) => {\n      workerRef.current?.postMessage({ point });\n    });\n\n    return () => workerRef.current?.terminate();\n  }, [socket, store]);\n\n  return <liveplot store=\"{store}\"\/>;\n}\n<\/worker><\/code><\/pre>\n<p>\u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u0626\u06d2 \u062a\u06cc\u0646 \u0686\u06cc\u0632\u06cc\u06ba\u06d4<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u06a9\u0627\u0631\u06a9\u0646 \u0631\u0646 \u0679\u0627\u0626\u0645 \u06a9\u06d2 \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u0633\u06d2 \u0627\u0635\u0644 \u0639\u0645\u0644 \u06c1\u06cc\u06ba\u06d4 \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u0627 \u0627\u067e\u0646\u0627 \u06c1\u06cc\u067e\u060c \u0627\u06cc\u0648\u0646\u0679 \u0644\u0648\u067e\u060c \u0627\u0648\u0631 \u06c1\u06d2\u06d4 <code>globalThis<\/code>. \u0627\u06cc\u06a9 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 1 \u0633\u06d2 5 \u0627\u06cc\u0645 \u0627\u06cc\u0633 \u0644\u06af\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06af\u0631\u0645 \u0631\u0627\u0633\u062a\u06d2 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0646\u06c1 \u06af\u06be\u0645\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<p>\u062f\u0648\u0633\u0631\u0627\u060c \u0645\u0627\u0688\u06cc\u0648\u0644 \u0648\u0631\u06a9\u0631\u0632 \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0688\u06cc\u0641\u0627\u0644\u0679 \u06c1\u06cc\u06ba\u06d4 <code>type: \"module\"<\/code> \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u06d2 \u0627\u0646\u062f\u0631 ES \u0645\u0627\u0688\u06cc\u0648\u0644\u0632 \u06a9\u0648 \u0641\u0639\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0628\u0634\u0645\u0648\u0644: <code>import<\/code>. \u0645\u06cc\u0631\u0627\u062b <code>importScripts<\/code> \u06a9\u0644\u0627\u0633\u06a9 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0627\u0633\u06d2 \u0646\u0626\u06d2 \u06a9\u0648\u0688 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0628\u0646\u0688\u0644\u0631\u0632 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 Vite\u060c Webpack\u060c esbuild \u0627\u0648\u0631 Rspack \u0633\u0628\u06be\u06cc \u06a9\u0627 \u067e\u062a\u06c1 \u0686\u0644\u062a\u0627 \u06c1\u06d2: <code>new Worker(new URL(\".\/x.ts\", import.meta.url))<\/code> \u067e\u06cc\u0679\u0631\u0646 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0644\u06af \u0627\u0644\u06af \u0679\u06a9\u0691\u06d2 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-a-worker-pool-that-scales-with-cores\">\u0648\u0631\u06a9\u0631 \u067e\u0648\u0644\u0632 \u06a9\u0648 \u06a9\u0648\u0631 \u0645\u06cc\u06ba \u067e\u06cc\u0645\u0627\u0646\u06c1 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/h3>\n<p>CPU \u06a9\u06d2 \u067e\u0627\u0628\u0646\u062f \u06a9\u0627\u0645\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 (\u0628\u0627\u0626\u0646\u0631\u06cc \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u0648 \u067e\u0627\u0631\u0633 \u06a9\u0631\u0646\u0627\u060c \u0622\u0688\u06cc\u0648 \u06a9\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u0646\u0627\u060c FFTs \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0646\u0627)\u060c \u067e\u0648\u0644 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u06cc\u0627\u0628 \u06a9\u0648\u0631\u0648\u06ba \u0645\u06cc\u06ba \u06a9\u0627\u0645 \u06a9\u0648 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">class WorkerPool {\n  private workers: Worker[];\n  private next = 0;\n  private pending = new Map<string unknown=\"\"> void>();\n\n  constructor(scriptUrl: URL, size = Math.max(1, navigator.hardwareConcurrency - 1)) {\n    this.workers = Array.from({ length: size }, () => {\n      const w = new Worker(scriptUrl, { type: \"module\" });\n      w.onmessage = (event) => {\n        const cb = this.pending.get(event.data.id);\n        if (!cb) return;\n        this.pending.delete(event.data.id);\n        cb(event.data.result);\n      };\n      return w;\n    });\n  }\n\n  async run<t>(kind: string, payload: unknown, transferables: Transferable[] = []): Promise<t> {\n    const id = crypto.randomUUID();\n    const result = new Promise<t>((resolve) => this.pending.set(id, resolve as (r: unknown) => void));\n    const worker = this.workers[this.next];\n    this.next = (this.next + 1) % this.workers.length;\n    worker.postMessage({ id, kind, payload }, transferables);\n    return result;\n  }\n}\n\nexport const pool = new WorkerPool(new URL(\".\/decoder.worker.ts\", import.meta.url));\n<\/t><\/t><\/t><\/string><\/code><\/pre>\n<p>\u0631\u0627\u0624\u0646\u0688 \u0631\u0627\u0628\u0646 \u06a9\u06cc \u062a\u0639\u06cc\u0646\u0627\u062a\u06cc\u060c \u0645\u0627\u0626\u0646\u0633 1 \u06a9\u0627\u0631\u06a9\u0646 \u0641\u06cc \u06a9\u0648\u0631\u06d4 \u0645\u0645\u0627\u062b\u0644 \u062c\u0648\u0627\u0628 \u0622\u0646\u06d2 \u067e\u0631 \u0632\u06cc\u0631 \u0627\u0644\u062a\u0648\u0627\u0621 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc\u06ba \u062d\u0644 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0633\u0633\u062a\u0627\u060c \u0642\u0627\u0628\u0644 \u067e\u06cc\u0634\u0646 \u06af\u0648\u0626\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u06cc \u0628\u06cc\u0646\u0688\u0648\u062a\u06be \u06a9\u06cc \u062d\u062f \u062a\u06a9 \u067e\u06c1\u0646\u0686\u0646\u06d2 \u062a\u06a9 \u0644\u06a9\u06cc\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc\u0645\u0627\u0646\u06c1 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-transferable-objects-the-no-copy-path\">\u0648\u06c1 \u0627\u0634\u06cc\u0627\u0621 \u062c\u0646\u06c1\u06cc\u06ba \u0645\u0646\u062a\u0642\u0644 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0648\u06c1 \u0631\u0627\u0633\u062a\u06d2 \u062c\u0646 \u06a9\u06cc \u0646\u0642\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc \u062c\u0627 \u0633\u06a9\u062a\u06cc<\/h3>\n<p><code>postMessage<\/code>    \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06cc\u06c1 \u067e\u06d2 \u0644\u0648\u0688 \u06a9\u0648 \u0646\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 10MB \u0628\u0641\u0631 \u06a9\u06cc \u0646\u0642\u0644 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u0644\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0644\u06af\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0648 \u062f\u0648\u06af\u0646\u0627 \u06a9\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062d\u0644 \u06cc\u06c1 \u06c1\u06d2\u06d4 <strong>\u0645\u0646\u062a\u0642\u0644<\/strong> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0628\u0641\u0631\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1787149124_746_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u06cc\u06ba-\u0627\u0639\u0644\u06cc-\u062a\u0639\u062f\u062f-\u0631\u06cc\u0626\u0644-\u0679\u0627\u0626\u0645-\u0688\u06cc\u0679\u0627-\u0631\u0646\u06af-\u0628\u0641\u0631\u0632.png\" alt=\"\u067e\u0648\u0633\u0679 \u0645\u06cc\u0633\u062c \u0637\u0631\u06cc\u0642\u0648\u06ba \u06a9\u0627 \u0634\u0627\u0646\u06c1 \u0628\u06c1 \u0634\u0627\u0646\u06c1 \u0645\u0648\u0627\u0632\u0646\u06c1: \u067e\u0631\u0627\u0626\u0645\u0631\u06cc \u067e\u0648\u0633\u0679 \u0645\u06cc\u0633\u06cc\u062c \u0633\u0627\u062e\u062a\u06cc \u0646\u0642\u0644 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u0648\u0631 \u0648\u0631\u06a9\u0631 \u06c1\u06cc\u067e\u0633 \u062f\u0648\u0646\u0648\u06ba \u067e\u0631 \u06a9\u0627\u067e\u06cc\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0641\u0631 \u06a9\u0648 \u0646\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0628 \u06a9\u06c1 \u0642\u0627\u0628\u0644 \u0645\u0646\u062a\u0642\u0644\u06cc \u0645\u0644\u06a9\u06cc\u062a \u06a9\u0648 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u062c\u0628 \u0645\u0644\u06a9\u06cc\u062a \u067e\u0631\u0627\u0626\u0645\u0631\u06cc \u0633\u06d2 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u06cc \u0637\u0631\u0641 \u0645\u0646\u062a\u0642\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0648\u06c1\u06cc \u0628\u0641\u0631 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0645\u0648\u062c\u0648\u062f \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0645\u0637\u0644\u0628: \u0627\u06af\u0631 \u0628\u0641\u0631 \u0628\u06be\u06cc\u062c\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0628\u06be\u06cc\u062c\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0631\u0633\u0627\u0626\u06cc \u06a9\u06be\u0648 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0648\u0635\u0648\u0644 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u0648 \u0628\u063a\u06cc\u0631 \u06a9\u0633\u06cc \u06a9\u0627\u067e\u06cc \u0627\u0648\u0631 \u0628\u063a\u06cc\u0631 O(1) \u06c1\u06cc\u0646\u0688 \u0622\u0641 \u06a9\u06d2 \u06cc\u06c1 \u0645\u0644\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">const buf = new ArrayBuffer(10 * 1024 * 1024); \/\/ 10 MB\nnew Uint8Array(buf).set(somePayload);\n\nworker.postMessage({ buf }, [buf]); \/\/ second arg = list of transferables\n\/\/ `buf` is now detached on this side. Accessing it throws.\n<\/code><\/pre>\n<p>\u0642\u0627\u0628\u0644 \u0645\u0646\u062a\u0642\u0644\u06cc \u0627\u0642\u0633\u0627\u0645 \u06a9\u06cc 2026 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba: <code>ArrayBuffer<\/code> (\u0627\u0648\u0631 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0627\u0646 \u067e\u0679 \u0633\u0631\u0646\u06cc \u0645\u0646\u0638\u0631 \u062c\u0633 \u06a9\u06cc \u062d\u0645\u0627\u06cc\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2) <code>MessagePort<\/code>\u060c <code>ImageBitmap<\/code>\u060c <code>OffscreenCanvas<\/code>\u0646\u062f\u06cc \u06a9\u06cc \u0642\u0633\u0645 (<code>ReadableStream<\/code>\u060c <code>WritableStream<\/code>\u060c <code>TransformStream<\/code>) <code>RTCDataChannel<\/code>\u060c <code>VideoFrame<\/code>\u060c <code>AudioData<\/code>\u0648\u06cc\u0628 \u0679\u0631\u0627\u0646\u0633\u067e\u0648\u0631\u0679 \u06a9\u0627 \u0633\u0644\u0633\u0644\u06c1\u06d4 React \u0627\u0648\u0631 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u06a9\u0627\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0641\u06cc\u062f \u06c1\u06cc\u06ba: <code>ArrayBuffer<\/code>\u060c <code>OffscreenCanvas<\/code>\u0627\u0648\u0631 <code>MessagePort<\/code>.<\/p>\n<p>\u0627\u06cc\u06a9 \u0639\u0627\u0645 \u062e\u0631\u0627\u0628\u06cc \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06af\u0631 \u0622\u067e \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u0646\u0627 \u0628\u06be\u0648\u0644 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06cc\u06c1 \u062e\u0627\u0645\u0648\u0634\u06cc \u0633\u06d2 \u0622\u067e \u06a9\u0648 \u0633\u0633\u062a \u06a9\u0631\u062f\u06d2 \u06af\u0627\u06d4 \u0627\u06cc\u067e \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0644\u06cc\u06a9\u0646 \u062a\u0645\u0627\u0645 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u067e\u0631\u0648\u0641\u0627\u0626\u0644 \u06a9\u0627\u0631\u06a9\u0646 <code>postMessage<\/code> \u0641\u0648\u0646 \u06a9\u0627\u0644 \u0627\u06af\u0631 \u0622\u067e &quot;\u0686\u06be\u0648\u0679\u06d2&#8221; \u067e\u06d2 \u0644\u0648\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0644\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u062f\u06cc\u06a9\u06be \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u0627\u0633\u06d2 \u0646\u0642\u0644 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u062c\u0628 \u0627\u0633\u06d2 \u0628\u06be\u06cc\u062c\u0627 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">\/\/ Bad: copies every frame.\nworker.postMessage({ samples: float32Array });\n\n\/\/ Good: transfers the underlying buffer.\nworker.postMessage({ samples: float32Array }, [float32Array.buffer]);\n<\/code><\/pre>\n<p>\u0679\u0631\u0627\u0646\u0633\u0645\u06cc\u0634\u0646 \u06a9\u06d2 \u0628\u0639\u062f \u0628\u0641\u0631\u0632 \u06a9\u0648 \u0627\u0644\u06af \u06a9\u0631 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0628\u06be\u06cc\u062c\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0648 \u0627\u0646 \u06a9\u06cc \u062a\u062e\u0644\u06cc\u0642 \u062c\u0627\u0631\u06cc \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0646\u06c1\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0645\u062e\u062a\u0635 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 (\u06cc\u0627 \u0627\u0646\u06c1\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0645\u062e\u062a\u0635 \u06a9\u0631\u062f\u06c1 \u0628\u0641\u0631 \u067e\u0648\u0644 \u0633\u06d2 \u06a9\u06be\u06cc\u0646\u0686\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2)\u06d4<\/p>\n<h3 id=\"heading-sharedarraybuffer-and-atomics\">SharedArrayBuffer \u0627\u0648\u0631 \u0627\u0679\u0627\u0645\u06a9\u0633<\/h3>\n<p>\u0628\u0641\u0631 \u06a9\u0648 \u062c\u0627\u0631\u06cc \u06a9\u0631\u06a9\u06d2 \u0627\u067e\u0646\u0627 \u06c1\u0627\u062a\u06be \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <strong>\u0634\u06cc\u0626\u0631 \u06a9\u0631\u06cc\u06ba<\/strong> \u062f\u0648 \u062a\u06be\u0631\u06cc\u0688\u0632 \u06a9\u0648 \u0627\u06cc\u06a9 \u06c1\u06cc \u0648\u0642\u062a \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u0645\u06cc\u0645\u0648\u0631\u06cc \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">const sab = new SharedArrayBuffer(1024 * 1024); \/\/ 1 MB shared\nworker.postMessage({ sab });\n\n\/\/ Both main and worker now hold references to the same memory.\nconst viewMain = new Int32Array(sab);\n\/\/ Inside worker:\n\/\/ const viewWorker = new Int32Array(event.data.sab);\n<\/code><\/pre>\n<p>\u062a\u06cc\u0646 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0627\u06c1\u0645 \u06c1\u06cc\u06ba:<\/p>\n<p><code>SharedArrayBuffer<\/code>    \u06a9\u0631\u0627\u0633 \u0633\u0648\u0631\u0633 \u0622\u0626\u0633\u0648\u0644\u06cc\u0634\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0627\u0633 \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2: <code>Cross-Origin-Opener-Policy: same-origin<\/code> \u0627\u0648\u0631 <code>Cross-Origin-Embedder-Policy: require-corp<\/code>. \u0627\u0646 \u06c1\u06cc\u0688\u0631\u0632 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 <code>SharedArrayBuffer<\/code> \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u063a\u06cc\u0631 \u0645\u062a\u0639\u06cc\u0646\u06c1\u06d4 \u06c1\u0645 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0645\u0636\u0645\u0648\u0646 \u0645\u06cc\u06ba \u0645\u0632\u06cc\u062f \u062a\u0641\u0635\u06cc\u0644 \u0633\u06d2 \u0627\u0633 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u0648 \u0628\u06be\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 <code>Atomics<\/code> \u06c1\u0645 \u0648\u0642\u062a \u0633\u0627\u0632\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0634\u0646 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u0645\u06cc\u0645\u0648\u0631\u06cc \u067e\u0631 \u0627\u06cc\u06a9 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u06be\u0631\u06cc\u0688\u0632 \u0644\u06a9\u06be\u0646\u0627 \u063a\u06cc\u0631 \u0645\u062a\u0639\u06cc\u0646\u06c1 \u0646\u062a\u0627\u0626\u062c \u067e\u06cc\u062f\u0627 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 <code>Atomics<\/code> \u0679\u0627\u0626\u067e \u06a9\u0631\u062f\u06c1 \u0633\u0631\u0646\u06cc \u0646\u0638\u0627\u0631\u0648\u06ba \u067e\u0631 \u0645\u0648\u0627\u0632\u0646\u06c1 \u0627\u0648\u0631 \u062a\u0628\u0627\u062f\u0644\u06c1\u060c \u0644\u0648\u0688\u060c \u0627\u0633\u0679\u0648\u0631\u060c \u0627\u067e\u06cc\u0646\u0688\u060c \u0686\u0627\u0626\u0644\u0688\u060c \u0627\u0646\u062a\u0638\u0627\u0631\u060c \u0627\u0648\u0631 \u0645\u0637\u0644\u0639 \u0622\u067e\u0631\u06cc\u0634\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">const sab = new SharedArrayBuffer(8);\nconst view = new Int32Array(sab);\n\n\/\/ Main thread: wake any worker that's waiting on slot 0.\nAtomics.store(view, 0, 1);\nAtomics.notify(view, 0, 1);\n\n\/\/ Worker: block until slot 0 changes from 0.\nconst result = Atomics.wait(view, 0, 0); \/\/ \"ok\", \"not-equal\", or \"timed-out\"\n<\/code><\/pre>\n<p>\u0627\u0648\u0631 \u0644\u0627\u06a9 \u0641\u0631\u06cc \u0631\u0646\u06af \u0628\u0641\u0631 \u0642\u0627\u062a\u0644 \u0627\u06cc\u067e \u06c1\u06d2\u06d4 \u0628\u063a\u06cc\u0631 \u062a\u0627\u0644\u06d2 \u06a9\u06d2 \u062f\u0648 \u062f\u06be\u0627\u06af\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u067e\u0631\u0648\u0688\u06cc\u0648\u0633\u0631 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u06cc \u0642\u0637\u0627\u0631 <code>postMessage<\/code> \u06a9\u0648\u0626\u06cc \u0628\u0627\u06c1\u0645\u06cc \u0627\u0648\u0631 GC \u062f\u0628\u0627\u0624 \u0646\u06c1\u06cc\u06ba\u06d4 \u0688\u06cc\u0679\u0627 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0628\u0641\u0631 \u0645\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u06cc\u0679\u0645\u06a9\u0633 \u067e\u0691\u06be\u0646\u06d2\/\u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0645\u0642\u0627\u0645\u0627\u062a \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u06a9\u0645 \u0633\u06d2 \u06a9\u0645 SPSC (\u0648\u0627\u062d\u062f \u067e\u0631\u0648\u0688\u06cc\u0648\u0633\u0631\u060c \u0648\u0627\u062d\u062f \u0635\u0627\u0631\u0641) \u0631\u0646\u06af \u0628\u0641\u0631 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-ts\">type SharedRing = {\n  data: Float32Array;          \/\/ payload\n  control: Int32Array;         \/\/ [head, tail]\n};\n\nfunction createSharedRing(capacity: number): SharedRing {\n  const sab = new SharedArrayBuffer(capacity * 4 + 16);\n  const control = new Int32Array(sab, 0, 4);   \/\/ [head, tail, ...]\n  const data = new Float32Array(sab, 16, capacity);\n  return { data, control };\n}\n\nfunction push(ring: SharedRing, value: number): boolean {\n  const head = Atomics.load(ring.control, 0);\n  const tail = Atomics.load(ring.control, 1);\n  const next = (head + 1) % ring.data.length;\n  if (next === tail) return false; \/\/ full\n  ring.data[head] = value;\n  Atomics.store(ring.control, 0, next);\n  return true;\n}\n\nfunction pop(ring: SharedRing): number | null {\n  const tail = Atomics.load(ring.control, 1);\n  const head = Atomics.load(ring.control, 0);\n  if (tail === head) return null; \/\/ empty\n  const value = ring.data[tail];\n  Atomics.store(ring.control, 1, (tail + 1) % ring.data.length);\n  return value;\n}\n<\/code><\/pre>\n<p>\u067e\u0631\u0648\u0688\u06cc\u0648\u0633\u0631 \u0627\u06cc\u06a9 \u062a\u06be\u0631\u06cc\u0688 \u0633\u06d2 \u0644\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u0635\u0627\u0631\u0641 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0633\u06cc \u0627\u0648\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0628\u0644\u0627\u06a9 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627\u060c \u06a9\u0686\u06be \u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba\u06d4 <code>postMessage<\/code> \u0627\u0646 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646\u06d4 \u0633\u06af\u0646\u0644\u0646\u06af \u0631\u06cc\u0679 \u067e\u0631\u060c \u06cc\u06c1 \u0648\u0627\u062d\u062f \u0641\u0646 \u062a\u0639\u0645\u06cc\u0631 \u06c1\u06d2 \u062c\u0648 \u0642\u0627\u0628\u0644 \u062a\u0648\u0633\u06cc\u0639 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1787149125_835_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u06cc\u06ba-\u0627\u0639\u0644\u06cc-\u062a\u0639\u062f\u062f-\u0631\u06cc\u0626\u0644-\u0679\u0627\u0626\u0645-\u0688\u06cc\u0679\u0627-\u0631\u0646\u06af-\u0628\u0641\u0631\u0632.png\" alt=\"\u0633\u0646\u06af\u0644 \u067e\u0631\u0648\u0688\u06cc\u0648\u0633\u0631 \u0633\u0646\u06af\u0644 \u06a9\u0646\u0632\u06cc\u0648\u0645\u0631 \u0631\u0650\u0646\u06af \u0628\u0641\u0631 \u0628\u0630\u0631\u06cc\u0639\u06c1 SharedArrayBuffer: \u067e\u0631\u0648\u0688\u06cc\u0648\u0633\u0631 (\u06a9\u0644\u06cc\u06a9\u0634\u0646 \u0648\u0631\u06a9\u0631) \u06c1\u06cc\u0688 \u067e\u0648\u0627\u0626\u0646\u0679\u0631 \u06a9\u0648 \u0644\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0635\u0627\u0631\u0641 (\u0631\u06cc\u0646\u0688\u0631 \u062a\u06be\u0631\u06cc\u0688) \u0679\u06cc\u0644 \u067e\u0648\u0627\u0626\u0646\u0679\u0631 \u0633\u06d2 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062f\u0648\u0646\u0648\u06ba \u067e\u0648\u0627\u0626\u0646\u0679\u0631\u0632 \u06a9\u0648 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0628\u0641\u0631 \u0645\u06cc\u06ba \u0645\u062d\u0641\u0648\u0638 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062c\u0648\u06c1\u0631\u06cc \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0645\u0644\u0679\u06cc \u067e\u0631\u0648\u0688\u06cc\u0648\u0633\u0631 \u06cc\u0627 \u0645\u0644\u0679\u06cc \u06a9\u0646\u0632\u06cc\u0648\u0645\u0631 \u0642\u0637\u0627\u0631\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0648\u0627\u0632\u0646\u06c1 \u0627\u0648\u0631 \u0633\u0648\u06cc\u067e \u0644\u0648\u067e \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 (<code>Atomics.compareExchange<\/code>)\u06d4 \u0648\u06c1 \u0628\u06c1\u062a \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u0628\u062f\u0644 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0633\u06cc\u0679\u0646\u06af\u0632 \u062c\u0628 \u0645\u0645\u06a9\u0646 \u06c1\u0648 \u062a\u0648 SPSC \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0645\u0645\u06a9\u0646 \u0646\u06c1 \u06c1\u0648\u0646\u06d2 \u067e\u0631 \u0645\u06cc\u0633\u062c \u067e\u0627\u0633 \u06a9\u0631\u0646\u06d2 \u067e\u0631 \u0648\u0627\u067e\u0633 \u0622\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-in-electron-ingest-in-the-main-process\">\u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646 \u0645\u06cc\u06ba\u060c \u0627\u0633\u06d2 \u0645\u0631\u06a9\u0632\u06cc \u0639\u0645\u0644 \u0633\u06d2 \u062c\u0645\u0639 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/h3>\n<p>\u0627\u06cc\u06a9 \u06c1\u06cc \u062e\u06cc\u0627\u0644 \u0627\u06cc\u06a9 \u0633\u0637\u062d \u0627\u0648\u067e\u0631 \u0644\u0627\u06af\u0648 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u0645\u0642\u0627\u0645\u06cc SDK \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2\u060c \u0622\u067e \u0646\u0645\u0648\u0646\u06d2 \u062c\u0645\u0639 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <strong>\u0627\u06c1\u0645 \u0639\u0645\u0644<\/strong>\u06c1\u0645 \u0627\u0633\u06d2 \u0648\u06c1\u0627\u06ba \u0628\u0641\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u067e\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u06d2 \u0631\u06cc\u0641\u0631\u06cc\u0634 \u0633\u0627\u0626\u06cc\u06a9\u0644 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u0622\u0626\u06cc \u067e\u06cc \u0633\u06cc \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0628\u06cc\u0686\u0632 \u067e\u0627\u0633 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u0622\u0626\u06cc \u067e\u06cc \u0633\u06cc \u067e\u06cc\u063a\u0627\u0645 \u0641\u06cc \u0646\u0645\u0648\u0646\u06c1 1 \u06a9\u0644\u0648 \u06c1\u0631\u0679\u0632 \u067e\u0631 \u0622\u0626\u06cc \u067e\u06cc \u0633\u06cc \u06a9\u0648 \u067e\u0648\u0631\u0627 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 16 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u06d2 \u0628\u06cc\u0686 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0641\u06cc \u0641\u0631\u06cc\u0645 \u0627\u06cc\u06a9 IPC \u067e\u06cc\u063a\u0627\u0645 \u0633\u06cc\u062f\u06be\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">\/\/ electron main: buffer in Node, flush at 60Hz\nlet pending: number[] = [];\n\ndevice.on(\"sample\", (value) => pending.push(value));\n\nsetInterval(() => {\n  if (pending.length === 0) return;\n  const batch = new Float32Array(pending);\n  pending = [];\n  \/\/ Transferable to avoid the structured-clone copy.\n  mainWindow.webContents.send(\"device:samples\", batch.buffer, [batch.buffer]);\n}, 1000 \/ 60);\n<\/code><\/pre>\n<pre><code class=\"language-ts\">\/\/ preload: expose a thin subscription API to the renderer\ncontextBridge.exposeInMainWorld(\"device\", {\n  onSamples: (cb: (samples: Float32Array) => void) => {\n    const handler = (_: unknown, buf: ArrayBuffer) => cb(new Float32Array(buf));\n    ipcRenderer.on(\"device:samples\", handler);\n    return () => ipcRenderer.removeListener(\"device:samples\", handler);\n  },\n});\n<\/code><\/pre>\n<pre><code class=\"language-tsx\">\/\/ renderer: feed the store from the bridge\nuseEffect(() => {\n  return window.device.onSamples((batch) => store.pushBatch(batch));\n}, []);\n<\/code><\/pre>\n<p>\u0631\u06cc\u0646\u0688\u0631\u0631 \u06a9\u0627 \u0631\u06cc\u0646\u0688\u0631\u0631 \u062a\u06be\u0631\u06cc\u0688 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0628\u06cc\u0686 \u0641\u06cc \u0641\u0631\u06cc\u0645 \u067e\u0631 \u0627\u062b\u0631 \u0627\u0646\u062f\u0627\u0632 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u0642\u0637\u0639 \u0646\u0638\u0631 \u0622\u0644\u06c1 \u06a9\u06cc \u0631\u0641\u062a\u0627\u0631 \u0633\u06d2\u06d4 \u0688\u06cc\u0679\u0627 \u0622\u067e\u0631\u06cc\u0634\u0646\u0632 \u0627\u067e \u0627\u0633\u0679\u0631\u06cc\u0645 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-4-render-off-main-with-offscreencanvas\">\u0645\u0631\u062d\u0644\u06c1 4: \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06a9\u06d2 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u0648 \u0628\u0646\u062f \u06a9\u0631\u06cc\u06ba\u06d4 <code>OffscreenCanvas<\/code><\/h2>\n<p>DOM \u0633\u0646\u06af\u0644 \u062a\u06be\u0631\u06cc\u0688\u0688 \u06c1\u06d2\u06d4 \u06a9\u06cc\u0646\u0648\u0633 API \u06a9\u06d2 \u0644\u0626\u06d2 \u0628\u06be\u06cc \u06cc\u06c1\u06cc \u06c1\u06d2\u06d4 <code>OffscreenCanvas<\/code> \u0627\u0633\u06d2 \u062a\u0648\u0691 \u062f\u0648\u06d4 \u0627\u06cc\u06a9 \u06a9\u06cc\u0646\u0648\u0633 \u062c\u0648 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u0648 \u0628\u06be\u06cc\u062c\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0631\u06a9\u0632\u06cc \u0633\u06d2 \u0622\u0632\u0627\u062f\u0627\u0646\u06c1 \u0637\u0648\u0631 \u067e\u0631 \u062a\u06cc\u0627\u0631 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">\/\/ Main thread\nconst canvas = canvasRef.current!;\nconst offscreen = canvas.transferControlToOffscreen();\nworker.postMessage({ canvas: offscreen }, [offscreen]);\n<\/code><\/pre>\n<pre><code class=\"language-ts\">\/\/ Worker\nlet ctx: OffscreenCanvasRenderingContext2D | null = null;\n\nself.onmessage = (event) => {\n  if (event.data.canvas) {\n    ctx = event.data.canvas.getContext(\"2d\");\n    return;\n  }\n  if (event.data.samples && ctx) {\n    drawSeries(ctx, event.data.samples);\n  }\n};\n<\/code><\/pre>\n<p>\u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06c1 \u0627\u0628 \u0688\u0631\u0627\u0626\u0646\u06af \u0644\u0648\u067e \u0633\u06d2 \u0645\u0642\u0627\u0628\u0644\u06c1 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u0644\u06a9\u0633\u060c \u06c1\u0648\u0648\u0631 \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u0632\u0627\u062f \u06c1\u06d2\u06d4 \u06a9\u0627\u0631\u06a9\u0646\u0627\u0646 \u0627\u067e\u0646\u06d2 \u067e\u0627\u0633 \u0645\u0648\u062c\u0648\u062f \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u0627\u067e\u0646\u06cc \u0631\u0641\u062a\u0627\u0631 \u0633\u06d2 \u0688\u0631\u0627 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0644 \u06a9\u0631 <code>SharedArrayBuffer<\/code>\u0622\u067e \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u062f\u0633\u062a\u06cc\u0627\u0628 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1787149125_923_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u06cc\u06ba-\u0627\u0639\u0644\u06cc-\u062a\u0639\u062f\u062f-\u0631\u06cc\u0626\u0644-\u0679\u0627\u0626\u0645-\u0688\u06cc\u0679\u0627-\u0631\u0646\u06af-\u0628\u0641\u0631\u0632.png\" alt=\"\u0645\u06cc\u0646 \u062a\u06be\u0631\u06cc\u0688 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646: \u0688\u06cc\u0679\u0627 \u0633\u0648\u0631\u0633 \u0627\u0633\u06d2 \u062c\u0645\u0639 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u0648 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 SharedArrayBuffer \u06a9\u0648 \u0644\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 Renderer \u062c\u0648 OffscreenCanvas \u06a9\u0627 \u0645\u0627\u0644\u06a9 \u06c1\u06d2 \u0627\u0633\u06d2 GPU \u06a9\u0645\u0627\u0646\u0688\u0632 \u067e\u0631 \u0639\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 \u062c\u0648 DOM \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0645\u0631\u06a9\u0632\u06cc \u062a\u06be\u0631\u06cc\u0688 React UI \u06a9\u06d2 \u0644\u06cc\u06d2 SharedArrayBuffer \u0633\u06d2 \u062e\u0644\u0627\u0635\u06c1 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u062d\u0635\u0648\u0644 \u06a9\u0627\u0631\u06a9\u0646 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0628\u0641\u0631 \u067e\u0631 \u0646\u0645\u0648\u0646\u06d2 \u0644\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u067e\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06c1 \u0627\u0633\u06d2 \u067e\u0691\u06be\u062a\u0627 \u0627\u0648\u0631 \u06a9\u06be\u06cc\u0646\u0686\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u0646 \u0635\u0631\u0641 \u062e\u0644\u0627\u0635\u06c1 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 (FPS\u060c \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0642\u062f\u0631\u060c \u0686\u06cc\u0646\u0644 \u0644\u06cc\u0628\u0644) \u0627\u0648\u0631 \u06a9\u0631\u0648\u0645 \u06a9\u0648 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u0646 \u06a9\u06d2 \u0627\u06cc\u0648\u0646\u0679 \u0644\u0648\u067e \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u0688\u06cc\u0679\u0627 \u0646\u06c1\u06cc\u06ba \u06af\u0632\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>1kHz \u067e\u0631 19-\u0686\u06cc\u0646\u0644 \u0633\u06af\u0646\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06cc\u06c1 \u0648\u0627\u062d\u062f \u0641\u0646 \u062a\u0639\u0645\u06cc\u0631 \u06c1\u06d2 \u062c\u0648 \u06c1\u06cc\u0688 \u0631\u0648\u0645 \u0648\u0627\u0644\u06d2 \u0644\u06cc\u067e \u0679\u0627\u067e \u067e\u0631 60fps \u06a9\u06cc \u0636\u0645\u0627\u0646\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-5-decimate-before-you-draw\">\u0645\u0631\u062d\u0644\u06c1 5: \u0688\u0631\u0627\u0626\u0646\u06af \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0642\u062a\u0644 \u0639\u0627\u0645<\/h2>\n<p>\u0627\u06cc\u06a9 1200 \u067e\u06a9\u0633\u0644 \u0686\u0648\u0691\u0627 \u06a9\u06cc\u0646\u0648\u0633 \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 1200 \u0645\u0646\u0641\u0631\u062f X \u067e\u0648\u0632\u06cc\u0634\u0646\u0648\u06ba \u067e\u0631 \u0688\u0633\u067e\u0644\u06d2 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u06cc\u06a9 \u06a9\u06be\u0691\u06a9\u06cc \u0645\u06cc\u06ba 60,000 \u0646\u0645\u0648\u0646\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0622\u067e \u0627\u0646 \u0633\u0628 \u06a9\u0648 \u06a9\u06be\u06cc\u0646\u0686\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u0635\u0627\u0631\u0641 \u06a9\u06cc \u0646\u0638\u0631 \u0633\u06d2 50 \u06af\u0646\u0627 \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0627\u0645 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0641\u06cc \u067e\u06a9\u0633\u0644 \u06a9\u0627\u0644\u0645 \u062f\u0631\u0633\u062a \u067e\u0648\u0627\u0626\u0646\u0679 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u06cc\u06ba\u06d4 \u0633\u06af\u0646\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 &quot;\u06a9\u0645 \u0633\u06d2 \u06a9\u0645&#8221; \u067e\u06cc\u0679\u0631\u0646 \u0645\u0646\u0627\u0633\u0628 \u06c1\u06d2\u06d4 \u06c1\u0631 \u067e\u06a9\u0633\u0644 \u06a9\u0627\u0644\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0633 \u062d\u062f \u06a9\u06cc \u06a9\u0645 \u0627\u0632 \u06a9\u0645 \u0627\u0648\u0631 \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0642\u062f\u0631\u06cc\u06ba \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0639\u0645\u0648\u062f\u06cc \u0644\u06a9\u06cc\u0631 \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0628\u0635\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062a\u0645\u0627\u0645 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u0688\u0631\u0627\u0626\u0646\u06af \u06a9\u06d2 \u0628\u0631\u0627\u0628\u0631 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0628\u06c1\u062a \u0633\u0633\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">function drawDecimated(\n  ctx: CanvasRenderingContext2D,\n  samples: Float32Array,\n  width: number,\n) {\n  const samplesPerPixel = samples.length \/ width;\n  ctx.beginPath();\n  for (let x = 0; x < width; x++) {\n    const start = Math.floor(x * samplesPerPixel);\n    const end = Math.floor((x + 1) * samplesPerPixel);\n    let min = Infinity;\n    let max = -Infinity;\n    for (let i = start; i < end; i++) {\n      const v = samples[i];\n      if (v < min) min = v;\n      if (v > max) max = v;\n    }\n    ctx.moveTo(x, scale(min));\n    ctx.lineTo(x, scale(max));\n  }\n  ctx.stroke();\n}\n<\/code><\/pre>\n<p>\u0688\u06cc\u0633\u06cc\u0645\u06cc\u0634\u0646 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0648\u06cc\u0698\u0648\u0644\u0627\u0626\u0632\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0648\u0627\u062d\u062f \u0633\u0628 \u0633\u06d2 \u0628\u0691\u06cc \u0633\u06cc \u067e\u06cc \u06cc\u0648 \u062c\u06cc\u062a \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0627\u06cc\u0633\u0627 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0632\u06cc\u0627\u062f\u06c1 \u0636\u0639\u0641 \u0648\u0641\u0627\u062f\u0627\u0631\u06cc \u06cc\u06c1 \u06c1\u0648\u06af\u06cc: <strong>LTTB (\u0633\u0628 \u0633\u06d2 \u0628\u0691\u06cc \u0633\u06c1 \u0631\u062e\u06cc \u062a\u06cc\u0646 \u0628\u0627\u0644\u0679\u06cc\u0627\u06ba)<\/strong>\u0627\u06cc\u06a9 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u062c\u0648 \u06a9\u0645 \u0627\u0632 \u06a9\u0645 \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0628\u0635\u0631\u06cc \u0638\u0627\u06c1\u0631\u06cc \u0634\u06a9\u0644 \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0641\u06cc \u0628\u0627\u0644\u0679\u06cc \u0627\u06cc\u06a9 \u0646\u0645\u0627\u0626\u0646\u062f\u06c1 \u0646\u0645\u0648\u0646\u06c1 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06d2 \u0627\u06af\u0631 \u0622\u067e \u063a\u06cc\u0631 \u0633\u06af\u0646\u0644 \u0648\u0627\u0644\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0645\u0646\u0635\u0648\u0628\u06c1 \u0628\u0646\u062f\u06cc \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0627\u0633\u0679\u0627\u06a9 \u0686\u0627\u0631\u0679\u060c \u062c\u06c1\u0627\u06ba \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0628\u0644\u0646\u062f\u06cc \u0627\u0648\u0631 \u06a9\u0645\u06cc\u0627\u06ba \u0627\u06c1\u0645 \u06c1\u06cc\u06ba\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0627\u0686\u06be\u06cc \u0686\u0627\u0631\u0679\u0646\u06af \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba (uPlot\u060c Plotly\u060c ECharts) \u0645\u06cc\u06ba \u0688\u06cc\u0633\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0630\u0631\u06cc\u0639\u06c1 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0634\u0627\u0645\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-6-wrap-an-external-renderer\">\u0645\u0631\u062d\u0644\u06c1 6: \u0628\u06cc\u0631\u0648\u0646\u06cc \u067e\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u0648 \u0644\u067e\u06cc\u0679\u06cc\u06ba\u06d4<\/h2>\n<p>\u0622\u067e \u06a9\u0648 \u06c1\u0645\u06cc\u0634\u06c1 \u0688\u0631\u0627 \u0644\u0648\u067e \u062e\u0648\u062f \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0644\u0627\u0626\u0641 \u0633\u0627\u0626\u06cc\u06a9\u0644 \u0645\u06cc\u0646\u062c\u0645\u0646\u0679 \u0645\u06cc\u06ba \u0628\u06c1\u062a\u0631\u06cc\u0646 \u0631\u062f\u0639\u0645\u0644 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 \u0644\u0627\u0632\u0645\u06cc \u0686\u0627\u0631\u0679\u0646\u06af \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0645\u06cc\u06ba \u0628\u06c1\u062a\u0631\u06cc\u0646 \u062e\u0627\u0645 \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06c1\u06d2\u06d4 \u062c\u0628 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u062a\u06cc\u0632 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0644\u0648\u067e \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u062a\u0648 \u0631\u062f \u0639\u0645\u0644 \u06a9\u0648 \u0645\u0627\u0624\u0646\u0679 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0686\u0627\u0631\u0679\u0633 \u06a9\u0648 \u0627\u0646 \u0645\u0627\u0624\u0646\u0679 \u06a9\u0631\u0646\u06d2 \u062f\u06cc\u0646\u0627 \u0627\u06a9\u062b\u0631 \u0635\u062d\u06cc\u062d \u0627\u0642\u062f\u0627\u0645 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-tsx\">import Uplot from \"uplot\";\nimport \"uplot\/dist\/uPlot.min.css\";\nimport { useEffect, useRef } from \"react\";\n\nexport default function UPlotChart({ data }: { data: AlignedData }) {\n  const ref = useRef<htmldivelement>(null);\n  const plotRef = useRef<uplot null=\"\">(null);\n\n  useEffect(() => {\n    const opts = {\n      title: \"Realtime Chart\",\n      width: 600,\n      height: 300,\n      series: [{}, { label: \"Signal\" }],\n    };\n    plotRef.current = new Uplot(opts, data, ref.current!);\n    return () => plotRef.current?.destroy();\n  }, []);\n\n  useEffect(() => {\n    plotRef.current?.setData(data); \/\/ imperative update, no React render\n  }, [data]);\n\n  return ;\n}\n<\/uplot><\/htmldivelement><\/code><\/pre>\n<p>uPlot\u060c TimeChart\u060c ECharts\u060c Plotly\u060c LightningChart\u060c \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 \u0633\u0628\u06be\u06cc \u0627\u0633 \u0634\u06a9\u0644 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba: \u0627\u0633\u06d2 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0641\u0648\u0631\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>useEffect<\/code>\u06a9\u0627\u0644 <code>setData<\/code> \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631\u060c \u0627\u0646 \u0645\u0627\u0624\u0646\u0679 \u06c1\u0648\u0646\u06d2 \u067e\u0631 \u0627\u0633\u06d2 \u062d\u0630\u0641 \u06a9\u0631 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u0631\u06a9\u06cc\u0633\u0679\u0631\u06cc\u0679\u0633 \u06a9\u0627 \u0631\u062f \u0639\u0645\u0644 \u0627\u0648\u0631 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0631\u06cc\u0646\u0688\u0631\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0644\u0627\u0632\u0645\u06cc \u067e\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u06d2 \u0644\u0626\u06d2 \u0627\u06cc\u06a9 \u0639\u0627\u0645 \u0646\u0645\u0648\u0646\u06c1 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-tsx\">function ChartWrapper({ config, data }) {\n  const ref = useRef<htmldivelement>(null);\n\n  useEffect(() => {\n    const chart = new SomeFastChartLib(ref.current, config);\n    chart.setData(data);\n    return () => chart.destroy();\n  }, [config, data]);\n\n  return ;\n}\n<\/htmldivelement><\/code><\/pre>\n<p>\u062c\u0628 \u062a\u06a9 \u0622\u067e \u06a9\u0633\u06cc \u0627\u06cc\u0633\u06d2 \u0639\u0644\u0627\u0642\u06d2 \u0645\u06cc\u06ba \u0646\u06c1 \u06c1\u0648\u06ba \u062c\u06c1\u0627\u06ba \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0688\u0631\u0627\u0626\u0646\u06af \u067e\u0631 \u067e\u06a9\u0633\u0644 \u0644\u06cc\u0648\u0644 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u060c \u06cc\u06c1 \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 ROI \u0627\u0642\u062f\u0627\u0645 \u06c1\u06d2\u06d4 \u067e\u06c1\u0644\u06d2 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u062a\u06a9 \u0631\u0633\u0627\u0626\u06cc \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u0645\u0646\u0627\u0633\u0628 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0646\u06c1 \u06c1\u0648 \u062a\u0648 \u0635\u0631\u0641 \u0627\u067e\u0646\u0627 \u0688\u0631\u0627\u0626\u0646\u06af \u0644\u0648\u067e \u0644\u06a9\u06be\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-7-when-canvas-isnt-enough-reach-for-webgl\">\u0645\u0631\u062d\u0644\u06c1 7: \u0627\u06af\u0631 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0627\u0641\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u062a\u0648 WebGL \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>Canvas 2D \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u06c1\u0632\u0627\u0631\u0648\u06ba \u0644\u0627\u0626\u0646 \u0633\u06cc\u06af\u0645\u0646\u0679\u0633 \u06a9\u0648 \u0622\u0631\u0627\u0645 \u0633\u06d2 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u06cc\u06c1 \u0645\u0644\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 <code>stroke()<\/code> \u062e\u0648\u062f<\/p>\n<p>WebGL (\u06cc\u0627 \u0627\u06cc\u06a9 \u0627\u0639\u0644\u06cc \u0633\u0637\u062d\u06cc \u0631\u06cc\u067e\u0631 \u062c\u06cc\u0633\u06d2: <code>regl<\/code>\u060c <code>twgl<\/code>\u060c <code>pixi.js<\/code>\u060c <code>deck.gl<\/code>) \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u0648 GPU \u0645\u06cc\u06ba \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0628\u063a\u06cc\u0631 \u067e\u0633\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u0627\u06a9\u06be\u0648\u06ba \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0635\u0644\u0627\u062d\u06cc\u062a \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0648 \u067e\u06cc\u0634\u06af\u06cc \u0627\u062e\u0631\u0627\u062c\u0627\u062a (\u0634\u06cc\u0688\u0631 \u0631\u0627\u0626\u0679\u0646\u06af \u0627\u0648\u0631 \u0628\u0641\u0631 \u0645\u06cc\u0646\u062c\u0645\u0646\u0679) \u0627\u062f\u0627 \u06a9\u0631\u0646\u0627 \u06c1\u0648\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u06a9\u0645 \u0633\u06d2 \u06a9\u0645 WebGL &quot;\u0633\u0646\u06af\u0644 \u0648\u0631\u0679\u06cc\u06a9\u0633 \u0634\u06cc\u0688\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0644\u0627\u0626\u0646 \u06a9\u06cc \u067e\u0679\u06cc&#8221; \u06a9\u0627 \u062e\u0627\u06a9\u06c1 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">const gl = canvas.getContext(\"webgl2\")!;\n\nconst program = gl.createProgram()!;\n\/\/ ... compile vertex + fragment shaders, link, get attribute location ...\n\nconst samplesBuffer = gl.createBuffer();\nfunction drawWebGL(samples: Float32Array) {\n  gl.bindBuffer(gl.ARRAY_BUFFER, samplesBuffer);\n  gl.bufferData(gl.ARRAY_BUFFER, samples, gl.STREAM_DRAW);\n  gl.useProgram(program);\n  gl.drawArrays(gl.LINE_STRIP, 0, samples.length);\n}\n<\/code><\/pre>\n<p>\u067e\u06cc\u0679\u0631\u0646 Canvas 2D \u062c\u06cc\u0633\u0627 \u06c1\u06cc \u06c1\u06d2\u06d4 RAF \u0644\u0648\u067e \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0627\u06cc\u06a9 \u0644\u0627\u0632\u0645\u06cc \u0688\u0631\u0627 \u06a9\u0627\u0644\u06d4 \u0641\u0631\u0642 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 GPU \u0627\u0635\u0644 \u0631\u0627\u0633\u0679\u0631\u0627\u0626\u0632\u06cc\u0634\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0686\u0627\u0631\u0679\u0646\u06af \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0627\u06ba \u062c\u0648 &quot;\u0645\u0644\u06cc\u0646 \u067e\u0648\u0627\u0626\u0646\u0679\u0633&#8221; \u06a9\u0627 \u062f\u0639\u0648\u06cc \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0628\u0627\u0644\u06a9\u0644 \u0627\u06cc\u0633\u0627 \u06c1\u06cc \u06a9\u0631 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1787149125_640_\u0631\u06cc-\u0627\u06cc\u06a9\u0679-\u0645\u06cc\u06ba-\u0627\u0639\u0644\u06cc-\u062a\u0639\u062f\u062f-\u0631\u06cc\u0626\u0644-\u0679\u0627\u0626\u0645-\u0688\u06cc\u0679\u0627-\u0631\u0646\u06af-\u0628\u0641\u0631\u0632.png\" alt=\"\u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u0627 \u0645\u0648\u0627\u0632\u0646\u06c1 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0641\u06cc\u0635\u0644\u06c1 \u0679\u0631\u06cc: \u06c1\u0632\u0627\u0631\u0648\u06ba \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u06cc\u0646\u0648\u0633 2D\u060c \u062f\u0633\u06cc\u0648\u06ba \u06c1\u0632\u0627\u0631 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u06cc\u0627 \u0627\u0633 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u06d2 \u0633\u0627\u062a\u06be WebGL\u060c 3D \u06a9\u06d2 \u0644\u06cc\u06d2 WebGPU\u060c \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0634\u06cc\u0688\u0631\u0632\u060c \u06cc\u0627 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u0645\u067e\u06cc\u0648\u0679\u06d4\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>Canvas 2D \u067e\u0631 \u0688\u06cc\u0641\u0627\u0644\u0679\u060c \u0627\u0648\u0631 \u0635\u0631\u0641 WebGL \u067e\u0631 \u0628\u0691\u06be\u06cc\u06ba \u0627\u06af\u0631 \u0622\u067e \u06cc\u06c1 \u062b\u0627\u0628\u062a \u06a9\u0631 \u0633\u06a9\u06cc\u06ba \u06a9\u06c1 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631\u0648\u0641\u0627\u0626\u0644\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0631\u06a9\u0627\u0648\u0679 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-8-keep-memory-flat\">\u0645\u0631\u062d\u0644\u06c1 8: \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u0648 \u0641\u0644\u06cc\u0679 \u0631\u06a9\u06be\u06cc\u06ba<\/h2>\n<p>\u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0627\u06cc\u067e\u0633 \u0622\u06c1\u0633\u062a\u06c1 \u0622\u06c1\u0633\u062a\u06c1 \u0645\u0631 \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u06af\u06be\u0646\u0679\u06c1 \u062a\u06a9 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0686\u0644\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0644\u06cc\u067e \u0679\u0627\u067e \u06a9\u0627 \u067e\u0646\u06a9\u06be\u0627 \u0627\u0646\u062f\u0631 \u0686\u0644\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u062a\u0642\u0631\u06cc\u0628\u0627 \u06c1\u0645\u06cc\u0634\u06c1 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u067e\u0646\u06d2 \u06a9\u0648\u0644\u06c1\u0648\u06ba \u06a9\u0648 \u067e\u0631\u0633\u06a9\u0648\u0646 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06cc\u06c1 \u062a\u06cc\u0646 \u0627\u0635\u0648\u0644 \u06c1\u06cc\u06ba:<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0639\u062f\u062f\u06cc \u0688\u06cc\u0679\u0627 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u0627\u0626\u067e \u06a9\u0631\u062f\u06c1 \u0635\u0641\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <code>Float32Array<\/code> 60,000 \u0641\u0644\u0648\u0679\u0646\u06af \u067e\u0648\u0627\u0626\u0646\u0679 \u0646\u0645\u0628\u0631\u0632 240KB \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u06c1\u06cc \u0633\u0627\u0626\u0632 \u06a9\u0627 \u0627\u06cc\u06a9 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 JavaScript \u0627\u0631\u06d2 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 1.4MB \u06c1\u0648\u06af\u0627 \u0627\u0648\u0631 \u06c1\u0631 \u062f\u06be\u06a9\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be GC \u067e\u0631\u06cc\u0634\u0631 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u062f\u0648\u0633\u0631\u0627\u060c \u0627\u0633 \u0646\u06d2 \u0633\u0628 \u06a9\u0686\u06be \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0628\u0627\u0646\u062f\u06be \u062f\u06cc\u0627\u06d4 \u0635\u0641 \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06c1 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u060c \u0631\u0646\u06af \u0628\u0641\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u062a\u0627\u0631\u06cc\u062e\u060c \u0642\u0637\u0627\u0631\u0648\u06ba\u060c \u0627\u0648\u0631 \u0632\u06cc\u0631 \u0627\u0644\u062a\u0648\u0627\u0621 \u06a9\u0627\u0645\u0648\u06ba \u067e\u0631 \u062d\u062f\u0648\u062f \u0631\u06a9\u06be\u06cc\u06ba\u06d4 \u062c\u0648 \u0628\u06be\u06cc <em>~ \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/em> \u0622\u062e\u0631 \u06a9\u0627\u0631 \u06cc\u06c1 \u0644\u0627\u0645\u062d\u062f\u0648\u062f \u0637\u0648\u0631 \u067e\u0631 \u0628\u0691\u06be\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u062a\u06cc\u0633\u0631\u0627\u060c \u0628\u0641\u0631\u0632 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u0633\u06cc\u0679 \u0627\u067e \u067e\u0631 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0645\u062e\u062a\u0635 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0641\u0631\u06cc\u0645\u0648\u06ba \u0645\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 60fps \u067e\u0631\u060c \u0641\u06cc \u0641\u0631\u06cc\u0645 \u0627\u06cc\u06a9 \u0646\u0626\u06cc \u0635\u0641 \u0645\u062e\u062a\u0635 \u06a9\u0631\u0646\u0627 60 \u0645\u062e\u062a\u0635 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0641\u06cc \u067e\u0644\u0627\u0679 \u06c1\u06d2\u06d4 \u067e\u0644\u0627\u0679\u0648\u06ba \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u0633\u06d2 \u0636\u0631\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-ts\">\/\/ Bad: fresh array every frame.\nfunction drawFrame() {\n  const snapshot = store.read(); \/\/ returns a new Float32Array\n  drawDecimated(ctx, snapshot, width);\n}\n\n\/\/ Better: reuse a draw buffer.\nconst drawBuf = new Float32Array(WINDOW_SIZE);\n\nfunction drawFrame() {\n  store.readInto(drawBuf); \/\/ writes into the existing buffer\n  drawDecimated(ctx, drawBuf, width);\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u0635\u0648\u0644 React \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062e\u0635\u0648\u0635 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u0635\u0648\u0644 \u06c1\u06d2 \u062c\u0633 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u062a\u0645\u0627\u0645 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0633\u0633\u0679\u0645\u0632 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0646 \u06a9\u0627 \u0630\u06a9\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 React \u06a9\u06cc \u0633\u0648\u0686 \u06a9\u06cc \u0634\u06a9\u0644 (&quot;\u06c1\u0631 \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u067e\u06cc\u0634 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u06cc\u06a9 \u0646\u0626\u06cc \u0635\u0641 \u062d\u0627\u0635\u0644 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2&#8221;) \u0627\u0633 \u06a9\u06d2 \u0628\u0631\u0639\u06a9\u0633 \u06c1\u06d2 \u062c\u0648 \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u0686\u0627\u06c1\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-9-scheduling-strategies\">\u0645\u0631\u062d\u0644\u06c1 9: \u0646\u0638\u0627\u0645 \u0627\u0644\u0627\u0648\u0642\u0627\u062a \u06a9\u06cc \u062d\u06a9\u0645\u062a \u0639\u0645\u0644\u06cc<\/h2>\n<p>\u062a\u062d\u0641\u0638\u0627\u062a \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u0627\u0631\u06a9\u0646 \u067e\u0648\u0644 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0642\u0637\u0627\u0631 \u06c1\u06d2\u06d4 \u06a9\u0628\u06be\u06cc \u06a9\u0628\u06be\u06cc \u0622\u067e \u0635\u0631\u0641 \u062a\u0631\u062c\u06cc\u062d\u0627\u062a \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0645\u0631\u06a9\u0632 \u06a9\u06d2 \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0648 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06d2 \u062c\u06be\u0627\u0691\u0648 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2\u06d4<\/p>\n<h3 id=\"heading-priority-queues\">\u062a\u0631\u062c\u06cc\u062d\u06cc \u0642\u0637\u0627\u0631<\/h3>\n<p>\u0686\u06be\u0648\u0679\u0627 \u062a\u0631\u062c\u06cc\u062d\u06cc \u0634\u06cc\u0688\u0648\u0644\u0631:<\/p>\n<pre><code class=\"language-ts\">type Priority = \"high\" | \"normal\" | \"low\";\n\nclass PriorityPool {\n  private queues: Record<priority job=\"\"> = { high: [], normal: [], low: [] };\n  private idle: Worker[];\n\n  enqueue(job: Job, priority: Priority = \"normal\") {\n    if (this.idle.length > 0) {\n      const worker = this.idle.pop()!;\n      this.dispatch(worker, job);\n    } else {\n      this.queues[priority].push(job);\n    }\n  }\n\n  private next(): Job | null {\n    for (const p of [\"high\", \"normal\", \"low\"] as const) {\n      const j = this.queues[p].shift();\n      if (j) return j;\n    }\n    return null;\n  }\n\n  private dispatch(worker: Worker, job: Job) {\n    worker.postMessage(job.payload, job.transferables);\n    worker.onmessage = (event) => {\n      job.resolve(event.data);\n      const next = this.next();\n      if (next) this.dispatch(worker, next);\n      else this.idle.push(worker);\n    };\n  }\n}\n<\/priority><\/code><\/pre>\n<p>\u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631\u060c \u062a\u06cc\u0646 \u0628\u0627\u0644\u0679\u06cc\u0627\u06ba \u06a9\u0627\u0641\u06cc \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba: \u06c1\u0627\u0626\u06cc (\u0635\u0627\u0631\u0641 \u06a9\u06cc \u0637\u0631\u0641 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u06cc \u06af\u0626\u06cc)\u060c \u062f\u0631\u0645\u06cc\u0627\u0646\u06cc (\u0645\u0633\u062a\u062d\u06a9\u0645 \u0631\u06cc\u0627\u0633\u062a \u06a9\u06cc \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc\u0627\u06ba)\u060c \u0627\u0648\u0631 \u06a9\u0645 (\u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0633\u0648\u06cc\u067e\u060c \u067e\u0631\u06cc \u0641\u06cc\u0686\u060c \u0679\u06cc\u0644\u06cc \u0645\u06cc\u0679\u0631\u06cc \u0641\u0644\u0634)\u06d4<\/p>\n<h3 id=\"heading-chunkable-work\">\u0679\u06a9\u0691\u06d2 \u0679\u06a9\u0691\u06d2 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06a9\u0627\u0645<\/h3>\n<p>\u0627\u06cc\u06a9 \u0622\u067e\u0631\u06cc\u0634\u0646 \u062c\u0633 \u0645\u06cc\u06ba 2 \u0633\u06cc\u06a9\u0646\u0688 \u0644\u06af\u062a\u06d2 \u06c1\u06cc\u06ba \u0622\u067e\u0631\u06cc\u0679\u0631 \u06a9\u0648 2 \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0644\u0627\u06a9 \u06a9\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u0648 \u0627\u0639\u0644\u06cc \u062a\u0631\u062c\u06cc\u062d\u06cc \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0627 \u062c\u0648\u0627\u0628 \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0648 \u0679\u06a9\u0691\u0627 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u0648\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">\/\/ In the worker:\nself.onmessage = async (event) => {\n  const { id, kind, payload } = event.data;\n  if (kind === \"decode_large\") {\n    const total = payload.byteLength;\n    for (let i = 0; i < total; i += CHUNK) {\n      const chunk = decodeChunk(payload, i, Math.min(i + CHUNK, total));\n      self.postMessage({ id, kind: \"progress\", chunk, offset: i });\n      \/\/ Yield so the worker can check its message queue.\n      await new Promise((r) => setTimeout(r, 0));\n    }\n    self.postMessage({ id, kind: \"done\" });\n  }\n  if (kind === \"cancel\") {\n    \/\/ ... abort the current job\n  }\n};\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u0627 \u0645\u0641\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u0648 \u0645\u0646\u0633\u0648\u062e\u06cc \u06a9\u06d2 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u06cc\u0627 \u0627\u0639\u0644\u06cc \u062a\u0631\u062c\u06cc\u062d\u06cc \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0628\u0691\u06d2 \u06a9\u0627\u0645\u0648\u06ba \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4 \u0637\u0648\u06cc\u0644 \u0645\u062f\u062a\u06cc \u06a9\u0627\u0645\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 (\u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0641\u0631\u0645 \u0648\u06cc\u0626\u0631 \u06a9\u0648 \u0686\u0645\u06a9\u0627\u0646\u0627\u060c \u0628\u0691\u06cc \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u0646\u0627\u060c \u06cc\u0627 \u067e\u06cc\u0645\u0627\u0646\u06d2 \u067e\u0631 \u067e\u06cc\u0634 \u06a9\u0631\u0646\u0627)\u060c \u06cc\u06c1 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-fan-out-and-fan-in\">\u0641\u06cc\u0646 \u0622\u0624\u0679 \u0627\u0648\u0631 \u0641\u06cc\u0646 \u0627\u0646<\/h3>\n<p>\u0627\u06cc\u06a9 \u0628\u0691\u06d2 \u06a9\u0627\u0645 \u06a9\u0648 N \u0679\u06a9\u0691\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u06cc\u06ba\u060c \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u0648 \u0645\u062e\u062a\u0644\u0641 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u0648 \u0628\u06be\u06cc\u062c\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0646\u062a\u0627\u0626\u062c \u062c\u0645\u0639 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-ts\">async function decodeFile(buffer: ArrayBuffer): Promise<decodedframe> {\n  const chunks = splitBuffer(buffer, 8);\n  const results = await Promise.all(\n    chunks.map((chunk) => pool.run<decodedframe>(\"decode\", chunk, [chunk])),\n  );\n  return results.flat();\n}\n<\/decodedframe><\/decodedframe><\/code><\/pre>\n<p>\u06cc\u06c1 \u0645\u062a\u0648\u0627\u0632\u06cc \u06a9\u0627\u0645 \u06a9\u06d2 \u0628\u0648\u062c\u06be \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u062a\u06a9 \u0644\u06a9\u06cc\u0631\u06cc \u0631\u0641\u062a\u0627\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0628\u06cc\u0686 \u06a9\u06d2 \u06a9\u0627\u0645\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u06cc\u06c1 \u0628\u06c1\u062a \u0627\u06c1\u0645 \u06c1\u06d2 \u062c\u06cc\u0633\u06d2 \u0631\u06cc\u06a9\u0627\u0631\u0688\u0646\u06af \u06a9\u0648 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u0646\u0627\u060c \u0637\u0648\u06cc\u0644 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1 \u06a9\u0631\u0646\u0627\u060c \u06cc\u0627 \u0641\u0648\u0644\u0688\u0631 \u0627\u06cc\u0645\u0628\u06cc\u0688\u0646\u06af \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0646\u0627\u06d4<\/p>\n<h2 id=\"heading-step-10-measure-sustained-performance\">\u0645\u0631\u062d\u0644\u06c1 10: \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u06cc \u0645\u0633\u0644\u0633\u0644 \u067e\u06cc\u0645\u0627\u0626\u0634<\/h2>\n<p>\u067e\u0631\u0648\u0641\u0627\u0626\u0644\u0631 \u0645\u06cc\u06ba \u0627\u0633\u067e\u0627\u0626\u06a9\u0633 \u0627\u06cc\u06a9 \u0686\u06cc\u0632 \u06c1\u06cc\u06ba\u06d4 \u06a9\u0686\u06be \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0645\u06cc\u06ba\u060c \u0627\u06cc\u06a9 \u06af\u06be\u0646\u0679\u06c1 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0633\u0633\u062a \u06c1\u067e \u0631\u06cc\u0646\u06af\u0646\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2. \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06c1\u0645 \u062f\u0648 \u0686\u06cc\u0632\u0648\u06ba \u06a9\u06cc \u067e\u06cc\u0645\u0627\u0626\u0634 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0641\u0631\u06cc\u0645 \u06a9\u06cc \u0645\u0633\u062a\u0642\u0644 \u0645\u0632\u0627\u062c\u06cc. \u06a9\u06cc\u0627 \u0622\u067e \u0645\u0633\u0644\u0633\u0644 60fps \u06a9\u0648 \u0645\u0627\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u06cc\u0627 \u06c1\u0631 \u0648\u0642\u062a \u0641\u0631\u06cc\u0645 \u0686\u06be\u0648\u0691 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u061f \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 FPS \u0645\u06cc\u0679\u0631:<\/p>\n<pre><code class=\"language-ts\">let lastTime = performance.now();\nlet frames = 0;\n\nfunction rafLoop(now: number) {\n  frames++;\n  if (now - lastTime >= 1000) {\n    const fps = (frames * 1000) \/ (now - lastTime);\n    frames = 0;\n    lastTime = now;\n    console.log(`fps: ${fps.toFixed(1)}`);\n  }\n  requestAnimationFrame(rafLoop);\n}\nrequestAnimationFrame(rafLoop);\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u06cc\u0645\u0627\u0646\u062f\u0627\u0631\u0627\u0646\u06c1 \u067e\u06cc\u0645\u0627\u0626\u0634 \u0648\u0646\u0688\u0648 \u0645\u06cc\u06ba \u0628\u062f\u062a\u0631\u06cc\u0646 \u0641\u0631\u06cc\u0645 \u06c1\u06d2\u06d4 \u0627\u0648\u0633\u0637 \u0641\u0631\u06cc\u0645 \u0679\u0627\u0626\u0645 \u06c1\u0646\u06af\u0627\u0645\u06c1 \u06a9\u0648 \u0686\u06be\u067e\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062f\u0648\u0633\u0631\u0627\u060c \u06c1\u067e \u0627\u0633\u062a\u062d\u06a9\u0627\u0645. DevTools Memory \u0679\u06cc\u0628 \u06a9\u06be\u0648\u0644\u06cc\u06ba\u060c \u06c1\u06cc\u067e \u0627\u0633\u0646\u06cc\u067e \u0634\u0627\u0679 \u0644\u06cc\u06ba\u060c \u0627\u06cc\u067e \u06a9\u0648 10 \u0645\u0646\u0679 \u062a\u06a9 \u0686\u0644\u0627\u0626\u06cc\u06ba\u060c \u062f\u0648\u0633\u0631\u0627 \u0633\u0646\u06cc\u067e \u0634\u0627\u0679 \u0644\u06cc\u06ba \u0627\u0648\u0631 \u0645\u0648\u0627\u0632\u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4 \u0641\u0631\u0642 \u0641\u0644\u06cc\u0679 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2\u06d4 \u0627\u06af\u0631 \u06cc\u06c1 \u0628\u0691\u06be\u062a\u0627 \u06c1\u06d2 \u062a\u0648\u060c \u0627\u06cc\u06a9 \u0631\u0633\u0627\u0648 \u06c1\u06d2. \u06cc\u0639\u0646\u06cc \u0627\u06cc\u0633\u06cc \u0628\u0646\u062f\u0634\u06cc\u06ba \u062c\u0648 \u0645\u0633\u062a\u0642\u0644 \u0633\u0627\u0645\u0639\u06cc\u0646\u060c \u0628\u0691\u06be\u062a\u06cc \u06c1\u0648\u0626\u06cc \u0635\u0641\u0648\u06ba\u060c \u06cc\u0627 \u0628\u0691\u06cc \u0627\u0634\u06cc\u0627\u0621 \u06a9\u0648 \u0631\u06a9\u06be\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0635\u0644\u06cc \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u0627\u067e\u0646\u06d2 \u062a\u062c\u0632\u06cc\u0627\u062a \u0645\u06cc\u06ba \u06c1\u06cc\u067e \u06a9\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0627\u0648\u0631 FPS \u06a9\u0648 \u062c\u0648\u0691 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u06cc \u0634\u06a9\u0627\u06cc\u062a \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0631\u06cc\u06af\u0631\u06cc\u0634\u0646 \u067e\u06a9\u0691 \u0633\u06a9\u06d2\u06d4<\/p>\n<h2 id=\"heading-case-study-19-eeg-channels\">\u06a9\u06cc\u0633 \u0627\u0633\u0679\u0688\u06cc: 19 \u0627\u06cc \u0627\u06cc \u062c\u06cc \u0686\u06cc\u0646\u0644\u0632<\/h2>\n<p>\u0627\u0633 \u0622\u0631\u0679\u06cc\u06a9\u0644 \u06a9\u0648 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u067e\u0631 \u0648\u0627\u067e\u0633 \u062c\u0627\u0626\u06cc\u06ba\u060c \u06c1\u0631 \u0627\u06cc\u06a9 1 \u06a9\u0644\u0648 \u06c1\u0631\u0679\u0632 \u067e\u0631 19 \u0686\u06cc\u0646\u0644\u0632 \u06c1\u06cc\u06ba\u060c \u0633\u0628\u06be\u06cc \u0628\u06cc\u06a9 \u0648\u0642\u062a \u067e\u06cc\u0634 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0633\u0628\u06be\u06cc \u06a9\u0648 \u06a9\u0626\u06cc \u06af\u06be\u0646\u0679\u06d2 \u06a9\u06d2 \u0631\u06cc\u06a9\u0627\u0631\u0688\u0646\u06af \u0633\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u06c1\u0645\u0648\u0627\u0631 \u0631\u06c1\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 <strong>\u0628\u062c\u0644\u06cc \u06a9\u0627 \u0686\u0627\u0631\u0679<\/strong>. \u0637\u0627\u0642\u062a\u0648\u0631\u060c \u0642\u0627\u0628\u0644 \u0627\u0648\u0631 \u062e\u0648\u0628\u0635\u0648\u0631\u062a\u06d4 \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0628\u06be\u06cc \u0628\u06be\u0627\u0631\u06cc \u06c1\u06d2\u06d4 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0645\u06cc\u06ba \u0646\u0645\u0627\u06cc\u0627\u06ba \u0627\u0636\u0627\u0641\u06c1 \u06c1\u0648\u0627\u060c \u0686\u0627\u0631\u0679\u0633 \u06a9\u06d2 \u0627\u0646\u0679\u0631\u0646\u0644\u0632 \u0646\u06d2 \u062e\u0648\u062f \u06c1\u0645\u0627\u0631\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0645\u0639\u0627\u0645\u0644\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0627\u0645 \u0644\u06cc\u0627 (\u0645\u06a9\u0645\u0644 \u06a9\u062b\u06cc\u0631 \u0645\u062d\u0648\u0631 \u0645\u0627\u0644\u06cc\u0627\u062a\u06cc \u0686\u0627\u0631\u0679 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 19 \u0633\u0627\u062f\u06c1 \u0644\u0627\u0626\u0646 \u067e\u0644\u0627\u0679)\u060c \u0627\u0648\u0631 \u0644\u0627\u0626\u0633\u0646\u0633\u0646\u06af \u0631\u06af\u0691 \u06a9\u0627 \u0627\u06cc\u06a9 \u0646\u0642\u0637\u06c1 \u062a\u06be\u0627\u06d4<\/p>\n<p>\u06c1\u0645 \u06c1\u06cc\u06ba <strong>\u067e\u0644\u0627\u0679<\/strong>. \u06cc\u06c1 \u0686\u06be\u0648\u0679\u0627\u060c \u062a\u06cc\u0632\u060c \u0627\u0648\u0631 \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u0679\u0627\u0626\u0645 \u0633\u06cc\u0631\u06cc\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0644\u06a9\u06be\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0645 \u06c1\u0648 \u06af\u06cc\u0627\u060c \u0641\u06cc \u0641\u0631\u06cc\u0645 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u0627 \u0648\u0642\u062a &quot;\u0628\u0639\u0636 \u0627\u0648\u0642\u0627\u062a \u0628\u062c\u0679 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1&#8221; \u0633\u06d2 &quot;\u06c1\u0645\u06cc\u0634\u06c1 \u0627\u0646\u0688\u0631 \u0628\u062c\u0679&#8221; \u0645\u06cc\u06ba \u0686\u0644\u0627 \u06af\u06cc\u0627\u060c \u0627\u0648\u0631 \u0645\u06cc\u0631\u06d2 \u06a9\u0645\u067e\u06cc\u0648\u0679\u0631 \u0646\u06d2 \u0622\u0648\u0627\u0632 \u0622\u0646\u0627 \u0628\u0646\u062f \u06a9\u0631 \u062f\u06cc \u062c\u06cc\u0633\u06d2 \u06cc\u06c1 \u0634\u0631\u0648\u0639 \u06c1\u0648\u0646\u06d2 \u06c1\u06cc \u0648\u0627\u0644\u0627 \u06c1\u06d2\u06d4 \u0635\u0631\u0641 \u0686\u0627\u0631\u0679 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u06c1\u0645\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u062e\u0627\u0644\u06cc \u062c\u06af\u06c1 \u0645\u0644 \u06af\u0626\u06cc \u062c\u0633 \u06a9\u06cc \u06c1\u0645\u06cc\u06ba \u0636\u0631\u0648\u0631\u062a \u062a\u06be\u06cc\u06d4<\/p>\n<p>\u0686\u0627\u0631\u0679 \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u0641\u0646 \u062a\u0639\u0645\u06cc\u0631 \u0646\u06d2 \u0628\u0627\u0642\u06cc \u06a9\u06cc\u0627. \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u0686\u0627\u0631 \u062f\u06be\u0627\u06af\u0648\u06ba \u067e\u0631 \u0686\u0644\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<ul>\n<li>\n<p><strong>1 \u062c\u0645\u0639 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u0627 \u06a9\u0627\u0631\u06a9\u0646<\/strong> \u0622\u0644\u06c1 SDK \u0633\u06d2 \u0628\u0630\u0631\u06cc\u0639\u06c1 IPC (\u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646 \u06a9\u0627 \u0645\u0642\u0627\u0645\u06cc \u0639\u0645\u0644 \u0631\u06cc\u0646\u0688\u0631\u0631 \u062a\u06a9) \u067e\u0691\u06be\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u06cc\u06a9<\/strong> <code>SharedArrayBuffer<\/code>    \u0627\u0633 \u0645\u06cc\u06ba \u062a\u0645\u0627\u0645 19 \u0686\u06cc\u0646\u0644\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u0648\u0644\u0646\u06af \u0648\u0646\u0688\u0648\u0632 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>1 \u067e\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06c1<\/strong> SAB \u067e\u0691\u06be\u06cc\u06ba \u0627\u0648\u0631 \u0688\u0631\u0627 \u06a9\u0631\u06cc\u06ba\u06d4 <code>OffscreenCanvas<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0631\u06a9\u0632\u06cc \u062f\u06be\u0627\u06af\u06c1<\/strong> \u06a9\u0631\u0648\u0645 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af: \u0686\u06cc\u0646\u0644 \u0644\u06cc\u0628\u0644\u0632\u060c \u06a9\u0646\u0679\u0631\u0648\u0644\u0632 \u0627\u0648\u0631 \u0627\u06cc\u0641 \u067e\u06cc \u0627\u06cc\u0633 \u0645\u06cc\u0679\u0631\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0645\u0634\u062a\u0631\u06a9\u06c1 \u0628\u0641\u0631 \u0644\u06d2 \u0622\u0624\u0679 \u0627\u06cc\u06a9 \u0628\u0691\u06cc \u0686\u06cc\u0632 \u06c1\u06d2\u06d4 <code>Float32Array<\/code> \u0627\u0633 \u0637\u0631\u062d \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u06af\u06cc\u0627: <code>[channel * samplesPerChannel + sampleIndex]<\/code>. \u062d\u0635\u0648\u0644 \u06a9\u0627\u0631\u06a9\u0646 \u0627\u06cc\u06a9 \u0646\u06cc\u0627 \u0646\u0645\u0648\u0646\u06c1 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06c1\u06cc\u0688 \u067e\u0648\u0627\u0626\u0646\u0679\u0631 \u0641\u06cc \u0686\u06cc\u0646\u0644 \u0633\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 ( <code>Int32Array<\/code> SAB \u0679\u06a9\u0691\u0627)\u06d4 \u067e\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06c1 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u0648\u0646\u0688\u0648 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-ts\">const CHANNELS = 19;\nconst WINDOW_SAMPLES = 60_000;\n\nconst sab = new SharedArrayBuffer(CHANNELS * WINDOW_SAMPLES * 4 + CHANNELS * 4);\nconst heads = new Int32Array(sab, 0, CHANNELS);\nconst samples = new Float32Array(sab, CHANNELS * 4, CHANNELS * WINDOW_SAMPLES);\n\nfunction writeSample(channel: number, value: number) {\n  const head = Atomics.load(heads, channel);\n  samples[channel * WINDOW_SAMPLES + head] = value;\n  Atomics.store(heads, channel, (head + 1) % WINDOW_SAMPLES);\n}\n<\/code><\/pre>\n<p>\u067e\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06c1 \u0686\u06cc\u0646\u0644 \u0628\u0641\u0631 \u06a9\u0648 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u060c \u0641\u06cc \u067e\u06a9\u0633\u0644 \u06a9\u0627\u0644\u0645 \u06a9\u0648 \u062e\u062a\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0688\u0631\u0627 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-ts\">\/\/ render.worker.ts\nfunction drawFrame() {\n  const ctx = offscreenCtx;\n  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n  for (let ch = 0; ch < CHANNELS; ch++) {\n    const start = ch * WINDOW_SAMPLES;\n    drawDecimatedRow(ctx, samples.subarray(start, start + WINDOW_SAMPLES), ch);\n  }\n  requestAnimationFrame(drawFrame);\n}\n<\/code><\/pre>\n<p>2024 M3 MacBook Pro 1kHz \u067e\u0631 19 \u0686\u06cc\u0646\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be 60fps\u060c \u06cc\u0627 144fps \u0627\u06af\u0631 \u0688\u0633\u067e\u0644\u06d2 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u0646 \u062a\u06be\u0631\u06cc\u0688 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 1% \u0633\u06d2 \u0646\u06cc\u0686\u06d2 \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0627\u0631\u06a9\u0646 \u0627\u0633\u067e\u06cc\u0626\u0631 \u06a9\u0648\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0645\u0642\u0627\u0645\u06cc \u0627\u06cc\u067e\u0633 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0645\u062d\u0633\u0648\u0633 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0633\u0628\u0642\u060c \u0645\u062e\u062a\u0635\u0631\u0627\u064b\u060c \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u06a9\u0627\u0645 \u0622\u067e \u06a9\u06d2 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0644\u0648\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u0635\u062d\u06cc\u062d \u0679\u0648\u0644 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u0646\u06a9\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-benchmarks-single-thread-vs-multi-thread\">\u0628\u06cc\u0646\u0686 \u0645\u0627\u0631\u06a9\u0633: \u0633\u0646\u06af\u0644 \u062a\u06be\u0631\u06cc\u0688\u0688 \u0627\u0648\u0631 \u0645\u0644\u0679\u06cc \u062a\u06be\u0631\u06cc\u0688\u0688<\/h2>\n<p>2024 M3 MacBook Pro \u067e\u0631 \u0627\u0633\u06cc \u0637\u0631\u062d \u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0627 \u0628\u0648\u062c\u06be \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0646\u062a\u0627\u0626\u062c \u06cc\u06c1 \u06c1\u06cc\u06ba\u06d4 \u0648\u06c1 \u0645\u0636\u0645\u0631 \u06c1\u06cc\u06ba\u060c \u0648\u0639\u062f\u06d2 \u0646\u06c1\u06cc\u06ba\u06d4<\/p>\n<table>\n<thead>\n<tr>\n<th>\u06a9\u0627\u0645 \u06a9\u0627 \u0628\u0648\u062c\u06be<\/th>\n<th>\u0635\u0631\u0641 \u0645\u06cc\u0646 \u062a\u06be\u0631\u06cc\u0688<\/th>\n<th>\u06a9\u0627\u0631\u06a9\u0646 \u067e\u0648\u0644<\/th>\n<th>\u0648\u0631\u06a9\u0631\u0632 + \u0627\u06cc\u0633 \u0627\u06d2 \u0628\u06cc<\/th>\n<th>\u0648\u0631\u06a9\u0631 + SAB + \u0622\u0641 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06cc\u0646\u0648\u0633<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>100MB \u0628\u0627\u0626\u0646\u0631\u06cc \u0641\u0627\u0626\u0644 \u06a9\u0648 \u067e\u0627\u0631\u0633 \u06a9\u0631\u06cc\u06ba\u06d4<\/td>\n<td>4.2 \u0633\u06cc\u06a9\u0646\u0688 (UI \u0645\u0646\u062c\u0645\u062f)<\/td>\n<td>1.1 \u0633\u06cc\u06a9\u0646\u0688<\/td>\n<td>1.0 \u0633\u06cc\u06a9\u0646\u0688<\/td>\n<td>1.0 \u0633\u06cc\u06a9\u0646\u0688<\/td>\n<\/tr>\n<tr>\n<td>1,000 \u0641\u0631\u06cc\u0645\u0632 \u06a9\u0648 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/td>\n<td>920ms<\/td>\n<td>280ms<\/td>\n<td>240ms<\/td>\n<td>240ms<\/td>\n<\/tr>\n<tr>\n<td>1M \u067e\u0648\u0627\u0626\u0646\u0679 \u0686\u0627\u0631\u0679 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af<\/td>\n<td>24fps<\/td>\n<td>24fps<\/td>\n<td>28fps<\/td>\n<td>60fps<\/td>\n<\/tr>\n<tr>\n<td>\u0679\u06cc\u0644\u06cc \u0645\u06cc\u0679\u0631\u06cc: 4 \u0627\u0633\u0679\u0631\u06cc\u0645\u0632 x 1000Hz<\/td>\n<td>22fps<\/td>\n<td>38fps<\/td>\n<td>55fps<\/td>\n<td>60fps<\/td>\n<\/tr>\n<tr>\n<td>EEG: 19 \u0686\u06cc\u0646\u0644\u0632 x 1kHz<\/td>\n<td>12fps<\/td>\n<td>25fps<\/td>\n<td>48fps<\/td>\n<td>60fps (144fps \u0645\u0645\u06a9\u0646 \u06c1\u06d2)<\/td>\n<\/tr>\n<tr>\n<td>\u0645\u06cc\u0646 \u062a\u06be\u0631\u06cc\u0688 JS \u0679\u0627\u0626\u0645 \u0641\u06cc \u0641\u0631\u06cc\u0645<\/td>\n<td>22ms<\/td>\n<td>8ms<\/td>\n<td>4ms<\/td>\n<td>< 1ms<\/td>\n<\/tr>\n<tr>\n<td>\u0645\u06cc\u0645\u0648\u0631\u06cc \u0627\u0648\u067e\u0631<\/td>\n<td>\u0628\u06cc\u0633 \u0644\u0627\u0626\u0646<\/td>\n<td>+50MB<\/td>\n<td>+20MB<\/td>\n<td>+20MB<\/td>\n<\/tr>\n<tr>\n<td>\u0622\u067e\u0631\u06cc\u0679\u0631 \u0627\u067e \u0679\u0627\u0626\u0645 (\u067e\u06c1\u0644\u06cc \u06a9\u0627\u0644)<\/td>\n<td>0<\/td>\n<td>2-5ms<\/td>\n<td>2-5ms<\/td>\n<td>5-10ms<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u067e\u06cc\u0679\u0631\u0646: \u0635\u0631\u0641 \u06a9\u0627\u0631\u06a9\u0646 \u0645\u062f\u062f \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06a9\u0627\u0631\u06a9\u0646\u0627\u0646 \u0627\u0648\u0631 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0645\u06cc\u0645\u0648\u0631\u06cc \u0632\u06cc\u0627\u062f\u06c1 \u0645\u062f\u062f \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0648\u0631\u06a9\u0631 \u067e\u0644\u0633 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0645\u06cc\u0645\u0648\u0631\u06cc \u067e\u0644\u0633 <code>OffscreenCanvas<\/code> \u0645\u062c\u06be\u06d2 \u067e\u06cc\u063a\u0627\u0645 \u0645\u0644\u062a\u0627 \u06c1\u06d2 \"\u0645\u06cc\u0646 \u062a\u06be\u0631\u06cc\u0688 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0686\u0627\u0631\u0679 \u0627\u0628\u06be\u06cc \u062a\u06a9 \u06c1\u0645\u0648\u0627\u0631 \u06c1\u06d2\u06d4\"<\/p>\n<p>\u0686\u0627\u0631\u0679 \u067e\u0631 \u0645\u0631\u06a9\u0648\u0632 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 '\u0648\u0631\u06a9\u0631' \u0633\u06d2 '\u0648\u0631\u06a9\u0631 \u067e\u0644\u0633' \u062a\u06a9 \u06a9\u06cc \u0686\u06be\u0644\u0627\u0646\u06af <code>OffscreenCanvas<\/code>\"\u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u0633\u0628 \u0633\u06d2 \u0628\u0691\u06cc \u062a\u0639\u0645\u06cc\u0631\u0627\u062a\u06cc \u0628\u06c1\u062a\u0631\u06cc \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u0648 \u0686\u06be\u0648\u0691\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-the-coopcoep-catch\">COOP\/COEP \u06a9\u06cc\u0686<\/h2>\n<p><code>SharedArrayBuffer<\/code>    \u0633\u067e\u06cc\u06a9\u0679\u0631\/\u0645\u06cc\u0644\u0679 \u0688\u0627\u0624\u0646 \u06a9\u06d2 \u0628\u0639\u062f 2020 \u0645\u06cc\u06ba \u06c1\u0627\u0626\u06cc \u0631\u06cc\u0632\u0648\u0644\u0648\u0634\u0646 \u0679\u0627\u0626\u0645\u0631\u0632 \u06a9\u0648 \u0628\u0691\u06be\u0627 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0627\u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0635\u0641\u062d\u06c1 \u067e\u0631 \u062f\u0648 HTTP \u06c1\u06cc\u0688\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u06cc\u06d2 \u062c\u0627\u0626\u06cc\u06ba:<\/p>\n<pre><code class=\"language-plaintext\">Cross-Origin-Opener-Policy: same-origin\nCross-Origin-Embedder-Policy: require-corp\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0635\u0641\u062d\u06c1 \"\u06a9\u0631\u0627\u0633 \u0627\u0648\u0631\u06cc\u062c\u0646 \u0622\u0626\u0633\u0648\u0644\u06cc\u0634\u0646\" \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 \u0627\u06cc\u06a9 \u0627\u0644\u06af \u062a\u06be\u0644\u06af \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u06d2 \u0627\u0646\u062f\u0631\u060c <code>SharedArrayBuffer<\/code> \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2 <code>performance.now()<\/code> \u06cc\u06c1 \u06c1\u0627\u0626\u06cc \u0631\u06cc\u0632\u0648\u0644\u0648\u0634\u0646 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u062e\u062a\u0644\u0641 \u062f\u06cc\u06af\u0631 \u0645\u062d\u062f\u0648\u062f APIs \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0627\u0644\u06af \u062a\u06be\u0644\u06af \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u0633\u06d2 \u0628\u0627\u06c1\u0631\u060c <code>SharedArrayBuffer<\/code> \u063a\u06cc\u0631 \u0645\u062a\u0639\u06cc\u0646\u06c1 <code>performance.now()<\/code> \u06cc\u06c1 \u062a\u0642\u0631\u06cc\u0628\u0627 1ms \u0635\u062d\u062a \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u062a\u06a9 \u0645\u062d\u062f\u0648\u062f \u06c1\u06d2 \u0627\u0648\u0631 \u062c\u0648\u06c1\u0631\u06cc \u067e\u0627\u0626\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0644\u0627\u06af\u062a \u0627\u06c1\u0645 \u06c1\u06d2\u06d4 <code>require-corp<\/code> \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u062a\u0645\u0627\u0645 \u06a9\u0631\u0627\u0633 \u0627\u0648\u0631\u06cc\u062c\u0646 \u0648\u0633\u0627\u0626\u0644 (CDN \u0633\u06d2 \u0627\u0645\u06cc\u062c\u0632\u060c \u0627\u06cc\u0645\u0628\u06cc\u0688\u0688 \u06cc\u0648\u0679\u06cc\u0648\u0628 \u0648\u06cc\u0688\u06cc\u0648\u0632\u060c \u062a\u06be\u0631\u0688 \u067e\u0627\u0631\u0679\u06cc \u0641\u0648\u0646\u0679\u0633\u060c \u0627\u06cc\u0646\u0627\u0644\u06cc\u0679\u06a9\u0633 \u0627\u0633\u06a9\u0631\u067e\u0679\u0633) \u06a9\u0648 \u0648\u0627\u0636\u062d \u0637\u0648\u0631 \u067e\u0631 \u062f\u0631\u062c \u0630\u06cc\u0644 \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0645\u0646\u062a\u062e\u0628 \u06a9\u06cc\u0627 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2: <code>Cross-Origin-Resource-Policy: cross-origin<\/code> \u06cc\u0627 <code>Cross-Origin-Embedder-Policy: credentialless<\/code>. \u0628\u06c1\u062a \u0633\u06cc \u062a\u06cc\u0633\u0631\u06cc \u067e\u0627\u0631\u0679\u06cc \u06a9\u06cc \u062e\u062f\u0645\u0627\u062a \u0627\u06cc\u0633\u0627 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u062c\u0633 \u0633\u06d2 \u0633\u0631\u0627\u06cc\u062a \u0679\u0648\u0679 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u062f\u0648 \u0639\u0645\u0644\u06cc \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2:<\/strong> \u0622\u067e \u0627\u0646 \u06c1\u06cc\u0688\u0631\u0632 \u06a9\u0648 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u067e\u0646\u06d2 \u067e\u06cc\u0634 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u06d2 \u0639\u0645\u0644 \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646 \u0627\u06cc\u067e\u0633 \u062c\u0648 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0648\u06cc\u0698\u0648\u0644\u0627\u0626\u0632\u06cc\u0634\u0646 \u0686\u0627\u06c1\u062a\u06cc \u06c1\u06cc\u06ba \u0627\u0633\u06d2 \u0628\u0637\u0648\u0631 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0641\u0639\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u0631\u0627\u0624\u0632\u0631 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2:<\/strong> \u0622\u067e \u06a9\u06cc \u062d\u0627\u0635\u0644 \u06a9\u0631\u062f\u06c1 \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u0627 \u0645\u0648\u0627\u0632\u0646\u06c1 \u06a9\u0631\u06cc\u06ba \u0628\u0645\u0642\u0627\u0628\u0644\u06c1 \u0627\u06cc\u0645\u0628\u06cc\u0688\u0646\u06af\u0632 \u06a9\u06d2 \u0648\u0632\u0646 \u0633\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u06be\u0648 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u0645\u0631\u06a9\u0632\u06cc \u062a\u0648\u062c\u06c1 \u06a9\u0627 \u0645\u0631\u06a9\u0632 \u06c1\u06d2 (Figma\u060c Google Docs)\u060c \u062a\u0648 \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0627\u0626\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0641\u0631\u06cc\u0642 \u062b\u0627\u0644\u062b \u06a9\u06d2 \u0648\u06cc\u062c\u0679 \u067e\u0631 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0642\u06cc\u0645\u062a\u06cc\u06ba \u062d\u0642\u06cc\u0642\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0628\u06c1\u062a \u0633\u06d2 \u0686\u0627\u0631\u0679\u0633 \u06cc\u0627 \u0633\u06af\u0646\u0644\u0632 \u0648\u0627\u0644\u06cc \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0646\u06c1\u06cc\u06ba SAB \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646 \u06a9\u0627 \u0631\u0627\u0633\u062a\u06c1 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0635\u0627\u0641 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-production-tradeoffs\">\u067e\u06cc\u062f\u0627\u0648\u0627\u0631 \u06a9\u06cc \u062a\u062c\u0627\u0631\u062a<\/h2>\n<p>\u0645\u0646\u062f\u0631\u062c\u06c1 \u0628\u0627\u0644\u0627 \u0633\u0628\u06be\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0627\u0646\u0686 \u0627\u0635\u0644 \u0627\u062e\u0631\u0627\u062c\u0627\u062a \u06cc\u06c1 \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u06a9\u0648\u0688 \u06a9\u06cc \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc:<\/strong> \u0648\u0631\u06a9\u0631 \u0633\u0646\u0679\u0631\u06a9 \u0627\u06cc\u067e\u0633 \u0645\u06cc\u06ba \u0633\u0646\u06af\u0644 \u062a\u06be\u0631\u06cc\u0688\u0688 \u0627\u06cc\u067e\u0633 (\u0645\u06cc\u0646 + \u0648\u0631\u06a9\u0631 + \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0627\u0642\u0633\u0627\u0645) \u06a9\u06d2 \u0645\u0642\u0627\u0628\u0644\u06d2 \u0633\u0648\u0631\u0633 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f 2 \u0633\u06d2 4 \u06af\u0646\u0627 \u0632\u06cc\u0627\u062f\u06c1 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0645\u06c1\u0630\u0628 \u067e\u06cc\u0645\u0627\u0646\u06d2 \u067e\u0631 \u06cc\u06c1 \u0627\u0633 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0645\u0639\u0645\u0648\u0644\u06cc \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06cc\u06c1 \u062a\u06a9\u0644\u06cc\u0641 \u062f\u06c1 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0688\u06cc\u0628\u06af\u0646\u06af:<\/strong> \u0688\u06be\u06cc\u0631 \u06a9\u06d2 \u0646\u0634\u0627\u0646\u0627\u062a \u062f\u06be\u0627\u06af\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0642\u0633\u06cc\u0645 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 Chrome DevTools \u0627\u0633\u06d2 2026 \u0645\u06cc\u06ba \u0627\u0686\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 (\u06c1\u0631 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u0627 \u0627\u067e\u0646\u0627 \u0688\u06cc\u0628\u06af\u0631 \u067e\u06cc\u0646\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2)\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633\u06d2 \u0627\u0628 \u0628\u06be\u06cc \u0633\u0646\u06af\u0644 \u062a\u06be\u0631\u06cc\u0688 \u0648\u0627\u0644\u06d2 \u0628\u06af \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0627\u0645 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u0646\u0688\u0644 \u0633\u0627\u0626\u0632:<\/strong> \u06c1\u0631 \u06a9\u0627\u0631\u06a9\u0646 \u0627\u06cc\u06a9 \u0627\u0644\u06af \u062d\u0635\u06c1 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u062f\u0631\u062e\u062a \u06c1\u0644\u0627\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0628\u0639\u0636 \u0627\u0648\u0642\u0627\u062a \u0645\u0631\u06a9\u0632\u06cc \u06a9\u0627\u0631\u06a9\u0646 \u0633\u06d2 \u0628\u062f\u062a\u0631 (\u06a9\u0645 \u0628\u0627\u0644\u063a) \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0648\u0631\u06a9\u0631 \u0628\u0646\u0688\u0644 \u06a9\u0627 \u0627\u0644\u06af \u0633\u06d2 \u0622\u0688\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0622\u063a\u0627\u0632 \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u0627 \u0648\u0642\u062a:<\/strong> \u0627\u06cc\u067e \u0633\u0679\u0627\u0631\u0679 \u0627\u067e \u067e\u0631 \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u0648 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 50 \u0633\u06d2 200 ms \u06a9\u0627 \u0627\u0636\u0627\u0641\u06c1 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633\u067e\u0644\u0634 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u067e\u0631\u06cc \u0648\u0627\u0631\u0645\u0646\u06af \u06cc\u0627 \u067e\u06c1\u0644\u06d2 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u062a\u0627\u062e\u06cc\u0631 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u0631\u0627\u0624\u0632\u0631 API \u0641\u0631\u0642:<\/strong> <code>localStorage<\/code>\u060c <code>document<\/code>\u0627\u0648\u0631 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 DOM APIs \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u067e\u0631 \u062f\u0633\u062a\u06cc\u0627\u0628 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u06a9\u0686\u06be \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0627\u06ba \u062c\u0646 \u067e\u0631 \u0622\u067e \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u062e\u0627\u0645\u0648\u0634\u06cc \u0633\u06d2 \u062a\u0648\u0691 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0648 \u0628\u0646\u0688\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062c\u0646 \u06a9\u06cc \u0622\u067e \u0646\u06d2 \u0627\u0628\u06be\u06cc \u062a\u06a9 \u06a9\u0648\u0634\u0634 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc \u06c1\u06d2\u060c \u0627\u0646\u06c1\u06cc\u06ba \u06a9\u0627\u0631\u06a9\u0646 \u06a9\u06d2 \u062d\u0648\u0627\u0644\u06d2 \u0633\u06d2 \u062c\u0627\u0646\u0686\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0644\u0627\u0632\u0645\u06cc \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u067e\u06cc\u0679\u0631\u0646 \u06a9\u06d2 \u062a\u06cc\u0646 \u0641\u0648\u0627\u0626\u062f \u0627\u0648\u0631 \u0646\u0642\u0635\u0627\u0646\u0627\u062a \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0627\u0639\u0644\u0627\u0646\u06cc\u06c1 \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc:<\/strong> \u0686\u0627\u0631\u0679 \u0641\u0631\u06cc\u0645\u060c \u0644\u06cc\u0628\u0644\u060c \u0627\u0648\u0631 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0633\u0628\u06be\u06cc \u0627\u0639\u0644\u0627\u0646\u06cc\u06c1 \u06c1\u06cc\u06ba\u06d4 \u0686\u0627\u0631\u0679 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0645\u0648\u062c\u0648\u062f \u0688\u06cc\u0679\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u06cc\u0646\u0688\u0631 \u0634\u062f\u06c1 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u06cc \u0622\u0633\u0627\u0646 \u0633\u0646\u06cc\u067e \u0634\u0627\u0679 \u0679\u06cc\u0633\u0679\u0646\u06af:<\/strong> \u06a9\u06cc\u0646\u0648\u0633 \u0645\u06cc\u06ba \u0627\u06cc\u0633\u0627 DOM \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u062c\u0633 \u0633\u06d2 \u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u06d2\u06d4 \u0688\u0631\u0627 \u067e\u0627\u062a\u06be \u0633\u06d2 \u0627\u0644\u06af \u0688\u06cc\u0679\u0627 \u067e\u0627\u062a\u06be \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u0633\u0679\u0648\u0631\u06cc\u062c \u0622\u0624\u0679 \u067e\u0679 \u06a9\u06d2 \u0633\u0646\u06cc\u067e \u0634\u0627\u0679\u0633 \u0644\u06cc\u06ba\u060c \u067e\u06a9\u0633\u0644\u0632 \u0646\u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0644\u0648\u067e\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0631\u062f \u0639\u0645\u0644 \u06a9\u06cc \u062c\u0632\u0648 \u06a9\u06cc \u06a9\u06c1\u0627\u0646\u06cc:<\/strong> \u0688\u0631\u0627 \u0644\u0648\u067e \u0627\u06cc\u06a9 \u0628\u0646\u062f\u0634 \u06c1\u06d2\u06d4 \u0688\u0631\u0627 \u0644\u0648\u067e \u0628\u0646\u0627\u0646\u0627 \u06a9\u0633\u06cc \u062c\u0632\u0648 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0634\u06a9\u0644 \u06c1\u06d2\u06d4 \u0627\u067e\u0646\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u062d\u062f\u0648\u062f \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u062d\u062a\u06cc\u0627\u0637 \u0633\u06d2 \u06a9\u0631\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u06c1\u0631 \u06a9\u06cc\u0646\u0648\u0633 \u0627\u06cc\u06a9 \u06a9\u0627\u0645 \u06a9\u0631\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06cc\u06c1 \u0642\u06cc\u0645\u062a \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u0646 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0646\u06c1\u06cc\u06ba 1kHz \u0688\u06cc\u0679\u0627 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u06cc\u06c1 \u062f\u0627\u062e\u0644\u06c1 \u06a9\u06cc \u0642\u06cc\u0645\u062a \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-should-you-build-like-this\">\u06a9\u06cc\u0627 \u06c1\u0645\u06cc\u06ba \u0627\u0633\u06d2 \u0627\u0633 \u0637\u0631\u062d \u0628\u0646\u0627\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2\u061f<\/h2>\n<p>\u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0634\u0631\u062d 30 \u0627\u067e \u0688\u06cc\u0679\u0633 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0641\u06cc \u0633\u0644\u0633\u0644\u06c1 \u0633\u06d2 \u06a9\u0645 \u06c1\u06d2\u060c \u062a\u0648 \u0627\u0633 \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0636\u0631\u0648\u0631\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0645\u0639\u0635\u0648\u0645 <code>setState<\/code> \u06cc\u06c1 \u0628\u06cc\u0686 \u0628\u06c1 \u0628\u06cc\u0686 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u06c1\u0644\u06d2 \u0627\u067e\u0646\u0627 \u067e\u0631\u0648\u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u060c \u062f\u0648\u0633\u0631\u0627 \u0628\u06c1\u062a\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0633 \u0641\u0646 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0627 \u062d\u0627\u0645\u0644 \u06c1\u06d2 \u0627\u06af\u0631:<\/p>\n<ul>\n<li>\n<p>\u0628\u06c1\u062a \u0633\u06d2 \u0633\u0644\u0633\u0644\u06d2 \u06cc\u0627 \u0633\u06cc\u0646\u0633\u0631<\/p>\n<\/li>\n<li>\n<p>\u067e\u06be\u0679\u06d2 \u0628\u063a\u06cc\u0631 \u0645\u0633\u0644\u0633\u0644 \u06a9\u06be\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>UX \u06a9\u0627 \u0648\u0639\u062f\u06c1 \u06af\u06be\u0646\u0679\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u06c1\u0645\u0648\u0627\u0631 \u0622\u067e\u0631\u06cc\u0634\u0646 \u06c1\u06d2\u060c \u0633\u06cc\u06a9\u0646\u0688 \u0646\u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0645\u06cc\u06ba \u0648\u06c1\u0627\u06ba \u062c\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 UI \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0645\u0627\u062f\u0631\u06cc \u0632\u0628\u0627\u0646 \u0645\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0646\u06c1 \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u0648\u06ba \u06af\u0627\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0628\u0648\u0631\u0646\u06af \u0631\u0648\u0644\u0632: \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627 <code>requestAnimationFrame<\/code> \u0627\u0646\u0636\u0645\u0627\u0645 \u0627\u0648\u0631 \u0628\u06cc\u0631\u0648\u0646\u06cc \u0627\u0633\u0679\u0648\u0631\u06cc\u062c\u06d4 \u0627\u06af\u0631 \u06cc\u06c1 \u06a9\u0627\u0641\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u062a\u0648 \u0627\u067e\u0646\u06d2 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u0648 \u0641\u0631\u0648\u063a \u062f\u06cc\u06ba\u06d4 \u0648\u0631\u06a9\u0631\u0632 \u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u0648 \u0641\u0631\u0648\u063a \u062f\u06cc\u06ba\u06d4 <code>postMessage<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0631\u06a9\u0627\u0648\u0679 \u06c1\u06d2\u06d4 \u0641\u0631\u0648\u063a <code>OffscreenCanvas<\/code> \u062c\u0628 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u0644\u0648\u067e \u062e\u0648\u062f \u06c1\u06cc \u0631\u06a9\u0627\u0648\u0679 \u06c1\u06d2\u06d4 \u06c1\u0631 \u0642\u062f\u0645 \u0627\u06cc\u06a9 \u062d\u0642\u06cc\u0642\u06cc \u062a\u0639\u0645\u06cc\u0631\u0627\u062a\u06cc \u0633\u0631\u0645\u0627\u06cc\u06c1 \u06a9\u0627\u0631\u06cc \u06c1\u06d2\u06d4 \u0627\u0646\u06c1\u06cc\u06ba \u062a\u0631\u062a\u06cc\u0628 \u0633\u06d2 \u0644\u06d2 \u0644\u0648\u06d4<\/p>\n<h2 id=\"heading-wrapping-up\">\u062e\u062a\u0645<\/h2>\n<p>\u0631\u062f\u0639\u0645\u0644\u060c \u0627\u06af\u0631 \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u062a\u0648\u060c \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u06a9\u06d2 \u062a\u0635\u0648\u0631 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u062a\u0645\u0627\u0645 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 React \u06a9\u0648 \u062f\u06be\u06a9\u06cc\u0644\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u0633\u06d2 \u0627\u067e\u0646\u06d2 \u06a9\u0646\u0688\u06a9\u0679\u0631 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u067e\u06cc\u0634\u06c1 \u0648\u0631 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u0627\u0648\u0631 \u06a9\u0627\u0631\u06a9\u0646\u0648\u06ba \u06a9\u0648 \u0628\u06be\u0627\u0631\u06cc \u0644\u0641\u0679\u0646\u06af \u06a9\u0631\u0646\u06d2 \u062f\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u062a\u06cc\u0646 \u0627\u0635\u0648\u0644 \u06c1\u06cc\u06ba \u062c\u0648 \u0645\u06cc\u0631\u06d2 \u0628\u0646\u0627\u0626\u06d2 \u06c1\u0648\u0626\u06d2 \u06c1\u0631 \u06c1\u0627\u0626\u06cc \u0641\u0631\u06cc\u06a9\u0648\u0626\u06cc\u0646\u0633\u06cc \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0627\u06cc\u067e \u067e\u0631 \u0644\u0627\u06af\u0648 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<ol>\n<li>\n<p><strong>\u0648\u0631\u06a9\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u06cc\u0646 UI \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/strong> \u0627\u06af\u0631 \u0645\u06cc\u0646 \u0631\u06cc\u0627\u0636\u06cc \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u0646\u06d2 \u0627\u0633\u06d2 \u063a\u0644\u0637 \u062c\u06af\u06c1 \u067e\u0631 \u0631\u06a9\u06be\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06c1\u0648 \u0633\u06a9\u06d2 \u062a\u0648 \u0628\u06be\u06cc\u062c\u06cc\u06ba\u060c \u0627\u06af\u0631 \u0636\u0631\u0648\u0631\u06cc \u06c1\u0648 \u062a\u0648 \u0634\u06cc\u0626\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u062f\u0648\u0646\u0648\u06ba \u0646\u06d2 \u06a9\u0644\u0648\u0646 \u06a9\u0648 \u0634\u06a9\u0633\u062a \u062f\u06cc\u06d4 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06be\u06cc\u062c\u0646\u06d2 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u067e\u06cc\u0686\u06cc\u062f\u06c1 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u06cc \u0627\u06cc\u06a9\u0679 \u06a9\u0648 \u0622\u0631\u06a9\u06cc\u0633\u0679\u0631\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u062f\u06cc\u06ba\u06d4 \u062e\u0635\u0648\u0635\u06cc \u0679\u0648\u0644\u0632 \u067e\u06cc\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u0627\u0633\u0679\u0648\u0631 \u0688\u06cc\u0679\u0627 \u06a9\u0627 \u0645\u0627\u0644\u06a9 \u06c1\u06d2\u060c \u0688\u0631\u0627 \u0644\u0648\u067e \u0627\u0642\u062f\u0627\u0631 \u06a9\u0627 \u0645\u0627\u0644\u06a9 \u06c1\u06d2\u060c \u0627\u0648\u0631 React \u0634\u06a9\u0644\u0648\u06ba \u06a9\u0627 \u0645\u0627\u0644\u06a9 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ol>\n<p>\u0627\u0633 \u06a9\u0648 \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0622\u067e \u06a9\u06cc React \u0627\u06cc\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u06a9\u0648\u0631 \u0633\u0633\u0679\u0645 \u0628\u0646\u0646\u06d2 \u0633\u06d2 \u0631\u0648\u06a9\u06d2 \u06af\u0627 \u062c\u0648 \u06c1\u0627\u0626\u06cc \u0641\u0631\u06cc\u06a9\u0648\u0626\u0646\u0633\u06cc \u0688\u06cc\u0679\u0627 \u067e\u0631 \u0627\u0691\u062a\u0627 \u06c1\u06d2\u06d4 \u0648\u0627\u0642\u0639\u06cc \u0627\u06cc\u06a9 \u0645\u0644\u0679\u06cc \u06a9\u0648\u0631 \u0633\u0633\u0679\u0645 \u0628\u0646\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u06d2 \u06c1\u0627\u0631\u0688 \u0648\u06cc\u0626\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06cc\u0645\u0627\u0646\u06c1 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0628\u063a\u06cc\u0631 \u0642\u0637\u0631\u0648\u06ba \u06a9\u06d2 \u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0628\u063a\u06cc\u0631 \u06a9\u0633\u06cc \u0631\u06a9\u0627\u0648\u0679 \u06a9\u06d2 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0648\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-references\">\u062d\u0648\u0627\u0644\u06c1 \u062c\u0627\u062a<\/h2>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0631\u062f \u0639\u0645\u0644 \u0628\u06c1\u062a \u0633\u06d2 \u0637\u0631\u06cc\u0642\u0648\u06ba \u0633\u06d2 \u0628\u06c1\u062a\u0631 \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u06a9\u0628\u06be\u06cc \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u06c1\u0632\u0627\u0631\u0648\u06ba \u0688\u06cc\u0679\u0627 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u062c\u0644\u062f \u06c1\u06cc \u0627\u062d\u0633\u0627\u0633 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u06a9\u06c1 React \u06a9\u0648\u0626\u06cc \u0641\u0627\u0626\u0631 \u06c1\u0648\u0632 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u0628\u0627\u063a \u06a9\u06cc \u0646\u0644\u06cc \u06a9\u06cc \u0637\u0631\u062d \u06c1\u06d2\u06d4 \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u0637\u0627\u0642\u062a \u0644\u06af\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u06af\u06be\u0627\u0633 \u0628\u06be\u0631 \u062c\u0627\u0626\u06d2 \u06af\u06cc [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":27956,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-27955","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/27955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=27955"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/27955\/revisions"}],"predecessor-version":[{"id":27957,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/27955\/revisions\/27957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/27956"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=27955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=27955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=27955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}