고성능 모바일 개발을 달성하는 방법

우리 모두 알고 있듯이 모바일 단말기는 빠르게 로드되어야 할 뿐만 아니라 사용자 경험이 없는 콘텐츠도 있어야 하며 빠른 응답 상호 작용, 매끄럽고 부드러운 애니메이션 등 원활하게 실행되어야 합니다.

어떻게 작동하나요? 실제 개발은 어떻게 해야 위에서 언급한 효과를 얻을 수 있나요?

1. 렌더링 성능 분석 기준 확인

2. 렌더링 성능 기준 측정을 위한 자를 준비합니다

3. 가장 시간이 많이 걸리는 부분을 최적화합니다

대략 다음과 같은 최적화 목표를 얻을 수 있습니다

첫 번째는 첫 번째 화면 렌더링 시간, 코드 압축, webp 이미지 사용, 요청 시 로딩, "다이렉트 아웃", CDN...

등 이미 많은 정보가 있습니다. 두 번째는 16ms 최적화입니다. 이 기사에서는 16ms 최적화에 중점을 둡니다.

1. 브라우저 렌더링 원리 소개

대부분의 장치의 새로 고침 빈도는 초당 60회(1000/60 = 16.6ms)입니다. 이는 브라우저가 그림의 각 프레임을 렌더링한다는 의미입니다. 16ms 이내에 완료되어야 합니다. 이 시간이 지나면 페이지 렌더링이 중단되어 사용자 경험에 영향을 미칩니다.

위 사진의

입니다. 위 사진에서 속성을 왼쪽으로 더 변경하면 영향은 더 커지고 효율성은 낮아집니다.

브라우저 렌더링 프로세스는 다음과 같습니다.

DOM을 가져와 여러 레이어로 분할(RenderLayer)

각 레이어를 래스터화하고 독립적으로 비트맵으로 그립니다.

이 비트맵을 텍스처로 사용 GPU에 업로드

컴포지트 최종 화면 이미지(궁극적 레이어)를 생성하기 위한 여러 레이어.

위 사진에서 볼 수 있듯이 합성(렌더링 레이어 병합)만 변경하면 효율성이 크게 향상됩니다.

다음은 어떤 스타일이 렌더링 프로세스의 어떤 모듈을 변경하는지에 대한 대략적인 목록입니다.

위 그림에서 볼 수 있듯이 변환 및 불투명도는 합성(렌더링 레이어 병합)만 변경합니다. 왜일까요? GPU 가속이 켜져 있기 때문입니다.

GPU 가속을 켜세요

직역적 설명: 텍스처를 매우 저렴한 비용으로 다양한 위치에 매핑할 수 있으며, 매우 단순한 직사각형 그리드에 적용하여 매우 저렴한 비용으로 변형할 수도 있습니다.

【문자 그대로의 이해는 매우 복잡하지만 여전히 오래된 진실이므로 그림으로 명확하게 설명할 수 있다면 단어를 사용하지 마십시오. ]

팁: 먼저 타임라인의 프레임을 선택한 다음 아래 레이어 라벨 탭을 선택하면 모듈을 왼쪽과 오른쪽으로 드래그하여 3D로 표시할 수 있습니다.

페이지가 다음 레이어로 구성되어 있음을 볼 수 있습니다.

브라우저에서 보게 되는 것은 단지 복사본일 뿐이지만, 즉 단 하나의 레이어만 남게 됩니다. PhotoShop 소프트웨어의 "레이어" 개념과 유사하게 사용 가능한 모든 보기 레이어가 최종적으로 병합되고 사진이 화면에 출력됩니다

그러나 실제로는 몇 가지 규칙으로 인해 페이지가 해당 레이어로 분할됩니다. 그것은 독립적입니다. 그것이 나온 후에는 다른 DOM의 레이아웃에 영향을 미치지 않습니다. 왜냐하면 변경된 후에는 단지 페이지에 "붙여넣기"되기 때문입니다.

현재 다음 요소로 인해 Chrome에서 레이어가 생성됩니다.

3D 또는 원근 변환(원근 변환) CSS 속성

3D(WebGL) 컨텍스트 또는 가속화된 비디오 디코딩 사용 ( 즉, 요소에는 자체 레이어에 있는 하위 요소가 있습니다.)

요소에는 복합 레이어를 포함하는 낮은 Z-인덱스를 가진 형제 요소가 있습니다(즉, 요소는 복합 레이어에서 렌더링 중입니다). )

웹킷 기반 브라우저에서 위와 같은 상황이 발생하면 독립 레이어가 생성됩니다.

너무 많은 렌더 레이어를 생성하지 않도록 주의하세요. 이는 새로운 메모리 할당과 더 복잡한 레이어 관리를 의미합니다. GPU 가속을 남용하지 말고 복합 레이아웃이 16ms를 초과하는지 주의하세요

브라우저 렌더링의 원리를 너무 많이 말했지만 자 없이 측정하는 것은 쓸모가 없습니다. 이제 측정할 눈금자를 선택해 보겠습니다. Google 개발 도구의 타임라인.

2. 구글 개발 도구 타임라인의 공통 기능

1. 녹화가 완료되면 왼쪽 상단의 녹화를 클릭하면 다음과 같은 내용이 생성됩니다. 60fps가 넘는 경우 한 프레임의 주파수가 상대적으로 부드럽다는 것을 알 수 있습니다.

2. 타임라인 아래에서는 각 모듈의 소요 시간을 확인할 수 있으며, 시간이 많이 걸리는 기능을 찾아 기능을 최적화할 수 있습니다.

3. 아래 단계에 따라 선택하면 독립된 레이어가 표시되고 다시 그려진 영역이 강조 표시되어 불필요한 다시 그려진 영역을 쉽게 찾아 최적화할 수 있습니다.

선택 그 후 현재 페이지에 다음 2가지 색상 테두리가 나타납니다

노란색 테두리: 애니메이션 3D 변형이 있는 요소는 새 합성 레이어에서 렌더링되었음을 나타냅니다.

파란색 그리드: 이 블록을 볼 수 있습니다. 작업은 하위 수준입니다. 레이어가 아닌 단위입니다. Chrome은 이러한 청크를 단위로 사용하여 한 번에 하나의 콘텐츠 청크를 GPU에 업로드합니다.

도구도 사용 가능하며, 브라우저 렌더링의 원리도 알려져 있습니다. 다음 단계는 실제 프로젝트를 기반으로 최적화하는 것입니다.

3. 실제 프로젝트에서 16.6ms를 최적화

위 렌더링과 결합합니다. 순서도를 사용하면 다음 단계 중 일부를 대상으로 분석하고 최적화할 수 있습니다.

OptimizeJavaScript 실행 효율성

스타일 계산의 범위와 복잡성을 줄입니다.

대규모의 복잡한 레이아웃을 피하세요

그림 및 작업의 복잡성을 단순화합니다. 작화 영역 줄이기

렌더링 레이어 병합 속성 사용 우선순위 지정 및 레이어 수 제어

사용자 입력 이벤트 처리 기능 디바운스(모바일 장치)

1. 읽기 및 쓰기 분리, 일괄 작업

JavaScript 스크립트가 실행 중일 때 수신된 요소 스타일 속성 값은 모두 이전 프레임에서 가져온 것이며 모두 이전 값입니다.

따라서 현재 프레임에서 속성을 얻기 전에 요소 노드를 변경하면 브라우저가 먼저 속성 수정을 적용한 다음 레이아웃 프로세스를 실행하고 마지막으로 JavaScript 로직을 실행하게 됩니다.

// 先写后读，触发强制布局
function logBoxHeight() {
    // 更新box样式
    box.classList.add('super-big');
 
    // 为了返回box的offersetHeight值
    // 浏览器必须先应用属性修改，接着执行布局过程
    console.log(box.offsetHeight);
}

최적화 후:

// 先读后写，避免强制布局
function logBoxHeight() {
    // 获取box.offsetHeight
    console.log(box.offsetHeight);
 
    // 更新box样式
    box.classList.add('super-big');
}

2. 클로저 캐시 계산 결과(잦은 호출과 계산이 필요한 함수)

getMaxWidth: (function () {
            var cache = {};
            function getwidth() {
                if (maxWidth in cache) {
                    return cache[maxWidth];
                }
                var target = this.node,
                 width = this.width,
                  screen = document.body.clientWidth,
                   num = target.length,
                  maxWidth = num * width + 10 * num + 20 - screen;
                cache[maxWidth] = maxWidth;
                 return maxWidth;
             }
             return getwidth;
})(),

이 방법으로 바꾸니 딱 먹힙니다~ 10ms 이상 단축됩니다

3. 사용자 입력 이벤트 핸들러를 디바운스합니다.

터치된 요소가 touchstart/touchmove/touchend와 같은 입력 이벤트 핸들러 함수에 바인딩된 경우 렌더링 레이어 병합 스레드는 이러한 이벤트 핸들러가 바인딩될 때까지 기다려야 합니다. 처리 기능의 실행이 완료될 때까지 실행할 수 없습니다. 즉, 사용자의 스크롤 페이지 작업이 차단되고 표시되는 동작은 스크롤이 지연되거나 중단되는 것입니다.

간단히 말하면, 렌더링 레이어 병합 스레드가 작업을 완료하는 데 필요한 시간을 확보하려면 사용자 입력 이벤트에 바인딩된 모든 처리 기능이 신속하게 실행될 수 있는지 확인해야 합니다.

스크롤/터치 이벤트 처리 등의 입력 이벤트 처리 기능은 requestAnimationFrame 이전에 호출되어 실행됩니다. 따라서 위의 입력 이벤트 핸들러에서 스타일 속성을 수정하면 해당 작업이 브라우저에 임시로 저장됩니다.

그런 다음 requestAnimationFrame을 호출할 때 처음에 스타일 속성을 읽으면 브라우저의 강제 동기화 레이아웃 작업(즉, javascript 단계에서 레이아웃 수행)이 트리거되어 다중 레이아웃, 비효율성이 발생합니다.

최적화는 다음과 같습니다.

window.requestAnimationFrame(function () {
    context.animateTo(nowPos);  //需要更新位置的交给RAF
});

4. 불필요한 다시 그리기 줄이기

위에서 계속해서 페인트 깜박임을 켜면 브라우저가 다시 그린 영역을 확인할 수 있습니다. 일부 불필요한 다시 그리기 영역도 다시 그려지는 것을 발견했습니다~ 이것들에 대해 GPU 최적화를 활성화합니다(위에서 언급)

타임라인 효과를 직접 보면 모두 녹색입니다~ 드디어 매달린 마음을 놓았습니다

모바일 개발에 대한 많은 팁이 있습니다. 오늘은 고성능 개발 팁을 알려드리겠습니다. 더 많은 지식을 원하시면 저희 웹사이트 PHP.cn

관련 자료를 주목해주세요:

모바일 단말기 개발: 모바일 기기의 가로, 세로 화면 다루기

모바일 단말기 개발 필수 지식(재인쇄)_html/css_WEB-ITnose

모바일 단말기 개발에 필요한 몇 가지 기술_html/css_WEB-ITnose

위 내용은 고성능 모바일 개발을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!