Google Photos Web UI-ni yaratish

Shlyapa ostidagi tepa

Bir necha yil oldin men Google Fotosuratlar guruhida muhandis bo'lish sharafiga muyassar bo'ldim va 2015 yilda ilk marotaba ishga tushirdim. Mahsulotga ko'p odamlar hissa qo'shdi - dizaynerlar, mahsulot menejerlari, tadqiqotchilar va son-sanoqsiz muhandislar (Android, iOS bo'ylab) , Veb va server) ba'zi asosiy rollarni nomlash uchun. Mening javobgarligim veb-interfeys interfeysi va aniqrog'i fotosurat tarmog'i edi.

Biz shafqatsiz narsani sinab ko'rmoqchi edik va bir vaqtning o'zida to'liq kenglikdagi (asosli) sxemani qo'llab-quvvatlamoqchi edik, har bir fotosuratning tomonlar nisbati saqlanib qolindi, skrinkallashtirildi (ya'ni arxivingizning istalgan bo'limiga o'ting), yuz minglab fotosuratlar , 60 kadr tezligida aylantiring va darhol yuklang.

O'sha paytda boshqa hech qanday fotogalereya buni qo'llab-quvvatlamadi va mening eng yaxshi bilimlarim uchun ular hali ham bilishmaydi. Hozirda ko'plab boshqa galereyalar ushbu xususiyatlarning ba'zilarini qo'llab-quvvatlayotganda, ular tartibni yaratish uchun odatda har bir fotosuratni qirqishadi.

Bu erda biz ushbu muammolarni qanday hal qilganimiz haqida va "Google fotosuratlar" ning veb-versiyasi qanday ishlashi haqida batafsil ma'lumot.

Nega bu qiyin bo'ldi?

Ikkala eng katta qiyinchiliklar ikkalasiga ham to'g'ri keladi.

Birinchi o'lchovdagi qiyinchilik shundan iboratki, katta rasm to'plamlari bo'lgan foydalanuvchilar uchun (va ba'zi foydalanuvchilarning chorak milliondan ortiq fotosuratlari yuklangan) meta-ma'lumotlar juda ko'p. Minimal ma'lumotni yuborish (fotosurat manzili, kenglik, balandlik va vaqt belgilari) to'liq yig'ish uchun ko'p megabayt ma'lumotni yuboradi, bu bizning bevosita yuklash maqsadimizga zid keladi.

Ikkinchi o'lchovdagi qiyinchilik bu fotosuratlarning o'zlari. Zamonaviy HDPI ekranlarida, hatto kichkina rasm eskizi ham tez-tez 50KB yoki undan yuqori. Minglab rasmlar 50 megabaytni tashkil qilishi mumkin va bu juda ko'p narsa emas, agar siz bularning barchasini darhol veb-sahifaga joylashtirishga harakat qilsangiz, brauzerni sekinlashtirishingiz mumkin. Eski Google+ rasmlari 1000–2000 fotosuratni aylantirgandan so'ng sust bo'ladi va Chrome 10000 yuklangandan so'ng yorliqni buzadi.

Keling, munozarani turli qismlarga ajratamiz (siz u erga qalin rang bilan ko'rsatilgan sarlavhani qidirishingiz mumkin).

  1. Scrubable fotosuratlar - fotosuratlar kutubxonasining istalgan qismiga tezda o'tish qobiliyati.
  2. Oqlangan Layout - brauzerning kengligini to'ldiring va har bir fotosuratning nisbatlarini saqlang (kvadrat kesilmaydi).
  3. 60fps Scrolling - minglab fotosuratlarni ko'rib chiqishda ham sahifaning javob berishini ta'minlash.
  4. Zudlik bilan his qilish - biron bir narsa yuklanishini kutadigan vaqtni kamaytiring.

1. Scrubable fotosuratlar

Katta to'plamlar bilan ishlashga bir nechta yondashuvlar mavjud. Eng qadimgi, ehtimol pagatsiya, unda siz aniq natijalarni ko'rsatasiz va keyingi guruhni, reklama ko'ngil aynishini ko'rish uchun "Keyingi" ni bosing. Keyinchalik ommabop zamonaviy yondashuv - bu cheksiz aylantirish, shuning uchun shunday nomlangan, chunki oxiriga yaqinlashganda faqat ma'lum miqdordagi natijalarni yuklaganingizda, keyingi partiyani avtomatik ravishda sahifaga olib kirib, uni qayta-qayta kiritasiz; Agar ish yaxshi bo'lsa, foydalanuvchi doimiy ravishda aylanib yurishi mumkin (cheksiz tuyuladi), to'xtamasdan turib.

Paginatsiya ham, cheksiz aylantirish ham shunga o'xshash kamchilikka ega, chunki siz oxirigacha erishish uchun barcha tarkibni yuklashingiz kerak, shuning uchun bu rasmni yillar oldin topish oson ish emas.

Oddiy hujjat uchun skrinbar paneli siz kutganingizdek ishlaydi va bundan tashqari siz uni oxirigacha yoki boshqa biron bir nuqtaga o'tish uchun butun qismni tezda bosib o'tib ketishingiz mumkin. Pagatsiya bilan aylantirish paneli sahifaning pastki qismiga tegadi (lekin kutubxona emas), va cheksiz aylantirish sahifasida skrining paneli doimo o'zgarib turadi, agar oxirigacha siljitsangiz, sahifaning uzunligi oshgan sari u orqaga siljiy boshlaganini ko'rasiz. .

Scrubable panjara skrining paneli to'g'ri ishlaydigan uchinchi variantni taqdim etadi.

Fotosuratlarning istalgan bo'limiga o'tish uchun biz sahifada bo'sh joyni oldindan ajratib qo'yishimiz kerak, shunda aylantirish paneli vakili bo'ladi. Agar biz barcha fotosuratlar uchun ma'lumotga ega bo'lsak, bu juda oson bo'lar edi, lekin uni yuborish juda ko'p bo'lgani uchun buni boshqa yo'l bilan qilishimiz kerak.

Bu erda boshqa ko'plab skrabka qilinadigan galereyalar yorliqni olishadi - ular har bir fotosuratni bir xil kvadrat shakliga kesib olishadi. Shunday qilib, butun sahifa tartibini hisoblash uchun siz fotosuratlarning umumiy sonini bilishingiz kerak: berilgan kvadrat kattalik uchun siz ko'rish maydonchasining kengligini ozgina olib, undan ustunlar va satrlar sonini hisoblashda foydalanishingiz mumkin:

Kodning faqat uchta satrida o'lchov amalga oshiriladi, so'ngra rasmlarni joylashtirish va joylashtirish uchun bu o'n baravar ko'p.

Metadata boshlang'ich hajmini kamaytirish uchun biz yondashdik, foydalanuvchi fotosuratlar to'plamini alohida qismlarga ajratish va dastlabki yuklamada bo'limlar va hisoblarni yuborish. Masalan, fotosuratlarni bo'limlarga ajratishning oddiy usuli oylar davomida bo'lishi mumkin - siz ularni serverda hisoblashingiz mumkin (yoki ularni oldindan hisoblab chiqing) va hatto o'nlab yillar davomida millionlab fotosuratlarga ega bo'lsangiz ham, bu arzimas ma'lumot. Ma'lumotlarning juda asosiy ko'rinishi quyidagicha ko'rinishi mumkin:

Favqulodda holatlarda, bu bir oy ichida juda ko'p suratga tushgan foydalanuvchilar (masalan, professional fotosuratchilar) uchun muammolarga duch kelishi mumkin - bo'limlarning maqsadi har chelakni boshqariladigan metadata kamaytirish, ammo og'ir foydalanuvchilar uchun bir oy davom etishi mumkin. minglab fotosuratlarni o'z ichiga oladi (va shuning uchun megabayt ma'lumotlar). Yaxshiyamki, aqlli infratuzilma jamoasi har bir foydalanuvchi uchun alohida bo'limlar yaratib, har xil narsalarni (masalan, geolokatsiya, vaqt belgilari va hk) hisobga oladigan murakkab echimni ishlab chiqdi.

Fotosuratlar tarmog'i bo'limlar, segmentlar va plitkalar,

Ushbu ma'lumot bilan mijoz har bir bo'limda qancha bo'sh joy kerakligini hisoblab, DOM-ga to'ldiruvchini qo'yishi mumkin, va keyin foydalanuvchi tezda aylantirilganda, mos keladigan fotosuratlarni metamadamalarni serverdan olish, to'liq tartibni hisoblash va sahifani yangilash.

Mijozda bizda bo'lim uchun meta-ma'lumotlar mavjud bo'lganda, biz aslida bir qadam oldinga boramiz va har bir qismdagi fotosuratlarni alohida kunlarga ajratamiz. Biz dinamik segmentatsiyani muhokama qildik (masalan, joylashgan joyi, odam, sana va hokazo bo'yicha), bu hali ham ajoyib kelajak xususiyatiga ega bo'lishi mumkin.

Bo'limlarning o'lchamlarini aniqlash juda oson bo'lib, siz shunchaki bo'lim uchun fotosuratlar sonini olish va ularni normal nisbatlar bo'yicha eng yaxshi taxminlarga ko'paytirishingiz mumkin:

Ehtimol o'zingizdan: "Bu qanday aniq bo'lishi mumkin?" Haqiqat shundaki, bunday emas, hatto yaqin emas.

Yaxshiyamki, men dastlab muammoning ushbu qismini o'ylab ko'rdim (sabablarga ko'ra Layout bo'limida tushuntirib beraman), ammo sizga juda yaxshi bo'lishi kerak emasligi aniq (va ko'plab fotosuratlar uchun bu ko'pincha noto'g'ri). (o'n minglab piksel). Faqatgina muhim narsa shundaki, smeta aniq emas, shuning uchun o'tish paneli aniq ko'rinishni saqlab turishi kerak.

Oddiy hiyla shundan iboratki, siz oxir-oqibat qismni yuklaganingizda taxmin qilingan balandlik va haqiqiy balandlik o'rtasidagi farqni hisoblaysiz. Agar tafovut bo'lsa, shunchaki uning ostidagi barcha bo'limlarni shu miqdorga o'tkazing.

Agar siz o'tish joyidan yuqori qismlarni yuklayotgan bo'lsangiz, aylantirish o'rnini yangilashingiz kerak bo'lishi mumkin. Ammo bularning barchasi foydalanuvchi uchun sezilmaydigan farq bo'lmasligi uchun birgina animatsiya doirasidagi bir soniyaning oddiy fraktsiyalarida amalga oshirilishi mumkin.

2. Oqlangan tartib

Men bilgan barcha asosli rasm sxemalari, agar juda oddiy bo'lsa, juda zo'r yondashuvdan foydalanishni bilaman: ular qatorning balandligi uchun panjara bo'lishi yaxshi bo'ladi. Bir satrdagi barcha fotosuratlar bir xil balandlikda o'lchanadi va har bir satr bir xil kenglikda, lekin har qanday ikkita satr balandlikda farq qilishi mumkin va farq odatda unchalik sezilmaydi.

Yagona balandlikdan voz kechib, har bir fotosuratning tomonlarini nisbatlarini saqlab turishingiz mumkin, bunda bir tekis interval bilan sobit kenglik panjarasiga erishasiz. Bunga erishish algoritmi hatto qiyin emas, siz satrning maksimal balandligini tanlaysiz, so'ngra fotosuratni shu balandlikka o'lchaganingizda, uning uzunligini yugurayotgan chiziqqa qo'shasiz va har safar kenglik siz ko'rayotgan maydondan oshib ketganda har bir fotosurat kenglikka mos kelguncha pastga tushing (balandligi qisqaradi).

Masalan, 14 ta fotosuratni joylashtirish:

Bu juda sodda echim, lekin u yaxshi ishlaydi; Google+ uni ishlatdi, Google Search bu shakldan foydalanadi va Flickr uni 2016 yilda amalga oshirishni xushmuomalalik bilan ochib berdi (ular biroz oqilona va bitta fotosurat bilan kattalashtirish yaxshiroqmi yoki ikkinchisini kattalashtirish yaxshiroqmi). Kod quyidagicha sodda bo'lishi mumkin:

Ammo, dastlab (agar kerak bo'lsa) taxminiy baholarni yakuniy maketga to'g'ri kelishidan xavotirda bo'lganim sababli, men yanada murakkab echimni qidirishga qaror qildim va natijada eng yaxshisini topdim.

Mening nazariyam shundan iborat ediki, biz sxemani taxmin qilgandan so'ng, biz fotosuratlarni o'sha hududga moslashtira olamiz. Bu, asosan, matnni joylashtirishga o'xshash (xatboshini tasdiqlash uchun so'zlarni matnga o'ralgan holda) o'xshash tarzda chiziq bilan boqish muammosidir. Knuth & Plass liniyasini kesish algoritmi yaxshi hujjatlashtirilgan dinamik dasturlash usuli bo'lib, men uni fotosuratlar uchun moslashtirish mumkinligini his qildim.

Bir satrda qaror qabul qilishning o'rniga, u har bir qatorga ketma-ket keladiganlar ta'sir ko'rsatishi uchun butun qismni bir butun sifatida yoritib beradi.

Buni qutilar, elim va penaltilarning kombinatsiyasi orqali amalga oshiradi. Qutilar joylashtiriladigan bo'linmas bloklardir (odatda so'zlar, lekin ba'zida belgilar), elim - bu cho'zilishi yoki qisqarishi mumkin bo'lgan bloklar (odatda chiziqdagi bo'sh joy) va ba'zi narsalarni tushirish uchun jazo choralari qo'llanilishi mumkin (ko'pincha defisatsiya yoki chiziq uzilishlari).

Quyidagi diagrammada qutilar orasidagi yopishtiruvchi chiziqlar bo'ylab o'lchamda qanday o'zgarishini ko'rishingiz mumkin.

Matn tuzilishi - qutilar va elim

Fotosuratlarni joylashtirish uchun ba'zi bir farqlar mavjud, ammo ular buni soddalashtiradi. Matn uchun odamlar qabul qiladigan juda ko'p tafovutlar mavjud - siz so'zlar orasidagi bo'shliqni o'zgartirishingiz mumkin, hatto so'zlardagi harflar orasidagi bo'shliqni ham o'zgartirishingiz mumkin va o'rtadagi so'zni chizishingiz mumkin. Fotosuratlar uchun odamlar rasmlar orasidagi chegaralar har xil bo'lganda, ularni chalg'itadi, va rasm chizish ham ma'nosiz.

Matn algoritmi qanday ishlashi haqida ba'zi ajoyib yozishmalar mavjud, ammo biz buni fotosuratlarga qanday moslashtirdik.

Fotosuratlar qutilarga aylandi, biz elim tushunchasini butunlay yo'q qilishimiz mumkin va jazo choralarini ham soddalashtirishimiz mumkin. Hozir aytamanki, biz qutilarni tashlaganimiz va fotosuratlar elim bo'lgan deyishimiz o'xshashroqdir (ya'ni maketimizning moslashuvchan qismi bu bo'shliqdagi fotosuratlardir). Balki bizda yopishqoq qutilar bo'lsa kerak?

Fotosuratlar orasidagi bo'shliqni almashtirish o'rniga, biz boshqa asosli tartiblarga amal qilamiz va qator balandliklarini o'rnatamiz. Ko'pincha qatorni o'rash uchun bir nechta joy bo'lar edi, oldinroq o'rash uzunroq satrlarni berar edi (kenglikni to'ldirish uchun kattalashtirish), keyinroq o'rash esa qisqaroq qatorlarni berar edi (moslash uchun pastga tortish). Satrlarning mumkin bo'lgan barcha o'zgarishini ko'rib chiqib, biz kerakli maydonga eng mos keladiganini topdik.

Bu degani biz uchta asosiy e'tiborni tortdik: ideal satr balandligi, maksimal siqilish koeffitsienti (satrni idealdan qancha pastga tushirishimiz mumkin) va maksimal cho'zish koeffitsienti (biz qancha o'lchashimiz mumkin).

Algoritm har bir fotosuratni birma-bir tekshirib, ruxsat etilgan satrlarning izlanishini qidirib ishlaydi - ya'ni fotosuratlar guruhining kengligi mos kelganda qabul qilingan diapazonga to'g'ri keladigan balandlikka ega bo'lishi mumkin (maxShrink ≤ balandligi ≤ maxStretch). Har safar ruxsat etilgan tanaffusni topganda, u imkoniyatlar ro'yxatiga qo'shiladi va har bir fotosuratni va barcha mumkin bo'lgan qatorlarni ko'rib chiqmaguncha, ruxsat etilgan tanaffuslarni qidiradi.

Masalan, ushbu 14 fotosurat bilan, 3-4 ta fotosuratdan keyin maqbul qator bo'lishi mumkin va agar biz 3 tani buzgan bo'lsak, 6 yoki 7 da maqbul tanaffus bo'ladi, garchi agar biz 4 tani buzsak, 7 da maqbul tanaffuslar bo'ladi. yoki 8. Bular panjara uchun bir-biridan mutlaqo farq qiladigan, ammo barchasini yaroqli tartibini anglatadi.

Fotosuratlarni o'rash (sindirish)

Yakuniy qism har bir satr uchun yomonlik balini hisoblashdir. Ya'ni, bu qanchalik ideal bo'lmagan narsa. Nishon balandligi bo'lgan satrda yomonlik ballari 0 ga teng va satr qisqarishi yoki cho'zilishi kerak bo'lsa, yomonlik ballari shunchalik yuqori bo'ladi. Har bir satrning yakuniy qiymati (bu bir lahzada mantiqiy bo'ladi) demeritlar yordamida hisoblab chiqiladi, ular ko'pincha yomonlikning kubi yoki kvadratiga va ba'zi bir jarimalarga (masalan, chiziq uzilishlariga). Yomonlik va kamchiliklarni qanday qilib eng yaxshi hisoblash mumkinligi haqida ko'plab maqolalar mavjud, bizning holatlarimizda har bir satrning nisbati kuchini maksimal cho'zish / qisqarish hajmiga nisbatan ishlatamiz (kuch idealdan uzoq bo'lgan satrlarni qattiqroq jazolaydi).

Algoritmni ishga tushirgandan so'ng, tugunlarning grafigi tugaydi, bu erda har bir tugun ochilishi mumkin bo'lgan fotosuratni aks ettiradi, va har bir qirrada bir satr mavjud (har qanday berilgan tugun uchun bir nechta qirralar bo'lishi mumkin, bu bir nechta sindirish nuqtalari bo'lishi mumkinligini anglatadi). har qanday fotosuratdan boshlab). Ushbu qirralarning har biri uchun biz xarajatni (demerit qiymati) belgilashimiz mumkin.

Misol tariqasida, bizning 14 fotosuratimiz uchun, maqsadlar qatorining balandligi (180px) va berilgan ko'rish maydoni (1120px), bu 12 ta noyob panjara almashinuviga (yoki grafik orqali o'tishga) olib keladigan 19 ta qator tartibini (qirralarini) topdi. Quyida har bir noyob qator va unga ulanishi mumkin bo'lgan satrlar ko'rsatilgan. Moviy yo'nalish - bu eng yomon (eng yaxshi deb aytishga jur'at etamanmi?). Agar siz chiziqlarga rioya qilsangiz, har bir kombinatsiya har bir fotosuratni o'z ichiga olgan to'liq panjara hosil qilganini ko'rasiz - ikkita satr bir xil emas va ikkala panjara ham bir xil emas.

14 ta fotosurat uchun noyob qator va panjara birikmalari

Optimal fotosurat panjarasini topish (ya'ni, eng past kombinatsiyalangan qatorlar to'plami) grafik orqali eng qisqa yo'lni hisoblash kabi oson.

Yaxshiyamki, biz ishlab chiqaradigan grafik - bu yo'naltirilgan Actslic Graf (DAG) deb nomlanuvchi, u erda hech qanday halqa yo'q va siz faqat bitta yo'ldan borishingiz mumkin (ya'ni siz tugunlarni / rasmlarni takrorlay olmaysiz). Bu shuni anglatadiki, eng qisqa yo'lni hisoblash chiziqli vaqt ichida amalga oshiriladi (bu kompyuter tez ishlaydi). Yaxshisi, biz grafik ishlab chiqarayotganda, aslida eng qisqa yo'lni hisoblashimiz mumkin.

Yo'lning uzunligini hisoblash uchun biz har bir satrga tayinlangan xarajatni shunchaki qo'shamiz va har safar biz tugunga bog'laydigan yangi qirrani topsak, bu tugunning boshlanishigacha qisqaroq yo'l yaratishini tekshiring. eslab qol.

Mana bu 14 ta fotosurat orqali kompyuter nimani "ko'rayotgani" ning yuqori chizig'i, hozirda qaysi fotosuratlarni ko'rib chiqayotganini ko'rsatadi (satrning boshlanishi va oxiri), quyidagi grafikda qanday sinish nuqtalari ko'rsatilgan. kashf qilingan va qaysi qirralarning ulanishi va har bir nuqtada har bir tugun uchun eng qisqa yo'lni pushti rang bilan ajratib ko'rsatish. Bu aslida yuqorida ko'rsatilgan rasm grafikasining yana bir vakili - qutilar orasidagi qirralarning har biri o'sha noyob qatorlardan biriga to'g'ri keladi.

Birinchi fotosuratdan boshlab u 114 qiymatiga ega bo'lgan 2-indeksda maqbul tanaffus nuqtasini topadi. ​​Keyin u 3-indeksda ancha yuqori narxga ega bo'lgan 9483 qiymatli sinish nuqtasini topadi. ​​Endi ushbu ikkita yangi indekslarni tekshirish kerak (2 3) ular sindirishlari mumkin bo'lgan joylar. 2 dan 5 va 6 ni topadi va shu vaqtda 6 uchun eng qisqa yo'l 2 orqali qaytib keladi (114 + 1442 = 1556), shuning uchun uni belgilaydi. 3-rasm 6-ga yo'lni topganda, biz yana narxni tekshiramiz, lekin dastlab 3 ga kirish juda qimmat bo'lganligi sababli, umumiy narx (9483 + 1007 = 10490) 6-ning 2-ga sodiqligini anglatadi. animatsiyada siz 11-ga birinchi yo'l ideal bo'lmaganligini va 8-tugun ko'rib chiqilganda kalitlarga o'tishini ko'rishingiz mumkin.

14 ta rasm uchun eng maqbul qator birikmasini topish

Biz barcha fotosuratlar to'plamidan eng so'nggi fotosuratga tushgunimizcha buni davom ettirmoqdamiz (indeks 13). Bu holda eng qisqa yo'lni (va eng yaxshi tartibni) biz yo'l bo'ylab belgilangan eng qisqa yo'nalish bo'yicha (va animatsiyada ko'k rangda bo'yalgan holda) topishimiz mumkin.

Bu erda sodda algoritm (chapda) nimani ishlab chiqqanligi va chiziqni almashtirish algoritmi (o'ngda) erishganini taqqoslash mumkin. Ikkalasi uchun ham 180px balandlikdagi maqsad berilgan. Ikkita qiziqarli narsani ko'rishingiz mumkin, biri shunchaki soddalik rejimi har doim ham davom etaveradi, ikkinchisi esa chiziqni o'stirish shunchaki quvonganligidadir - ammo chiziqni almashtirish algoritmi chiziqqa yaqinroq bo'lgan panjara hosil qildi. maqsad balandligi.

Maqsad balandligi 180px bo'lgan balandlikni hisobga olgan holda, joylashuv usullarini taqqoslash

Sinovimizda biz chizish (biz uni FlexLayout deb nomladik) algoritmi ham ob'ektiv, ham subyektiv ravishda ko'proq istalgan tarmoqlarni ishlab chiqarganligini aniqladik. U izchil balandroq (qatorlar orasidagi farq kichikroq) va o'rtacha balandligi talab qilinadigan maqsadga yaqinroq bo'lgan panjara ishlab chiqargan. Va bu panoramalar va boshqa oddiy holatlar bilan ancha osonlashdi, chunki ular odatda soddalik algoritmini rivojlantiradilar - chunki soddalik yondashuvida panoramik (ultra keng) fotosurat birinchi qatorga qo'shiladi va shu sababli ko'pincha juda kichik o'lchamda bo'ladi. chunki ushbu satrda bir nechta fotosuratlar bo'lishi mumkin, FlexLayout-da esa barcha mumkin bo'lgan qatorlar ko'rib chiqiladi va panoramani haddan tashqari kamaytiradiganlar panoramani o'zi yoki boshqalar joylashtiradigan panjara tanlashni rag'batlantiradigan yuqori yomon qiymatlarga ega bo'ladi. .

Bu shuni anglatadiki, bir nechta yomon (juda qisqa yoki juda baland) bo'lishiga yo'l qo'ymaslik uchun, biroz yomonroq (maqsad balandligidan bir necha piksel) ko'proq bo'ladi. Bu kutilmagan hodisalarni minimallashtiradi.

Mumkin bo'lgan sxemalarga ta'sir qiluvchi ko'plab omillar mavjud. Ko'proq fotosuratlar bu eng katta omillardan biri, ammo ko'rish maydonining kengligi uni cheklashi mumkin va keyin qisqarish / cho'zish qobiliyatining haqiqiy parametrlari ham katta ta'sir ko'rsatadi.

Ko'rish maydonchasi o'lchamlari bo'yicha 25 ta fotosurat uchun noyob tartib

Tor, o'rta va keng ko'rinishda 25 ta rasmning grafigini ko'rib chiqayotganda, siz buni anglashingiz mumkin. Tor derazada faqat bir nechta o'tish nuqtalari mavjud edi, ammo bizga juda ko'p qator kerak edi, o'rta oynada ko'proq kesishma punktlari bor edi, keng derazada esa ko'proq ochilish nuqtalari mavjud bo'lganda, biz shunchalik ko'p qatorga muhtoj emas edik, aslida ular bor edi. kamroq umumiy tadbirlar.

Noyob maketlarning umumiy soni fotosuratlar soni bilan eksponent bo'yicha o'sib bormoqda. O'rta kenglikdagi ko'rish porti uchun men rasmlar to'plamining haqiqiy noyob yo'llarini hisoblab chiqdim va quyidagilarni oldim:

1000 ta fotosurat uchun kompyuterda o'lchash uchun juda ko'p narsa bor edi, shuning uchun u noyob yo'llarning aniq sonini aniqlay olmaydi (bu algoritm bu holatda eng yaxshi yo'lni deyarli bir zumda topishini bilishi mumkinligi haqidagi kulgili savol) agar u o'zini oqlagan vaqtda tasdiqlay olmasa).

Yagona joylashuv o'zgarishini har bir satrda ruxsat etilgan kesishish sonining o'rtacha sonini olish va bu sonni ehtimoliy qatorlar soniga oshirish orqali hisoblashimiz mumkin. Ko'pgina ko'rinishdagi pasportlar satrda 2-3 ta chiqish nuqtasini qo'llab-quvvatlaydi va 5 yoki undan ko'p fotosurat bilan siz jadvallarning sonini 2,5 ^ (hisoblash / 5) bilan belgilashingiz mumkin.

1000 ta fotosurat uchun bu oxirida 79 nolga teng raqam. 1260 fotosuratda maketlar googoli bo'ladi.

Odatiy yondashuv bitta maketni ko'rib chiqadi va har safar tanlaydi, ammo chiziqni taqsimlash algoritmi millionlab, milliardlab, trillionlab va boshqa noyob maketlarni ko'rib chiqadi va eng yaxshisini tanlaydi.

Agar bilmoqchi bo'lsangiz, bu juda tez. 100 ta fotosurat uchun sekundning ikki mingdan ikki qismi (2 ms) vaqtni oladi. 1000 ta fotosurat 10 msni oladi, 10000 ta fotosurat 50 msni oladi va 1 million fotosurat atigi 1,5 soniyani oladi (biz sinab ko'rdik). Taqqoslashda sodda algoritm o'sha raqamlar uchun 2ms, 3ms, 30ms va 400ms ni tashkil etadi - tezroq, ammo unchalik ahamiyatga ega emas.

Shunday qilib, asl niyat mavjud bo'lgan makonga eng mos keladigan joyni tanlash uchun (masalan, sxemani smeta bilan moslashtirish) mumkin bo'lgan aniq sxemalardan foydalanish kerak edi, chunki biz hisoblangan va orasidagi farqni muammosiz to'g'irlashimiz mumkinligini aniqladik. haqiqiy hajmi, bu bizga foydalanuvchilarni har doim eng yaxshi panjara bilan tanishtirishga imkon beradi.

Tartib juda yaxshi ishlaydi va shu vaqtdan beri jamoa uni Android va iOS-ga yuklab qo'ydi va uchta dastur sinxronlashdi.

Biz bajaradigan oxirgi hiyla - bu algoritmni har bir bo'lim uchun ikki marta ishlatish. Birinchi marta biz barcha fotosuratlarni segment ichidagi joylarni ajratish uchun ishlatsak, ikkinchi marta biz ushbu bo'limning barcha segmentlarini joylashtirish uchun ishladik. Buning asosiy sababi, ba'zida satrni to'ldirmaydigan juda qisqa segmentlar mavjud va joylashuv algoritmi ularni birlashtirish variantlarini taklif qiladi - fotosuratlar bilan bir qatorda, eng idealni tanlash uchun barcha mumkin bo'lgan guruhlarni ko'rib chiqadi.

Qoplamali segmentlar

3. 60 kadr aylantirish

Scrubable fotosuratlar va ideal sxemalarga ega bo'lish, agar brauzer ishlay olmasa, ko'p narsaga ega bo'lmaydi. O'z-o'zidan, bu aslida qila olmaydi - Yaxshiyamki, biz yordam bera olamiz.

Veb-saytlar sekin ishlashini his qilishining eng katta usullaridan biri (boshlang'ich yuklash vaqtidan tashqari), ular foydalanuvchilarning o'zaro munosabatiga, ayniqsa aylantirishga bemalol javob berishidir. Brauzerlar sekundiga 60 marotaba (60 kadr) ekran tarkibini o'zgartirishga harakat qilishadi va ular muvaffaqiyatli bo'lganda juda yaxshi ko'rinadi va o'zlarini yoqimsiz his qilishadi.

60 kadr / s ni ushlab turish uchun har bir yangilanishni atigi 16 millimetr (1/60) ichida bajarish kerak va brauzer o'zi uchun biroz vaqt kerak - u voqealarni sharhlashi, uslub ma'lumotlarini tahlil qilishi, tartibini hisoblashi, barcha elementlarni pikselga aylantirishi, va nihoyat, ularni ekranga tortib oling - bu dasturga o'z ishini bajarish uchun taxminan 10 daqiqani qoldiradi.

Ushbu 10 mim ichida ilovalar ikkalasini ham samarali bo'lishlari va brauzerning keraksiz ishlarni bajarishiga yo'l qo'ymasliklari kerak.

Doimiy o'lchamdagi DOMni saqlash

Sahifa ishlashidagi eng yomon narsalardan biri juda ko'p elementlarning mavjudligi. Muammo ikki baravar: brauzer uchun ko'proq xotira sarflanadi (masalan, 50 kB kichik rasmlarda 1000 fotosurat 50 megabayt, Chrome-ni buzish uchun ishlatilgan 10000 fotosurat yarim gigabayt); Bundan tashqari, bu brauzer uchun uslublar va pozitsiyalarni hisoblash uchun kerak bo'ladigan va sxemani tuzishda kompozitsiyalarning individual qismlari.

Biz barcha keraksiz elementlarni olib tashlaymiz

Ko'pgina foydalanuvchilar o'zlarining kutubxonalarida minglab fotosuratlarga ega bo'lishsa-da, ekran odatda atigi bir necha o'ntagacha sig'adi.

Shunday qilib, har bir fotosuratni sahifaga joylashtirishning va uni saqlashning o'rniga, har safar foydalanuvchi aylantirganida biz qanday fotosuratlar ko'rinishi kerakligini hisoblaymiz va ularning hujjatda ekanligiga ishonch hosil qilamiz.

Ilgari hujjatda bo'lgan, ammo endi ko'rinmaydigan har qanday rasm uchun biz uni orqaga tortib olamiz.

Sahifani aylantirayotganda, ehtimol o'nlab minglab rasmlarni ko'rsangiz ham, 50 dan ortiq fotosuratlar mavjud emas. Bu har doim ham sahifani sinchkovlik bilan ushlab turadi va yorliqni buzilishining oldini oladi.

Biz fotosuratlarni segmentlar va bo'limlarga birlashtirganimiz sababli, biz ko'pincha har bir alohida fotosurat o'rniga yorliqni olib, butun guruhlarni ajratib olishimiz mumkin.

O'zgarishlarni minimallashtirish

Google Developers saytida ishlash va Google Chrome-ga o'rnatilgan kuchli tahlil vositalarini qanday ishlatish haqida ajoyib maqolalar mavjud - bu erda fotosuratlarga taalluqli bo'lgan bir nechta jihatlarga to'xtalib o'taman, lekin boshqa yozuvlar yaxshi o'qish kerak. Birinchidan, hayot tsiklini ko'rsatadigan sahifa tushunish kerak:

(Chrome) pikselli quvur liniyasi

Har safar sahifaga o'zgartirish kiritilganda (odatda JavaScript tomonidan ishga tushiriladi, lekin ba'zan CSS uslublari yoki animatsiyalar), keyin brauzer ta'sirlangan elementlarga qanday uslublar qo'llanilishini tekshiradi, ularning tartibini (o'lchamlari va pozitsiyalari) qayta hisoblaydi va keyin barcha elementlarni bo'yaydi. (ya'ni matnni, rasmlarni va boshqalarni ... pikselga o'zgartiradi). Samaradorlik uchun brauzer odatda sahifani turli bo'limlarga ajratadi va ularni qatlamlar deb ataydi va ularni alohida-alohida bo'yaydi va shu sababli ushbu qatlamlarni biriktirish (tartibga solish) bo'yicha yakuniy bosqich amalga oshiriladi.

Ko'pincha bu haqda o'ylamasligingiz kerak, brauzer juda aqlli, lekin agar siz sahifadagi sahifani o'zgartirsangiz (masalan, fotosuratlarni doimiy ravishda qo'shish yoki o'chirish), unda siz buni qanday qilib samarali bajarishingiz kerak.

Bo'limlar, segmentlar va plitkalar mutlaqo joylashuvga ega

Yangilanishlarni minimallashtirishning bir usuli, har bir narsani ota-onasiga nisbatan joylashtirish. Bo'limlar panjara tomon mutlaqo joylashtiriladi, segmentlar mutlaqo o'z bo'limlariga, plitkalar (rasmlar) esa segmentga nisbatan mutlaqo joylashtiriladi.

Buning ma'nosi shundan iboratki, biz taxminiy va haqiqiy maket balandligi har xil bo'lganligi sababli, biz uning ostidagi har bir fotosuratga yuzlab (yoki minglab) o'zgartirishlar kiritishni talab qilmasdan, biz bo'limni siljitishimiz kerak bo'lganida, biz faqat eng yuqori pozitsiyani yangilashimiz kerak quyidagi bo'limlar. Ushbu struktura panjara har bir qismini keraksiz yangilanishlardan ajratishga yordam beradi.

Zamonaviy CSS hatto brauzerni xabardor qilishning usulini taqdim etadi - tarkibidagi kalit so'z elementni DOM-dan mustaqil ravishda ko'rib chiqilishi mumkinligini ko'rsatishga imkon beradi. Biz tegishli ravishda bo'limlar va segmentlarni izohlaymiz.

Ishlashning ba'zi qiyinchiliklari ham mavjud, masalan, aylantirish hodisasi bitta freymda bir necha marta yonib ketishi mumkin, va hajmini o'zgartirish uchun ham. Agar siz baribir ikkinchi marta o'zgartirsangiz, brauzerni birinchi voqealar uchun uslub va tartibni qayta hisoblash uchun majburlashning hojati yo'q.

Yaxshiyamki, buning oldini olish uchun qulay usul mavjud. Windows.requestAnimationFrame (qo'ng'iroqni qaytarish) yordamida keyingi bo'yashdan oldin brauzerdan ma'lum bir funktsiyani bajarishini so'rashingiz mumkin. O'tkazish va o'lchovni qayta ishlash moslamalarida biz zudlik bilan yangilanishning o'rniga bitta qo'ng'iroqni qaytarishni rejalashtirish uchun foydalanamiz - o'lchamni o'zgartirish uchun biz oldinga qadam tashlaymiz va foydalanuvchi oxirgi oynaning o'lchamiga kelguncha yangilanishni yarim soniya kechiktiramiz.

Ikkinchi keng tarqalgan tuzoq - bu yerni yig'ish deb nomlanuvchi narsa. Brauzer tartibni hisoblab chiqqandan so'ng, uni saqlab qo'yadi va shuning uchun siz har qanday elementning kengligi, balandligi yoki joylashishini tezda so'rashingiz mumkin. Ammo, agar siz joylashuvga ta'sir qiladigan xususiyatlarga biron bir o'zgartirish kiritsangiz (masalan, kenglik, balandlik, yuqori, chap), siz darhol ushbu keshni bekor qilasiz va agar siz ushbu xususiyatlardan birini qayta o'qishga harakat qilsangiz, brauzer tartibni qayta hisoblashga majbur bo'ladi (ehtimol bu tartibni qayta hisoblab chiqishga to'g'ri keladi). bir xil kadrda bir necha marta).

Bu haqiqatan ham muammolarni keltirib chiqarishi mumkin bo'lgan joy ko'plab elementlarning yangilanishi (masalan, yuzlab fotosuratlar) bilan, agar har bir pastadir siz joylashish xususiyatlaridan birini o'qib chiqsangiz, ularni o'zgartiring (fotosuratlar yoki bo'limlarni to'g'ri joylarga siljiting deb ayting). ko'chadan har bir qadam uchun yangi tartib hisoblash uchun boshlash.

Bunga yo'l qo'ymaslikning oddiy usuli, avval kerakli barcha qiymatlarni o'qish va keyin barcha qiymatlarni yozish (ya'ni to'plam va alohida o'qishni yozuvchilardan). Bizning holatlarimiz uchun biz har doim qadriyatlarni o'qishdan qochamiz va buning o'rniga har bir fotosurat joylashtirilishi kerak bo'lgan o'lcham va pozitsiyani hisobga olamiz va ularning barchasini aniq joylashtiramiz. O'tkazish yoki hajmini o'zgartirishda biz kuzatgan pozitsiyalarimizga asoslanib, barcha hisob-kitoblarimizni qayta ishga tushirishimiz va hech qachon maydalamasligimizni bilib ishonch bilan yangilashimiz mumkin. Oddiy aylantirish doirasi quyidagicha ko'rinadi (hamma narsa faqat bir marta chaqiriladi):

Odatiy aylantirish uchun yangilash uchun Rending va Rasm rasmlari

Uzoq ishlaydigan koddan qochish

Veb-ishchilarni va Fetch API kabi ba'zi async ishlov beruvchilarni hisobga olmaganda, tabda hamma narsa bir xil ishlangan - renderlash va JavaScript-da. Bu shuni anglatadiki, ishlab chiqaruvchi ishlaydigan har qanday kod sahifani uni tugatguncha qayta chizishga yo'l qo'ymaydi - masalan, uzoq vaqt davomida aylantiradigan tadbirlarni boshqaruvchisi.

Bizning panjara ko'p vaqt talab qiladigan narsa - bu tartib va ​​elementlarni yaratish. Ikkalasi uchun biz ularni asosiy operatsiyalar bilan cheklashga harakat qilamiz.

Masalan, joylashish algoritmi 1000 ta fotosurat uchun 10 sm va 10000 uchun 50 mmsni oladi - bu bizning butun kadrlar sarflanishimizga olib kelishi mumkin. Biroq, biz panjaraimizni bo'limlar va segmentlarga ajratgan holda, biz har doim istalgan vaqtda bir necha yuz fotosuratni joylashtirishimiz kerak bo'ladi (2-3 sm).

Tartibga solishtirishning eng "qimmat" hodisasi brauzer o'lchamini o'zgartirish bo'lishi kerak, chunki bu bizga har bir qismning o'lchamlarini qayta hisoblashimiz kerak bo'ladi. Buning o'rniga biz, hatto yuklangan bo'limlar uchun ham, sodda hisob-kitoblarga qaytamiz va faqat hozirgi ko'rinadigan qism uchun to'liq FlexLayout-ni bajaramiz. So'ngra, biz boshqa bo'limlar uchun to'liq hisoblashni keyingisiga qaytaramiz.

Element yaratishda ham xuddi shunday bo'ladi - biz faqat rasm plitkalarini kerak bo'lmasdan oldin yaratamiz.

Natija

Barcha mashaqqatli ishlarning yakuniy natijasi, ba'zida ba'zi kadrlar tushib qolsa ham, ko'pincha 60 fps quvvatini ushlab turadigan panjara.

Ushbu tashlab yuborilgan ramkalar, odatda, katta reja sodir bo'lganda (masalan, yangi bo'limni kiritish) yoki brauzer juda eski elementlarda axlat yig'ish paytida sodir bo'ladi.

O‘tkazish vaqtida kadr tezligi

4. Bir zumda his qilish

Gap shundaki, muhandislarning aksariyati qo'lning piyolasi ko'plab yaxshi UIlarda rol o'ynashiga rozi bo'lishadi. Hiyla tutunni qanday ishlatishni va nometalllarni qanday burish kerakligini tanlashdir.

YouTube-dagi hamkasbim men bilan o'rtoqlashadigan narsaning eng sevimli namunasi. Ular birinchi marotaba navigatsiya jarayonini (birinchi sahifani o'zgartirganda paydo bo'ladigan qizil satrni) birinchi marotaba amalga oshirganlarida, ular aslida progressni o'lchashning hech qanday usuli yo'q edi, shuning uchun ular shunchaki aksariyat sahifalar olib borgan tezlikda harakatga keltirdilar, keyin esa shunday Sahifa haqiqatan ham yuklanmaguncha oxirigacha "osiladi". Hozirgi versiyasi hanuzgiday tuyuladimi yoki amalda ishlayaptimi, yo'qmi, men bilmayman, ammo bu muhim emas.

YouTube taraqqiyot paneli
Aniq bo'lishi shart emas edi, nima bo'lishidan qat'iy nazar, sahifani sezgir his qilishiga yordam berdi.

Ushbu bo'limda Google Fotosuratlarning odatdagidan biroz tezroq ko'rinishi uchun biz ishlatadigan ba'zi bir usullar bilan o'rtoqlashaman - asosan rasm yuklanish vaqtini qanday yashirish haqida.

Birinchi va, ehtimol, eng samarali, biz siz ko'rib chiqmoqchi bo'lgan tarkibni oldindan yuklaymiz.

Ko'rinadigan har qanday mozaikani yuklaganimizdan so'ng, oldinga siljiganingizcha eskizlar yuklangani sababli oldingi sahifada qolishga harakat qilamiz.

Ammo, ayniqsa HDPI ekranlari uchun (agar biz katta eskizlarni yuklashimiz kerak bo'lsa), agar siz tez aylantirmoqchi bo'lsangiz, tarmoq ulanishi barcha talablarni o'z vaqtida bajara olmasligi mumkin.

Kelgusida 4 yoki 5 ta to'liq ekran uchun juda kichik joy to'ldirish va ularni ko'rish maydoniga yaqinlashgandan so'ng ularni almashtirish orqali biz buni amalga oshiramiz.

Bu shuni anglatadiki, agar siz nisbatan sekin harakat qilsangiz (barcha fotosuratlarni ko'rish uchun mos keladigan tezlikda), unda siz hech qachon hech qanday yuklamani ko'rmasligingiz kerak va agar siz tezda skrining qilsangiz (fotosuratni qidirayotganingizni ko'rsatayotgan tezlikda) qidirishni boshqarish uchun sizga vizual kontekst etarli.

Bu ortiqcha ish olib borish va yaxshiroq tajriba bilan ta'minlash o'rtasidagi keraksiz ish.

Biz bir nechta omillarni hisobga olamiz. Birinchisi, aylantirish yo'nalishini kuzatish va faqat foydalanuvchi yo'nalishiga qarab tarkibni oldindan yuklash. O'tkazish tezligini o'lchaymiz va skriningni o'ylaganimizdan so'ng, to'liq eskizni yuklamay qo'yamiz va yanada yuqori pog'onada, agar siz tarkibga kirayotgan bo'lsangiz, past darajali oldindan yuklashni o'chirib qo'yamiz.

Ikkala holatda ham (oddiy eskiz va past o'lchamdagi) biz rasmlarni kattalashtiramiz. Endi zamonaviy ekranlarda yuqori aniqlikdagi tasvirlarning aniq ko'rinishini ta'minlashning odatiy usuli bu to'ldirilgan bo'shliqdan ikki baravar katta bo'lgan rasmni yuklash va uni kichraytirishdir (shuning uchun bo'sh joydan ko'ra ko'proq haqiqiy piksellar mavjud). Kam joy egallaganlar uchun biz juda kichik rasmlarni, shuningdek, siqishni sifatini (masalan, 25%) talab qilamiz va keyin ularni kattalashtiramiz.

Uyquga ketgan leopardning misoli - chap tomondagi rasm panjara to'liq to'ldirilganda panjara ichida ishlatiladi (u yarim o'lchamgacha qisqaradi), o'ng tomonda joylashgan rasm past joyli to'ldiruvchidir. agar siz tezda aylantirmoqchi bo'lsangiz (u kattalashadi).

Oddiy va past o'rinli plitkalar

Bayt o'lchamlarini ham kuzating. HDPI eskizi 71.2KB (gzipped), past o'rinli to'ldirgich esa atigi 889B (gzipped) edi - eskiz 80x katta edi! Boshqacha qilib aytadigan bo'lsak, panjara ichidagi bitta plitka 4 yoki undan ko'p sahifadan past joy to'ldiruvchilar bilan bir xil.

Qo'shimcha tarmoq trafigining juda oz o'sishi uchun biz foydalanuvchiga yanada yaxshi tajriba, har doim o'zini to'la his qiladigan va har doim vizual kontekstni ta'minlaydigan panjara taqdim etishimiz mumkin.

Past darajali plitkalarga bo'lgan so'nggi teginish - bu brauzerdan ularni qanday ko'rsatishni so'rashimiz. Rasmni kattalashtirganingizda, brauzer uni bir oz silliqlashtiradi (pastdagi rasm), ammo bu unchalik yaxshi ko'rinmaydi. Xiralashgan filtrni (o'ngdagi eng rasm) qo'llashingiz mumkin, bu uni qasddan ko'rinishga olib keladi, ammo salbiy tomoni shundaki, bu filtr juda qimmatga tushadi va agar siz uni yuzlab elementlarga qo'llasangiz, siz ishlash va aylantirish ishiga salbiy ta'sir ko'rsatasiz. Shunday qilib, biz boshqa yo'nalishga o'tishni tanladik va past darajali ko'rinishga suyanib, brauzerdan rasmni piksellangan holda qoldirishni so'raymiz (chapdagi rasm) - rostini aytsam, bu hali ham mavjud emasligiga amin emasman. mahsulot bugungi kunda, bir necha qayta ishlab chiqilgan.

Eskizni past darajada ko'rsatish parametrlari

Umid qiladiki, foydalanuvchi hech qachon past o'lchamdagi rasmlarni (tez aylantirish paytida bundan mustasno) ularni ko'rish maydonchasida bo'lganidan keyin ularni almashtirishda ko'rmaydi, biz ilgari tezkor animatsiyani yuklangan ko'rinishda qilish uchun ishlatganmiz (joyida miltillashning o'rniga). Ikkala rasmni bir-biriga yopishtirish va shaffoflikni jonlantirish orqali osonlikcha erishiladi (to'liq shaffofdan to'liq shaffofgacha) - bu to'qnashuv uslubi Internetda juda keng tarqalgan bo'lib qoldi, masalan ushbu O'rta postdagi barcha rasmlar. O'ylaymanki, past / baland qorishma uchun xoch o'chirilgan, ammo u hali ham bo'sh (kulrang) plitkadan tasvirga qadar sodir bo'ladi.

Bu rasm yuklanayotganga o'xshaydi. Biz buni juda tez qildik (100 m da), bu o'zimizni befarq his qilmasdan, chetni olish uchun etarli vaqt. Men buni yanada aniqroq qilish uchun animatsiyani sekinlashtirdim.

Sekinroq tezlikda o'tish

Eskizli fotosuratdan to'liq ekranli ko'rinishga o'tishda biz ushbu texnikadan ikkinchi marta foydalanamiz. Foydalanuvchi mozaikani bosganda, biz darhol to'liq hajmli rasmni yuklashni boshlaymiz va shu vaqtning o'zida masshtabni joylashtiramiz va to'liq rasm yuklangandan keyin biz rasmni joylashtiramiz va ular orasidagi shaffof animatsiyani qilamiz. Farq shundaki, bu safar biz uni faqat bitta elementga qo'llaganimiz sababli, undan qimmatroq loyqalik filtridan foydalanishimiz mumkin (bu qulay, chunki pikselli effekt katta rasmlarga unchalik yoqimli emas).

Fotosuratlar tarmog'idan to'liq ekranga o'tish

Har doim, rasmlarni aylantirayotganda yoki to'liq ekranli ko'rinishga o'tishda, foydalanuvchi har doim, hatto tarkib tayyor bo'lmayotgan bo'lsa ham, ularning kirishiga javob berayotganini his qiladigan foydalanuvchiga yaxshi tajriba berishga harakat qilamiz. Agar plitkani bosganingizda, u bo'sh ekranni ko'rsatgan bo'lsa yoki fotosurat to'liq yuklanmaguncha hech narsa qilmagan bo'lsa, buni qanday aks ettiradi.

Biz bu tushunchani bo'sh bo'limlarga ham qo'llaymiz. Agar eslasangiz, bizning aylantiradigan panjara faqat kerak bo'lganda bo'limlarni yuklaydi (garchi plitkalar singari yaqin atrofdagi qismlarni oldindan yuklashga urinsa ham). Bu shuni anglatadiki, agar siz oldinga siljish chizig'ini ushlab olsangiz va siz hali yuklanmagan bo'limlarga o'tishingiz mumkin - panjara ular uchun oldindan ajratilgan joyni egallagan, ammo u erda qanday fotosuratlar borligini yoki maket nima ekanligini bilmaydi.

O'tkazishni tabiiyroq qilish uchun biz yuklanmagan qismlarga to'qimalarni joylashtiramiz, ular maqsadlar qatorining o'lchamlari bilan bir xil va bo'sh plitka kabi ko'rinadi. Biz birinchi ishga tushirganimizda, u xuddi satrlarga o'xshab qoldi (chapdagi rasm), garchi jamoa yaqinda rasmni yanada yaqinroq bog'laydigan satr va ustunlarni (o'ngdagi rasm) bo'lishini o'zgartirdi. O'rta rasm - bu bo'lim yuklanganida ko'rinadi, ammo plitkalar yo'q.

Yuklanish holatida panjara naqshlari
Bu rasmlarni yuklash holatidagi hayvonlarning izlariga o'xshaydi - keyingi safar siz Google Photos-da skanerlash orqali farqlarni aniqlay olasizmi.

Rasmni teksturada ishlatish o'rniga, u aslida CSS-dan foydalanib yaratilgan. Bu qo'shimcha kenglik va balandlikni panjara uchun ishlatiladigan maqsad qatorining balandligiga mos ravishda dinamik ravishda hosil qilish uchun qo'shilgan bonusni beradi.

Bizda yana bir nechta hiyla-nayranglar bor, lekin ular asosan tarmoq so'rovlarini birinchi o'ringa qo'yish haqida. Masalan, 100 ta fotosurat eskizini talab qilish bilan tarmoqni to'ldirish o'rniga, biz ularni bir vaqtning o'zida 10 ga qo'shamiz, shuning uchun foydalanuvchi to'satdan o'tishni boshlasa, biz yuklagan 90 ta fotosurat bilan tugamaymiz, lekin foydalanish. Xuddi shunday, biz har doim ko'rinadigan eskizlarni ekrandagi rasmlarga yuklashni birinchi o'ringa qo'yamiz.

Hatto biz shunga o'xshash o'lchamdagi eskizni yuklagan-qo'yganimizni va uning o'rniga undan foydalanishimiz mumkinligini ko'rish uchun qaraymiz - bu oxirgi foydalanish holati asosan brauzer hajmini o'zgartirgandan so'ng amalga oshiriladi, ko'pincha siz deyarli bir xil bo'lgan panjara bilan yakunlanasiz, ammo bir nechta satrlar. piksel farq qiladi. Har bir fotosuratni yana yuklab olishning o'rniga, biz allaqachon mavjud bo'lgan rasmlarni biroz kattalashtiramiz (agar farq juda katta bo'lsa, yangi fotosuratlarni tanlaymiz).

Xulosa

Google Fotosuratlarning har bir tafsilotiga juda katta e'tibor va e'tibor qaratilgan va fotosuratlar tarmog'i - bu juda katta mahsulotning faqat bir qismidir.

Avvaliga u oddiy va hatto harakatsiz ko'rinishi mumkin bo'lsa-da, panjara deyarli har doim o'ylaydi - tarkibingizni yuklash, olish, boshlash, jonlantirish, olib tashlash va taqdim etish.

Panjara yaxshi ishlashi (va doimo takomillashib borishi) jamoa uchun doimiy ustuvor vazifa bo'lib kelgan. Ular aylantirish kvadrat tezligini, bo'lim va rasm yuklash vaqtini va boshqa ko'plab ko'rsatkichlarni o'lchash uchun har tomonlama monitoringga ega va har yili ishlash va tajribani yaxshilashda davom etmoqda.

Mana bu galereyada aylanib o'tishga o'xshab ko'rinadigan rasmlarni qisqa ekranga olish. Sekin tezlikda siz faqat to'liq o'lchamdagi tasvirlarni ko'rasiz, biz tezlashtirganimizda, biz sekinlashganda tezda hal qilinadigan pikselli to'ldirgichlarni ko'rishni boshlashimiz mumkin va biz oldinga qarab yugurayotganimizda bo'sh kulrang plitkalarga qisqacha qarash bor. panjara ushlanadi.

Fotosuratlardagi sobiq menejerim Vinsent Moga katta rahmat, u qo'llab-quvvatlashga qo'shimcha ravishda ushbu post davomida ishlatilgan barcha ajoyib suratlarni suratga olgan (va ishlab chiqish jarayonida sinov sifatida ishlatilgan). Shuningdek, bugungi kunda Veb-interfeysning Web-interfeysini saqlash va takomillashtirishni davom ettirayotgan Jeremy Selier, Photos Web Lead va uning guruhiga.