Mga cute na Chrome extension na hindi nagpapabagal sa browser mo

May reputasyon ang mga decorative browser extension, at deserve naman nila ito: mabigat, madaldal, at naka-install kasama ang permission list na walang nagbasa. Sayang naman, dahil talagang masaya ang category na ito at maiiwasan ang bawat problema.

Tatlong bagay na sulit tingnan

• Ang permission list. Ipinapakita ito ni Chrome bago ka mag-install. Preferences file lang ang storage. Ang tabs, cookies, history, at webRequest ang mga permisong nagpapahintulot sa isang extension na tingnan kung ano ang binro-browse mo.
• Kung ginagalaw nito ang layout ng page mo. Ang extension na nagsisingit ng mga element sa document flow, o sumusukat ng position ng element sa bawat scroll event, ay pwedeng magpa-stutter sa isang smooth na page kahit gaano kaunti ang iginuguhit nito.
• Saan ito nagpapadala ng mga request. Ang isang decoration na busy ang network tab ay may ginagawang second job na hindi sinabi sa'yo.

Bakit ang layout ang talagang nangangagat

Ang pagbasa ng layout property — ang taas ng isang element, ang posisyon nito sa screen — ay pinipilit ang browser na tapusin muna ang natitirang layout work bago ito makasagot. Gawin mo yun sa loob ng scroll handler, at hiniling mo na sa browser na huminto at sumukat nang animnapung beses kada segundo, sa isang page na kalahati pa lang ang ginuguhit.

Yun ang mekanismo sa likod ng karamihan sa reklamong “ginagawang laggy ng extension na ito ang scrolling”, at hindi ito nakikita hangga't walang nag-profile nito. Simple ang solusyon: huwag kailanman magbasa ng layout habang nagsi-scroll, transform lang ang isulat, at hayaan ang compositor ang gumalaw.

Ito ang itsura dito

Ang scrolldog ay isang maliit na pixel pet na tumatakbo sa gilid ng bawat page sa bilis ng scroll mo. Isa rin itong halimbawa ng mga check sa taas, dahil kailangan niya itong lampasan lahat para maging bearable makasama:

• Dalawang permission lang: storage at unlimitedStorage. Walang tabs, walang cookies, walang history, walang webRequest.
• Isang host permission — api.scroll.dog — ginagamit para i-check ang license, hindi kailanman para galawin ang page na kinaroroonan mo.
• Nakatira ang alaga sa isang fixed, zero-size na track at transform lang ang laging isinusulat nito, kaya hindi nagbabago ang sarili nitong layout ng page mo.
• Pinapakinggan ang scroll nang passive at pinag-iisa sa isang write kada animation frame.
• Isang switch ang nag-aalis dito sa bawat bukas na tab agad-agad.

Wala sa mga yun ang pagmamayabang — yun na ang pinaka-minimum. Ang bagay na buong trabaho ay maging maganda lang tingnan ay walang karapatang magpabagal ng kahit ano.