모바일 HTML5 성능 최적화

모바일을 위한 HTML5 성능 최적화
[소개] 스마트폰의 대중화와 각계각층의 Internet+ 운동으로 인해 모바일 단말기의 시장점유율이 급격히 성장했습니다. 2016년 1월 발표된 2015년 전자상거래 자료에 따르면, 2015년 중국 모바일 온라인 쇼핑 거래액은 전년 동기 대비 123.2% 급증해 처음으로 전체 온라인 쇼핑 거래액의 55%를 차지해 2015년 모바일 온라인쇼핑 거래액을 넘어섰다. PC 쪽.
기술적으로 HTML5는 매우 인기가 높습니다.
1: 데이터에 따르면 2015년 현재 앱의 80%가 완전히 또는 부분적으로 HTML5를 기반으로 하고 있습니다.
2: Google Chrome은 9월 1일부터 더 이상 Flash 자동 재생을 지원하지 않습니다.
3: Amazon 웹사이트(Amazon.com 포털 포함)의 모든 광고는 더 이상 플래시를 사용하지 않습니다. 가까운 미래에 플래시 광고는 HTML5 광고로 대체될 것입니다.
모바일 단말기 + HTML5, 이 조합은 프런트 엔드 엔지니어에게 큰 도전입니다. 어떻게 개발된 페이지를 더 나은 경험으로 만들 수 있을까요? 오늘 우리가 논의할 주제는 모바일 HTML5 페이지 프런트엔드 성능 최적화입니다.
PHP 중국어 웹사이트 HTML5 교육, 모바일 설정에서 HTML5 성능을 최적화하는 방법, 먼저 다음 원칙을 명확히 해야 합니다.
1. PC 최적화 방법은 모바일 측에서도 적용 가능합니다.
2. 모바일에서는 첫 화면에 3초 렌더링 완료 표시를 제안합니다.
3. 두 번째 점을 기준으로 첫 번째 화면이 3초 안에 로드되거나 Loading을 사용해야 합니다.
4. China Unicom의 3G 네트워크 평균 338KB/s(2.71Mb/s) 기준으로 첫 번째 화면 리소스는 1014KB를 초과해서는 안 됩니다.
5. 모바일 쪽의 구성으로 인해 로딩과 더불어 렌더링 속도도 최적화에 중점을 두고 있습니다.
6. 다섯 번째 사항에 따라 렌더링 손실을 줄이기 위해 코드를 합리적으로 처리해야 합니다.
7. 두 번째와 다섯 번째 점을 바탕으로 첫 번째 화면의 로딩 및 렌더링에 영향을 미치는 모든 코드는 처리 로직 뒤에 배치되어야 합니다.
8. 로딩이 완료된 후 사용자는 대화형으로 사용할 때 성능에도 주의해야 합니다.
몇 가지 대표적인 솔루션에 대해 논의합니다.
로딩 최적화
모바일 웹페이지의 경우 로딩 프로세스가 전체 시간의 80%를 차지할 정도로 가장 시간이 많이 걸리는 프로세스이므로 이에 중점을 둡니다. 물론 모바일 사이트의 다른 프런트 엔드 요소에 대한 최적화도 무시할 수 없습니다.
1. HTTP 요청을 줄입니다
모바일 브라우저는 동시에 4개의 요청에 응답하므로(안드로이드는 4개, iOS 5는 6개 지원 가능) 요청 수를 최소화해야 합니다. 페이지 요청 수, 첫 번째 로드에 대한 동시 요청 수는 4를 초과할 수 없습니다. 다음과 같은 최적화 지점을 권장합니다:
1. CSS, Java 병합
2. 작은 이미지 병합
2. 캐시
캐싱을 사용하면 서버에 대한 요청 수를 줄이고 로딩 시간을 절약할 수 있으므로 모든 정적 리소스를 서버 측에 캐시해야 하며 긴 캐시를 많이 사용해야 합니다. 가능합니다(타임스탬프를 사용하여 긴 캐시 리소스를 업데이트할 수 있음).
1. 캐시 가능한 모든 리소스를 캐시합니다.
2. 긴 캐시를 사용합니다(캐시를 업데이트하려면 타임스탬프 사용).
3. CSS, Java에 대한 외부 참조를 사용합니다.
3.
리소스 크기를 줄이면 웹 페이지 표시 속도가 빨라질 수 있으므로 HTML, CSS, Java 등에서 코드 압축을 수행하고 서버 측에서 GZip을 설정해야 합니다.
1. 압축(예: 추가 공백, 줄 바꿈 및 들여쓰기)
2. GZip 활성화
4. 비차단
Java는 비동기식으로 작성됨 ), HTML 태그로 작성된 Style은 페이지 렌더링을 차단하므로 CSS를 페이지 헤드에 배치하고 HTML 태그에 Style을 작성하지 않도록 Link를 사용하여 도입하고 Java는 페이지 끝에 배치하거나 로드합니다. 비동기식
5. 첫 번째 화면 로딩 사용
첫 번째 화면의 빠른 표시는 사용자의 페이지 속도 인식을 크게 향상시킬 수 있으므로 첫 번째 화면의 빠른 표시를 최적화하기 위해 최선을 다해야 합니다. 화면.
6. 온디맨드 로딩
첫 화면에 영향을 주지 않는 리소스와 현재 사용하지 않는 리소스를 현재 화면에 넣어 사용자가 필요할 때만 로딩할 수 있습니다. 중요한 리소스의 표시 속도를 크게 향상시키고 전체 흐름을 줄입니다.
1. LazyLoad
2. 스크롤 로딩
3. 미디어 쿼리를 통한 로딩
또한, 온디맨드 로딩은 많은 수의 다시 그리기를 발생시키고 렌더링 성능에 영향을 미친다는 점을 다시 한 번 말씀드리고 싶습니다. .
7. 사전 로딩
리소스가 많은 페이지(예: 게임)는 로딩을 추가하는 방법을 사용할 수 있습니다. 단, 로딩 시간이 지나면 페이지가 표시됩니다. 너무 길면 사용자 손실이 발생합니다.
1. 인지 가능한 로딩(우주 게임 로딩 등)
2. 보이지 않는 로딩(다음 페이지를 미리 로딩하는 등)
3. 사용자 행동 분석을 위해 다음 페이지를 로딩할 수 있습니다. 속도를 높이기 위해 현재 페이지 페이지 리소스를 사용합니다.
8. 압축된 사진
사진은 가장 많은 트래픽을 차지하는 리소스이므로 사용을 자제하세요. (필요에 따라 가장 적합한 형식을 선택하세요.) 필요에 따라 크기로 판단)을 적절한 크기로 한 후 Smart Map을 사용하여 압축하고, 코드에서 Srcset을 사용하여 요청 시 표시합니다.
1. 스마트 이미지 사용
2. 다른 방법을 사용하여 이미지 교체(CSS3 사용, IconFont 사용)
3. Srcset 사용
4. ; PNG8이 GIF보다 낫습니다)
5. 적절한 크기를 선택합니다(첫 번째 로드는 1014KB보다 커서는 안 됩니다. 휴대폰 화면을 기준으로 너비는 일반적으로 640보다 넓지 않습니다)
모두에게 알림: 이미지 크기를 과도하게 압축하면 이미지 표시에 영향을 미칩니다. 효과.
9. 쿠키를 줄이고 타사 리소스의 리디렉션 및 비동기 로드를 방지합니다.
쿠키는 로드 속도에 영향을 미치므로 정적 리소스 도메인 이름은 쿠키를 사용하지 않습니다. 또한 리디렉션은 로딩 속도에 영향을 미치므로 리디렉션을 방지하려면 서버에서 올바르게 설정하세요. 또한 제어할 수 없는 타사 리소스는 페이지 로드 및 표시에 영향을 미치므로 타사 리소스를 비동기식으로 로드해야 합니다.
스크립트 실행 최적화
스크립트를 잘못 처리하면 페이지 로딩 및 렌더링이 차단되므로 사용 시 다음 사항에 주의해야 합니다.
1. head와 Java는 마지막에 또는 비동기적으로 작성됩니다.
2. 이미지, iFrame 등의 경우 빈 Src를 피하세요. 빈 Src는 현재 페이지를 다시 로드하여 속도와 효율성에 영향을 미칩니다.
3. 이미지 크기 조정은 페이지, CSS, Java 등에서 이미지 크기를 여러 번 조정하는 것을 의미합니다. 이미지 크기를 여러 번 조정하면 이미지가 여러 번 다시 그려져 성능에 영향을 줍니다. .
4. 이미지에 DataURL을 사용하지 마세요. 이미지 압축 알고리즘을 사용하지 않는 DataURL 이미지는 크기가 커지고 렌더링 전에 디코딩해야 하므로 로딩 속도가 느려지고 시간이 많이 걸립니다.
CSS 최적화
1. HTML 태그에 Style 속성을 쓰지 마세요.
2. CSS 표현식을 피하세요. CSS 표현식의 실행은 CSS 트리 렌더링에서 벗어나야 하므로 CSS 표현식을 피하세요.
3. 빈 CSS 규칙 제거 빈 CSS 규칙은 CSS 파일 크기를 늘리고 CSS 트리 실행에 영향을 미치므로 빈 CSS 규칙을 제거해야 합니다.
4. Display 속성을 올바르게 사용하십시오. Display 속성은 페이지 렌더링에 영향을 미치므로 웹마스터는 이를 합리적으로 사용하는 것이 좋습니다.
(1), width, height, margin, padding 및 float는 display:inline 뒤에 사용하면 안 됩니다.
(2), float는 display:inline-block
(3) 뒤에 사용하면 안 됩니다. :block
(4) 뒤에는 수직 정렬을 사용하면 안 됩니다. display:table-*
뒤에는 margin이나 float를 사용하면 안 됩니다. 5. Float를 남용하지 마세요. 렌더링하는 동안 많은 양의 계산이 필요합니다. 그러니 최대한 사용을 줄여보세요.
6. 웹 글꼴을 남용하지 마세요. 웹 글꼴은 가능한 한 적게 사용하고, 분석하고, 다시 그려야 합니다.
7. Font-size를 너무 많이 선언하지 마십시오. Font-size가 너무 많으면 CSS 트리의 효율성이 저하됩니다.
8. 값이 0이면 단위가 필요하지 않습니다. 브라우저 호환성 및 성능을 위해 값이 0이면 단위가 필요하지 않습니다.
9. 다양한 브라우저 접두어 표준화
(1) 접두어를 마지막에 붙이면 안 됩니다.
(2) 두 가지 유형의 CSS 애니메이션(-webkit- 접두사 없음)만 사용할 수 있습니다.
(3), 다른 접두사는 "-webkit- -moz- -ms-no 접두사"입니다(-o-Opera 브라우저는 대신 깜박임 커널을 사용하므로 제거됩니다).
10. 선택기를 정규식처럼 보이게 만들지 마세요.
고급 선택기는 실행하는 데 시간이 오래 걸리고 이해하기 어려우므로 사용하지 마세요.
Java 실행 최적화
1. 다시 그리기 및 리플로우 줄이기
(1) 불필요한 Dom 작업 방지
(2) Style 대신 Class 변경 시도, className 대신 classList 사용
3) document.write 사용을 피하세요
(4) drawImage 줄이기
2. 캐시 Dom 선택 및 계산 Dom을 선택할 때마다 계산하고 캐시해야 합니다.
3. 캐시 목록 .length, .length는 매번 계산해야 하며, 이 값을 저장하려면 변수를 사용하세요.
4. 이벤트 일괄 바인딩을 방지하려면 이벤트 프록시를 사용해 보세요.
5. ID 선택기를 사용해 보세요. ID 선택기가 가장 빠릅니다.
6. TOUCH 이벤트 최적화, 클릭 대신 터치스타트, 터치엔드를 사용합니다. 충격이 빠르기 때문입니다. 하지만 터치 반응이 너무 빨라 오작동이 발생할 수 있다는 점에 유의해야 합니다.
렌더링 최적화
HTML 문서는 문서 인코딩 정보가 포함된 데이터 스트림으로 네트워크 간에 전송됩니다. 페이지의 인코딩 정보는 일반적으로 HTTP 응답의 헤더 정보 또는 문서 내의 HTML 마크업에 지정됩니다. 클라이언트 브라우저는 페이지 인코딩을 결정한 후에만 페이지를 올바르게 렌더링할 수 있습니다. 따라서 페이지를 그리거나 Java 코드를 실행하기 전에 대부분의 브라우저(ie6, ie7 및 ie8 제외)는 찾을 데이터의 특정 바이트 수를 버퍼링합니다. 인코딩 정보, 브라우저마다 사전 버퍼링된 바이트 수가 다릅니다.
1. HTML은 뷰포트를 사용합니다
뷰포트는 페이지 렌더링 속도를 높일 수 있습니다. 다음 코드를 사용하세요.
2. Dom 노드 줄이기
Dom 노드가 너무 많으면 페이지 렌더링에 영향을 미칩니다. Dom 노드를 최대한 줄이세요.
3. 애니메이션 최적화
(1) CSS3 애니메이션을 사용해 보세요.
(2) setTimeout 대신 requestAnimationFrame 애니메이션을 합리적으로 사용하세요.
(3) 캔버스 애니메이션을 적절하게 사용하세요. 5개 요소 내에서는 CSS 애니메이션을 사용하고, 5개 이상의 요소에는 캔버스 애니메이션을 사용하세요(iOS8에서는 webGL을 사용할 수 있습니다).
4. 빈도가 높은 이벤트 최적화
Touchmove 및 Scroll 이벤트로 인해 여러 렌더링이 발생할 수 있습니다.
(1) 올바른 시간에 렌더링이 수행될 수 있도록 requestAnimationFrame을 사용하여 프레임 변경을 모니터링합니다.
(2) 변경 사항에 응답하는 시간 간격을 늘리고 다시 그리기 횟수를 줄입니다.
5. GPU 가속

CSS(CSS3 전환, CSS3 3D 변환, 불투명도, 캔버스, WebGL, 비디오)의 다음 속성은 GPU 렌더링을 트리거하므로 합리적으로 사용하십시오. (PS: 과도한 사용은 휴대폰의 과도한 전력 소모를 초래합니다.)

관련 기사:

모바일 HTML5 페이지에서 입력란의 흰색 배경과 테두리를 제거합니다(호환). Android 및 iOS)

모바일 HTML5를 어떻게 개발하나요? PC버전과 어떤 차이가 있나요?

사용자에게 모바일 HTML5 애플리케이션이 정말 필요한가요? 그렇다면 수요 시나리오는 무엇입니까?