방문수가 많은 웹사이트의 경우 프론트엔드 최적화는 필수입니다.1KB 크기만 최적화해도 효과는 엄청납니다.ISUX에서 휴대폰 플랫폼의 HTML5 프론트엔드 최적화를 살펴보겠습니다. 어쩌면 당신에게 도움이 되고 영감을 줄 수도 있습니다.
개요
- PC 최적화 방법은 모바일에서도 적용 가능
- 모바일 측면에서는 첫 화면에 3초 렌더링 완료 표시를 제안합니다.
- 두 번째 포인트를 기준으로 3초 안에 첫 번째 화면이 로딩되거나 Loading을 사용하여 로딩됩니다.
- China Unicom의 3G 네트워크 평균 338KB/s(2.71Mb/s) 기준으로 첫 번째 화면 리소스는 1014KB를 초과해서는 안 됩니다.
- 모바일 측면에서는 휴대폰 구성상의 이유로 로딩 외에도 렌더링 속도도 최적화의 초점입니다.
- 다섯 번째 사항을 토대로 렌더링 손실을 줄이기 위해 코드를 합리적으로 처리해야 합니다.
- 두 번째와 다섯 번째 점을 기준으로 첫 번째 화면의 로딩 및 렌더링에 영향을 미치는 모든 코드는 처리 논리 뒤에 배치되어야 합니다.
- 로딩이 완료된 후, 사용자들은 서로 상호작용할 때 성능에도 주의를 기울여야 합니다.
최적화 가이드
[로딩 최적화]
로딩 과정은 가장 많은 시간이 소요되는 과정으로 전체 시간의 80%를 차지할 수 있어 최적화의 중심이 됩니다.
HTTP 요청을 줄입니다.
모바일 브라우저는 동시에 4개의 요청(안드로이드는 4개 지원, iOS 5 이상은 6개 지원 가능)에 응답하므로 해당 페이지에 대한 요청 수를 최대한 줄여야 합니다. 첫 번째 로드에 대한 동시 요청은 4개를 초과할 수 없습니다. a)
CSS, JavaScript 병합
b) 작은 이미지 결합 및 스프라이트 이미지 사용
Cache
Cache를 사용하면 서버에 대한 요청 수를 줄이고 로딩 시간을 절약할 수 있으므로 모든 정적 리소스는 서버 측에서 캐시해야 하며, 긴 Cache를 사용하도록 노력해야 합니다(타임 스탬프를 사용하여 긴 Cache 리소스를 업데이트할 수 있음). ) 캐시 할 수 있는
모든 리소스를 캐시합니다. b ) 긴 캐시를 사용합니다(타임스탬프를 사용하여 캐시 업데이트). c) CSS 및 JavaScript에 대한 라인 외부 참조를 사용합니다.
리소스 크기를 줄이기 위해 HTML, CSS, JavaScript를
압축하면 웹 페이지 표시 속도가 빨라질 수 있으므로 HTML, CSS, JavaScript 등에서 코드 압축을 수행하고 서버 측에서 GZip을 설정해야합니다.
a) 압축 (예: 여분의 공백, 줄바꿈 및 들여쓰기)
b) GZip 활성화
HTML 헤더에 작성된 Non-Blocking
JavaScript(비동기식)와 HTML 태그에 작성된 Style은 페이지 렌더링을 차단하므로 HTML에 Style 및 JavaScript를 작성하지 않도록 CSS를 페이지 헤드에 배치하고 Link를 사용하여 도입합니다. 태그를 페이지 끝에 넣으세요.
또는 비동기 로딩을 사용합니다.
첫 번째 화면을 사용하여 로드합니다
. 첫 번째 화면의 빠른 표시는 사용자의 페이지 속도에 대한 인식을 크게 향상시킬 수 있으므로 첫 번째 화면의 빠른 표시를 최적화하도록 최선을 다해야 합니다.
요청 시 로딩.
첫 번째 화면에 영향을 주지 않는 리소스와 현재 화면에서 사용자가 필요할 때까지 사용되지 않는 리소스를 로딩하면 중요한 리소스의 표시 속도가 크게 향상되고 전체 트래픽을 줄일 수 있습니다. PS: 요청 시 로딩은 많은 수의 다시 그리기가 발생하고 렌더링에 영향을 미침
성능
a) LazyLoad
b) 스크롤 로딩
c) 미디어 쿼리를 통한 로딩
사전 로드
리소스가 많은 대형 페이지(예: 게임)에서는 Loading을 추가하는 방법을 사용할 수 있으며 리소스가 로드된 후 페이지를 표시할 수 있습니다. 그러나 로딩 시간이 너무 길면 사용자 손실이 발생할 수 있으며,
사용자 행동 분석을 위해 다음 페이지의 리소스를 현재 페이지에 로딩하여 속도를 향상시킬 수 있습니다
.
b) 보이지 않는 로딩(예: 조기 로딩) 다음 페이지)
압축된 사진
사진은 트래픽을 가장 많이 차지하는 리소스이므로 사용을 피하도록 하고, 사용시에는 가장 적절한 형식(요구사항 구현을 전제로 크기별로 판단), 적절한 크기를 선택한 후 Zhitu를 사용하십시오. 필요에 따라 PS를 표시하는 Srcset
: 이미지 크기를 과도하게 압축하면 이미지 표시 효과에 영향을 미칩니다.
a) Zhitu( http://zhitu.tencent.com/ )를 사용합니다
. b) 이미지를 교체하려면 다른 방법을 사용합니다. (1. CSS3 사용 2. SVG 사용 3. IconFont 사용)
c) Srcset 사용
d) 적절한 이미지 선택 (1. JPG보다 webP가 좋음 2. GIF보다 PNG8이 좋음)
e) 적절한 크기 선택 (1. 먼저 로드는 1014KB 이하 2. 640 이하 (휴대폰 일반 화면 너비 기준)
쿠키 줄이기
쿠키는 로딩 속도에 영향을 미치므로 정적 리소스 도메인 이름은 쿠키를 사용하지 않습니다.
리디렉션 방지
리디렉션은 로딩 속도에 영향을 미치므로 리디렉션을 방지하려면 서버에서 올바르게 설정하세요.
타사 리소스의 비동기 로드:
제어할 수 없는 타사 리소스는 페이지 로드 및 표시에 영향을 미치므로 타사 리소스를 비동기적으로 로드해야 합니다.
[스크립트 실행 최적화]
스크립트를 잘못 처리하면 페이지 로딩 및 렌더링이 차단되므로 사용 시에는 헤드에 CSS를 작성하고 마지막에 JavaScript를 작성하거나 비동기적으로 작성하는 것에 주의해야 합니다.
사진 및 iFrame의 Src를 비우지 마세요.
Src를 비우면 현재 페이지를 다시 로드하여 속도와 효율성에 영향을 미칩니다.
이미지 크기 조정은 피하세요.
이미지 크기 조정이란 페이지, CSS, JavaScript 등에서 이미지 크기를 여러 번 조정하는 것을 의미합니다. 이미지 크기를 여러 번 조정하면 이미지가 여러 번 다시 그려져 성능에 영향을 미칩니다.
이미지에 DataURL을 사용하지 마십시오.
이미지 압축 알고리즘을 사용하지 않는 DataURL 이미지는 파일을 더 크게 만들고 렌더링하기 전에 디코딩해야 하므로 로딩 속도가 느리고 시간이 많이 걸립니다.
[CSS 최적화]
HTML 태그에 스타일 속성을 쓰지 마세요.
CSS 표현식을 피하십시오.
CSS 표현식의 실행은 CSS 트리 렌더링에서 벗어나야 하므로 CSS 표현식을 피하십시오.
빈 CSS 규칙 제거 빈
CSS 규칙은 CSS 파일의 크기를 늘리고 CSS 트리의 실행에 영향을 미치므로 빈 CSS 규칙을 제거해야 합니다.
Display 속성의 올바른 사용.
Display 속성은 페이지 렌더링에 영향을 미치므로 합리적으로 사용하시기 바랍니다.
a) width, height, margin, padding, float 는 display:inline 이후에 사용하면 안 됩니다.
b) float 는 이후에 사용하면 안 됩니다. display:inline-block.c
) display:block 뒤에는 수직 정렬을 사용하면 안 됩니다.
d) display:table-* 뒤에는 Margin이나 float를 사용하면 안 됩니다.
Float를 남용하지 마세요.Float
는 렌더링할 때 많은 계산이 필요하므로 가능한 한 적게 사용하십시오.
웹 글꼴을 남용하지 마십시오.
웹 글꼴은 현재 페이지에서 다운로드하고 구문 분석하고 다시 그려야 하며 가능한 한 적게 사용하십시오.
글꼴 크기를 너무 많이 선언하지 마십시오.
글꼴 크기가 너무 많으면 CSS 트리의 효율성이 저하됩니다.
값이 0이면 단위가 필요하지 않습니다.
브라우저 호환성 및 성능을 위해 값이 0이면 단위가 필요하지 않습니다.
다양한 브라우저 접두사 표준화
a) 접두사 끝에 접두사가 없어야 합니다.
b) CSS 애니메이션은 두 가지 유형만 사용합니다(-webkit- 접두사 없음)
c) 다른 접두사는 -webkit- -moz- -ms- 접두사 없음과 네 가지 유형입니다.( -o-Opera 브라우저가 깜박이는 커널로 전환되므로 제거됩니다.)
선택기를 정규식처럼 보이게 만들지 마십시오.
고급 선택기는 실행하는 데 시간이 오래 걸리고 읽기 어렵습니다. 사용하지 마십시오.
[JavaScript 실행 최적화]
다시 그리기 및 리플로우 줄이기
a) 불필요한 Dom 작업 피하기
b) 스타일 대신 클래스 변경 시도, className 대신 classList 사용
c) document.write 사용 피하기
d) drawImage 줄이기
캐시 Dom 선택 및 계산
각 Dom 선택은 계산되고 캐시되어야 합니다.
Cache list.length는
매번 계산해야 하며, 이 값을 저장하기 위해 변수를 사용합니다.
이벤트 일괄 바인딩을 방지하려면 이벤트 프록시를 사용해 보세요.
ID 선택기를 사용해 보세요.
ID 선택기가 가장 빠릅니다.
TOUCH 이벤트 최적화
클릭 대신 터치스타트와 터치엔드를 사용하세요. 더 빠른 영향을 미치기 때문입니다. 하지만 터치 반응이 너무 빨라 오작동이 발생할 수 있으니 주의하세요.
[렌더링 최적화]
HTML 사용 뷰포트
뷰포트는 페이지 렌더링 속도를 높일 수 있습니다. 다음 코드를 사용하십시오.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>Dom 노드를 줄입니다.
Dom 노드가 너무 많으면 페이지 렌더링에 영향을 미칩니다. Dom 노드를 최대한 줄여야 합니다.
애니메이션 최적화
a) CSS3 애니메이션을 최대한 사용
b) setTimeout 대신 requestAnimationFrame 애니메이션을 적절하게 사용
c) Canvas 애니메이션의 적절한 사용 5개 요소 이내에서는 CSS 애니메이션을 사용하고, 5개 이상 요소에는 Canvas 애니메이션을 사용 (iOS8에서는 webGL을 사용할 수 있음) )
빈도가 높은 이벤트 최적화
Touchmove 및 Scroll 이벤트로 인해 다중 렌더링이 발생할 수 있음
a) 올바른 시간에 렌더링이 수행될 수 있도록 requestAnimationFrame을 사용하여 프레임 변경 사항을 모니터링합니다.
b) 변경 사항에 응답하는 시간 간격을 늘리고 다시 그리기 횟수를 줄입니다.
GPU는
GPU 렌더링을 트리거하기 위해 CSS(CSS3 전환, CSS3 3D 변환, 불투명도, 캔버스, WebGL, 비디오)의 다음 속성을 가속화합니다. 현명하게 사용하십시오.
추신: 과도하게 사용하면 휴대폰의 과도한 전력 소비가 발생합니다.
저자: Mi Suisui 원문: Tencent ISUX ( 404 )