hoilzz/TIL
  • README
  • make-module
    • deploy
      • deploy-npm-pkg
        • lerna
        • npm-publish
          • 1-package
          • FAQ
        • babel-in-monorepo
        • rollup-faq
    • lerna
      • lerna
      • lernaFAQ
    • es6 module에서 import export는 정확히 어떻게 동작하는걸까?
    • babel
      • babel
      • babel
      • tour 서비스에서 폴리필 관련 이슈.
    • webpack and rollup
    • package-lock.json
    • rollup
      • rollup
  • old
    • Algorithm
      • 이론
        • README
          • heap
          • tree
            • 최소스패닝트리
            • std-map
            • tree
            • binary-tree
          • queue
            • queue
          • linked-list
          • vector
          • graph
            • DFS
            • BFS
            • graph
            • spanning-tree
            • Dijkstra
            • bellman-ford
            • dijkstra-1504
          • List
          • linear-not-linear
          • priority_queue
          • stack
            • stack2개로-queue만들기
            • Stack
          • disjoint-set
          • hash table
        • algorithm
          • Sorting
            • 삽입 정렬
            • 선택 정렬
            • quick_sort
            • bubbleSort
            • merge_sort
          • greedy
          • kmp-algorithm
          • 다익스트라
          • bellman-ford
          • binary_search
        • math
          • 진법
          • 소수
          • 최대 최소 공약수
          • 소인수 분해
        • string
          • 알파벳 개수
          • JS-8-prototype
      • 수업
        • codeplus
          • basic
            • graph
            • brute-force
            • 플러드 필
            • 5. DP
            • 탐색
          • ch3-1-완전탐색-그냥다해보기
          • ch3-2-완전탐색-큐
          • ch2-2-완전탐색-순열
          • DP
          • ch3-3-완전탐색-재귀호출-비트마스크
          • ch2-1-완전탐색-비트마스크
        • 인프런
          • 1-순환
            • 5. Counting Cells in a Blob
            • powerset(멱집합)
            • 2. 순환적으로 사고하기
            • Recursion 응용 - 미로찾기
            • 1. 순환
            • 1. 순환의 개념과 기본 예제 1
            • 1-혼자풀어본거
            • 3. 순환 알고리즘의 설계
            • 6. recursion 응용
          • 2-DP
            • 가장 긴 공통 부분 문자열 Longest Common Subsequence(LCS)
            • matrix-chain Multiplication
            • 2-3
            • 2-2
            • 2-1
            • 2-Summary
      • 문제풀기
        • old
          • bruteforce
            • ❌1339-단어수학
            • ❌10972-다음순열
            • ❌6603-로또
            • ❌2529-부등호
            • 🔨6679-싱기한-네자리숫자
            • 1748-수 이어쓰기
            • ❌1722-순열의순서
          • README
            • 2193-이친수
            • 1003-피보나치 개수
            • 2579-계단오르기
            • 9461_파도반수열
            • 11053_theLongestIncreasingSequence
            • 2193_이친수
            • 1912-연속합
            • 1699_제곱수의 합
            • 11052-붕어빵
            • 가장_긴_팰린드롬
            • DP복습하기
            • 2579_계단오르기
            • 1149-rgb거리
            • 1463-1로만들기
          • stack
            • 2493-탑
            • 10799-쇠막대기
            • ❌2504-괄호의값
            • 9012-괄호
          • README
            • 1074-Z
            • 1992_쿼드트리
          • 재귀호출-완전탐색
            • ch6.7-최적화
            • ch6.3-보글게임
            • boj-2309
            • ch6~6.5
            • ch6.4-소풍
            • ch6~6.5-문제풀이
            • ch6.1-재귀호출
            • ch6.2-n개의 숫자에서 r개 고르기
          • dfs,bfs
            • ❌숨바꼭질
          • ch5-1
          • ch4-시간복잡도
          • ch1-2
          • ch5
          • BFS, DFS
            • ❌13913-숨바꼭질4
        • new
          • 2-1
            • leet-129-sum-root-to-leaf-numbers
            • 200. number of island
          • 1-4
            • 0125
              • 14500-테트로미노
              • 9095-123더하기
              • 1065-한수
              • 6603-로또
            • 0122
              • 9095-123더하기
              • 2309-일곱난쟁이
            • summary
            • 0121
              • 1759-암호만들기
          • 2-3
            • perfect squares
            • sw-expert-자석
            • 포도주
            • 2667 단지 번호 붙이기
            • 2156 포도주 시식
          • 3-1
            • leet-338-counting-bits
            • leet-139-word-break
          • 3-4
            • 14891
          • 2-2
            • X-leet-394-decode-string
            • 로봇 청소기
            • X-337-house-robber-3
            • 8911 거북이
          • 2-4
            • 쉬운 계단 수
            • 103-Binary Tree Zigzag Level Order Traversal
          • 서비스명-문제번호-문제명
          • 4-3
            • 서비스명-문제번호-문제명
          • 1-5
            • 0130
              • 1012-유기농배추
          • 4-2
            • leet-860-lemonade-change
    • cs
      • network
        • about http
          • README
            • ch4
            • ch3
          • http떠도는 글 정리
            • http1.x의 커넥션 관리
        • 네쉽
          • 4-인터넷계층과 IP
          • 4-3-dhcp
          • faq
          • 4-2-routing
          • 3-transport
          • 6-보안
          • 각-계층-비교요약
        • home server
          • port
          • nat
          • DHCP
          • router
          • ip
          • dynamic-ip-addr
        • 0000
        • CDN
      • database
        • architecture
          • 2-normalization-basic
          • 1-normalization-원자적-데이터
          • 4-table-relation
          • 3-foreign-key
        • fundamental
          • fundamental
      • os
        • faq
        • 7-메모리관리
        • 3-computer-system-동작-원리
        • 5-process-관리
        • 6-CPU-스케줄러
        • 8-가상메모리
        • 4-인터럽트-원리
        • 2-overview
  • React
    • hooks
      • hooks state
      • useEffect vs useLayoutEffect
      • Hook 규칙
      • From Classes to Hooks
      • complete-guide-useEffect
        • useEffect 완벽가이드 3
        • useEffect-완벽가이드-5-2
        • useEffect 완벽가이드
      • useReducer로 useState 구현하는 방법
      • useRef는 hook의 디펜던시로 사용하면 안된다.
      • hooks
      • index를 통해 관리하고 있다. 그래서 조건문이나 loop문 등에 포함되면 순서가 보장되지 않기 떄문에이 작동하는 방식 hook 관련 린트에러가 발생한다.
    • test
      • FE 테스트
      • test-hae-boza zebal
      • 5 Questions Every Unit Test Must Answer
      • Test zebal hae-bo-za
      • Unit Test assertion 다시 생각하기
      • 테스트해보자(2)
    • tips
      • 합성 컴포넌트 with hooks
      • Why do We Write super(props) 요약해보자.
      • 상태 끌어올리기
      • 리덕스 셀렉터 구조화하기
      • when to break up a component into multiple components
      • 리렌더링 퍼포먼스 이슈
      • prop drilling
      • normalize API 매번 볼때마다 헷갈려
    • prop과 state는 왜 immutable일까?
    • bugReport
      • support option to stop propagation of events in render tree
    • virtual DOM
      • Virtual DOM과 DOM의 차이
      • What is Virtual DOM?
    • lib
      • typesafe actions
    • lifeCycle
      • LifeCycle Overview
    • react in runtime
    • handleError
      • Error Boundaries
    • setState 호출은 언제, 그리고 왜 일괄 처리 되는가?
    • reactElement
      • JSX
      • React component, React element, and Instance
    • React.ref
    • 함수형 setState
  • FrontEnd
    • js
      • application-with-js
        • ch4-2-add-context
        • ch3-model
        • ch4-controller
        • ch2-event
        • ch3-5-when-data-loading
        • 5-3-binding
        • ch1-mvc-and-class
      • functional
        • FP-3-map-filter
        • JS-10-객체-ES6
        • FP-4-each
        • 커링
        • JS-9-this
        • FP-2
        • FP-1
        • FP-7-객체
        • JS-8-prototype
        • 다형성
      • es6+
        • [es6]var, let, const
        • promise
        • async-await
        • [es6] arrow func
        • iterator-generator-iterable
      • basic
        • function
        • Location Object
        • global_object_window
        • Concurrency_model_and_event_loop
        • delete-operator
        • Summary
        • 메모리 관리 + 4가지 흔란 메모리 누수 대처법
        • throw-try-catch
        • throw-vs-console-error
        • closure
        • lexical_scope
        • scope chain
        • Hoisting
        • this
        • execution context and scope
        • variable
        • OOP
      • mdn_translation
        • apply()
        • proxy
        • ObjectAssign()
        • comparison
        • setInterval
        • with
        • setTimeout
        • map
        • this
        • bind
        • getting_started_ajax
        • reduceRight
      • test
        • redux unit test
        • Static VS Unit VS Integration Testing for Frontend Apps
        • Why you've been bad about testing
        • 2-use-jest-dom
      • asyncronous
        • 비동기
        • 비동기성
    • ts
      • 타입가드와 차별된 타입
      • Node vs Element
      • typescript debugging 익숙해지기
      • 인덱스타입
      • Typescript 전환 후기
      • UnionType
      • Conditional Types
      • tsconfig
      • TypeScript tips
      • 문자열 시그니처
      • *.d.ts
      • module_resolution
      • Typescript 전환기
    • technique
      • debounce
      • immutable
    • react
      • react다시공부하기
        • Components-and-Props
        • README
          • 11-👍normalizing-state-shape
          • 8-withrouter
          • 20-refactoring-reducers
          • 12-wrapping-dispatch-to-log-action
          • 04-refactoring-entry-point
          • 18-applying-redux-middleware
          • 05-adding-react-router
          • 14-fetching-data-on-route-change
          • 19-👍updating-state-with-fetched-data
          • 6-navigating-with-react-router
          • 16-wrapping-dispatch-to-recognize-promise
          • 10-colocating-selectors-with-reducers
          • 7-filtering-redux-state-with-router-params
          • 17-middleware-chain
          • 15-dispatching-actions-with-fetched-data
          • 02-supplying-the-initial-state
        • Composition VS Inheritance
        • rendering-element
        • uncontrolled-component
        • 성능-최적화
        • UNSAFE-componentWillReceiveProps
        • state-and-lifecycle
        • Thinking-in-react
        • props-state
        • ref
        • v16
          • Portals
        • lifting-state-up
        • context
        • setState-Updater-Factory
        • HOC
          • HOC
      • library
        • redux-thunk
        • redux-saga
          • example
          • 14-cancel-task
          • 15-fork-model
          • cheatSheet
          • 12-yield를-이용한-사가-배열
          • 1-readme
          • 9-non-blocking
          • 13-사가-조합
          • 11-race-multiple-effect
          • 3-helper-function
          • 7-event-abstraction
          • 6-error-handling
          • 5-action-dispatch
          • summary-and-faq
          • 10-병렬태스크-실행
          • 8-action-poooling
          • channel
          • 4-서술적-effect
          • 2-tutorial
        • reselect
      • 번역
        • 공홈
          • usage-with-react
          • Introuducing Hooks
          • Reconcilation
          • Hooks at a Glance
          • using-immutable-data
          • setState(Component API)
          • getting_started
        • React Element
        • Autobinding
        • React Components
        • render
        • context API 효과적으로 사용하기
        • 리액트로 앱 상태 관리 하기
      • redux-faq
        • Organizing State
        • reducer-action-where-should-logic
        • Changes are made with pure function
        • Where should websockets and other persistent connection live?
        • action-creator에서-여러개-dispatch-해야할까
      • tip
        • parameterized-event-handler
        • idiomatic-redux
        • 5tips-redux-in-large-application
        • five-tips-for-redux-in-large-application
      • redux다시공부하기
        • redux-doc
          • 3-7-정규화된-데이터-업데이트
          • 3-5-deep-combineReducer
          • 3-4-combineReducer
          • 3-1-기본-리듀서-구조
          • 2-1-1-advance-action
          • 3-2-리듀서-로직-분리하기
          • api-applyMiddleware
          • 3-3-리듀서-리팩토링하기
          • 상태 정규화
        • 5 tips for working with redux in large application
        • selector
        • core-concepts
        • redux
      • react-redux
        • Store에 접근하기
      • pattern
        • render-prop
      • Why react?
    • markup-css
      • css
        • markup_level_test
        • What_is_float
        • background-size
        • selector
        • html_semantic_elements
        • before_pseudo_element
        • README-dot-md
        • percentage
        • css_box_model
        • 2017-1-20-vertical-align
        • 2017-2-22-z-index
        • transition
        • units_for_expression_len
        • box_sizing
        • css의 7가지 단위
        • inlineAndblock
        • alignCenterViaCss
        • 2017-2-1-margin
        • webkit이란
        • media_query
        • transform
        • Position
        • viewport
      • html
        • HTML5_Stylde_Guide
        • imagesWithMarkup
        • form
        • img
        • data-attributes
        • viewport_meta_tag
        • flex
    • webpack
      • 공홈번역
        • Module
        • module-resolution
        • loader
        • Caching
        • manifest
    • browser
      • 브라우저 렌더링
      • Scroll Event with throttling using raf
      • 쿠키, 세션, 캐시
      • raf
      • cors
      • window.history
      • 쿠키와 인증
    • tests
      • static vs unit vs integration test
      • getting started
    • codespitz-deisgn
      • 1
    • test
      • JS test란
      • redux test
  • devlog
    • 0619
      • Null and Undefined
      • babel-preset-env
      • babel 7.4.0
      • babel-lodaer
      • core-js
      • @babel/runtime
      • babel/polyfill
      • @babel/plugin-transform-runtime
      • babel-faq
      • scroll
    • 0802
      • const는 상수인데, 왜 값이 바뀔 수 있을까?
    • 0822
      • react in runtime
    • 2020
      • 0220
        • union type 탈출하기
        • 동적 text area
      • 0213
        • rel noopener
        • sticky
        • push
        • unknwon
      • 0217
        • portal로-리렌더-줄이면서-느낀거
        • table
        • css width만 가지고 height값과 함꼐 비율대로 늘리기
    • 0730
      • shallow rendering 사용하지 않는 이유
    • 1023
      • DOMContentLoaded, load, unload
    • 0520
      • input with TS
    • 0704
      • as const와 generic으로 타입 추론 하기
      • TS에서 extends
      • saga with pattern
    • 0608
      • State
      • setState-vs-useState
      • React Component가 뭐에요?
      • JSX
      • png, gif, jpg, svg
    • 0524
      • pure component and memo
    • 0521
      • 0521
    • 0523
      • useState vs useReducer
      • temp
    • 0823
      • 어드민 개발하면서 flex 써먹은거 정리
    • 1011
      • js로 2차원 배열 만들기
    • 0522
      • 리마운트를 막아보자!
    • 0829
      • saga에서 모든걸 관리하면 편한데
    • 0516
      • 제너레이터 함수 - Caller와 Callee
      • Saga
    • 0703
      • React Context 효과적으로 사용하기
    • 0905
      • 제곧내
    • 0809
      • intersection observer
    • 0604
      • useRef
    • 0727
      • React - 기본 이론
    • 0616
      • immutablility
    • 0712
      • infer
    • 0705
      • useselector-reselect
    • 0612
      • 오버로딩 vs 오버라이딩
    • 0527
      • super(props) 왜 작성해야 할까?
    • 0613
      • React component, React element, and Instance
      • ios-scroll
    • 0627
      • back button
      • typescript-config
    • 0925
      • 인덱스 시그니처의 key의 특정 스트링만 정하기
    • 0923
      • useRef
    • 0530
      • lib.d.ts
      • Modules
      • Declaration file
    • 0803
      • arrow function in class
    • 0729
      • testing redux
    • 0628
      • Composition on PureComponent
    • 0805
      • IO entry 정보
    • 0529
      • input
    • 1007
      • 인덱스 시그니처의 키값을 제네릭으로 할당하기
    • 0806
      • getBoundingClientRect
    • 0807
      • Imperative vs Declarative API
    • 0620
      • asset management
    • 0927
      • 어떤 상태에 대해 redux state에 둘지 component state로 둘지의 기준은?
  • javascript
    • generator
      • Iteration protocols
    • Curry or Partial Application
    • basic
      • 실행 컨텍스트
      • 프로토타입
      • 함수 표현식과 함수 선언식의 차이
      • OOP 간단 정리
    • closure 알아보기
    • What is a Pure function?
    • arrow-fn-vs-fn
    • hoisting with let-const
    • ES6 In Depth
    • Aync Await blows promise away
  • Web
    • video
      • HLS
      • MediaSource
      • video, track, source
      • HLS
    • intersection-observer
      • intersection observer
    • optimizeRender
      • layout과 reflow를 발생시키는거
  • book-review
    • ruby-object-oriented-design
      • 5
      • ch2-단일-책임-원칙을-따르는-클래스-디자인
      • ch3-의존성-관리하기
      • ch5-오리타입으로-비용줄이기
      • ch4-3-유연한-인터페이스-만들기
      • ch4-2-유연한-인터페이스-만들기
      • ch4-1-유연한-인터페이스-만들기
      • ch-3-의존성-관리하기
    • 읽기좋은코드가
      • 1. 코드는 이해하기 쉬워야 한다.
      • 2. 이름에 정보 담기
      • 3. 오해할 수 없는 이름들
    • core-javascript
      • 1. 데이터 타입
  • redux
    • saga
      • 리덕스 사가 패턴이 정신건강에 도움을 줄 것이다.
      • 사가로 비동기 동작 제어하기
      • 사가 패턴
    • reducer
      • slice reducer 간 데이터 공유하기
      • prerequisite concept
      • Managing Normalized Data
      • split reducer or not
    • selector
      • useSelector-with-reselect
      • 셀렉터 패턴
    • reselect
  • FP
    • 순수 함수
  • developer
  • retrospect
    • 어드민 개편
    • UI는 이따가 생각하자
  • DesignPattern
    • 추상화
Powered by GitBook
On this page

Was this helpful?

  1. Web
  2. optimizeRender

layout과 reflow를 발생시키는거

PreviousoptimizeRenderNextbook-review

Last updated 5 years ago

Was this helpful?

아래 속성이나 메서드들이 JS에서 요청되거나 실행될 때, 브라우저에게 동기적으로 style과 layout* 을 계산하도록 트리거한다. 이거슨 reflow나 이라고 불리고 일반적인 퍼포먼스 병목 현상이다.

layout thrashing
https://gist.github.com/paulirish/5d52fb081b3570c81e3a