Stencil.js vs lit-element vs Vanilla vs Shadow DOM vs Vue.js Hver er besta lausnin fyrir vefhluta

Vefhluti er núverandi suðsorð en mál sem enn er fjallað um er „Hver ​​er besta lausnin fyrir vefhluta“. Vegna þessa umræðuefnis hafði ég eytt mánuði í að finna svarið „Hvað er fljótlegasta leiðin“ og „Hvað ættum við að gera“

Lausnir

Ég vel 5 lausnir fyrir þessa prófunar Vanilla, Vanilla með ShadowDOM, Lit-element, Stencil.js by, Vue.js. Vue.js ?? Hvers vegna ég vel þrátt fyrir vue.js er ekki eini vefhlutinn lausnin. Ástæðan er með nýju CLI tólinu sem þú getur umbreytt þættinum í Vefhluta. Önnur ástæða er að ég er aðdáandi vue.js

Yfirlit um umgjörð

Vue.js er framsækin umgjörð í grundvallaratriðum er framandrammi sem þróast á vefhlutanum hátt

Stencil.js er búinn til af Ionic og búa til í staðinn fyrir Ionic hluti búinn til af Angular í fortíðinni. Stencil.js með því að nota Typescript og auðvelt að flytjast frá Angular.js

Lit-þáttur er nett bókasafn frá Polymer. Lit-þáttur einbeitir sér aðeins að stuðningi við vefhluta

Vanilla ætti að vera fljótastur?

Ég held að allir muni hafa þessa einföldu spurningu „Vanilla ætti að vera fljótast?“. Ég er líka sammála þessari spurningu en ég vil vita hversu hratt og ef hún er í samanburði við önnur hvernig munurinn á vanillu og annarri lausn. Ég vissi samt fljótlegustu leiðina til að byrja með.

Búðu til sama þáttinn

Áður en ég prófar þarf ég að búa til vefhluta til að vera eins í hverri lausn. Sama hönnun sama CSS sama HTML og sömu rökfræði. Íhluturinn verður Github skjöldur og sækir Github API til að birta prófílinn minn og bíða í 10 sek. Til að breyta í króm prófíl Google. Ég bjó til aðra ná því ég vil sjá hraðann á uppfærslutímanum líka. Mín hluti er að líta svona út

Íhluturinn

Staðbundin og byggð

Ég vil ekki að niðurstöður prófsins raskist. Ég ákveð að hlaða allar eignir og ósjálfstæði frá staðbundnum og gera lítið úr öllum Javascript skrám til að gera það hraðvirkara

Hvernig á að prófa

Ég var að búa til handrit með Node.js eftir þetta skref

  1. sprautaðu JS í HTML skjal
  2. sprautaðu árangursmælinguhandrit í HTML skjal
  3. Notaðu Brúðuleikara til að opna síðu 1000 -2000 sinnum
  4. fanga tímasetningu frá vélinni

Prófun er þekja 2 tilfelli „Einn hluti“ og „Margþættir íhlutir“. Aðalmælin sem ég nota til að prófa er

  1. Tími búnaðar til að búa til (firstCreateComponent) *
  2. tími uppfærslu íhluta (UpdateComponent) *
  3. firstPaint tími
  4. firstContentfulPaint tími
  5. domContentLoad tími

* Ég vil ekki að þú einbeitir þér að þessu mæligildi. Af hverju? ég segi þér það seinna

Fyrsta próf 1: Hversu hratt er hægt að skila einum hluta

Ég reyni að skila þessari síðu 1000 sinnum og safna meðaltal endurvinnslutíma hverrar lausnar. Þetta er afleiðing prófana

Tími hverrar lausnar

Út frá niðurstöðunni er Stencil.js nokkuð góður með alla mæligildi. Ef við einbeittum okkur fyrst Málning Lit-frumefnisins tókst mjög vel. Fyrir þessa umferð gef ég stig fyrir Stencil.js. Vue.js hefur svolítið hlerunarbúnað vegna þess að í hvert skipti sem ég prófa fyrsta málningu og firstContentFulPaint mun slá á sama tíma. Tilgáta mín er að Vue.js afturkreistingur muni skila pöntun í einu skoti fyrir eftir að afturkreistingur tekur saman alveg.

Tími hverrar lausnar

Eftir að við höfum leitað að líftíma (búðu til íhlutann, uppfærðu íhlutinn). Við munum sjá vanillu vera betri en önnur lausn. Eins og ég sagði þér að þessi mælikvarði er ekki góður til mælinga vegna þess að tilgáta mín er að hver lausn muni hafa sína eigin aðferð til að kalla fram lífsferil.

Önnur prófun 2: Hve hratt er hægt að skila mörgum íhlutum

Í hinum raunverulega heimi notum við ekki aðeins einn þátt á einni síðu. Þessi prófun mun fjölga íhlutum úr 1-2000 íhlutum til að mæla hraða þegar fjöldi íhluta eykst. Útkoman er svona

Ekki er auðvelt að búa til þetta dreifingarlínurit. Ég breytti í stefnulínu til að auðvelda lestur.

Þróunarlínan á Lit-þáttaritinu er æðisleg. Það lítur betur út en innfæddur ef um er að ræða fyrstu málningu. Ef vefsvæðið þitt inniheldur ekki meira en 100 íhluti þjóna Stencil.js enn betri hraða.

Vanilla er best

Jafnvel Lit-þáttur gekk mjög vel fyrir fyrstu málningu en með krafti vanilluþróunarlínu firstContentFulPaint og domContentLoad lítur út ansi ógnvekjandi. Ef við einbeitum okkur aðeins að stefnulínunni er Lit-þáttur besta lausnin sem ekki er valið. Sama og fyrsta málningin ef þú einbeitir þér aðeins að minna en 100 íhlutum Stencil.js er fljótlegasta leiðin jafnvel að stefnulínan lítur ekki vel út.

Skjala stærð

Skráarstærð er einn mikilvægi þátturinn til að velja lausnina. Ef skráin þín er frekar stór mun notandi taka tíma að hlaða miðlarann ​​fyrir eignir. Eins og Addy Osmani nefnir alltaf 170kb er fullkomin stærð búnt skrár. Svo ég reyni að mæla stærð allra lausna bæði fyrir GZIP og eftir það. Stencil.js er minni ef þú ert ekki að bera saman við vanillu.

Aðgerðartími และ Framkvæmdartími

Áður en ég skrifa þessa grein bjó ég til tólanafn https://jsspeedometer.com til að prófa JS greina og framkvæma tíma vegna þess að núverandi tól á markaðnum styður mig ekki til að gera þetta. Þetta tæki hjálpar þér að mæla bæði mælikvarða út frá handritinu þínu eða hvaða handriti sem er í CDNJS

บน จาก ซ้า น บน upplýst-þáttur, vanillu-skuggi-dom, vanillu, stenciljs

Vue.js er með eitthvað mál með JSspeedometer ég mun standast þá lausn. Vanilla og Vanilla Shadow DOM munu klára með 100 metrum en þú þarft meira en 300ms fyrir ramma. Stencil.js þarf meiri ræsitíma en aðrar rammar því Stencil.js mun búa til margar útgáfur til að styðja marga vafra og aðalhandritið mun velja fullkomið handrit fyrir vafrann á flugu.

Hvaða kerfi getur ekki mælst

Vanilla - Það er ekki mjög slæmt fyrir erfðaskrá en er ekki auðvelt að binda breytu við sniðmát sem þú verður að höndla sjálfur.

Vanilla Shadow DOM - Eini munurinn á vanillu er Þú verður að gera

Stencil.js - Stencil.js hefur margar mismunandi leiðir vegna þess að það er aðeins einn rammi í þessu prófi með því að nota Typescript og líftími er ekki eins. Þegar ástand þitt er uppfært uppfærsla líftíma krókar mun kveikja en aðrar umgjörðir koma af stað þegar DOM uppfærist. Stencil.js reynir að smíða marga hluti fyrir mismunandi stuðning við vafra, það hjálpar notendum að þurfa ekki að hlaða Polyfill að fullu allan tímann.

Lit-þáttur — Það er ennþá beta en árangur Lit-þáttar er mjög áhugaverður fyrir framleiðslu í framtíðinni

Niðurstaða

Ef þér er ekki sama þá geturðu notað vanillu en ef þú vilt nota vefhlutinn þinn með stærra verkefni er Stencil.js ekki mjög slæmt val. Vinsamlegast fylgstu með Lit-frumefni þetta er góður kostur fyrir framtíðina. Hins vegar ekki nota Vue.js fyrir vefhluta

Ef þú vilt sjá allan kóðann eða prófa sjálfur skaltu fara á https://github.com/thangman22/custom-component-performance-test. Vinsamlegast endurgjöf mér hver er árangur þinn