IT

[CS] 브라우저 렌더링 과정 :: CSS 최적화

📢CSS 성능 최적화 CSS는 렌더링을 막는다. CSS 존재만으로도 CSS가 파싱되기 전까지 브라우저는 렌더링이 지연된다. CSS는 HTML 파싱도 막을 수 있다. 브라우저가 CSS가 파싱되기 전까지 콘텐츠를 보여주지 않아도 HTML의 로딩된 부분만을 먼저 보여줄 수 있다. 그러나 스크립트의 경우 aync defer 이 없다면 파싱을 막게 된다. 브라우저가 CSS관련 작업을 진행중이라면, 이 작업이 완료될 때 까지 기다렸다가 스크립트를 실행한다. 스크립트가 실행되기 전까지 문서 파싱을 할 수 없기 때문에, CSS는 더이상 렌더링은 차단하는 요소로 작용되지 않는다(하단 그림 참조) 문서의 외부 스타일시트 및 스크립트 순서에 따라서 때로는 HTML 파싱도 중지할 수 있다. 👉 파싱을 차단하는 상황을 피하기 ..

[CS] 성능 향상을 위한 최적화

🎨브라우저 로딩 과정🎨 파싱 스타일 레이아웃 페인트 합성 & 렌더 📃웹 페이지 로딩 최적화 브라우저 로딩 과정에서 파싱 중 블록 리소스가 발생할 수 있으며, CSS와 자바스크립트가 이에 해당한다. 최적화의 첫번째 단계는 이 블록 리소스를 최적화하는 것이다. CSS 최적화 CSSOM 트리는 CSS를 모두 해석해야 구성할 수 있다. 렌더링이 차단되지 않도록 CSS는 항상 HTML 문서 최상단( 아래)에 배치한다. 특정 조건에서만 필요한 CSS가 있을 때 미디어 쿼리를 사용한다. 외부 스타일시트를 가져올 때 사용하는 @import 사용은 피한다. 상황에 따라 내부 스타일시트를 사용한다. 자바스크립트 최적화 자바스크립트는 DOM트리와 CSSOM트리를 동적으로 변경할 수 있기 때문에 HTML 파싱을 차단하는 블록..

IE11 굿빠이

나를 항상 힘들게 했던 IE..! 기사를 보면 2022년 6월 15일부로 지원을 종료한다고 한다. 이 날 이후 PC에 설치된 IE는 비활성화되고 실행하면 MS의 다른 웹브라우저인 엣지로 자동 전환된다...!! 단, IE기반으로 만든 웹사이트를 지원하는 엣지의 IE모드는 최소 2029년까지 쓸 수 있게한다는 방침이다..? ??? 엣지의 IE모드는 무엇이지..? => 익스플로러에 최적화되어 있는 사이트에 접속할 때 필요한 모드로 국내에서는 ActiveX를 아직도 사용하는 관공서 또는 인트라넷에 접속할 때 많이 사용한다. ??? ActiveX를 버리지 않는 이상 한국에서 IE는 사라지지 않으려나 보다. https://www.sciencetimes.co.kr/news/%EA%B5%BF%EB%B0%94%EC%9D..

[git hub] 소스트리에서 두개의 계정 사용하기

2022-11-09 회사 계정(git lab)으로 소스트리 사용중 개인 계정(git hub)으로 소스트리 연결해서 사용하고 싶다. 뉴 탭을 선택 후 계정추가를 클릭 하면 팝업이 뜨는데 거기서 내 계정에 맞는 호스팅 선택하고, 인증 방식을 선택 후 확인한다. OAuth : 계정 확인 인터넷 창이 떠서 확인 Basic : 아이디/비밀번호 로그인 그러면 우측에 선택된 계정의 저장소가 보이는데 그 중 선택해서 클론받고 ~ 그 후부터는 똑같다. 회사 프로젝트에서 쓰는 gitlab 계정이 소스트리에 연결되어있다. 개인 계정(git hub)을 소스트리에 추가하고 싶다. 소스트리에서 추가하는 계정을 push 할때 로그온을 확인하라는 에러메세지가 뜬다. 로그인을 새롭게 해도 자꾸 로그인을 다시 하라는 메세지가 뜬다. 검..

[UI] input checkbox 체크 ui + 모두 선택, 하나만 선택 ui

//개인정보 모두 체크 $('#f_all').on('click', function () { let chkAll = $('input[type="checkbox"]'); if ($("#f_all").prop("checked")) { chkAll.prop("checked", true); } else { chkAll.prop("checked", false); } }); //개인정보 부분 체크 $('.chk input[type="checkbox"]').on('click', function () { $('#f_all').prop('checked', false); let chk = $('.chk').length; let chkInput = $('.chk input[type="checkbox"]:checked').le..

[UI] setTimeout과 clearTimeout 활용

let timer; function timeUp() { timer = setTimeout(timePopOpen, 30000); //30초 } function stopTimeUp() { clearTimeout(timer); } //시간 초과 팝업 오픈 function timePopOpen() { $('.pop-bg, .pop-timeup').fadeIn(); } timeUp(); //타임오버

[UI] 제이쿼리 UI 사용해서 직소퍼즐 만들기

힌트보기 /* ------------------------- 퍼즐 맞추기 -------------------------*/ //랜덤 const piece = $('.puzzle-piece span'); const pieceOdd = $('.puzzle-piece span:nth-child(odd)'); const pieceEven = $('.puzzle-piece span:nth-child(even)'); const width = $('.puzzle-piece').width() - 180; const height = $('.puzzle-piece').height() - 150; for (let i = 0; i < piece.length; i++) { let topPosition = Math.floor(M..

[UI] 헤더 nav 언더라인 따라다니기

let bar = document.querySelector('span'); let menu = document.querySelectorAll('a'); for(let i=0; i

[UI]오픈 날짜에 맞춰서 배너 show하기

//오픈시간 var dueDay = new Date('2020-07-27T08:00:00').getTime(); //현재시간 var today = new Date().getTime(); if( dueDay

[Swiper] 스와이퍼 업데이트

이벤트마다 스와이퍼 업데이트 할 때 var swiper = new Swiper('.swiper-container', { slidesPerView: 'auto', }); swiper.update();