milliwonkim의 블로그

FCP(First Contentful Paint) 초기 DOM 콘텐츠 렌더링 시간 측정 TTI(Time To Interactive) 이용자가 실제로 클릭이벤트 등을 발생 시킬 수 있게 만드는 시간 여기 전까지는 입력 및 동작이 입력 안됨 SI(Speed Index) 페이지 로드 중, 컨텐츠가 보여지는 속도를 뜻함 A가 B보다 더 점수가 높음 TBT(Total Blocking Time) - 사용자의 입력을 차단한 시간 - FCP와 TTI의 사이에서 발생 = 메인스레드를 독점해서 다른 동작을 방해한 시간 LCP(Largest Contentful Paint) 페이지 내의 컨텐츠 중 가장 큰 이미지 등 에셋이 로드 된 시간 CLS(Cumulative Layout Shift) 페이지 로드 과정에서 발생하는 예기치..

removeSpecialCharacter라는 함수의 실행으로 인해 Article 컴포넌트 렌더링이 자바스크립트 스레드에서 많은 시간 병목 현상을 만들어내고 있습니다. 10.33ms 차지 퍼포먼스 점수도 39점입니다. 이를 위해 해당 함수를 개선할 필요가 있습니다. 병목 코드 개선 function removeSpecialCharacter(str) { const removeCharacters = [ "#", "_", "*", "~", "&", ";", "!", "[", "]", "`", ">", "\n", "=", "-", ]; let _str = str; let i = 0, j = 0; for (i = 0; i < removeCharacters.length; i++) { j = 0; while (j < _..

다음과 같은 경우, Lighthouse에서 적절한 사이즈의 이미지로 렌더링을 권장하는 경고가 뜹니다. 적절한 사이즈로 줄인다면, 이미지를 가져오는 용량과 약 200KiB를 줄일 수 있고, 시간을 14.25s를 줄일 수 있습니다. function Article(props) { function getParametersForUnsplash({ width, height, quality, format }) { return `?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop`; } ... return ( ) } 현재 가져온 이미지의 width, height는 각각 1200, 1200인데에 반해 렌더링되는 이미지의 넓이는 120, 120입니다. 다음의 코드에서 ..

기본적으로 HTML, CSS, JS 파일 모두 텍스트로 만들어져있습니다. 이 텍스트들도 용량을 갖고 있는데, 이 용량들도 압축시킨다면 더 빠른 파일 로딩이 가능합니다. 주로 텍스트 압축에 사용하는 방식은 gzip 방식입니다. (Deflate도 있습니다. gzip은 내부적으로 deflate를 사용하면서 deflate 방식에서 조금 더 효율적인 압축을 제공) 다음과 같이 articles API로 불러오는 것에는 Content-Encodinf: gzip 압축 방식이 적용돼있는 걸 확인할 수 있습니다. // package.json { ... "serve": "npm run build && node ./node_modules/serve/bin/serve.js -u -s build", ... } 여기에 있는 옵션들..

import React from "react"; import { Switch, Route } from "react-router-dom"; import "./App.css"; import ListPage from "./pages/ListPage/index"; import ViewPage from "./pages/ViewPage/index"; function App() { return ( ); } export default App; 다음과 같은 코드를 렌더링 하면 크롬에서의 퍼포먼스와 fetching하는 파일들은 다음과 같습니다. 퍼포먼스 앱이 로드 되자마자 ListPage, ViewPage에 관련된 모든 js 파일이 다 업로드 됐습니다. 0.chunk.js의 로딩 시간이 22ms 다음의 상황에서 퍼포먼스 ..

문제 There is a robot on an m x n grid. The robot is initially located at the top-left corner (i.e., grid[0][0]). The robot tries to move to the bottom-right corner (i.e., grid[m - 1][n - 1]). The robot can only move either down or right at any point in time. Given the two integers m and n, return the number of possible unique paths that the robot can take to reach the bottom-right corner. The tes..

문제 You are climbing a staircase. It takes n steps to reach the top. Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top? Example 1: Input: n = 2 Output: 2 Explanation: There are two ways to climb to the top. 1. 1 step + 1 step 2. 2 steps Example 2: Input: n = 3 Output: 3 Explanation: There are three ways to climb to the top. 1. 1 step + 1 step + 1 step..

문제 You are given an integer array nums. You are initially positioned at the array's first index, and each element in the array represents your maximum jump length at that position. Return true if you can reach the last index, or false otherwise. Example 1: Input: nums = [2,3,1,1,4] Output: true Explanation: Jump 1 step from index 0 to 1, then 3 steps to the last index. Example 2: Input: nums = [..

문제 Given a string s and a dictionary of strings wordDict, return true if s can be segmented into a space-separated sequence of one or more dictionary words. Note that the same word in the dictionary may be reused multiple times in the segmentation. Example 1: Input: s = "leetcode", wordDict = ["leet","code"] Output: true Explanation: Return true because "leetcode" can be segmented as "leet code"..

문제 You are given an array prices where prices[i] is the price of a given stock on the ith day. You want to maximize your profit by choosing a single day to buy one stock and choosing a different day in the future to sell that stock. Return the maximum profit you can achieve from this transaction. If you cannot achieve any profit, return 0. Example 1: Input: prices = [7,1,5,3,6,4] Output: 5 Expla..