Вэбсайтыг удаашруулах олон JavaScript код ашиглахаас илүү хурдан арга байхгүй. JavaScript-г ашиглахдаа та төслийн гүйцэтгэлийг дор хаяж дөрөв дахин төлөх ёстой. Сайтын JavaScript код нь хэрэглэгчдийн системийг хэрхэн ачаалдаг вэ:
- Сүлжээгээр файл татаж байна.
- Татаж авсны дараа задалсан эх кодыг задлан шинжилж, эмхэтгэнэ.
- JavaScript кодыг гүйцэтгэх.
- Санах ойн хэрэглээ.
Энэ хослол гарч ирнэ .
Мөн бид төслүүддээ улам олон JS кодыг оруулдаг. Байгууллагууд React, Vue болон бусад системүүд болон номын сангуудаар дэмжигдсэн сайтууд руу шилжиж байгаа тул бид сайтуудын үндсэн ажиллагааг JavaScript-ээс ихээхэн хамааралтай болгож байна.
Би JavaScript фреймворк ашигладаг маш хүнд сайтуудыг харсан. Гэхдээ миний энэ асуудлыг хэт өрөөсгөлөөр төсөөлж байна. Миний хамтран ажилладаг компаниуд сайтын гүйцэтгэлийн чиглэлээр нарийн төвөгтэй асуудалтай тулгардаг тул над руу ханддаг. Үүний үр дүнд би энэ асуудал хэр түгээмэл байдаг, бид тодорхой сайтын үндэс болгон нэг эсвэл өөр хүрээ сонгохдоо ямар төрлийн "торгууль" төлдөг талаар сонирхож эхэлсэн.
Төсөл надад үүнийг ойлгоход тусалсан. .
мэдээ
HTTP Archive төсөл нь ердийн ширээний сайт руу нийт 4308655 холбоос, гар утасны сайт руу 5484239 холбоосыг хянадаг. Эдгээр холбоосуудтай холбоотой олон хэмжүүрүүдийн дунд холбогдох сайтуудаас олдсон технологийн жагсаалт байдаг. Энэ нь бид янз бүрийн фреймворк, номын санг ашигладаг мянга мянган сайтуудаас дээж авч, тэд үйлчлүүлэгчид хэр хэмжээний код илгээдэг, энэ код нь хэрэглэгчдийн системд хэр их ачаалал өгдөг талаар мэдэх боломжтой гэсэн үг юм.
Би 2020 оны XNUMX-р сарын мэдээллийг цуглуулсан бөгөөд энэ нь миний хандах боломжтой байсан хамгийн сүүлийн үеийн мэдээлэл юм.
Би бүх сайт дээрх HTTP архивын нэгтгэсэн өгөгдлийг React, Vue болон Angular ашиглан олсон сайтуудын өгөгдөлтэй харьцуулахаар шийдсэн ч бусад эх материалыг ашиглах гэж үзсэн.
Үүнийг илүү сонирхолтой болгохын тулд би бас jQuery ашигладаг сайтуудыг эх өгөгдлийн багцад нэмсэн. Энэ номын сан одоо ч маш их алдартай. Энэ нь мөн React, Vue болон Angular-ын санал болгож буй Single Page Application (SPA) загвараас өөр вэб хөгжүүлэлтийн аргыг танилцуулж байна.
Сонирхсон технологи ашиглаж байгаа нь тогтоогдсон сайтуудыг төлөөлж буй HTTP архив дахь холбоосууд
Хүрээ эсвэл номын сан
Гар утасны сайтуудын холбоосууд
Ердийн сайтуудын холбоосууд
jQuery
4615474
3714643
урвалд
489827
241023
Vue
85649
43691
өнцгийн
19423
18088
Найдвар, мөрөөдөл
Өгөгдлийн шинжилгээнд шилжихээсээ өмнө би юунд найдаж байгаагаа ярихыг хүсч байна.
Тохиромжтой ертөнцөд фреймворк нь хөгжүүлэгчдийн хэрэгцээг хангахаас гадна манай сайтуудтай ажилладаг энгийн хэрэглэгчдэд тодорхой ашиг тусыг өгөх ёстой гэдэгт би итгэдэг. Гүйцэтгэл бол эдгээр давуу талуудын зөвхөн нэг юм. Энд хүртээмж, аюулгүй байдал чухал үүрэг гүйцэтгэдэг. Гэхдээ энэ бол зөвхөн хамгийн чухал зүйл юм.
Тиймээс, хамгийн тохиромжтой ертөнцөд зарим төрлийн хүрээ нь өндөр гүйцэтгэлтэй сайт үүсгэхэд хялбар байх ёстой. Энэ нь тухайн хүрээ нь хөгжүүлэгчдэд төсөл барих зохистой суурийг өгдөг, эсвэл хөгжилд хязгаарлалт тавьдаг, ямар нэг зүйлийг хөгжүүлэхэд хүндрэл учруулдаг шаардлага тавьдаг тул үүнийг хийх ёстой. удаан байх болно.
Хамгийн сайн хүрээ нь хоёуланг нь хийх ёстой: сайн суурийг тавьж, ажилд хязгаарлалт тавьж, зохих үр дүнд хүрэх боломжийг олгоно.
Мэдээллийн дундаж утгыг шинжлэх нь бидэнд шаардлагатай мэдээллийг өгөхгүй. Үнэн хэрэгтээ энэ хандлага нь бидний анхаарлын төвд байдаггүй . Оронд нь би өөрт байгаа өгөгдлөөс хэдэн хувийг гаргаж авсан. Эдгээр нь 10, 25, 50 (дундаж), 75, 90 хувь юм.
Би ялангуяа 10, 90-р хувийг сонирхож байна. 10-р хувь нь тухайн хүрээний хувьд хамгийн сайн гүйцэтгэлийг (эсвэл хамгийн багадаа илүү их эсвэл хамгийн сайнтай ойролцоо) илэрхийлдэг. Өөрөөр хэлбэл, энэ нь тодорхой хүрээг ашигладаг сайтуудын зөвхөн 10% нь энэ түвшинд буюу түүнээс дээш түвшинд хүрсэн гэсэн үг юм. Нөгөө талаас 90-р хувь нь зоосны нөгөө тал юм - энэ нь бидэнд ямар муу зүйл тохиолдож болохыг харуулдаг. 90-р хувь нь ард хоцорч буй сайтууд буюу хамгийн JS кодтой эсвэл үндсэн хэлхээнд кодоо боловсруулахад хамгийн удаан хугацаа зарцуулдаг сайтуудын доод 10% нь юм.
JavaScript кодын хэмжээ
Эхлэхийн тулд сүлжээгээр өөр өөр сайтуудаас дамжуулж буй JavaScript кодын хэмжээг шинжлэх нь утга учиртай юм.
Мобайл төхөөрөмжид шилжүүлсэн JavaScript кодын хэмжээ (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
React сайтууд
345.8
441.6
690.3
1238.5
1893.6
Мобайл төхөөрөмжид илгээсэн JavaScript кодын хэмжээ
Десктоп төхөөрөмж рүү шилжүүлсэн JavaScript кодын хэмжээ (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
React сайтууд
308.6
469.0
841.9
1472.2
2197.8
Десктоп төхөөрөмж рүү илгээсэн JavaScript кодын хэмжээ
Хэрэв бид зөвхөн сайтуудын төхөөрөмж рүү илгээдэг JS кодын хэмжээг ярих юм бол бүх зүйл таны төсөөлж байсан шиг харагдах болно. Тухайлбал, хэрэв хүрээний аль нэгийг ашиглавал энэ нь хамгийн тохиромжтой нөхцөлд ч гэсэн сайтын JavaScript кодын хэмжээ нэмэгдэх болно гэсэн үг юм. Энэ нь гайхмаар зүйл биш - та JavaScript хүрээг сайтын үндэс болгож чадахгүй бөгөөд төслийн JS кодын хэмжээ маш бага байх болно гэж найдаж байна.
Энэ өгөгдлийн гайхалтай зүйл бол зарим хүрээ, номын санг бусадтай харьцуулахад төслийн эхлэлийн цэг гэж үзэж болох юм. jQuery-тэй сайтууд хамгийн сайн харагддаг. Сайтуудын ширээний хувилбарууд дээр бүх сайтуудаас 15% илүү JavaScript, гар утсан дээр 18% илүү агуулагддаг. (Мэдээж, энд зарим нэг мэдээллийн эвдрэл байгаа. Үнэн хэрэгтээ jQuery олон сайт дээр байдаг тул ийм сайтууд бусад сайтуудаас илүүтэй нийт сайтын тоотой илүү нягт холбоотой байх нь зүйн хэрэг юм. Гэхдээ энэ нь хэр түүхий гэдэгт нөлөөлөхгүй. өгөгдөл нь хүрээ тус бүрийн гаралт юм.)
Кодын хэмжээ 15-18%-иар нэмэгдсэн нь анхаарал татахуйц үзүүлэлт боловч үүнийг бусад фреймворк, номын сантай харьцуулж үзвэл jQuery-ийн "татвар" маш бага байна гэж дүгнэж болно. 10-р хувь дахь өнцгийн сайтууд нь бүх сайтуудаас 344%, гар утсанд 377% илүү өгөгдлийг ширээний компьютерт илгээдэг. React сайтууд нь дараагийнх нь хамгийн хүнд бөгөөд бүх сайтуудаас 193% илүү, гар утсанд 270% илүү кодыг ширээний компьютерт илгээдэг.
Хэдийгээр хүрээ ашиглах нь төсөлд тодорхой хэмжээний код орно гэсэн үг боловч үүн дээр ажиллаж эхлэх үед энэ хүрээ нь хөгжүүлэгчийг ямар нэгэн байдлаар хязгаарлаж чадна гэж найдаж байна гэж би өмнө нь дурдсан. Ялангуяа кодын дээд хэмжээг хязгаарлах тухай ярьж байна.
Сонирхолтой нь jQuery сайтууд энэ санааг дагадаг. Эдгээр нь 10-р хувьтай (15-18%) бүх сайтуудаас арай илүү жинтэй боловч ширээний болон гар утасны аль алинд нь 90% орчим буюу 3-р хувь дээр арай хөнгөн байна. Энэ нь маш чухал ач холбогдолтой гэж хэлж болохгүй, гэхдээ jQuery сайтууд хамгийн том хувилбаруудад ч гэсэн JavaScript кодын асар том хэмжээтэй байдаггүй гэж хэлж болно.
Гэхдээ бусад хүрээний талаар ижил зүйлийг хэлж болохгүй.
10-р хувьтай адил Angular болон React дээрх 90-р хувийн сайтууд нь бусад сайтуудаас ялгаатай боловч харамсалтай нь муу талдаа ялгаатай байдаг.
Өнцгийн сайтууд 90-р хувиар бүх сайтуудаас 141%-иар илүү гар утсанд, 159%-иар десктоп руу илгээдэг. React сайтууд бүх сайтуудаас 73%-иар илүү ширээний компьютер руу, 58%-иар гар утас руу илгээдэг. 90-р хувь дахь React сайтуудын кодын хэмжээ 2197.8 KB байна. Энэ нь ийм сайтууд Vue-д суурилсан хамгийн ойрын өрсөлдөгчдөөсөө 322.9 КБ-аар илүү гар утасны төхөөрөмж рүү өгөгдөл илгээдэг гэсэн үг юм. Angular болон React дээр суурилсан ширээний сайтууд болон бусад сайтуудын хоорондох ялгаа бүр ч том байна. Жишээлбэл, ширээний React сайтууд Vue-тэй ижил сайтуудаас 554.7 KB илүү JS кодыг төхөөрөмж рүү илгээдэг.
Үндсэн хэлхээс дэх JavaScript кодыг боловсруулахад зарцуулсан хугацаа
Дээрх өгөгдөл нь судалж буй хүрээ болон номын сангуудыг ашигладаг сайтууд нь их хэмжээний JavaScript код агуулдаг болохыг тодорхой харуулж байна. Гэхдээ мэдээж энэ бол бидний тэгшитгэлийн зөвхөн нэг хэсэг юм.
JavaScript код хөтөч дээр ирсний дараа түүнийг ажиллах боломжтой байдалд оруулах шаардлагатай. Ялангуяа хөтчийн үндсэн хэлхээн дэх кодтой хийх ёстой үйлдлүүдээс болж олон асуудал үүсдэг. Үндсэн хэлхээ нь хэрэглэгчийн үйлдлийг боловсруулах, хэв маягийг тооцоолох, хуудасны байршлыг бүтээх, харуулах үүрэгтэй. Хэрэв та үндсэн хэлхээг JavaScript даалгавраар дарвал бусад даалгавруудыг хугацаанд нь дуусгах боломжгүй болно. Энэ нь хуудасны ажилд саатал, "тоормос"-д хүргэдэг.
HTTP Archive мэдээллийн сан нь V8 хөдөлгүүрийн үндсэн хэлхээнд JavaScript кодыг боловсруулахад хэр хугацаа шаардагдах тухай мэдээлэлтэй. Энэ нь бид эдгээр өгөгдлийг цуглуулж, янз бүрийн сайтуудын JavaScript-ийг боловсруулахад үндсэн хэлхээ нь хэр их цаг зарцуулж байгааг олж мэдэх боломжтой гэсэн үг юм.
Хөдөлгөөнт төхөөрөмж дээр скрипт боловсруулахтай холбоотой процессорын хугацаа (миллисекунд).
Хувь
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
React сайтууд
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
React сайтууд
508.0
1045.6
2121.1
4235.1
7444.3
Ширээний төхөөрөмж дээр скрипт боловсруулахтай холбоотой процессорын хугацаа
Эндээс та маш танил зүйлийг харж болно.
Эхлэхийн тулд jQuery-тэй сайтууд бусад сайтуудтай харьцуулахад үндсэн урсгал дээр JavaScript боловсруулахад хамаагүй бага мөнгө зарцуулдаг. Бүх сайтуудтай харьцуулахад 10-р хувьтай харьцуулахад гар утсан дээрх jQuery сайтууд үндсэн урсгал дээрх JS кодыг боловсруулахад 61% илүү цаг зарцуулдаг. Ширээний jQuery сайтуудын хувьд боловсруулах хугацаа 37%-иар нэмэгддэг. 90-р хувь дээр jQuery сайтууд нийлбэр оноотой маш ойролцоо оноо авдаг. Тодруулбал, мобайл төхөөрөмж дээрх jQuery сайтууд үндсэн урсгал дээр бүх сайтаас 1.3%-иар, ширээний төхөөрөмж дээр 0.7%-иар бага цаг зарцуулдаг.
Манай үнэлгээний нөгөө талд үндсэн утас дээрх хамгийн их ачаалалтай байдаг хүрээнүүд байдаг. Энэ бол дахин өнцгийн ба урвал юм. Энэ хоёрын цорын ганц ялгаа нь Angular сайтууд нь React сайтуудаас илүү олон кодыг хөтөч рүү илгээдэг бол Angular сайтууд код боловсруулахад CPU-ийн цаг бага зарцуулдаг. Хамаагүй бага.
10-р хувиар, ширээний Angular сайтууд JS кодыг боловсруулахад бүх сайтаас 230% илүү цаг зарцуулдаг. Гар утасны сайтуудын хувьд энэ үзүүлэлт 313% байна. React сайтууд хамгийн муу үзүүлэлттэй байдаг. Ширээний компьютер дээр тэд код боловсруулахад бүх сайтаас 248%, гар утсан дээр 658% илүү цаг зарцуулдаг. 658% нь үсгийн алдаа биш. 10-р хувиар React сайтууд код боловсруулахад 2.7 секунд зарцуулдаг.
Эдгээр асар их тоотой харьцуулахад 90-р хувь нь бага зэрэг илүү харагдаж байна. Бүх сайтуудтай харьцуулахад Angular төслүүд нь үндсэн урсгал дахь ширээний төхөөрөмж дээр 29%, хөдөлгөөнт төхөөрөмж дээр 27% илүү цаг зарцуулдаг. React сайтуудын хувьд ижил үзүүлэлтүүд 130% ба 98% байна.
90 хувийн хазайлт нь 10 хувийн ижил төстэй утгуудаас илүү сайн харагдаж байна. Гэхдээ энд цагийг харуулсан тоонууд нь аймшигтай мэт санагдаж байгааг санах нь зүйтэй. React-ээр бүтээгдсэн вэб сайтын үндсэн гар утасны урсгал дээр 20.8 секунд байна гэж бодъё. (Энэ хугацаанд юу болсон тухай түүхийг тусдаа өгүүлэлд оруулах нь зүйтэй гэж би бодож байна).
Энд нэг хүндрэл гарч болзошгүй (баярлалаа Энэ онцлогт миний анхаарлыг хандуулж, энэ үүднээс өгөгдлийг анхааралтай авч үзсэнийхээ төлөө). Баримт нь олон сайтууд хэд хэдэн урд талын хэрэгслийг ашигладаг. Ялангуяа эдгээр сайтууд jQuery-ээс бусад фреймворк эсвэл номын сан руу шилжиж байгаа тул би jQuery-г React эсвэл Vue-тэй зэрэгцүүлэн ашиглаж байгаа олон сайтуудыг харсан. Үүний үр дүнд би мэдээллийн сан руу дахин орж, энэ удаад зөвхөн 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-ийг өргөнөөр ашиглах нь үндсэн утас нь ачаалал ихтэй байна гэсэн үг юм.
Хөдөлгөөнт болон ширээний төхөөрөмжүүдийн хоорондох зай
Судалгааны өгөгдлүүдийг авч үзсэн өөр нэг үзэл бодол бол гар утас болон ширээний төхөөрөмж дээрх сайтуудтай ажиллах хоорондын ялгаа хэр их байгааг судлах явдал байв. Хэрэв бид JavaScript кодын эзлэхүүнийг харьцуулах талаар ярих юм бол ийм харьцуулалт нь ямар ч аймшигтай зүйлийг илчлэхгүй. Мэдээжийн хэрэг, татаж авах боломжтой кодыг бага хэмжээгээр харах нь сайхан байх болно, гэхдээ гар утасны болон ширээний кодын хэмжээгээр тийм ч их ялгаа байхгүй.
Гэхдээ хэрэв бид кодыг боловсруулахад шаардагдах хугацааг шинжлэх юм бол хөдөлгөөнт болон ширээний төхөөрөмжүүдийн хооронд маш том ялгаа мэдэгдэхүйц болно.
Ширээний компьютертэй харьцуулахад хөдөлгөөнт төхөөрөмж дээр скрипт боловсруулахтай холбоотой цаг хугацаа (хувь) нэмэгдэх
Хувь
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
React сайтууд
431.5
386.8
337.9
242.6
179.6
Утас болон зөөврийн компьютер хоёрын хооронд код боловсруулах хурд бага зэрэг ялгаатай байх магадлалтай ч ийм олон тоо нь орчин үеийн системүүд бага чадалтай төхөөрөмжүүдэд хангалттай чиглэгддэггүй бөгөөд тэд олж илрүүлсэн цоорхойг арилгахыг хичээж байгааг хэлж байна. 10-р хувьтай байсан ч гэсэн React сайтууд ширээний үндсэн дамжуулалтаас 431.5%-иар илүү гар утасны үндсэн урсгалд зарцуулдаг. jQuery хамгийн бага зөрүүтэй боловч энд ч гэсэн харгалзах үзүүлэлт 188.2% байна. Вэбсайт хөгжүүлэгчид өөрсдийн төслийг боловсруулахад илүү их процессорын цаг шаарддаг (мөн энэ нь тохиолддог бөгөөд энэ нь цаг хугацааны явцад улам дорддог) тохиолдолд бага чадалтай төхөөрөмжүүдийн эзэд үүнийг төлөх ёстой.
Үр дүн
Сайн хүрээ нь хөгжүүлэгчдэд вэб төслүүдийг бий болгох сайн суурийг (аюулгүй байдал, хүртээмж, гүйцэтгэлийн хувьд) өгөх ёстой эсвэл тэдгээр хязгаарлалтыг зөрчсөн зүйлийг бүтээхэд хэцүү болгодог хязгаарлалттай байх ёстой.
Энэ нь вэб төслүүдийн гүйцэтгэлд хамаарахгүй юм шиг санагддаг (мөн магадгүй тэдний ).
React эсвэл Angular сайтууд код бэлтгэхэд бусдаас илүү CPU-ийн цаг зарцуулдаг учраас React сайтууд ажиллаж байх үедээ Vue сайтуудаас илүү CPU зарцуулдаг гэсэн үг биш гэдгийг тэмдэглэх нь зүйтэй. Үнэн хэрэгтээ бидний хянаж үзсэн өгөгдөл нь фреймворк болон номын сангийн үйл ажиллагааны гүйцэтгэлийн талаар маш бага зүйлийг хэлдэг. Тэд ухамсартай ч бай, үгүй ч бай эдгээр хүрээ программистуудыг түлхэж чадах хөгжлийн хандлагын талаар илүү их ярьдаг. Бид хүрээний баримт бичиг, тэдгээрийн экосистемийн тухай, нийтлэг хөгжлийн арга техникүүдийн талаар ярьж байна.
Бидний энд дүн шинжилгээ хийгээгүй зүйлийг дурьдах нь зүйтэй, тухайлбал төхөөрөмж нь сайтын хуудсуудын хооронд шилжихдээ JavaScript кодыг ажиллуулахад хэр их цаг зарцуулдаг вэ. SPA-г дэмжсэн аргумент нь нэг хуудасны програмыг хөтөч дээр ачаалсны дараа онолын хувьд хэрэглэгч сайтын хуудсыг илүү хурдан нээх боломжтой болно. Миний туршлагаас харахад энэ нь бодит байдлаас хол байна. Гэхдээ энэ асуудлыг тодруулах мэдээлэл бидэнд алга.
Хэрэв та вэбсайт үүсгэхийн тулд фреймворк эсвэл номын сан ашиглаж байгаа бол төслийг эхлээд ачаалж, ашиглахад бэлэн болгох тал дээр буулт хийж байгаа нь тодорхой юм. Энэ нь хамгийн эерэг хувилбаруудад ч хамаатай.
Тохиромжтой нөхцөл байдалд зарим буулт хийх бүрэн боломжтой боловч хөгжүүлэгчид ийм буултыг ухамсартайгаар хийх нь чухал юм.
Гэхдээ бидэнд бас өөдрөг байх шалтгаан бий. Chrome хөгжүүлэгчид эдгээр хэрэгслүүдийн гүйцэтгэлийг сайжруулахын тулд бидний хянасан зарим урд талын хэрэгслүүдийн хөгжүүлэгчидтэй хэр ойр ажиллаж байгааг хараад би баяртай байна.
Гэсэн хэдий ч би прагматик хүн юм. Шинэ архитектурууд тэдгээрийг шийдвэрлэх тусам гүйцэтгэлийн асуудлуудыг үүсгэдэг. Мөн алдааг засахад цаг хугацаа хэрэгтэй. Бидний хүлээх ёсгүй зүйл шиг Энэ нь гүйцэтгэлийн бүх асуудлыг шийдэх болно, та бидний дуртай хүрээний шинэ хувилбаруудаас үүнийг хүлээх ёсгүй.
Хэрэв та энэ өгүүлэлд дурдсан урд талын хэрэгслүүдийн аль нэгийг ашиглахыг хүсч байгаа бол энэ нь төслийн гүйцэтгэлд хор хөнөөл учруулахгүйн тулд нэмэлт хүчин чармайлт гаргах шаардлагатай болно гэсэн үг юм. Шинэ хүрээг эхлүүлэхийн өмнө анхаарах ёстой зарим зүйлийг энд оруулав.
- Эрүүл ухаанаар өөрийгөө сорих. Та үнэхээр сонгосон хүрээг ашиглах шаардлагатай байна уу? Цэвэр JavaScript өнөөдөр маш их чадвартай.
- Сонгосон хүрээнээс (Preact, Svelte эсвэл өөр ямар нэг зүйл гэх мэт) энэ хүрээний чадавхийн 90% -ийг өгөх илүү хөнгөн хувилбар байна уу?
- Хэрэв та аль хэдийн фреймворк ашиглаж байгаа бол илүү сайн, илүү консерватив, стандарт сонголтуудыг санал болгодог зүйл байгаа эсэхийг анхаарч үзээрэй (жишээ нь Vue-ийн оронд Nuxt.js, React-ийн оронд Next.js гэх мэт).
- Чиний юу болно JavaScript гүйцэтгэл?
- Яаж чадаж байна аа Төсөлд зайлшгүй шаардлагатайгаас илүү JavaScript код оруулахад хэцүү болгох хөгжүүлэлтийн процесс уу?
- Хэрэв та хөгжүүлэхэд хялбар хүрээ ашиглаж байгаа бол анхаарч үзээрэй үйлчлүүлэгчдэд хүрээ код илгээх. Магадгүй та сервер дээрх бүх асуудлыг шийдэж чадах болов уу?
Ихэвчлэн эдгээр санаанууд нь урд талын хөгжүүлэлтийн хувьд яг юу сонгосон байгаагаас үл хамааран үзэх нь зүйтэй юм. Гэхдээ та анхнаасаа гүйцэтгэл муутай төсөл дээр ажиллаж байх үед эдгээр нь ялангуяа чухал юм.
Эрхэм уншигчид! Та хамгийн тохиромжтой JavaScript хүрээг хэрхэн харж байна вэ?
Эх сурвалж: www.habr.com