የጃቫስክሪፕት ማዕቀፎች ዋጋ

ብዙ የጃቫ ስክሪፕት ኮድ ከመጠቀም የበለጠ ድህረ ገጽን ለማዘግየት ምንም ፈጣን መንገድ የለም። ጃቫስክሪፕት ሲጠቀሙ ከአራት እጥፍ ያላነሰ የፕሮጀክቶች አፈጻጸም መክፈል አለቦት። የጣቢያው ጃቫ ስክሪፕት ኮድ የተጠቃሚዎችን ስርዓቶች እንዴት እንደሚጭን እነሆ፡-

• በአውታረ መረቡ ላይ ፋይል በማውረድ ላይ።
• ከወረደ በኋላ ያልታሸገ የምንጭ ኮድ መተንተን እና ማጠናቀር።
• የጃቫስክሪፕት ኮድ አፈፃፀም።
• የማህደረ ትውስታ ፍጆታ.

ይህ ጥምረት ይወጣል በጣም ውድ.

እና ተጨማሪ እና ተጨማሪ የJS ኮድ በፕሮጀክቶቻችን ውስጥ እናካትታለን። ድርጅቶች በማዕቀፎች እና እንደ React፣ Vue እና ሌሎች ባሉ ቤተ-መጻሕፍት ወደተደገፉ ገፆች ሲሄዱ፣ የጣቢያዎችን ዋና ተግባር በጃቫስክሪፕት ላይ በጣም ጥገኛ እያደረግን ነው።

የጃቫ ስክሪፕት ማዕቀፎችን በመጠቀም ብዙ በጣም ከባድ የሆኑ ጣቢያዎችን አይቻለሁ። እኔ ግን የጉዳዩ እይታ በጣም የተዛባ ነው። እውነታው ግን እኔ አብሬያቸው የምሰራቸው ኩባንያዎች በጣቢያ አፈጻጸም መስክ ውስብስብ ችግሮች ስላጋጠሟቸው በትክክል ወደ እኔ ማዞር ነው. በውጤቱም, ይህ ችግር ምን ያህል የተለመደ እንደሆነ እና አንድ ወይም ሌላ ማዕቀፍ ለአንድ ጣቢያ መሠረት ስንመርጥ ምን ​​ዓይነት "ቅጣቶች" እንደምንከፍል ለማወቅ ጉጉ ጀመርኩ.

ፕሮጀክቱ ይህን እንዳውቅ ረድቶኛል። የኤችቲቲፒ መዝገብ ቤት.

መረጃ

የኤችቲቲፒ ማህደር ፕሮጄክት በአጠቃላይ 4308655 ወደ መደበኛ ዴስክቶፕ ጣቢያዎች እና 5484239 የሞባይል ድረ-ገጾች አገናኞችን ይከታተላል። ከእነዚህ አገናኞች ጋር ከተያያዙት በርካታ መለኪያዎች መካከል በየገጾቹ ላይ የተገኙ የቴክኖሎጂዎች ዝርዝር አለ። ይህ ማለት የተለያዩ ማዕቀፎችን እና ቤተ-መጻሕፍትን የሚጠቀሙ በሺዎች የሚቆጠሩ ድረ-ገጾችን ናሙና ማድረግ እና ምን ያህል ኮድ ለደንበኞች እንደሚልኩ እና ይህ ኮድ በተጠቃሚዎች ስርዓቶች ላይ ምን ያህል ጭነት እንደሚፈጥር ማወቅ እንችላለን።

የማርች 2020 መረጃን ሰበሰብኩ፣ ይህም የደረስኩት በጣም የቅርብ ጊዜ ውሂብ ነው።

ምንም እንኳን ሌላ የመረጃ ምንጭ ለመጠቀም ባስብም በሁሉም ድረ-ገጾች ላይ የተጠቃለለ የኤችቲቲፒ ማህደር መረጃን React፣Vue እና Angular በመጠቀም ከተገኙ ገፆች ከሚገኘው መረጃ ጋር ለማነፃፀር ወሰንኩ።

የበለጠ ሳቢ ለማድረግ jQuery ን የሚጠቀሙ ድረ-ገጾችን ወደ የምንጭ መረጃ ስብስብ ጨምሬያለሁ። ይህ ቤተ-መጽሐፍት አሁንም በጣም ተወዳጅ ነው። እንዲሁም በReact፣Vue እና Angular ከሚቀርበው ነጠላ ገፅ አፕሊኬሽን (SPA) ሞዴል የተለየ ለድር ልማት አቀራረብ አስተዋውቋል።

የፍላጎት ቴክኖሎጂዎችን ሲጠቀሙ የተገኙ ጣቢያዎችን የሚወክሉ በ HTTP ማህደር ውስጥ ያሉ አገናኞች

ማዕቀፍ ወይም ቤተ-መጽሐፍት
የተንቀሳቃሽ ስልክ ጣቢያዎች አገናኞች
ወደ መደበኛ ጣቢያዎች አገናኞች

jQuery
4615474
3714643

ምላሽ
489827
241023

እይታ
85649
43691

ቀጠን
19423
18088

ተስፋዎች እና ህልሞች

ወደ ዳታ ትንተና ከመሄዳችን በፊት ተስፋ ማድረግ ስለምፈልገው ነገር ማውራት እፈልጋለሁ።

ተስማሚ በሆነ ዓለም ውስጥ ማዕቀፎች የገንቢዎችን ፍላጎት ከማሟላት ባለፈ ከጣቢያችን ጋር ለሚሠራ አማካኝ ተጠቃሚ የተወሰነ ጥቅም መስጠት አለባቸው ብዬ አምናለሁ። አፈጻጸም ከእነዚህ ጥቅሞች ውስጥ አንዱ ብቻ ነው። ተደራሽነት እና ደህንነት የሚጫወቱት እዚህ ነው። ግን ይህ በጣም አስፈላጊው ብቻ ነው.

ስለዚህ, ተስማሚ በሆነ ዓለም ውስጥ, አንዳንድ አይነት ማዕቀፍ ከፍተኛ አፈጻጸም ያለው ጣቢያ ለመፍጠር ቀላል ማድረግ አለበት. ይህ መደረግ ያለበት አንድም ማዕቀፉ ገንቢው አንድን ፕሮጀክት የሚገነባበት ትክክለኛ መሠረት በመስጠቱ ወይም በልማት ላይ ገደቦችን ስለሚያስገድድ የተለወጠ ነገር ልማትን የሚያወሳስቡ መስፈርቶችን በማስቀመጡ ነው። ቀርፋፋ መሆን.

በጣም ጥሩው ማዕቀፎች ሁለቱንም ማድረግ አለባቸው: ጥሩ መሰረት ይስጡ, እና በስራው ላይ ገደቦችን ያስገድቡ, ይህም ጥሩ ውጤት እንዲያገኙ ያስችልዎታል.

የመረጃውን መካከለኛ እሴቶችን መተንተን የምንፈልገውን መረጃ አይሰጠንም. እና, በእውነቱ, ይህ አካሄድ ከእኛ ትኩረት ይወጣል በጣም ጠቃሚ. በምትኩ፣ ካለኝ መረጃ በመቶኛ አገኘሁ። እነዚህ 10፣ ​​25፣ 50 (ሚዲያን)፣ 75፣ 90 በመቶዎች ናቸው።

በተለይ በ10ኛ እና 90ኛ ፐርሰንታይሎች ላይ ፍላጎት አለኝ። 10ኛው ፐርሰንታይል ለአንድ የተወሰነ ማዕቀፍ እጅግ በጣም ጥሩውን አፈጻጸም (ወይም ቢያንስ ብዙ ወይም ባነሰ ቅርበት) ይወክላል። በሌላ አነጋገር፣ ይህ ማለት የተወሰነ ማዕቀፍ የሚጠቀሙ 10% ጣቢያዎች ብቻ ወደዚህ ደረጃ ወይም ከዚያ በላይ ያደርጉታል። 90ኛው ፐርሰንታይል በበኩሉ የሳንቲሙ ሌላኛው ወገን ነው - ነገሮች ምን ያህል መጥፎ ሊሆኑ እንደሚችሉ ያሳየናል። 90ኛው ፐርሰንታይል ከኋላው የሚከተሏቸው ድረ-ገጾች ናቸው—እነዚህ 10% በጣም የጄኤስ ኮድ ያላቸው ወይም ኮዳቸውን በዋናው ክር ላይ ለመስራት ረጅም ጊዜ ያላቸው።

የጃቫስክሪፕት ኮድ መጠኖች

ሲጀመር በአውታረ መረቡ ላይ በተለያዩ ጣቢያዎች የሚተላለፉትን የጃቫስክሪፕት ኮድ መጠን መተንተን ተገቢ ነው።

ወደ ተንቀሳቃሽ መሳሪያዎች የተላለፈው የጃቫስክሪፕት ኮድ (Kb) መጠን

መቶኛ
10
25
50
75
90

ሁሉም ጣቢያዎች
93.4 
196.6 
413.5 
746.8 
1201.6 

jQuery ጣቢያዎች
110.3 
219.8 
430.4 
748.6 
1162.3 

Vue ጣቢያዎች
244.7 
409.3 
692.1 
1065.5 
1570.7 

የማዕዘን ቦታዎች
445.1 
675.6 
1066.4 
1761.5 
2893.2 

ምላሽ ጣቢያዎች
345.8 
441.6 
690.3 
1238.5 
1893.6 

ወደ ተንቀሳቃሽ መሳሪያዎች የተላከው የጃቫስክሪፕት ኮድ መጠን

ወደ ዴስክቶፕ መሳሪያዎች የተላለፈው የጃቫስክሪፕት ኮድ (Kb) መጠን

መቶኛ
10
25
50
75
90

ሁሉም ጣቢያዎች
105.5 
226.6 
450.4 
808.8 
1267.3 

jQuery ጣቢያዎች
121.7 
242.2 
458.3 
803.4 
1235.3 

Vue ጣቢያዎች
248.0 
420.1 
718.0 
1122.5 
1643.1 

የማዕዘን ቦታዎች
468.8 
716.9 
1144.2 
1930.0 
3283.1 

ምላሽ ጣቢያዎች
308.6 
469.0 
841.9 
1472.2 
2197.8 

ወደ ዴስክቶፕ መሳሪያዎች የተላከው የጃቫስክሪፕት ኮድ መጠን

ጣቢያዎች ወደ መሳሪያዎች ስለሚልኩት የJS ኮድ መጠን ብቻ ከተነጋገርን ሁሉም ነገር እርስዎ እንደሚጠብቁት ይመስላል። ይኸውም ከማዕቀፎቹ ውስጥ አንዱ ጥቅም ላይ ከዋለ ይህ ማለት ተስማሚ በሆነ ሁኔታ ውስጥ እንኳን የጣቢያው ጃቫስክሪፕት ኮድ መጠን ይጨምራል ማለት ነው. ይህ አያስገርምም - የጃቫ ስክሪፕት ማዕቀፍ የአንድ ጣቢያ መሰረት ማድረግ አይችሉም እና የፕሮጀክቱ JS ኮድ መጠን በጣም ዝቅተኛ ይሆናል ብለው መጠበቅ አይችሉም።

በዚህ መረጃ ላይ የሚያስደንቀው ነገር አንዳንድ ማዕቀፎች እና ቤተ-መጻሕፍት ለፕሮጀክት ከሌሎች የተሻለ መነሻ ተደርጎ ሊወሰዱ መቻላቸው ነው። jQuery ያላቸው ጣቢያዎች ምርጥ ሆነው ይታያሉ። በዴስክቶፕ የድረ-ገጾች ስሪቶች ላይ ከሁሉም ድረ-ገጾች 15% የበለጠ ጃቫስክሪፕት ይይዛሉ እና በሞባይል ላይ 18% ተጨማሪ ይይዛሉ። (በእርግጥ፣ እዚህ አንዳንድ የመረጃ ሙስናዎች አሉ። እውነታው ግን jQuery በብዙ ድረ-ገጾች ላይ አለ፣ ስለዚህ እንደዚህ አይነት ድረ-ገጾች ከሌሎቹ በበለጠ ከጠቅላላው የጣቢያዎች ብዛት ጋር የተቆራኙ መሆናቸው ተፈጥሯዊ ነው። ለእያንዳንዱ ማዕቀፍ ውሂብ ይወጣል።)

ከ15-18% የጨመረው የኮድ ድምጽ ጉልህ አሃዝ ቢሆንም ይህንን ከሌሎች ማዕቀፎች እና ቤተ-መጻሕፍት ጋር በማነፃፀር አንድ ሰው በ jQuery የሚጣለው "ታክስ" በጣም ዝቅተኛ ነው ብሎ መደምደም ይችላል. በ10ኛ ፐርሰንታይል ውስጥ ያሉ የማዕዘን ጣቢያዎች ከሁሉም ጣቢያዎች 344% ተጨማሪ ውሂብ ወደ ዴስክቶፕ፣ እና 377% ተጨማሪ ወደ ሞባይል ይልካሉ። ምላሽ ሰጪ ጣቢያዎች ከሁሉም ጣቢያዎች 193% ተጨማሪ ኮድ ወደ ዴስክቶፕ መላክ እና 270% ተጨማሪ ወደ ሞባይል ቀጣዩ ከባድ ናቸው።

ቀደም ሲል ፣ ምንም እንኳን ማዕቀፍን በመጠቀም የተወሰነ መጠን ያለው ኮድ በፕሮጀክቱ ውስጥ እንደሚካተት ገልጫለሁ ፣ በእሱ ላይ በሚሰራበት መጀመሪያ ላይ ፣ ማዕቀፉ በሆነ መንገድ ገንቢውን ሊገድበው እንደሚችል ተስፋ አደርጋለሁ። በተለይም, ከፍተኛውን የኮድ መጠን ስለመገደብ እየተነጋገርን ነው.

የሚገርመው፣ የ jQuery ጣቢያዎች ይህንን ሃሳብ ይከተላሉ። በ10ኛ ፐርሰንታይል (በ15-18%) ከሁሉም ሳይቶች በመጠኑ የከበዱ ሲሆኑ፣ በሁለቱም ዴስክቶፕ እና ሞባይል ላይ በ90ኛ ፐርሰንታይል በመጠኑ ቀለለ። ይህ ማለት ይህ በጣም ጠቃሚ ጥቅም ነው ማለት አይደለም, ነገር ግን jQuery ጣቢያዎች, ቢያንስ, ትልቅ የጃቫስክሪፕት ኮድ መጠኖች የላቸውም ሊባል ይችላል, ያላቸውን ትልቅ ስሪቶች ውስጥ.

ግን ስለ ሌሎች ማዕቀፎች ተመሳሳይ ነገር ሊባል አይችልም.

ልክ እንደ 10ኛ ፐርሰንታይል ሁኔታ፣ በ90ኛው ፐርሰንታይል ጣቢያዎች በ Angular እና React ላይ ከሌሎች ድረ-ገጾች ይለያሉ፣ ግን በሚያሳዝን ሁኔታ፣ ለከፋው ይለያያሉ።

በ90ኛ ፐርሰንታይል፣ Angular sites ከሁሉም ድረ-ገጾች 141% ተጨማሪ መረጃ ወደ ሞባይል፣ እና 159% ተጨማሪ ወደ ዴስክቶፕ ይልካሉ። ምላሽ ሰጪ ጣቢያዎች ከሁሉም ጣቢያዎች 73% የበለጠ ወደ ዴስክቶፕ፣ እና 58% ተጨማሪ ወደ ሞባይል ይልካሉ። በ90ኛ ፐርሰንታይል ላይ ያለው የReact ጣቢያዎች ኮድ መጠን 2197.8 ኪባ ነው። ይህ ማለት እንደዚህ ያሉ ድረ-ገጾች በVue ላይ ተመስርተው ከተወዳዳሪዎቻቸው የበለጠ 322.9 ኪባ ተጨማሪ መረጃ ወደ ተንቀሳቃሽ መሳሪያዎች ይልካሉ ማለት ነው። በ Angular እና React እና በሌሎች ድረ-ገጾች መካከል ያለው ልዩነት የበለጠ ትልቅ ነው። ለምሳሌ፣ የዴስክቶፕ ሪአክት ሳይቶች ከተመሳሳዩ የVue ሳይቶች ይልቅ 554.7 ኪባ ተጨማሪ JS ኮድ ወደ መሳሪያዎች ይልካሉ።

በዋናው ክር ውስጥ የጃቫ ስክሪፕት ኮድን ለማስኬድ ጊዜ ወስዷል

ከላይ ያለው መረጃ በጥናት ላይ ያሉ ማዕቀፎችን እና ቤተ-መጻሕፍትን የሚጠቀሙ ጣቢያዎች ከፍተኛ መጠን ያለው የጃቫ ስክሪፕት ኮድ እንደያዙ በግልጽ ያሳያል። ግን በእርግጥ ይህ የእኛ እኩልታ ክፍል ብቻ ነው።

የጃቫ ስክሪፕት ኮድ በአሳሹ ውስጥ ከደረሰ በኋላ ሊሠራ የሚችል ሁኔታ ማምጣት አለበት። በተለይም ብዙ ችግሮች የሚከሰቱት በዋናው የአሳሽ ክር ውስጥ ካለው ኮድ ጋር መከናወን ያለባቸው በእነዚያ ድርጊቶች ነው። ዋናው ክር የተጠቃሚ እርምጃዎችን ለማስኬድ, ቅጦችን ለማስላት, የገጹን አቀማመጥ ለመገንባት እና ለማሳየት ሃላፊነት አለበት. ዋናውን ክር በጃቫ ስክሪፕት ስራዎች ካጨናነቁት, የተቀሩትን ስራዎች በጊዜ ውስጥ ለማጠናቀቅ እድሉ አይኖረውም. ይህ በገጾቹ ሥራ ውስጥ ወደ መዘግየት እና "ብሬክስ" ይመራል.

የኤችቲቲፒ ማህደር ዳታቤዝ የጃቫ ስክሪፕት ኮድን በV8 ሞተር ዋና ክር ውስጥ ለመስራት ምን ያህል ጊዜ እንደሚወስድ መረጃ አለው። ይህ ማለት ይህንን መረጃ እንሰበስባለን እና ዋናው ክር የተለያዩ ድረ-ገጾችን ጃቫስክሪፕት ለመስራት ምን ያህል ጊዜ እንደሚወስድ ማወቅ እንችላለን።

በተንቀሳቃሽ መሳሪያዎች ላይ ከስክሪፕት ሂደት ጋር የተያያዘ የአቀነባባሪ ጊዜ (በሚሊሰከንዶች)

መቶኛ
10
25
50
75
90

ሁሉም ጣቢያዎች
356.4
959.7
2372.1
5367.3
10485.8

jQuery ጣቢያዎች
575.3
1147.4
2555.9
5511.0
10349.4

Vue ጣቢያዎች
1130.0
2087.9
4100.4
7676.1
12849.4

የማዕዘን ቦታዎች
1471.3
2380.1
4118.6
7450.8
13296.4

ምላሽ ጣቢያዎች
2700.1
5090.3
9287.6
14509.6
20813.3

በሞባይል መሳሪያዎች ላይ ከስክሪፕት ሂደት ጋር የተያያዘ የአቀነባባሪ ጊዜ

በዴስክቶፕ መሳሪያዎች ላይ ከስክሪፕት ሂደት ጋር የተያያዘ የአቀነባባሪ ጊዜ (በሚሊሰከንዶች)

መቶኛ
10
25
50
75
90

ሁሉም ጣቢያዎች
146.0
351.8
831.0
1739.8
3236.8

jQuery ጣቢያዎች
199.6
399.2
877.5
1779.9
3215.5

Vue ጣቢያዎች
350.4
650.8
1280.7
2388.5
4010.8

የማዕዘን ቦታዎች
482.2
777.9
1365.5
2400.6
4171.8

ምላሽ ጣቢያዎች
508.0
1045.6
2121.1
4235.1
7444.3

በዴስክቶፕ መሳሪያዎች ላይ ከስክሪፕት ሂደት ጋር የተዛመደ የአቀነባባሪ ጊዜ

እዚህ አንድ በጣም የታወቀ ነገር ማየት ይችላሉ.

ለጀማሪዎች jQuery ያላቸው ድረ-ገጾች ለጃቫስክሪፕት ሂደት ከሌሎቹ ድረ-ገጾች ጋር ​​ሲነጻጸሩ በጣም ያነሰ ወጪ ያደርጋሉ። በ10ኛ ፐርሰንታይል፣ ከሁሉም ጣቢያዎች ጋር ሲነጻጸር፣ በሞባይል ላይ ያሉ jQuery ሳይቶች 61% ተጨማሪ ጊዜ የJS ኮድ በዋናው ክር ላይ ያሳልፋሉ። በዴስክቶፕ jQuery ድረ-ገጾች ላይ፣ የማስኬጃ ጊዜ በ37 በመቶ ይጨምራል። በ90ኛው ፐርሰንታይል፣ jQuery ሳይቶች ከድምር ውጤቶች ጋር በጣም ቅርብ ናቸው። በተለይም በሞባይል መሳሪያዎች ላይ የ jQuery ድረ-ገጾች በዋናው ክር ላይ ከሁሉም ጣቢያዎች 1.3% ያነሰ ጊዜ እና በዴስክቶፕ መሳሪያዎች ላይ 0.7% ያነሰ ጊዜ ያሳልፋሉ።

በእኛ ደረጃ አሰጣጥ በኩል በዋናው ክር ላይ ባለው ከፍተኛ ጭነት ተለይተው የሚታወቁት ማዕቀፎች ናቸው. ይህ እንደገና አንግል እና ምላሽ ነው። በሁለቱ መካከል ያለው ብቸኛው ልዩነት የAngular ድረ-ገጾች ከ React sites ይልቅ ወደ አሳሾች ብዙ ኮድ ሲልኩ፣ Angular sites ኮድን ለመስራት ጊዜ የሚወስዱት የሲፒዩ ጊዜ ነው። በጣም ያነሰ።

በ10ኛ ፐርሰንታይል፣ የዴስክቶፕ Angular ሳይቶች በዋናው ክር ሂደት JS ኮድ ላይ ከሁሉም ጣቢያዎች 230% የበለጠ ጊዜ ያሳልፋሉ። ለሞባይል ጣቢያዎች ይህ አሃዝ 313% ነው። ምላሽ ሰጪ ጣቢያዎች በጣም መጥፎ ፈጻሚዎች ናቸው። በዴስክቶፕ ላይ ከሁሉም ጣቢያዎች 248% ተጨማሪ ጊዜን የማስኬጃ ኮድ እና 658% በሞባይል ላይ ያሳልፋሉ። 658% የትየባ አይደለም። በ10ኛ ፐርሰንታይል፣ React ጣቢያዎች ኮዳቸውን በማስኬድ 2.7 ሰከንድ የዋና ክር ጊዜ ያሳልፋሉ።

90ኛው ፐርሰንታይል፣ ከእነዚህ ግዙፍ ቁጥሮች ጋር ሲወዳደር፣ ቢያንስ ትንሽ የተሻለ ይመስላል። ከሁሉም ድረ-ገጾች ጋር ​​ሲወዳደር የAngular ፕሮጀክቶች 29% ተጨማሪ ጊዜ በዴስክቶፕ መሳሪያዎች ላይ በዋናው ክር እና 27% ተጨማሪ ጊዜ በተንቀሳቃሽ መሳሪያዎች ላይ ያሳልፋሉ። በReact ድረ-ገጾች ውስጥ፣ ተመሳሳይ አሃዞች በቅደም ተከተል 130% እና 98% ይመስላሉ ።

ለ90ኛ ፐርሰንታይል የመቶኛ ልዩነቶች ለ10ኛ ፐርሰንታይል ከተመሳሳይ እሴቶች የተሻሉ ናቸው። ግን እዚህ ጊዜን የሚያመለክቱ ቁጥሮች በጣም አስፈሪ እንደሚመስሉ ማስታወስ ጠቃሚ ነው. በዋናው የሞባይል ክር ​​ላይ 20.8 ሰከንድ በReact ለተሰራ ድህረ ገጽ እንበል። (በዚህ ጊዜ ውስጥ የተፈጸመው ታሪክ ለተለየ መጣጥፍ የሚገባው ይመስለኛል)።

እዚህ አንድ ሊሆን የሚችል ውስብስብ ነገር አለ (አመሰግናለሁ ኤርምያስ ትኩረቴን ወደዚህ ባህሪ ለመሳል እና ከዚህ እይታ አንጻር መረጃውን በጥንቃቄ ለማጤን). እውነታው ግን ብዙ ጣቢያዎች በርካታ የፊት-መጨረሻ መሳሪያዎችን ይጠቀማሉ. በተለይም እነዚያ ድረ-ገጾች ከ jQuery ወደ ሌሎች ማዕቀፎች ወይም ቤተ-መጻሕፍት ስለሚሰደዱ ከReact ወይም Vue ጋር በመሆን jQueryን ሲጠቀሙ ብዙ አይቻለሁ። በውጤቱም፣ ዳታቤዙን እንደገና መታሁት፣ በዚህ ጊዜ React፣ jQuery፣ Angular ወይም Vue ብቻ ከሚጠቀሙ ጣቢያዎች ጋር የሚዛመዱትን ብቻ መርጬ ነበር፣ ነገር ግን ምንም አይነት ውህደታቸውን አይደለም። ያገኘሁት ይኸው ነው።

ጣቢያዎች አንድ ማዕቀፍ ብቻ ወይም አንድ ቤተ-መጽሐፍት ብቻ በሚጠቀሙበት ሁኔታ በሞባይል መሳሪያዎች ላይ ስክሪፕቶችን ከማቀናበር ጋር የተያያዘ የአቀነባባሪ ጊዜ (በሚሊሰከንዶች)

መቶኛ
10
25
50
75
90

jQuery ብቻ የሚጠቀሙ ጣቢያዎች
542.9
1062.2
2297.4
4769.7
8718.2

Vue ብቻ የሚጠቀሙ ጣቢያዎች
944.0
1716.3
3194.7
5959.6
9843.8

Angular ብቻ የሚጠቀሙ ጣቢያዎች
1328.9
2151.9
3695.3
6629.3
11607.7

Reactን ብቻ የሚጠቀሙ ጣቢያዎች
2443.2
4620.5
10061.4
17074.3
24956.3

ጣቢያዎች አንድ ማዕቀፍ ብቻ ወይም አንድ ቤተ-መጽሐፍት ብቻ በሚጠቀሙበት ሁኔታ በሞባይል መሳሪያዎች ላይ ስክሪፕቶችን ከማቀናበር ጋር የተያያዘ የአቀነባባሪ ጊዜ

በመጀመሪያ, አንድ የማይገርም ነገር: አንድ ጣቢያ አንድ ማዕቀፍ ወይም አንድ ቤተ-መጽሐፍት ብቻ ሲጠቀም, የእንደዚህ አይነት ጣቢያ አፈጻጸም ብዙ ጊዜ ይሻሻላል. እያንዳንዱ መሳሪያ በ10ኛ እና 25ኛ ፐርሰንታይሎች የተሻለ ይሰራል። ምክንያታዊ ነው። አንድ ማዕቀፍ በመጠቀም የተሰራ ጣቢያ ሁለት ወይም ከዚያ በላይ ማዕቀፎችን ወይም ቤተ-መጻሕፍትን በመጠቀም ከተሰራው ጣቢያ የተሻለ አፈጻጸም አለበት።

እንደ እውነቱ ከሆነ፣ እያንዳንዱ የፊት-መጨረሻ መሣሪያ አፈጻጸም በሁሉም ሁኔታዎች የተሻለ ይመስላል፣ ከአንድ የማወቅ ጉጉ በስተቀር። እኔን የገረመኝ በ50ኛ ፐርሰንታይል እና ከዚያ በላይ፣ React የሚጠቀሙ ድረ-ገጾች React ብቸኛው የሚጠቀሙበት ላይብረሪ ሲያደርጉ የባሰ ስራ ማከናወን ነው። በነገራችን ላይ ይህንን መረጃ እዚህ ያቀረብኩበት ምክንያት ይህ ነበር።

ይህ ትንሽ እንግዳ ነገር ነው, ግን አሁንም ለዚህ እንግዳነት ማብራሪያ ለመፈለግ እሞክራለሁ.

አንድ ፕሮጀክት ሁለቱንም React እና jQuery የሚጠቀም ከሆነ፣ ያ ፕሮጀክት ከ jQuery ወደ React በሚደረገው ሽግግር አጋማሽ ላይ ሊሆን ይችላል። ምናልባት እነዚህ ቤተ-መጻሕፍት የተቀላቀሉበት ኮድ ቤዝ አለው. የjQuery ድረ-ገጾች በዋናው ክር ላይ ከReact ሳይቶች ያነሰ ጊዜ እንደሚያጠፉ ቀደም ብለን ስለተመለከትን፣ ይህ በ jQuery ውስጥ አንዳንድ ተግባራትን መተግበር ጣቢያው ትንሽ የተሻለ እንዲሰራ እንደሚያግዝ ሊነግረን ይችላል።

ነገር ግን ፕሮጀክቱ ከ jQuery ወደ React ሲሸጋገር እና በReact ላይ የበለጠ ሲተማመን፣ ነገሮች እየተቀየሩ ነው። ጣቢያው በእውነቱ ከፍተኛ ጥራት ያለው ከሆነ እና የጣቢያው ገንቢዎች Reactን በጥንቃቄ የሚጠቀሙ ከሆነ እንደዚህ ባለው ጣቢያ ሁሉም ነገር ጥሩ ይሆናል። ነገር ግን ለአማካይ React ጣቢያ፣ Reactን በስፋት መጠቀም ዋናው ክር በከባድ ጭነት ውስጥ ነው ማለት ነው።

በሞባይል እና በዴስክቶፕ መሳሪያዎች መካከል ያለው ክፍተት

የተመራመሩትን መረጃዎች የተመለከትኩበት ሌላው እይታ በሞባይል እና በዴስክቶፕ መሳሪያዎች ላይ ከድረ-ገጾች ጋር ​​በመስራት መካከል ያለው ልዩነት ምን ያህል ትልቅ እንደሆነ ለማጥናት ነው። የጃቫስክሪፕት ኮድ ጥራዞችን ስለማነፃፀር ከተነጋገርን, እንዲህ ዓይነቱ ንፅፅር ምንም አስከፊ ነገር አይገልጽም. እርግጥ ነው፣ አነስተኛ መጠን ያላቸውን የሚወርድ ኮድ ማየት ጥሩ ይሆናል፣ ነገር ግን በሞባይል እና በዴስክቶፕ ኮድ መጠን ላይ ብዙ ልዩነት የለም።

ነገር ግን ኮዱን ለማስኬድ የሚያስፈልገውን ጊዜ ከተተንተን በሞባይል እና በዴስክቶፕ መሳሪያዎች መካከል ያለው በጣም ትልቅ ክፍተት የሚታይ ይሆናል.

ከዴስክቶፕ ጋር ሲነጻጸር በሞባይል መሳሪያዎች ላይ ያሉ ስክሪፕቶችን ከማቀናበር ጋር የሚዛመደው የጊዜ (መቶኛ) ጨምር

መቶኛ
10
25
50
75
90

ሁሉም ጣቢያዎች
144.1
172.8
185.5
208.5
224.0

jQuery ጣቢያዎች
188.2
187.4
191.3
209.6
221.9

Vue ጣቢያዎች
222.5
220.8
220.2
221.4
220.4

የማዕዘን ቦታዎች
205.1
206.0
201.6
210.4
218.7

ምላሽ ጣቢያዎች
431.5
386.8
337.9
242.6
179.6

በስልክ እና በላፕቶፕ መካከል በኮድ ማቀናበሪያ ፍጥነት ላይ መጠነኛ ልዩነት እንደሚጠበቅ ቢነገርም፣ ይህን ያህል ቁጥር ያላቸው ዘመናዊ ማዕቀፎች ዝቅተኛ ኃይል ባላቸው መሳሪያዎች ላይ በበቂ ሁኔታ ኢላማ እንዳልሆኑ እና ያገኙትን ክፍተት ለመቅረፍ እየጣሩ እንደሆነ ይነግሩኛል። በ10ኛ ፐርሰንታይል እንኳን፣ React ሳይቶች በተንቀሳቃሽ ስልክ ዋና ክር ላይ ከዴስክቶፕ ዋና ክር 431.5% የበለጠ ጊዜ ያሳልፋሉ። jQuery ትንሹ ክፍተት አለው, ነገር ግን እዚህም ቢሆን ተመጣጣኝ አሃዝ 188.2% ነው. የድር ጣቢያ ገንቢዎች ፕሮጄክቶቻቸውን በሚሰሩበት መንገድ ፕሮሰሰር ብዙ ጊዜ የሚጠይቅ (እና ይከሰታል ፣ እና ከጊዜ ወደ ጊዜ እየባሰ ይሄዳል) ዝቅተኛ ኃይል ያላቸው መሳሪያዎች ባለቤቶች ለእሱ መክፈል አለባቸው።

ውጤቶች

ጥሩ ማዕቀፎች ለገንቢዎች የድር ፕሮጀክቶችን (ከደህንነት፣ ተደራሽነት፣ አፈጻጸም አንፃር) ለመገንባት ጥሩ መሰረት መስጠት አለባቸው ወይም እነዚያን ገደቦች የሚጥስ ነገር መገንባት አስቸጋሪ የሚያደርጉ አብሮገነብ ገደቦች ሊኖራቸው ይገባል።

ይህ በድር ፕሮጀክቶች አፈጻጸም ላይ የሚተገበር አይመስልም (እና ምናልባትም በእነሱ ላይ አይደለም ተደራሽነት).

React ወይም Angular ድረ-ገጾች ከሌሎች ይልቅ የሲፒዩ ጊዜ በማሳለፋቸው ብቻ React ድረ-ገጾች በሚሮጡበት ጊዜ ከVue ሳይቶች የበለጠ ሲፒዩ የተጠናከሩ ናቸው ማለት እንዳልሆነ ልብ ሊባል ይገባል። በመሠረቱ፣ የገመገምነው መረጃ ስለ ማዕቀፎች እና ቤተመጻሕፍት አሠራር አፈጻጸም በጣም ጥቂት ነው። እነዚህ ማዕቀፎች አውቀውም ይሁን ሳያውቁ፣ ፕሮግራመሮችን ሊገፉ ስለሚችሉት የእድገት አካሄዶች የበለጠ ይናገራሉ። እየተነጋገርን ያለነው ስለ ማዕቀፎች ሰነዶች ፣ ስለ ሥነ-ምህዳራቸው ፣ ስለ የጋራ ልማት ቴክኒኮች ነው።

እንዲሁም እዚህ ላይ ያልተተነተንነውን አንድ ነገር መጥቀስ ተገቢ ነው, ማለትም መሳሪያው በጣቢያው ገጾች መካከል በሚሸጋገርበት ጊዜ የጃቫ ስክሪፕት ኮድን ለማስፈጸም ምን ያህል ጊዜ እንደሚያጠፋ. የ SPA ን የሚደግፍ ክርክር የአንድ ገጽ መተግበሪያ አንዴ ወደ አሳሹ ከተጫነ ተጠቃሚው በንድፈ ሀሳብ የገጹን ገጾች በፍጥነት መድረስ ይችላል። ይህ ከእውነታው የራቀ መሆኑን የራሴ ተሞክሮ ይነግረኛል። ግን ይህንን ጉዳይ ለማብራራት መረጃ የለንም።

ግልጽ የሆነው ነገር ድህረ ገጽ ለመፍጠር ማዕቀፍ ወይም ላይብረሪ እየተጠቀሙ ከሆነ ፕሮጀክቱን መጀመሪያ ላይ በመጫን እና ለመስራት ዝግጁ ለማድረግ ስምምነት ላይ እየደረሱ ነው። ይህ በጣም አዎንታዊ በሆኑ ሁኔታዎች ላይም ይሠራል።

በተገቢው ሁኔታዎች ውስጥ አንዳንድ ስምምነትን መፈጸም ፍጹም ይቻላል, ነገር ግን ገንቢዎች እንደዚህ አይነት ስምምነትን አውቀው ማድረጋቸው አስፈላጊ ነው.

እኛ ግን ብሩህ ተስፋ የምንሰጥበት ምክንያት አለን። የ Chrome ገንቢዎች የእነዚያን መሳሪያዎች አፈጻጸም ለማሻሻል ለማገዝ ከገመገምናቸው አንዳንድ የፊት-መጨረሻ መሳሪያዎች ገንቢዎች ጋር ምን ያህል በቅርበት እንደሚሰሩ በማየቴ ጓጉቻለሁ።

ሆኖም እኔ ተግባራዊ ሰው ነኝ። አዳዲስ አርክቴክቶች በሚፈቱበት ጊዜ የአፈጻጸም ችግሮችን ይፈጥራሉ። እና ስህተቶችን ለማስተካከል ጊዜ ይወስዳል። መጠበቅ እንደሌለብን ሁሉ አዲስ የአውታረ መረብ ቴክኖሎጂዎች ሁሉንም የአፈፃፀም ችግሮችን ይፈታል ፣ ይህንን ከአዳዲስ የእኛ ተወዳጅ ማዕቀፎች ስሪቶች መጠበቅ የለብዎትም።

በዚህ ጽሑፍ ውስጥ ከተገለጹት የፊት-መጨረሻ መሳሪያዎች ውስጥ አንዱን ለመጠቀም ከፈለጉ ፣ ይህ ማለት እስከዚያው ድረስ የፕሮጀክትዎን አፈፃፀም ላለመጉዳት ተጨማሪ ጥረት ማድረግ አለብዎት ማለት ነው። አዲስ ማዕቀፍ ከመጀመርዎ በፊት ከግምት ውስጥ መግባት ያለባቸው አንዳንድ ጉዳዮች እዚህ አሉ

• በማስተዋል እራስህን ፈትን። የተመረጠውን ማዕቀፍ በትክክል መጠቀም ያስፈልግዎታል? ንጹህ ጃቫ ስክሪፕት ዛሬ ብዙ ችሎታ አለው።
• የዚህን ማዕቀፍ 90% አቅም ሊሰጥህ ከተመረጠው ማዕቀፍ (እንደ ፕሬክት፣ ስቬልት ወይም ሌላ ነገር) ቀለል ያለ አማራጭ አለ?
• ቀድሞውንም ማዕቀፍ እየተጠቀሙ ከሆነ፣ የተሻለ፣ የበለጠ ወግ አጥባቂ፣ መደበኛ አማራጮችን የሚያቀርብ ነገር ካለ (ለምሳሌ ከVue ይልቅ Nuxt.js፣ ከReact ይልቅ Next.js እና የመሳሰሉት) ካለ ያስቡበት።
• ምን ትሆናለህ በጀት የጃቫስክሪፕት አፈጻጸም?
• እንዴት ትችላላችሁ ወሰን በጣም አስፈላጊ ከሆነው በላይ የጃቫ ስክሪፕት ኮድ ወደ አንድ ፕሮጀክት ማስገባት ከባድ ለማድረግ የእድገት ሂደት ነው?
• ለዕድገት ቀላልነት ማዕቀፍ እየተጠቀሙ ከሆነ ያስቡበት ትፈልጋለህ የክፈፍ ኮድ ለደንበኞች ይላኩ። ምናልባት ሁሉንም ጉዳዮች በአገልጋዩ ላይ መፍታት ይችላሉ?

ለግንባር-መጨረሻ ልማት በትክክል የመረጡት ምንም ይሁን ምን ብዙውን ጊዜ እነዚህ ሀሳቦች ሊመለከቷቸው የሚገቡ ናቸው። ነገር ግን ገና ከመጀመሪያው አፈጻጸም የጎደለው ፕሮጀክት ሲሰሩ በጣም አስፈላጊ ናቸው.

ውድ አንባቢዎች! ተስማሚውን የጃቫስክሪፕት ማዕቀፍ እንዴት ያዩታል?

ምንጭ: hab.com