홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

웹페이지의 기본 성능 최적화 규칙에 대한 간략한 논의

저자：Eve Cole 업데이트 시간：2025-03-12 06:32:01

브라우저 웹페이지에 대한 일부 최적화 규칙

페이지 최적화

정적 리소스 압축

구성 도구(webpack, gulp)를 사용하여 이미지, 스크립트, 스타일과 같은 웹페이지 정적 리소스를 적절하게 압축합니다.

CSS 스프라이트 이미지, base64 인라인 이미지

사이트의 작은 아이콘을 하나의 이미지로 병합하고 CSS를 사용하여 해당 아이콘을 배치하고 가로채서 인라인 이미지를 적절하게 사용합니다.

상단의 스타일과 하단의 스크립트

페이지는 단계별 렌더링 프로세스입니다. 스타일을 상단에 고정하면 페이지를 사용자에게 더 빠르게 표시할 수 있습니다. 상단에 <script> 태그를 고정하면 페이지 뒤의 리소스 다운로드가 차단됩니다.

외부 링크의 CSS 및 JS 사용

여러 페이지가 공개 정적 리소스를 참조하므로 리소스 재사용으로 인해 추가 http 요청이 줄어듭니다.

빈 src가 있는 이미지를 피하세요.

불필요한 http 요청을 피하세요. 

 <!-- src가 비어 있는 이미지는 여전히 http 요청을 시작합니다.--><img src= style="margin: 0px; padding: 0px; outlook: none; line-height: 25.2px;font-size: 14px; width: 660px; 오버플로: 숨김; 지우기: 둘 다; 글꼴 계열: tahoma, arial, Microsoft YaHei;"> 
 <!-- 실제 이미지 크기는 600x300이며 HTML에서는 200x100으로 조정됩니다. --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; 개요: 없음; 줄 높이: 25.2px; 글꼴 크기: 14px; 오버플로: 숨겨진; 지우기: 둘 다; 글꼴 계열: tahoma, arial, Microsoft YaHei;"> 
 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>문서</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>
 예제에서는 css 및 js 파일이 미리 로드되어 있으며 후속 페이지 렌더링에 사용되면 즉시 호출됩니다.
 다양한 유형의 리소스를 로드하기 위해 as 유형을 지정할 수 있습니다. 
  1.  스타일
  2.  스크립트
  3.  동영상
  4.  오디오
  5.  영상
  6.  세례반
  7.  문서
  8.  ...
 이 방법은 crossorigin 속성을 설정하여 도메인 전체에 걸쳐 리소스를 미리 로드할 수도 있습니다. 
 <link rel=preload href=fonts/cicle_fina-webfont.woff2 as=font type=font/woff2 crossorigin=anonymous>
 CSS
 선택자
 높은 것부터 낮은 것까지의 선택기 우선 순위는 다음과 같습니다. 
  1.  아이디 선택기
  2.  클래스 선택자
  3.  태그 선택기
  4.  인접 선택자 
 h1 + p{ 여백 상단: 15px }
 h1 요소 바로 뒤에 나타나는 단락을 선택합니다. h1 및 p 요소에는 공통 상위 요소가 있습니다.
 자식 선택자 
 h1 > 강함 {색상:빨간색;}
 자손 선택자 
 h1 em {색상:빨간색;}
 와일드카드 선택기
 속성 선택기 
 *[제목] {색상:빨간색;}img[alt] {테두리: 5px 단색 빨간색;}
 의사 클래스 선택자
 선택기 사용 경험: 
  1.  다층 레이블 선택기를 대체할 수 있는 클래스 선택기의 우선순위를 지정합니다.
  2.  ID 선택기를 주의해서 사용하십시오. 효율적이기는 하지만 페이지에서 고유하며 팀 공동 작업 및 유지 관리에 도움이 되지 않습니다.
  3.  선택자 상속을 합리적으로 활용하세요.
  4.  CSS 표현을 피하세요.
 선택기 수준 낮추기
 이전 선택기의 우선순위에 따라 여러 수준의 선택기 중첩을 피해야 하며 가급적이면 3개 수준을 넘지 않아야 합니다. 
 .container .text .logo{ 색상: 빨간색; }/*다음으로 변경*/.container .text-logo{ 색상: 빨간색 }
 페이지 스타일 파일을 간소화하고 사용하지 않는 스타일을 제거합니다.
 브라우저는 중복된 스타일 일치를 수행하므로 렌더링 시간에 영향을 미칩니다. 또한 스타일 파일이 지나치게 크면 로딩 속도에도 영향을 미칩니다.
 CSS 상속을 사용하여 코드 크기 줄이기
 CSS의 상속 가능한 속성을 사용하면 상위 요소가 스타일을 설정하며 하위 요소는 이를 다시 설정할 필요가 없습니다.
 일반적인 상속 가능한 속성에는 색상, 글꼴 크기, 글꼴 계열 등이 포함되며, 상속 불가능한 속성에는 위치, 디스플레이, 부동 소수점 등이 포함됩니다.
 속성 값이 0이면 단위가 추가되지 않습니다.
 CSS 속성값이 0이면 코드량을 줄이기 위한 단위를 추가할 수 없습니다. 
 .text{ 너비: 0px; 높이: 0px }/*다음으로 변경:*/.text{ 너비: 0;
 자바스크립트
 이벤트 위임 사용
 이벤트 위임을 사용하여 이벤트를 여러 유사한 DOM 요소에 바인딩합니다. 
 <ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul> 
 // 비합리적인 방법: 클릭 이벤트를 각 요소에 바인딩합니다. $('#container .list').on('click', function() { var text = $(this).text(); console.log(text); });//이벤트 위임 방법: 이벤트 버블링 메커니즘을 사용하여 이벤트를 상위 요소에 위임합니다. $('#container').on('click', '.list', function() { var text = $(this ).텍스트(); console.log(텍스트) });
 이벤트 위임을 사용하면 문서에 이벤트를 위임할 수는 있지만 이는 불합리하며, 하나는 이벤트 오판을 일으키기 쉽고, 다른 하나는 범위 체인 검색 효율성이 낮다는 점입니다. 가장 가까운 상위 요소를 대리자로 선택해야 합니다.
 성능 향상 외에도 이벤트 위임을 사용하면 동적으로 생성된 DOM 요소에 이벤트를 바인딩할 필요가 없습니다.
 DOM콘텐츠가 로드됨
 모든 이미지 리소스가 다운로드될 때까지 기다리는 대신 DOM 요소가 로드된 후(DOMContentLoaded) DOM 트리 처리를 시작할 수 있습니다. 
 // 네이티브 자바스크립트 document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM이 완전히 로드되고 구문 분석됨);}, false);// jquery$(document).ready(function() { console.log(ready ! );});// $(document).ready()$(function() { console.log(ready!);});
 사전 로딩 및 지연 로딩
 예압
 브라우저의 유휴 시간을 활용하여 이미지, 스타일, 스크립트 등 나중에 사용할 수 있는 리소스를 미리 로드하세요.
 무조건 사전 로딩
 onload가 트리거되면 향후 필요할 리소스를 즉시 확보합니다.
 이미지 리소스가 미리 로드되어 있습니다. (이미지 사전 로딩을 구현하는 3가지 방법)
 사용자 행동에 따른 사전 로드
 향후 필요할 수 있는 사용자 행동 및 사전 로드 리소스의 작동 가능성을 판단합니다. 
  1.  사용자가 검색 입력 상자에 입력하면 검색 결과 페이지에서 사용할 수 있는 리소스가 미리 로드됩니다.
  2.  사용자가 탭을 조작하면 기본적으로 그 중 하나가 표시됩니다. 다른 옵션을 클릭하면 마우스를 올리면 나중에 사용할 리소스가 먼저 로드될 수 있습니다.
 지연 로딩
 페이지 초기화에 필요한 콘텐츠나 구성 요소를 제외하고 그림을 자르는 js 라이브러리, 가시 범위에 없는 그림 등 다른 모든 항목은 느리게 로드될 수 있습니다.
 이미지가 지연 로드됩니다. (사진이 보이는 영역 내에 있는지 확인하고, 그렇다면 사진에 실제 경로를 할당합니다)
 전역 조회 방지
 함수에서 두 번 이상 사용되는 비지역 변수는 지역 변수로 저장되어야 합니다. 
 function updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + image + i; } var msg = document.getElementById(msg) msg.innerHTML = 업데이트가 완료되었습니다.;}
 문서 전역 변수는 위 함수, 특히 for 루프에서 여러 번 사용됩니다. 따라서 문서 전역 변수를 지역 변수로 저장한 후 사용하는 것이 더 나은 솔루션입니다. 
 function updateUI(){ var doc = 문서; var imgs = doc.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + 이미지 + i; } var msg = doc.getElementById(msg) msg.innerHTML = 업데이트 완료.;}
 한 가지 주목할 만한 점은 JavaScript 코드에서 var를 사용하여 선언되지 않은 모든 변수는 전역 변수가 되며, 잘못 사용하면 성능 문제가 발생한다는 것입니다.
 불필요한 속성 쿼리 방지
 객체는 프로토타입 체인에서 해당 이름을 가진 속성을 검색해야 하기 때문에 변수와 배열을 사용하는 것이 객체의 속성에 액세스하는 것보다 더 효율적입니다. 
 //배열 var 값 사용 ​​= [5, 10];var sum = 값[0] + 값[1];alert(sum);//객체 var 값 사용 ​​= { 첫 번째: 5, 두 번째: 10 };var sum = 값.첫 번째 + 값.두 번째;alert(sum);
 위 코드에서는 객체 속성을 사용하여 계산합니다. 속성을 한두 번 검색하면 성능 문제가 발생하지 않지만 루프와 같이 여러 번 검색이 필요한 경우 성능에 영향을 미칩니다.
 다음과 같이 단일 값을 얻기 위해 여러 속성을 조회할 때: 
 var query = window.location.href.substring(window.location.href.indexOf(?));
 불필요한 속성 조회를 줄이고 window.location.href를 변수로 캐시해야 합니다. 
 var url = window.location.href;var query = url.substring(url.indexOf(?));
 기능 조절
 검색 상자가 있다고 가정하고 onkeyup 이벤트를 검색 상자에 바인딩하여 마우스를 올릴 때마다 요청이 전송되도록 합니다. 조절 기능을 사용하면 지정된 입력 시간 내에 사용자가 여러 번 연속적으로 작업하면 하나의 요청만 트리거되도록 할 수 있습니다. 
 <입력 유형=텍스트 ID=입력 값= /> 
 // 이벤트 바인딩 document.getElementById('input').addEventListener('keyup', function() { throttle(search);}, false);// 논리 함수 function search() { console.log('search. . .');}// 스로틀 함수 function throttle(method, context) {clearTimeout(method.tId); method.tId = setTimeout(function() { method.call(context); }, 300);}
 조절 기능의 적용 시나리오는 검색 상자에만 국한되지 않습니다. 예를 들어 페이지 스크롤, 늘어난 창 크기 조정 등은 조절 기능을 사용하여 성능을 향상시켜야 합니다.
 진술 수를 최소화하십시오.
 문의 개수 역시 연산 실행 속도에 영향을 미치는 요소입니다.
 여러 변수 선언을 하나의 변수 선언으로 결합 
 // 여러 var 선언 사용 var count = 5; var color = blue; var value ​​= [1,2,3]; // 개선 후 var count = 5, color = blue , 값 = [1,2,3], 이제 = new Date();
 향상된 버전은 쉼표로 구분된 하나의 var 선언만 사용하는 것입니다. 변수가 많은 경우 하나의 var 선언만 사용하는 것이 개별 var를 별도로 선언하는 것보다 훨씬 빠릅니다.
 배열 및 객체 리터럴 사용
 명령문별 할당 대신 배열 및 객체 리터럴을 사용하십시오. 
 var 값 ​​= new Array();values[0] = 123;values[1] = 456;values[2] = 789;//개선 후 var 값 ​​= [123, 456, 789]; 
 var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ Alert(this.name);};//개선 후 var person = { name : Jack, age : 28, sayName : function(){ 경고(this.name) }};
 문자열 최적화
 문자열 연결
 초기 브라우저는 문자열을 더하기 기호로 연결하는 방식을 최적화하지 않았습니다. 문자열은 불변이므로 중간 문자열을 사용하여 결과를 저장하므로 문자열을 자주 생성하고 삭제하는 것이 비효율적인 이유입니다. 
 var text = Hello;text+= ;text+= 세계!;
 문자열을 배열에 추가한 다음 배열의 조인 메서드를 호출하여 문자열로 변환하므로 더하기 연산자를 사용하지 않아도 됩니다. 
 var arr = [], i = 0;arr[i++] = Hello;arr[i++] = ;arr[i++] = World!;var text = arr.join('');
 최신 브라우저에는 문자열 더하기 기호 연결이 최적화되어 있으므로 대부분의 경우 더하기 연산자가 여전히 첫 번째 선택입니다.
 리플로우 및 다시 그리기 감소
 브라우저 렌더링 프로세스에는 리플로우 및 다시 그리기가 포함되며 이는 성능을 소모하는 프로세스입니다. 스크립트 작업 중에 리플로우 및 다시 그리기를 트리거하는 작업을 줄이는 데 주의해야 합니다. 
  1.  리플로우: 요소의 기하학적 특성이 변경되었으며 렌더링 트리를 다시 작성해야 합니다. 렌더링 트리를 변경하는 프로세스를 리플로우라고 합니다.
  2.  다시 그리기: 요소의 기하학적 크기는 변경되지 않았지만 요소의 CSS 스타일(배경색 또는 색상)이 변경되었습니다.
 리플로우나 다시 그리기를 트리거하는 작업은 무엇입니까? 
  1.  창 크기 조정
  2.  글꼴 수정
  3.  스타일 시트 추가 또는 제거
  4.  사용자가 <input/> 상자에 텍스트를 입력하는 등 콘텐츠 변경
  5.  클래스 속성 조작
  6.  DOM 조작 스크립트(DOM 요소 추가, 삭제 또는 수정)
  7.  offsetWidth 및 offsetHeight 속성 계산
  8.  스타일 속성의 값을 설정합니다.
 리플로우와 다시 그리기를 줄이고 웹 페이지 성능을 향상시키는 방법은 무엇입니까?
 1. DOM 요소의 스크립트 조작 
  1.  DOM 요소를 display:none으로 설정합니다. 설정 프로세스 중에 리플로우가 트리거되지만 나중에 마음대로 변경하고 수정 후에 표시할 수 있습니다.
  2.  요소를 작동하기 전에 메모리에 복제하고, 수정 후 다시 요소를 교체합니다.
 2. 요소 스타일 수정 
  1.  하나씩 수정하는 대신 일괄적으로 수정해 보세요.
  2.  id와 class를 미리 설정한 후, 해당 요소의 className을 설정합니다.
 3. 요소에 애니메이션을 추가할 때 요소의 CSS 스타일을 위치:고정 또는 위치:절대로 설정합니다. 요소는 문서 흐름을 떠난 후에 리플로우를 발생시키지 않습니다.
 4. 창 크기 조정, 입력 상자에 입력, 페이지 스크롤 등을 할 때 (위에서 이미 언급한) 조절 기능을 사용하십시오.
 HTTP
 브라우저 캐시
 브라우저 캐시를 적절하게 설정하는 것은 웹페이지 최적화의 중요한 수단 중 하나입니다.
 만료 및 캐시 제어
 Expires는 HTTP1.0에서 제공되고 Cache-Control은 HTTP1.1에서 제공됩니다. 두 가지가 동시에 설정되면 Cache-Control이 Expires를 재정의합니다. 
  1.  Expires는 초 수가 아닌 실제 만료 날짜를 지정합니다. 그러나 Expires에는 서버 시간이 동기화되지 않거나 정확하지 않은 등 몇 가지 문제가 있습니다. 따라서 절대 시간보다는 남은 초를 사용하여 만료 시간을 표현하는 것이 좋습니다.
  2.  Cache-Control은 max-age 값을 초 단위로 설정하고 캐시 만료 시간을 지정할 수 있습니다. 예: Cache-Control: max-age=3600.
 ETag 및 마지막 수정
 ETag와 Last-Modified는 모두 응답 헤더에서 서버에 의해 반환됩니다. ETag는 Last-Modified보다 우선순위가 높습니다. 즉, 서버가 ETag 값의 우선순위를 정한다는 의미입니다. 
  1.  ETag는 문서에 부착된 태그로, 문서의 일련 번호나 버전 번호, 문서 내용 확인 등이 될 수 있습니다. 문서가 변경되면 ETag 값도 변경됩니다. ETag와 관련된 것은 If-None-Match입니다. 브라우저가 요청을 시작할 때 If-None-Match 필드에 ETag 값을 전달하여 서버로 보냅니다.
  2.  Last-Modified는 서버 측에서 문서가 마지막으로 수정된 시간입니다. Last-Modified와 관련된 것은 If-Modified-Since입니다. 브라우저가 요청을 시작하면 If-Modified-Since 필드에 Last-Modified 값이 전달되어 서버로 전송됩니다.
 강력한 캐싱 및 협상된 캐싱
 캐시의 종류에는 강력한 캐시와 협상된 캐시가 있습니다. 둘의 차이점은 강력한 캐시는 서버에 요청을 보내지 않지만 협상된 캐시는 일치가 성공하면 304 Not Modified를 반환하고 일치에 실패하면 반환한다는 것입니다. 200; 브라우저는 먼저 강력한 캐시를 확인하고 강력한 캐시가 누락된 경우 협상 캐시 확인을 수행합니다.
 브라우저 캐시를 구성하는 방법 
  1.  웹 서버의 반환 응답에 Expires 및 Cache-Control을 추가합니다.
  2.  nginx 또는 apache 구성 파일에서 Expires 및 Cache-Control을 구성합니다.
 HTTP 요청을 줄이는 이유
 http 요청을 줄이기 위한 조치는 CSS 스프라이트 이미지를 사용하여 여러 이미지 요청 대체, 빈 src 이미지 방지, 인라인 이미지 사용, 외부 링크 CSS 및 js 사용, 캐싱 등과 같은 성능 최적화에서 큰 부분을 차지합니다.
 URL 입력부터 페이지 로딩 완료까지의 과정은 다음과 같습니다. 
  1.  DNS 확인
  2.  TCP 연결
  3.  HTTP 요청 및 응답
  4.  브라우저 렌더링 페이지
  5.  가까운 연결
 완전한 http 요청은 이러한 과정을 거쳐야 하는데, 이는 시간과 리소스가 많이 소모되므로 요청 수를 줄이는 것이 필요하게 됩니다.
 참고자료:
 "고성능 웹사이트 구축과 고성능 웹사이트 구축에 대한 고급 가이드"
 "웹 사이트 속도 향상을 위한 모범 사례"
 위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.
관련 기사