7 છુપાયેલા JavaScript Bottlenecks અને તેને કેવી રીતે સુધારવા

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

મેં 300 પ્રોડક્શન એપ્લિકેશન્સનું પ્રોફાઇલિંગ કર્યું. 73% પરફોર્મન્સ સમસ્યાઓ આ 7 સ્ત્રોતોમાંથી આવે છે.

  1. Layout thrashing આ ત્યારે થાય છે જ્યારે તમે કોઈ પ્રોપર્ટી વાંચો છો, DOM માં લખો છો, અને ફરીથી વાંચો છો. આ બ્રાઉઝરને વારંવાર લેઆઉટ ફરીથી ગણતરી કરવા માટે મજબૂર કરે છે.
  1. Unbounded event listeners ઇવેન્ટ લિસનર ઉમેર્યા પછી તેને દૂર કર્યા વગર રાખવાથી મેમરી લીક (memory leaks) થાય છે. સિંગલ-પેજ એપ્સમાં આ એક મોટી સમસ્યા છે.
  1. Synchronous DOM reads in loops લૂપની અંદર offsetWidth અથવા getBoundingClientRect વાંચવાથી સતત reflows થાય છે.
  1. Missing requestAnimationFrame batching સ્ક્રોલ અથવા રિસાઇઝ ઇવેન્ટ્સ પર સીધા DOM ફેરફારો વારંવાર થાય છે. આનાથી jank થાય છે.
  1. Large JSON.parse payloads મોટી ફાઇલોનું પાર્સિંગ મેઇન થ્રેડને બ્લોક કરે છે. આના કારણે ઇનપુટ લેગ (input lag) થાય છે.
  1. Complex CSS selector matching ઊંડા પ્રમાણમાં નેસ્ટેડ અથવા જટિલ સિલેક્ટર્સ સ્ટાઇલ રીકેલ્ક્યુલેશનને ધીમું પાડે છે.
  1. 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