성능 (6) 썸네일형 리스트형 Towards an animation smoothness metric (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://web.dev/smoothness/ 저작권 정보: https://creativecommons.org/licenses/by/4.0/ 애니메이션을 측정하는 것, 애니메이션 프레임에 관해 생각하는 방법, 그리고 전반적인 페이지 동작을 부드럽게 하는 것에 대해서 알아봅시다. 당신은 아마 페이지가 스크롤 중에나 애니메이션을 보여주는 도중에 “버벅”거리거나 “정지” 되는 것을 경험해 봤을 겁니다. 우리는 이런 경험들을 부드럽지 않다고 얘기하곤 하죠. 이런 유형의 문제들을 해결하기 위해서, 크롬 팀은 애니메이션 감지를 위한 실험 도구에 더 많은 지원을 추가하고, Chro.. The Complete Guide to Lazy Loading Images - 1 (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/ 저작권 정보: https://css-tricks.com Lazy Loading Images – The Complete Guide Lazy loading images that are not in the viewport improves initial page load performance and user experience. This is an in-depth guide to everything about lazy loading of images includi.. Demistifying webpack's 'import' function: using dynamic arguments (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1483/demistifying-webpacks-import-function-using-dynamic-arguments 저작권 정보: https://indepth.dev/ 웹팩 import 함수의 신비함: 동적 인수 사용하기 웹팩의 유명한 셀링 포인트임에도 불구하고, import 함수는 개발자들이 잘 알지 못하는 많은 숨겨진 세부 특징과 기능들을 가지고 있습니다. 예를 들면, import 함수 동적 표현식을 받을 수 있고, 그것으로 이미 잘 알려져 있는 lazy loading과 같은 기능을 해낼 수 있습니다. 동적 표현식은 원.. Tree-Shaking: A Reference Guide (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://www.smashingmagazine.com/2021/05/tree-shaking-reference-guide/ 저작권 정보: https://www.smashingmagazine.com/ ※ 글의 원작자인 Átila Fassina 로부터 smashingmagazine의 글은 출처를 밝히면 번역해도 된다는 허가를 받았습니다. 번역에 들어가기 전에... Tree-shaking 을 대체할 한국말을 찾지 못하여서 그대로 tree-shaking으로 표현하였습니다. 나무를 흔드는 것을 표현한 단어라고 이해하시면 될 것 같습다. 빠른 요약 (Quick Summary) ↬.. Introducing the Memory Inspector(한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://developer.chrome.com/blog/memory-inspector/ 저작권 정보: https://developers.google.com/terms/site-policies 이 글에서는 Chrome 91에 출시된 메모리 검사기를 소개합니다. 메모리 검사기를 통해 ArrayBuffer, TypedArray, DataView 및 Wasm Memory를 검사할 수 있습니다. 소개 Array Buffer의 데이터를 이해하고 싶었던 적이 있습니까? Memory Inspector 이전에는 DevTools로 Array Buffer에 대한 제한된 정보만을 얻을 수.. Trash talk: the Orinoco garbage collector(한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://v8.dev/blog/trash-talk 저작권 정보: https://v8.dev/terms#site-policies 휴지통 이야기: 오리노코 가비지 컬렉터 V8 가비지 컬렉터(GC)는 지난 몇 년 동안 많은 변화가 있었습니다. 오리노코 프로젝트는 가비지 컬렉터를 순차적인 STW(stop-the-world) 방식에서 병렬적인 concurrent(동시에 공존하는) 방식으로 바꿨습니다. 참고) STW/Concurrent garbage collector 모든 가비지 컬렉터에는 주기적으로 수행해야 하는 필수 작업이 몇 가지 있습니다. 1. 활성(live)/비활성(d.. 이전 1 다음
