۷ گلوگاه پنهان جاوااسکریپت و نحوه رفع آن‌ها

اپلیکیشن‌های وب کند به‌ندرت به دلیل الگوریتم‌های بد با مشکل مواجه می‌شوند. آن‌ها به این دلیل کند هستند که کد شما چگونه با مرورگر تعامل می‌کند.

من ۳۰۰ اپلیکیشن در محیط عملیاتی (production) را تحلیل کردم. ۷۳٪ از مشکلات عملکردی از این ۷ منبع ناشی می‌شوند.

۱. Layout thrashing این اتفاق زمانی رخ می‌دهد که شما یک ویژگی را می‌خوانید، در DOM چیزی می‌نویسید و دوباره می‌خوانید. این کار مرورگر را مجبور می‌کند تا بارها و بارها چیدمان (layout) را بازمحاسبه کند.

۲. Unbounded event listeners اضافه کردن یک شنودگر رویداد (event listener) بدون حذف کردن آن، باعث نشت حافظه (memory leaks) می‌شود. این یک مشکل بزرگ در اپلیکیشن‌های تک‌صفحه‌ای (SPA) است.

۳. Synchronous DOM reads in loops خواندن offsetWidth یا getBoundingClientRect داخل یک حلقه باعث ایجاد reflowهای مداوم می‌شود.

۴. Missing requestAnimationFrame batching تغییرات مستقیم DOM در رویدادهای scroll یا resize بیش از حد تکرار می‌شوند. این امر باعث ایجاد jank (لگ یا پرش) می‌شود.

۵. Large JSON.parse payloads تجزیه (parsing) فایل‌های بزرگ، رشته اصلی (main thread) را مسدود می‌کند. این موضوع باعث تأخیر در ورودی (input lag) می‌شود.

۶. Complex CSS selector matching انتخابگرهای بسیار تو در تو یا پیچیده، بازمحاسبه استایل‌ها را کند می‌کنند.

۷. Duplicate bundle chunks باندل‌های بزرگ و بهینه‌نشده، زمان انتقال داده را هدر می‌دهند.

نحوه اندازه‌گیری پیشرفت شما:

رفع این مشکلات باعث بهبود Core Web Vitals شما می‌شود، به‌ویژه Largest Contentful Paint و Interaction to Next Paint.

منبع: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5