브라우저를 느리게 하지 않는 귀여운 Chrome 확장 프로그램

장식용 브라우저 확장 프로그램에는 평판이 있고, 대부분은 자업자득입니다. 무겁고, 말이 많고, 아무도 읽지 않은 권한 목록과 함께 설치됩니다. 아쉬운 일입니다. 이 분야는 정말 즐겁고, 지금 든 문제는 하나같이 피할 수 있으니까요.

확인할 만한 세 가지

• 권한 목록. Chrome이 설치 전에 보여줍니다. storage는 설정 파일입니다. tabs, cookies, history, webRequest는 확장 프로그램이 무엇을 보는지 들여다볼 수 있게 하는 권한입니다.
• 페이지의 레이아웃을 건드리는지. 요소를 문서 흐름에 끼워 넣는 확장 프로그램, 또는 스크롤할 때마다 요소의 위치를 재는 확장 프로그램은, 그리는 양이 아무리 적어도 매끄러운 페이지를 버벅이게 만들 수 있습니다.
• 요청을 어디로 보내는지. 네트워크 탭이 바쁜 장식은 알려주지 않은 두 번째 일을 하고 있습니다.

레이아웃이 가장 아픈 이유

레이아웃 속성을 읽는 일 — 요소의 높이, 화면에서의 위치 — 은 답을 주기 전에 밀린 레이아웃 계산을 모두 끝내라고 브라우저에 강요합니다. 그것을 스크롤 처리기 안에서 하면, 절반쯤 그리던 페이지 위에서 초당 예순 번 멈춰 서서 재라고 요구한 셈입니다.

「이 확장 프로그램을 쓰면 스크롤이 끊긴다」는 불만의 대부분이 이 구조에서 나옵니다. 그리고 누군가 프로파일링할 때까지 보이지 않습니다. 해결책은 멋이 없습니다. 스크롤 중에는 레이아웃을 읽지 않고, transform만 쓰고, 움직이는 일은 컴포지터에 맡깁니다.

여기서는 어떤 모습인가

scrolldog은 모든 페이지의 가장자리를 스크롤 속도에 맞춰 달리는 작은 픽셀 동물입니다. 동시에 위 확인 사항을 실제로 풀어낸 예이기도 합니다. 곁에 두고 견딜 만하려면 통과해야 했으니까요.

• 권한 두 개: storage와 unlimitedStorage. tabs도, cookies도, history도, webRequest도 없습니다.
• 호스트 권한은 api.scroll.dog 하나. 라이선스 확인에 쓰고, 보고 있는 페이지를 건드리는 데는 쓰지 않습니다.
• 동물은 크기가 0인 고정 트랙에 살면서 CSS transform만 쓰므로, 페이지 자체의 레이아웃은 절대 바뀌지 않습니다.
• 스크롤은 passive로 듣고, 애니메이션 한 프레임당 한 번의 쓰기로 모읍니다.
• 스위치 하나로 열려 있는 모든 탭에서 즉시 사라집니다.

어느 것도 자랑이 아닙니다. 최소한입니다. 보기 좋은 것이 일의 전부인 물건에는 무엇도 느리게 만들 자격이 없습니다.