반응형 javascript58 content-visibility로 렌더링 성능 향상 브라우저는 기본적으로 화면 밖의 콘텐츠도 모두 렌더링합니다. 이는 불필요한 리소스 낭비입니다.content-visibility: auto 를 사용하면 화면에 보이는 부분만 렌더링하고, 보이지 않는 부분은 필요할 때 렌더링하도록 최적화할 수 있습니다. 개발중인 서비스는 사용자가 원하는 만큼 이미지를 업로드할 수 있는 기능을 제공하고 있습니다. 문제는 이미지가 많아질수록 초기 페이지 로딩이 느려진다는 것입니다. /* vue3 */const CHUNK_SIZE = 3const imageChunks = computed(() => { const chunks = [] for (let i = 0; i ....image-chunk { content-visibility: auto; contain-i.. 2024. 12. 3. Web Workers와 OffscreenCanvas로 canvas 성능 향상 이번 프로젝트에서 구현해야하는 기능은 이미지 위에 겹쳐진 투명한 캔버스에 그림을 그릴 수 있는 웹 기반 그리기 도구를 만드는 것이었습니다. 그런데 캔버스 사이즈가 커지고 그리는 모양 수가 늘어나면서, 특히 자유형 그리기 중에 상당한 지연이 발생하기 시작했습니다.여기서 몇몇 최적화 기술을 시도했습니다.디바운싱 및 스로틀링: 이러한 기술은 마우스 이벤트 호출 수를 줄이는 데 도움이 되었지만 그리기의 부드러움도 감소시켰습니다(ux관점에서 안좋음).단순화된 그리기 알고리즘: 그리기 알고리즘을 최적화했지만, 미미한 개선만 제공했습니다.주요 문제는 모든 그리기 작업이 UI 업데이트 및 이벤트 처리와 경쟁하면서 메인 스레드에서 수행된다는 것이였고, 이러한 생각으로 인해 그리기 작업을 별도의 스레드로 오프로드하는 것을.. 2024. 10. 21. Cookie Store API https://developer.mozilla.org/en-US/docs/Web/API/CookieStore CookieStore - Web APIs | MDN The CookieStore interface of the Cookie Store API provides methods for getting and setting cookies asynchronously from either a page or a service worker. developer.mozilla.org 쿠키 가져오기 쿠키를 사용하려면 아래처럼 전체 문자열을 뒤져보거나 라이브러리를 사용했어야 했다. function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie... 2024. 2. 22. FE 클린코드 https://velog.io/@chooble/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%B0%94%EB%A1%9C-%EC%93%B0%EB%8A%94-FE-%ED%81%B4%EB%A6%B0%EC%BD%94%EB%93%9C-by-Toss 실무에서 바로 쓰는 FE 클린코드 by Toss & 진유림님 SLASH 21에서 진유림님께서 발표하신 "실무에서 바로 쓰는 Frontend Clean Code" 영상을 분석하였습니다. velog.io 2023. 8. 29. 백틱 tagged templates tagged templates를 사용하면 함수의 인자를 구분지을 수 있습니다. 태그 함수의 첫번째 인자는 문자열 값의 배열이고 나머지는 인수 표현식과 관련됩니다. var person = 'Mike'; var age = 28; function myTag(strings, personExp, ageExp) { /* strings: [ "that ", " is a ", "" ] */ var str0 = strings[0]; var str1 = strings[1]; var str; ageExp > 99 ? str = 'centenarain' : str = 'youngster' return str0 + personExp + str1 + str; } var output = myTag `that ${ person } .. 2023. 5. 19. memoize Memoize는 동일한 인수로 연산 비용이 많이 드는 루틴을 여러 번 호출하는 것을 방지하기 위해 특정 함수의 결과를 캐싱하는 용도로 사용된다. 입력 변수를 기반으로 복잡한 계산을 수행하는 함수가 있다면, 결과 값을 캐싱하고 동일한 입력값으로 여러 번 호출될 때 즉시 값을 가져올 수 있도록 memoize() 함수를 사용할 수 있다. function memoize(func) { const cache = new Map(); return function() { const key = JSON.stringify(arguments); if (cache.has(key)) { return cache.get(key); } const result = func.apply(this, arguments); cache.set(k.. 2023. 3. 22. 이전 1 2 3 4 ··· 10 다음 반응형
