2018 yilda JavaScript narxi

Yangilanish: 2019 yilda JavaScript narxlari bilan tanishish mumkin.

Interfaol saytlarni yaratish sizning foydalanuvchilaringizga JavaScript-ni yuborishni o'z ichiga olishi mumkin. Ko'pincha, bu juda ko'p. Siz mobil havolalar sahifasida faqat havolani bosish uchun yuklanganga o'xshaysizmi yoki aylantirmoqchi bo'ldingiz va hech narsa bo'lmaydi?

Bayt-by-by-JavaScript, bu hali ham mobil telefonlarga yuboriladigan eng qimmat manba, chunki u interfaollikni ko'p jihatdan kechiktirishi mumkin.

WebPageTest (src) tomonidan o'lchanadigan CNN.com uchun JavaScript-ni qayta ishlash vaqti. Yuqori darajadagi telefon (iPhone 8) skriptni 4 soniyada qayta ishlaydi. O'rtacha telefonni (Moto G4) oladigan yoki kam sonli 2018 (Alcatel 1X) telefonining ~ 36 sonini solishtiring.

Bugungi kunda biz JavaScript-ni samarali etkazib berish uchun foydalanadigan ba'zi foydalanuvchilarga foydali tajribalarni taqdim etamiz.

tl; dr:

  • Tez bo'lish uchun faqat joriy sahifaga kerak bo'lgan JavaScript-ni yuklang. Foydalanuvchiga nima kerakligini oldindan belgilab qo'ying va qolganlarini kod ajratish orqali dangasa yuklang. Bu sizga yuklash va interaktiv tezlikda olish uchun eng yaxshi imkoniyatdir. Odatdagidek marshrutga asoslangan kodlarni ajratish stacklari o'yinni o'zgartiradi.
  • Ishlash byudjetini quchoqlang va ular ichida yashashni o'rganing. Mobil uchun, minuslangan / siqilgan <170KB JS byudjetiga ega bo'ling. Siqilmagan, bu hali ham ~ 0.7MB kod. Muvaffaqiyat uchun byudjetlar muhim ahamiyatga ega, ammo ular sehrni yakka holda tuzata olmaydilar. Jamoa madaniyati, tuzilishi va ijro etilishi masalasi. Byudjetsiz qurilish ishlashning pasayishi va muvaffaqiyatsizlikka olib keladi.
  • JavaScript to'plamlarini qanday tekshirish va kesib olishni o'rganing. Sizga faqat fraktsiya, kerak bo'lmagan brauzerlar uchun polifiller yoki kod nusxasi kerak bo'lganda to'liq kutubxonalarni etkazib berish imkoniyati katta.
  • Har bir o'zaro ta'sir yangi "Vaqt-interfaol" ning boshlanishidir; ushbu kontekstda optimallashtirishni ko'rib chiqing. Transmissiya hajmi past darajadagi mobil tarmoqlar va protsessorga ulangan qurilmalar uchun JavaScript tahlil qilish vaqti uchun juda muhimdir.
  • Agar mijoz tomonidan ishlatilgan JavaScript foydalanuvchi tajribasiga foyda keltirmasa, o'zingizdan so'rang, agar kerak bo'lsa. Ehtimol, server tomonidan taqdim etilgan HTML tezroq bo'lar edi. Mijoz tomonidan ishlab chiqilgan ramkalardan ularni talab qiladigan sahifalar bilan cheklashni ko'rib chiqing. Agar server ishlashi va mijozlarga xizmat ko'rsatish yomon ish bo'lsa, bu falokatdir.

Veb "tajriba" foydalanuvchi tomonidan to'ldirilgan

Foydalanuvchilar sizning saytingizga kirganda, ehtimol siz ko'plab fayllarni yuborishingiz mumkin, ularning ko'pi skriptlar. Veb-brauzerlar nuqtai nazaridan, bu quyidagicha ko'rinadi:

Sizga tashlangan fayllarning jinnisi.

Men JavaScript-ni yaxshi ko'raman, bu har doim saytingizning eng qimmat qismidir. Nega bu katta muammo bo'lishi mumkinligini tushuntirib bermoqchiman.

Bugungi kunda medianing veb-sahifasida taxminan 350 KB minifikatsiyalangan va siqilgan JavaScript-ni jo'natish mumkin. Siqilmagan, brauzer 1 MBdan oshiq skriptni qayta ishlashi kerak.

Eslatma: Sizning JavaScript to'plamlaringiz foydalanuvchilarning saytingiz bilan qanchalik tez aloqada bo'lishini kechiktirayotganiga ishonchingiz komilmi? Lighthouse-ni tekshiring.

JavaScript hisobotining HTTP Arxiv holati statistikasi, 2018 yil iyul, medianing veb-sahifalarida ~ 350KB minifikatsiyalangan va siqilgan skriptda ko'rsatilgan. Ushbu sahifalar interfaol bo'lishi uchun 15 sekundgacha vaqt ketadi.

Ushbu JavaScript-ni yuklab olgan tajriba mobil qurilmalarga yuklash va interaktiv bo'lish uchun 14+ soniyadan ko'proq vaqtni oladi.

Buning katta omili shundaki, mobil tarmoqdan kodni yuklab olish va uni mobil protsessorda qayta ishlash uchun qancha vaqt kerak bo'ladi.

Keling, mobil tarmoqlarni ko'rib chiqaylik.

Muayyan metrikada yaxshiroq ishlaydigan mamlakatlar quyuqroq soyalarda. Bunga kiritilmagan davlatlar kul rangda. Shuni ham ta'kidlash kerakki, hatto AQShda ham keng polosali qishloq tezligi shaharlarga qaraganda 20% sekinroq bo'lishi mumkin.

OpenSignal-dan olingan ushbu diagramma 4G tarmoqlarining global miqyosda qay darajada mavjudligini va har bir mamlakat tajribasida ulanish tezligining o'rtacha foydalanuvchilarini ko'rsatadi. Ko'rinib turibdiki, aksariyat davlatlar ulanish tezligini biz o'ylaganimizdan ham past bo'lishmoqda.

Oldinroq medianing veb-sayti uchun 350 KB skriptni yuklab olishga biroz vaqt ketishi mumkin emas, haqiqat shundaki, agar biz ommabop saytlarga qarasak, ular bundan ham ko'proq skriptlarni etkazib berishadi:

Biz ushbu shiftni ish stolida ham, mobil Internetda ham urmoqdamiz, saytlar ba'zida brauzer tomonidan qayta ishlanishi kerak bo'lgan bir necha megabaytga teng kodni yuboradi. Savol berish kerak, siz bu ko'p JavaScript imkoniyatiga egamisiz?

JavaScript narxga ega

Eslatma: Agar siz juda ko'p ssenariy yuborsangiz, to'plamlarni ajratish yoki JS-ning yukini daraxt silkitishi yordamida kamaytirish uchun kodni ajratishni ko'rib chiqing.

Bugungi kunda saytlar ko'pincha o'zlarining JS to'plamlarida quyidagilarni yuboradilar:

  • Mijoz tomoni yoki UI kutubxonasi
  • Davlat boshqaruvi yechimi (masalan, Redux)
  • Polyfills (ko'pincha zamonaviy brauzerlar uchun kerak emas)
  • To'liq kutubxonalar faqat ular foydalanadigan narsalarga (masalan, barcha lodashlar, lahzalar + tillar)
  • UI komponentlari to'plami (tugmalar, sarlavhalar, yon panellar va boshqalar)

Ushbu kod qo'shimchalar. Qancha ko'p bo'lsa, sahifani yuklash uchun ko'proq vaqt kerak bo'ladi.

Veb-sahifani yuklash uchta muhim lahzalarga ega bo'lgan film tasmasiga o'xshaydi.

Bu erda: ro'y beryaptimi? Bu foydalimi? Va foydalanish mumkinmi?

Yuklash - bu sayohat. Biz baxt-saodatning foydalanuvchi-o'lchovlariga oid g'amxo'rlikni oshirishga o'tmoqdamiz. Faqat yuklash yoki domContentLoaded-ga qarashning o'rniga, biz hozir

Ekranda ba'zi tarkibni uzatishga ulgurgan paytingiz bo'ladimi? (navigatsiya boshlanganmi? server javob berishni boshladimi?)

Sizga matn yoki tarkibni bo'yagan paytingiz foydasi tegdimi, bu foydalanuvchiga tajribadan baho olishga va u bilan shug'ullanishga imkon beradi.

Va keyin foydalanuvchi tajriba bilan mazmunli aloqani boshlashi va biror narsa sodir bo'lishi mumkin bo'lgan payt foydalidir.

Men ilgari "interfaol" atamasini eslatib o'tdim, ammo bu nimani anglatadi?

Vaqti-vaqti bilan interaktiv tarzda vizualizatsiya, kam yuklangan tajriba foydalanuvchini maqsadga erishishi mumkinligini o'ylashga majbur qiladi, aslida esa sahifa haqiqat bo'lishi uchun zarur bo'lgan barcha kodlarni yuklashni tugatmagan. Interfaol animatsiya uchun Kevin Shafga rahmat

Sahifaning interfaol bo'lishi uchun u foydalanuvchi kiritgan ma'lumotlarga tezda javob bera olishi kerak. Kichkina JavaScript yuklamasi bu tez sodir bo'lishini ta'minlashi mumkin.

Agar foydalanuvchi ssilkani bossa yoki sahifani aylantirsa, ular o'z harakatlariga javoban biror narsa ro'y berayotganini ko'rishlari kerak. Buni etkazib bera olmaydigan tajriba sizning foydalanuvchilaringizni g'azablantiradi.

Lighthouse laboratoriya sharoitida vaqtni interfaol kabi foydalanuvchi tomonidan ishlatiladigan bir qator ko'rsatkichlarni o'lchaydi.

Odatda bu bir joyda, serverlar tomonidan odamlar tajriba o'tkazgandan so'ng, keyin interfeysni "namlash" uchun JavaScript-ni quyib yuborish (voqea ishlovchilari va qo'shimcha xatti-harakatlarni qo'shish).

Brauzer sizga kerak bo'lishi mumkin bo'lgan ko'plab tadbirlarni boshqarganda, uni foydalanuvchi kiritishi bilan ishlaydigan ipda bajarish mumkin. Ushbu ip asosiy ip deb ataladi.

Asosiy ipga (