정보실

웹학교

정보실

css CSS 축소를 위한 완벽한 모범 사례(1)

본문

CSS는 아름다운 레이아웃, 반응형 디자인의 유동성, 감각을 자극하는 색상, 독창적 인 방식으로 표현 된 텍스트를 읽을 수 있는 글꼴, 이미지, UI 요소 및 기타 콘텐츠에 표시되는 웹의 모양과 느낌 수많은 모양과 크기. 네트워크 중단, 작업 완료, 유효하지 않은 신용 카드 번호 입력 또는 사망 후 흰 연기로 사라지는 게임 캐릭터와 같은 응용 프로그램 상태를 전달하는 직관적 인 시각적 신호를 담당합니다.


CSS가 없으면 웹이 완전히 깨지거나 지루할 것입니다.


SPA 및 PWA 덕분에 동작 및 성능면에서 기본 대응 기능과 일치하거나 능가하는 웹 지원 앱을 구축해야 하는 상황에서 이제 웹을 통해 더 많은 기능과 더 많은 코드를 앱 사용자에게 제공하고 있습니다.


웹의 편재성, 마찰이 적음 (링크를 통해 탐색, 설치 없음) 및 진입 장벽이 낮음 (매우 저렴한 전화의 인터넷 액세스)을 고려할 때 더 많은 사람들이 처음으로 온라인에 접속하여 참여할 수 있습니다. 수백만의 다른 기존 사용자가 오늘날 우리가 구축하고 있는 웹 앱에 참여합니다.


웹을 통해 제공되는 코드가 적을수록 응용 프로그램과 사용자에게 적은 마찰이 발생합니다. 코드가 많을수록 더 복잡하고 성능이 저하되며 유지 관리 성이 떨어질 수 있습니다.


따라서 JavaScript 페이로드 크기를 적절한 청크로 분할하고 축소하는 방법을 포함하여 JavaScript 페이로드 크기를 줄이는 데 많은 중점을 두었습니다. 최근에야 웹은 최적화되지 않은 CSS에서 발생하는 문제에 주의를 기울였습니다.


CSS 축소는 웹 앱 사용자에게 상당한 성능 향상을 제공 할 수 있는 최적화 모범 사례입니다. 방법을 살펴보겠습니다!


CSS 축소 란 무엇입니까? 


축소는 코드의 불필요한 부분을 잘라 내고 파일 크기를 줄이는 데 도움이 됩니다. 궁극적으로, 코드는 컴퓨터에 의해 실행되도록 되어 있지만, 공동 작성, 검토, 유지, 문서화, 테스트, 디버그 및 배포가 필요한 사람이 소비 한 후 또는 이와 함께 소비됩니다.


다른 코드 형식과 마찬가지로 CSS는 주로 사람이 소비 할 수 있도록 형식이 지정됩니다. 따라서 간격, 들여 쓰기, 주석, 이름 지정 규칙 및 계측 해킹을 추가하여 CSS 코드의 생산성과 유지 관리 성을 향상 시킵니다. 브라우저 나 대상 플랫폼에서 실제로 실행할 필요는 없습니다.


CSS 축소 기능을 사용하면 이러한 추가 기능을 제거하고 여러 가지 최적화를 적용하여 대상 장치에서 컴퓨터를 실행하는 데 필요한 것만 배송 할 수 있습니다.


왜 CSS를 축소해야 합니까? 


소스 코드 축소는 파일 크기를 줄이고 브라우저가 이러한 코드를 다운로드하여 실행하는 데 걸리는 시간을 단축 시킬 수 있습니다. 그러나 CSS 축소에 있어 중요한 것은 CSS가 웹에서 렌더링 차단 리소스라는 것입니다.


즉, 브라우저가 CSSOM (CSS 정보는 있지만 DOM 정보)을 빌드 할 때까지 사용자는 웹 페이지에서 컨텐츠를 볼 수 없으며 이는 문서에서 참조하는 모든 스타일 시트를 다운로드하고 구문 분석 한 후에만 발생합니다.


이 기사의 뒷부분에서 중요한 CSS 개념과 그에 대한 모범 사례를 살펴볼 것입니다. 그러나 여기서는 CSS가 준비 될 때까지 사용자가 아무 것도 볼 수 없다는 점을 정해야 합니다. 축소되지 않거나 사용되지 않은 CSS를 제공하기 때문에 불필요하게 큰 CSS 파일은 사용자에게 이 바람직하지 않은 환경을 제공하는 데 도움이 됩니다.












  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 45회 ]  작성일19-08-08 09:28

웹학교