HTML5에서 웹사이트 프런트엔드 성능을 향상시키는 방법에 대한 샘플 코드 분석

1. 웹 저장소를 사용하여 쿠키

대체 쿠키의 가장 큰 문제는 모든 요청을 따른다는 것입니다. HTML5에서는 sessionStorage와 localStorage를 사용하여 사용자 데이터를 클라이언트에 직접 저장하므로 HTTP 요청의 데이터 양을 줄일 수 있습니다. 게다가 웹 스토리지는 사용자가 직접 작성해야 하는 쿠키와 달리 데이터를 조작할 수 있는 API도 제공합니다.

아아아

2. JavaScript 애니메이션 대신 CSS 애니메이션을 사용하세요

JS 애니메이션 대신 CSS 애니메이션을 사용하세요. 일부 시스템은 CSS 애니메이션에서 GPU 가속을 수행하고 JS 파일 요청도 줄일 수 있기 때문입니다.

 // if localStorage is present, use that
 if (('localStorage' in window) && window.localStorage !== null) {
 
   // easy object property API
   localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
 
 } else {
 
   // without sessionStorage we'll have to use a far-future cookie
   //   with document.cookie's awkward API :(
   var date = new Date();
   date.setTime(date.getTime()+(365*24*60*60*1000));
   var expires = date.toGMTString();
   var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                   ' expires='+expires+'; path=/';
   document.cookie = cookiestr;
 }

3. 클라이언트 데이터베이스 사용

Web SQLDatabase 또는 IndexedDB와 같은 클라이언트 데이터베이스를 사용하면 HTTP 요청 수를 줄일 수 있습니다. 지역 목록, 친구 목록 등의 데이터를 클라이언트에 직접 저장할 수 있습니다. 때로는 sessionStorage 및 localStorage를 사용할 수도 있습니다. 일반적으로 이러한 유형의 비교가 더 빠르기 때문입니다.

4. JS의 새로운 기능을 직접 활용하세요

예를 들어 Array는 map, filter, forEach 등 많은 새로운 메소드를 도입했습니다. 또한 JSON도 브라우저에 직접 내장되어 있으므로 json2.js 파일을 도입할 필요가 없습니다.

rree

5. HTML 태그 캐시

캐싱을 통해 클라이언트에 HTML 파일을 캐시합니다. 그러나 이러한 캐시된 HTML 파일에는 구조만 있고 콘텐츠가 없습니다. 콘텐츠는 JS를 통해 JSON 개체를 작동하여 페이지에 데이터를 채워야 합니다. 이러한 HTML 파일은 템플릿과 동일합니다.

6. 하드웨어 가속 사용

이제 주요 브라우저에서는 특정 지침이나 해킹을 통해 활성화할 수 있는 GPU 수준의 하드웨어 가속을 활성화했습니다. 예를 들어 CSS에서 3D 변환이나 애니메이션을 사용할 때 GPU 하드웨어 가속을 켤 수 있습니다.

rree

7. WebWorker를 사용하여 CPU 집약적인 작업 완료

시간이 많이 걸리거나 CPU 집약적인 처리가 필요한 작업의 경우 WebWorker를 사용하세요. 배경은 일반적인 브라우저 상호 작용에 영향을 미칩니다.

8. 양식의 새로운 기능 사용

HTML 양식에는 많은 새로운 속성, 요소 및 유효성 검사 기능이 추가되어 JS 및 CSS의 개입을 줄일 수 있습니다.

9. CSS3를 사용하여 CSS 스프라이트 대체

CSS3을 사용하면 일부 CSS 스프라이트의 효과를 얻을 수 있으며 아마도 2K 이미지 스프라이트를 100바이트 정도 대체할 수 있습니다. 크다.

더 일반적으로 사용되는 CSS3의 특수 효과로는 둥근 모서리, 그라디언트, 그림자, 투명도, 변형, 마스크 등이 있습니다.

10. WebSocket을 사용하여 XHR 대체

WebSocket은 Ajax 폴링을 대체하기 위해 처음 설계되었으며 Ajax보다 가볍고 사용률이 낮다는 점입니다. . 일부 보고서에 따르면 WebSocket은 Ajax보다 전송량이 약 30% 적고 약 35배 빠릅니다. Ericsson이 WebSocket의 성능을 테스트한 결과 ping 명령을 사용하는 경우 WebSocket보다 3~5배 더 많은 전력을 소비하므로 실시간 애플리케이션에 매우 적합한 것으로 나타났습니다.

위 내용은 HTML5에서 웹사이트 프런트엔드 성능을 향상시키는 방법에 대한 샘플 코드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!