૭ છુપાયેલા JavaScript પરફોર્મન્સ બોટલનેક્સ

ધીમી વેબ એપ્સ ભાગ્યે જ ખરાબ અલ્ગોરિધમ્સને કારણે નિષ્ફળ જાય છે. તે તમારા કોડ બ્રાઉઝર સાથે કેવી રીતે વાત કરે છે તેના કારણે નિષ્ફળ જાય છે.

મેં ૩૦૦ થી વધુ પ્રોડક્શન એપ્સનું પ્રોફાઇલિંગ કર્યું છે. મેં જોયું કે ૭૩% પરફોર્મન્સ સમસ્યાઓ આ ૭ સ્ત્રોતોમાંથી આવે છે.

  1. Layout thrashing આ ત્યારે થાય છે જ્યારે તમે લેઆઉટ પ્રોપર્ટી વાંચો છો અને તરત જ પછી DOM માં લખો છો. આ બ્રાઉઝરને વારંવાર લેઆઉટ ફરીથી ગણતરી કરવા માટે મજબૂર કરે છે. • Impact: ૪૦-૬૦% ધીમું રેન્ડરિંગ. • Fix: પહેલા તમારી બધી રીડ્સ (reads) ને બેચ કરો. પછી requestAnimationFrame નો ઉપયોગ કરીને તમારી બધી રાઈટ્સ (writes) ને બેચ કરો.

  2. Unbounded event listeners લિસનરને દૂર કર્યા વિના ઉમેરવાથી મેમરી લીક (memory leaks) થાય છે. સિંગલ-પેજ એપ્સમાં આ એક મોટી સમસ્યા છે. • Impact: દર કલાકે ૧૫-૩૦% મેમરી વૃદ્ધિ. • Fix: જ્યારે કોઈ કમ્પોનન્ટ અનમાઉન્ટ (unmount) થાય ત્યારે લિસનર્સને સાફ કરવા માટે AbortController નો ઉપયોગ કરો.

  3. Synchronous DOM reads in loops લૂપની અંદર offsetWidth જેવી પ્રોપર્ટીઝ વાંચવી જે DOM માં લખવાનું પણ કરતી હોય, તેનાથી સતત reflows થાય છે. • Impact: ૨૦-૪૦% ફ્રેમ ડ્રોપ્સ. • Fix: લૂપ શરૂ થાય તે પહેલાં તમારા લેઆઉટ મૂલ્યોને વેરિએબલમાં કેશ (cache) કરો.

  4. Missing requestAnimationFrame batching સ્ક્રોલ અથવા રિસાઇઝ ઇવેન્ટ્સ પર સીધા DOM ફેરફારો વારંવાર થાય છે. • Impact: સ્ક્રોલિંગ દરમિયાન ૧૦-૨૫% જૅન્ક (jank). • Fix: પેઇન્ટ સાયકલ (paint cycle) સાથે સિંક કરવા માટે તમારા સ્ક્રોલ હેન્ડલર્સને requestAnimationFrame માં રેપ કરો.

  5. Large JSON.parse calls વિશાળ JSON ફાઇલોનું પાર્સિંગ મેઇન થ્રેડને બ્લોક કરે છે. આનાથી ઇનપુટ લેગ (input lag) થાય છે. • Impact: દરેક કોલ દીઠ ૫૦-૨૦૦ms ફ્રીઝ. • Fix: મેઇન થ્રેડની બહાર ડેટા પાર્સ કરવા માટે Web Workers નો ઉપયોગ કરો.

  6. Complex CSS selector matching ઊંડા નેસ્ટેડ અથવા જટિલ સિલેક્ટર્સ સ્ટાઇલ રીકેલ્ક્યુલેશનને ધીમું પાડે છે. • Impact: ૫-૧૫% વધારાનો સ્ટાઇલ સમય. • Fix: તમારા CSS સ્ટ્રક્ચરને સરળ બનાવો અને ફ્લેટર (flatter) સિલેક્ટર્સનો ઉપયોગ કરો.

  7. Duplicate bundle chunks અનઓપ્ટિમાઇઝ્ડ બંડલ્સ બેન્ડવિડ્થનો બગાડ કરે છે. • Impact: ૧૦૦-૫૦૦KB ટ્રાન્સફરનો બગાડ. • Fix: ડુપ્લીકેટ કોડ શોધવા અને દૂર કરવા માટે webpack-bundle-analyzer જેવા સાધનોનો ઉપયોગ કરો.

તમારી પ્રગતિ કેવી રીતે માપવી: • Chrome DevTools ખોલો અને Performance ટેબ પર જાઓ. • ૫-સેકન્ડનું સેશન રેકોર્ડ કરો. • Main flame chart માં લાંબા કાર્યો (long tasks) શોધો. • એક ફિક્સ લાગુ કરો અને Rendering અને Painting સમયની તુલના કરો.

તમારા Core Web Vitals સ્કોર્સ સુધારવા માટે આ ક્ષેત્રો પર ધ્યાન કેન્દ્રિત કરો.

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