Thiab peb suav nrog ntau thiab ntau JS code hauv peb cov haujlwm. Raws li cov koom haum tsiv mus rau cov chaw siv los ntawm lub moj khaum thiab cov tsev qiv ntawv zoo li React, Vue thiab lwm yam, peb tab tom ua cov haujlwm tseem ceeb ntawm cov chaw nyob ntawm JavaScript.
Kuv tau pom ntau lub vev xaib hnyav heev uas siv JavaScript moj khaum. Tab sis kuv lub zeem muag ntawm qhov teeb meem yog qhov tsis ncaj ncees lawm. Qhov tseeb yog tias cov tuam txhab uas kuv ua haujlwm nrog tuaj rau kuv meej vim tias lawv muaj teeb meem kev ua haujlwm hauv lub vev xaib nyuaj. Yog li ntawd, kuv tau xav paub ntau npaum li cas qhov teeb meem no yog, thiab qhov "nplua nuj" peb them thaum peb xaiv ib qho los yog lwm lub hauv paus rau ib qho chaw.
Qhov project no tau pab kuv paub qhov no. HTTP Archive.
cov ntaub ntawv
Qhov project HTTP Archive taug qab tag nrho ntawm 4308655 txuas mus rau qhov chaw desktop tsis tu ncua thiab 5484239 txuas mus rau qhov chaw txawb. Ntawm ntau qhov ntsuas cuam tshuam nrog cov kev sib txuas no yog cov npe ntawm cov thev naus laus zis pom ntawm cov chaw sib txuas. Qhov no txhais tau tias peb tuaj yeem ua piv txwv ntau txhiab qhov chaw uas siv cov qauv sib txawv thiab cov tsev qiv ntawv thiab kawm paub ntau npaum li cas lawv xa mus rau cov neeg siv khoom thiab ntau npaum li cas cov lej ntawd tso rau cov neeg siv cov tshuab.
Kuv tau sau cov ntaub ntawv txij lub Peb Hlis 2020, uas yog cov ntaub ntawv tsis ntev los no kuv tau nkag mus.
Yog li, nyob rau hauv lub ntiaj teb zoo tagnrho, qee yam kev ua haujlwm yuav tsum ua kom yooj yim los tsim lub vev xaib ua haujlwm siab. Qhov no yuav tsum tau ua los ntawm qhov tseeb tias lub moj khaum muab rau tus tsim tawm lub hauv paus tsim nyog rau kev tsim ib qhov project, los yog vim qhov tseeb tias nws txwv txoj kev loj hlob, muab cov kev xav tau rau nws uas ua rau nws nyuaj rau tsim ib yam dab tsi. uas hloov mus qeeb.
Cov txheej txheem zoo tshaj plaws yuav tsum ua ob qho tib si: muab lub hauv paus zoo, thiab txwv tsis pub ua haujlwm uas tso cai rau koj ua tiav qhov txiaj ntsig zoo.
Ntawm 90 feem pua, Angular sites xa 141% ntau cov ntaub ntawv rau cov khoom siv mobile dua li txhua qhov chaw, thiab 159% ntau dua rau cov khoom siv desktop. React sites xa 73% ntau dua rau cov khoom siv desktop dua li txhua qhov chaw, thiab 58% ntau dua rau cov khoom siv txawb. Tus lej loj ntawm React sites ntawm 90 feem pua yog 2197.8 KB. Qhov no txhais tau hais tias cov chaw no xa 322.9 KB ntau cov ntaub ntawv rau cov khoom siv mobile dua li lawv cov neeg sib tw Vue ze tshaj plaws. Qhov sib txawv ntawm desktop sites raws li Angular thiab React thiab lwm qhov chaw yog ntau dua. Piv txwv li, React desktop sites xa 554.7 KB ntau JS code rau cov khoom siv dua li cov chaw Vue zoo sib xws.
Lub sijhawm siv los ua cov txheej txheem JavaScript ntawm cov xov tseem ceeb
Cov ntaub ntawv saum toj no qhia meej meej tias cov chaw siv lub moj khaum thiab cov tsev qiv ntawv kawm muaj ntau tus lej JavaScript. Tab sis, tau kawg, qhov no tsuas yog ib feem ntawm peb qhov sib npaug.
Tom qab JavaScript code tau tuaj txog hauv browser, nws yuav tsum tau coj mus rau hauv lub xeev ua haujlwm. Tshwj xeeb tshaj yog muaj ntau yam teeb meem tshwm sim los ntawm cov kev ua uas yuav tsum tau nqa tawm nrog code nyob rau hauv lub ntsiab browser xov. Cov xov tseem ceeb yog lub luag haujlwm rau kev ua cov neeg siv kev ua, suav cov qauv, thiab tsim thiab nthuav tawm nplooj ntawv layout. Yog tias koj hla cov xov tseem ceeb nrog cov haujlwm JavaScript, nws yuav tsis muaj sijhawm los ua kom tiav lwm yam haujlwm raws sijhawm. Qhov no ua rau qeeb thiab "brakes" hauv kev ua haujlwm ntawm nplooj ntawv.
HTTP Archive database muaj cov ntaub ntawv hais txog nws yuav siv sijhawm ntev npaum li cas los ua JavaScript code ntawm cov xov tseem ceeb ntawm lub cav V8. Qhov no txhais tau tias peb tuaj yeem sau cov ntaub ntawv no thiab kawm ntau npaum li cas cov xov tseem ceeb siv sijhawm los ua cov JavaScript ntawm ntau qhov chaw.
CPU sij hawm (hauv milliseconds) ntsig txog kev sau ntawv ntawm cov khoom siv txawb
Lub sijhawm tus txheej txheem cuam tshuam txog kev ua cov ntawv sau ntawm lub xov tooj ntawm tes hauv qhov xwm txheej uas cov chaw siv tsuas yog ib lub moj khaum, lossis tsuas yog ib lub tsev qiv ntawv xwb
Ua ntej, ib yam dab tsi uas tsis yog qhov xav tsis thoob: thaum lub vev xaib tsuas yog siv ib lub moj khaum lossis ib lub tsev qiv ntawv xwb, qhov kev ua tau zoo ntawm lub xaib no txhim kho ntau dua li qhov tsis yog. Qhov kev ua tau zoo rau txhua qhov ntsuas tau zoo dua ntawm 10 thiab 25 feem pua. Nws ua rau kev nkag siab. Ib lub vev xaib uas tau tsim los siv ib lub moj khaum yuav tsum tau nrawm dua li lub vev xaib uas tau tsim los siv ob lossis ntau lub moj khaum lossis cov tsev qiv ntawv.
Qhov tseeb, cov qhab nias rau txhua qhov cuab yeej pem hauv ntej peb tau tshuaj xyuas zoo dua nyob rau hauv txhua rooj plaub, nrog rau ib qho kev zam. Dab tsi ua rau kuv xav tsis thoob yog tias ntawm 50 feem pua thiab siab dua, cov chaw siv React ua phem dua thaum React yog tib lub tsev qiv ntawv uas lawv siv. Qhov no, los ntawm txoj kev, yog vim li cas kuv nthuav qhia cov ntaub ntawv no.
Txawm hais tias qee qhov sib txawv hauv kev ua lej ceev ntawm lub xov tooj thiab lub laptop yuav tsum tau ua, cov xov tooj loj no qhia kuv tias cov txheej txheem niaj hnub no tsis yog tsom rau cov khoom siv hluav taws xob tsawg thiab lub siab xav kaw qhov sib txawv uas tau txheeb xyuas. Txawm tias nyob rau ntawm 10 feem pua, React sites siv 431.5% ntau lub sij hawm nyob rau hauv lub xov tooj tseem ceeb tshaj ntawm lub desktop ntsiab xov. jQuery muaj qhov sib txawv me tshaj plaws, tab sis txawm tias ntawm no tus lej sib raug yog 188.2%. Thaum cov neeg tsim tawm lub vev xaib ua lawv cov haujlwm hauv txoj hauv kev uas lawv xav tau ntau lub sijhawm CPU los ua haujlwm rau lawv (thiab qhov no yog qhov tshwm sim, thiab nws tsuas yog mob zuj zus mus rau lub sijhawm), cov tswv ntawm cov khoom siv hluav taws xob tsawg yuav tsum tau them rau nws.
Cov txiaj ntsim tau los
Cov txheej txheem zoo yuav tsum muab cov neeg tsim khoom tsim lub hauv paus zoo rau kev tsim lub vev xaib (raws li kev nyab xeeb, kev nkag mus tau, kev ua haujlwm), lossis yuav tsum muaj cov kev txwv uas ua rau nws nyuaj rau tsim qee yam uas ua txhaum cov kev txwv.
Qhov no tsis zoo li siv rau kev ua haujlwm ntawm lub vev xaib (thiab pom meej rau lawv kev siv tau).
Nws tsim nyog sau cia tias tsuas yog vim React lossis Angular qhov chaw siv sijhawm ntau CPU npaj cov cai tshaj li lwm tus tsis tas txhais tau tias React cov chaw muaj CPU ntau dua li Vue qhov chaw thaum khiav. Qhov tseeb, cov ntaub ntawv peb tau saib hais tias tsawg heev txog kev ua haujlwm ntawm lub moj khaum thiab cov tsev qiv ntawv. Lawv tham ntau ntxiv txog txoj kev txhim kho uas, paub txog lossis tsis paub, cov qauv no tuaj yeem thawb cov programmer mus rau. Peb tab tom tham txog cov ntaub ntawv rau lub moj khaum, lawv cov ecosystem, thiab cov txheej txheem kev loj hlob.
Nws kuj tseem tsim nyog hais txog qee yam uas peb tsis tau txheeb xyuas ntawm no, piv txwv li, lub sijhawm siv ntau npaum li cas lub cuab yeej siv ua tiav JavaScript code thaum hloov pauv ntawm nplooj ntawv ntawm lub xaib. Qhov kev sib cav hauv kev pom zoo ntawm SPA yog tias ib zaug ib nplooj ntawv thov raug thauj mus rau hauv qhov browser, tus neeg siv yuav, hauv txoj kev xav, tuaj yeem nkag mus rau lub vev xaib nplooj ntawv sai dua. Kuv tus kheej kev paub qhia kuv tias qhov no yog deb ntawm qhov tseeb. Tab sis peb tsis muaj ntaub ntawv los qhia qhov teeb meem no.
Dab tsi yog qhov tseeb yog tias koj siv lub moj khaum lossis cov tsev qiv ntawv los tsim lub vev xaib, koj tab tom ua kev sib haum xeeb ntawm kev pib thauj cov phiaj xwm thiab npaj mus. Qhov no siv txawm rau qhov zoo tshaj plaws scenarios.
Nws muaj peev xwm ua kom muaj qee qhov kev sib haum xeeb hauv cov xwm txheej tsim nyog, tab sis nws yog ib qho tseem ceeb uas cov neeg tsim khoom ua kom muaj kev cuam tshuam zoo li no.
Tab sis peb kuj muaj laj thawj rau kev cia siab. Kuv tau txais kev txhawb nqa los ntawm qhov ze npaum li cas cov neeg tsim khoom Chrome ua haujlwm nrog cov tom qab qee cov cuab yeej pem hauv ntej peb tau npog los pab txhim kho kev ua haujlwm ntawm cov cuab yeej ntawd.
Txawm li cas los xij, kuv yog ib tus neeg pragmatic. Tshiab architectures tsim teeb meem kev ua haujlwm ntau npaum li lawv daws lawv. Thiab nws yuav siv sijhawm los tshem tawm qhov tsis txaus. Ib yam li peb yuav tsum tsis txhob cia siab tias tshiab network technologies yuav daws tau tag nrho cov teeb meem kev ua tau zoo, koj yuav tsum tsis txhob cia siab tias qhov no los ntawm cov tshiab versions ntawm peb nyiam lub moj khaum.
Yog tias koj xav siv ib qho ntawm cov cuab yeej pem hauv ntej uas tau tham hauv cov ntaub ntawv no, qhov no txhais tau tias koj yuav tsum tau siv zog ntxiv los xyuas kom meej tias, qhov xwm txheej, koj tsis ua mob rau koj qhov project. Nov yog qee qhov kev txiav txim siab los txiav txim siab ua ntej koj pib siv lub moj khaum tshiab:
Tshawb xyuas koj tus kheej nrog kev nkag siab zoo. Koj puas xav siv koj lub moj khaum uas koj xaiv? Ntshiab JavaScript tuaj yeem ua ntau yam hnub no.
Puas muaj lwm txoj kev sib dua rau lub moj khaum ntawm koj xaiv (xws li Preact, Svelte lossis lwm yam) uas tuaj yeem muab rau koj 90% ntawm lub peev xwm ntawm lub moj khaum ntawd?