몽땅뚝딱 개발자

https://careerly.co.kr/comments/95555?utm_campaign=user-share

◽️ 블록 차단 리소스 HTML을 파싱할 때 CSS나 js를 만나게되면 HTML 파싱을 중단하고 해당 파일을 파싱하거나 다운로드 후 실행하게 되는데 이처럼 HTML 파싱을 차단하는 요소를 블록 차단 리소스라고 한다. HTML 파서는 인라인 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어 권한을 넘기고 스트립트 엔진이 모두 실행된 후에 DOM 생성을 재개한다. 이렇게 위치시킨다. 1) CSS는 ◽️ media 속성 CSS와 js에 media attribute로 단말기 유형에 따라 해당 CSS를 적용할지를 명시해주면 블로킹을 방지할 수 있다. media attribute는 연결된 HTML(리소스)이 최적화되는 미디어 또는 장치를 지정한다. Operators: and, not ..

◽️ 렌더링이란? 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 것이다. SSR과 CSR의 차이점은 표시해 줄 화면을 어디서, 어떻게 그리냐의 차이이다. ◽️ 클라이언트 사이드 렌더링(CSR, Client Side Rendering) 페이지의 내용을 브라우저에서 표현한다. SPA 트렌드와 CPU의 성능 상승과 함께 본격적으로 시작되었다. CSR은 클라이언트에서 모두 처리하는 것으로, 서버에서 전체 페이지를 한번 렌더링하여 보여주고 사용자가 요청할때 마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다. 이렇게 body 안이 텅텅비어있어 처음 접속하게되면 빈 화면만 보이게되고 링크된 자바스크립트를 다운로드 받아서 동적으로 화면을 구성하여 최종적인 화면을 보여준다. 그래서 ..

◽ memoization const cache = {} export function getAverageColorOfImage(imgElement) { if(cache.hasOwnProperty(imgElement)) { return cache[imgElement] } // ... 실행로직 return averageColor; } ◽ memoization 모듈화 function memoize(fn) { const cache = {} return function(...args) { // 파라미터가 여러개인 경우의 방어로직 if(args.length !== 1) { return fn(...args) } if(cache.hasOwnProperty(args)) { return cache[args] } const ..

react-lazyload를 사용한다. vue에도 vue-lazyload가 있다! ◽ react-lazyload 설치하기 npm i --save react-lazyload [사용예제] import React from 'react'; import styled from 'styled-components'; import { useDispatch } from 'react-redux'; import { showModal } from '../redux/imageModal'; import LazyLoad from 'react-lazyload'; function PhotoItem({ photo: { urls, alt } }) { const dispatch = useDispatch(); const openModal = ..

◽ Layout Shift 의도하지않은 클릭이 발생하는 등 사용성이 떨어진다. ◽ Layout Shift 확인하기 ◽ Layout Shift의 원인 - 사이즈가 정해져 있지 않은 이미지가 로딩되는 경우 - 사이즈가 정해져 있지 않은 광고가 있는 경우 - 동적으로 콘텐츠를 삽입하는 경우 - Web font (FOIT, FOUT): 폰트가 추가로 적용되는 경우 ◽ 사이즈가 정해져있지 않은 이미지가 로딩되는 경우 사이즈가 지정되어있는 경우(예를 들어 비율이 16:9로 정해진 경우) padding-bottom을 주고 미리 영역을 확보한다. const ImageWrap = styled.div` width: 100%; padding-bottom: 56.25%; position: relative; `; const I..

◽ Lighthouse Lighthouse 탭에서 이렇게 확인할 수 있다. ◽ 커버리지탭 각 파일을 더블클릭하면 사용하는 것, 사용하지 않는 css를 볼 수 있다. 따라서 사용하지 않는 css를 제외한다면 용량을 줄일 수 있다. ◽ purgecss 사용하여 사용하지않는 css 제거하기 npm i purgecss sass랑 같이 사용할 수 있는지? https://purgecss.com/css_modules.html CSS modules | PurgeCSS How to use with CSS modules PurgeCSS works by comparing the selectors in your content files with the ones on your CSS files. When using CSS ..

◽ 캐시 설정하기 ◽ 캐시의 종류 1. 메모리 캐시 메모리상에(RAM) 저장 2. 디스크 캐시 디스크에 file로 저장 ◽ Cache-Control Http Header에 들어가는 값으로 서버에서 설정해야 한다. - 요청: 나 어떤 이미지가 필요해 - 서버: 니가 이미지가 필요하구나? 가져가 ◽ Cache-Control의 5가지 속성 1. no-cache 캐시를 사용하기 전에 서버에 검사 후 사용을 결정한다. 요청한 이미지가 다르면 캐시된 이미지를 사용하지않고 다시 보내준다. max-age=0과 같다. 캐시 시간이 만료되더라도 브라우저는 리소스를 갖고있다. 새로 다시 리소스를 요청할 때 만료된 데이터에 대해 다시 사용해도되는지 검사한다. 2. no-store 캐시를 사용하지 않음 3. public 모든 ..

◽ 폰트 Preload (다시보기) css가 로드된 이후에 로드되었지만 화면에 진입하자마자 폰트가 필요한 시점보다 더 먼저 load 될 수 있도록 한다. ◽ 웹팩에서 설정하기 const PreloadWebpackPlugin = require('preload-webpack-plugin') module.exports = function override(config, env) { config.plugins.push(new PreloadWebpackPlugin({ rel: 'preload', as: 'font', include: 'allAssets', fileWhiteList: [/(.woff2?)/] })) return config; } 출처 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. Reac..

◽ FOUT vs FOIT FOUT(flash of unstyled text) 기본폰트 => 다운로드 된 시점에서 폰트를 적용하는 것 IE, Edge에서 사용 FOIT(flash of invisible text) 다운로드 전에는 해당 폰트가 적용된 텍스트를 보여주지 않음 Chrome, Safari에서 사용 => 우리는 폰트 최적화를 통해 이 두 현상을 해결 ◽ 폰트 최적화 방법 2가지 1. 폰트 적용 시점 컨트롤 하기: FOUT, FOIT 2. 폰트 사이즈 줄이기 ◽ 폰트 시점 컨트롤 속성 font-display 속성을 사용한다. - auto: 브라우저에서 설정한 기본 동작 - block: FOIT (timeout = 3s) - swap: FOUT - fallback: FOIT (timeout = 0.1..