WebView 로딩 최적화 방법 소개

이 글은 WebView 로딩 최적화 방법을 소개합니다. 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

WebView 로딩 최적화

WebView의 사용 빈도가 높아질수록 WebView의 모든 측면에 대한 최적화가 점점 더 중요해집니다. . 알 수 있는 것은 H5 페이지를 로드할 때마다 많은 요청이 발생한다는 것입니다. HTML 기본 URL 자체의 요청 외에도 HTML에서 외부적으로 참조하는 JS, CSS, 글꼴 파일, 이미지 등은 모두 독립적인 HTTP 요청이지만, 전체 웹페이지 수가 일정 수준에 도달하면 요청이 동시적으로 이루어집니다. , 게다가 브라우저 구문 분석 및 렌더링 시간과 웹의 전체 로딩 시간이 매우 길어집니다. 동시에 요청되는 파일이 많을수록 더 많은 트래픽이 소비됩니다. 그러면 로딩 최적화가 매우 중요해집니다. 이 분야에는 다른 경험이 없습니다. 대략 세 가지 측면이 있습니다.
첫 번째는 리소스 현지화의 문제
우선 Under current의 경우 네트워크 상태에 따라 네트워크를 통해 서버에서 리소스를 얻는 속도는 로컬에서 읽는 것보다 훨씬 느립니다. 다양한 최적화 전략에 대해 이야기하는 것은 실제로 "로딩 요구"가 속도 향상의 가장 큰 걸림돌이라는 사실을 무시합니다. 따라서 우리의 첫 번째 아이디어는 js, CSS, 그림, 심지어 HTML 자체와 같은 일부 리소스를 현지화하는 것입니다. 이러한 리소스는 로컬에서 읽고 로드되며 간단히 '저장'으로 기억될 수 있습니다. ".
1. "저장" - 위의 무거운 리소스를 apk 파일로 패키징하고 해당 파일이 로드될 때마다 로컬로 가져옵니다. 또한 패키징할 수 없으며, 첫 번째 로드 중과 이후 간격으로 동적으로 다운로드하여 저장할 수 있으며, 모든 리소스 파일을 Android 자산 디렉터리에 저장할 수 있습니다.
2. "Get" - WebViewClient WebResourceResponse shouldInterceptRequest(WebView view; , WebResourceRequest 요청) 메서드는 특정 식별 방법(예: 정규 표현식)을 통해 해당 요청을 가로채서 로컬에서 해당 리소스를 읽고 이를 반환합니다.
3 "업데이트" - 캐시 설정 제어 메커니즘이 로컬 리소스를 정기적으로 업데이트하거나 API 알림 형식으로 업데이트하여 로컬 리소스를 최신 상태로 유지하고 사용할 수 있도록 합니다.
두 번째는 캐싱 문제
첫 번째 리소스 현지화 아이디어를 채택하지 않거나 완전히 채택하지 않은 경우 WebView 캐시를 켜야 합니다. (이 아이디어는 첫 번째 아이디어와 유사하지만) 한 줄에 중복이 있습니다.)

WebSettings settings = webView.getSettings(); 
settings.setAppCacheEnabled(true); 
settings.setDatabaseEnabled(true); 
settings.setDomStorageEnabled(true);//开启DOM缓存 
settings.setCacheMode(WebSettings.LOAD_DEFAULT);

네트워크가 정상일 때는 기본 캐시 전략이 채택되며 캐시가 사용 가능하고 만료되지 않은 경우 캐시가 로드됩니다. 그렇지 않으면 네트워크를 통해 리소스를 얻습니다. 페이지에 대한 네트워크 요청 수를 줄입니다.
WebView를 자주 사용하여 앱에 페이지를 표시할 때 사용자가 웹페이지를 방문하고 있다는 느낌을 받는 것을 원하지 않는다는 점을 여기서 언급할 가치가 있습니다. 왜냐하면 우리 앱에 웹페이지가 너무 많아 사용자에게 웹페이지를 방문하고 있다는 느낌을 준다면 앱의 의미를 잃게 되기 때문입니다. (왜 사용자가 브라우저를 직접 사용하지 않는 걸까요?)
그래서 지금 이 시점에서 오프라인 캐싱 문제는 주목할 만합니다. 사용자가 수행할 수 있는 작업이 매우 제한되어 있더라도 브라우저의 네트워크 오류와 동일한 페이지가 표시되는 대신 인터넷이 없을 때에도 사용자가 앱을 계속 작동할 수 있도록 허용해야 합니다.
여기서 내 생각은 캐싱을 켜는 것을 전제로 WebView가 페이지를 로드할 때 네트워크 변경을 감지한다는 것입니다. 페이지를 로드할 때 사용자의 네트워크 연결이 갑자기 끊어지면 WebView의 캐싱 전략을 변경해야 합니다.

ConnectivityManager connectivityManager = (ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE); 
NetworkInfo networkInfo = connectivityManager.getActiveNetworkInfo(); 
if(networkInfo.isAvailable()) { 
settings.setCacheMode(WebSettings.LOAD_DEFAULT);//网络正常时使用默认缓存策略 
} else { 
settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);//网络不可用时只使用缓存 
}

캐시가 있으므로 캐시 제어도 있어야 합니다. 이와 마찬가지로 정기적으로 캐시를 삭제하거나 업데이트하거나 서버 알림을 수락하는 캐시 제어 메커니즘도 구축해야 합니다.
세 번째는 js 로딩 및 실행을 지연시키는 것입니다.
WebView에서 onPageFinished() 콜백은 페이지 로딩 완료를 의미합니다. 그러나 이 메소드는 JavScript 스크립트가 실행될 때까지 트리거되지 않습니다. 로드하려는 페이지가 JQuery를 사용하는 경우 DOM 객체가 처리되고 $(document).ready(function() {}될 때까지 렌더링되지 않습니다. )이 실행되어 페이지가 표시됩니다. 이는 용납할 수 없는 일이므로 Js를 지연 로드해야 합니다. 물론 이 부분은 웹 프런트엔드의 작업입니다.

더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 Java 튜토리얼 동영상 컬럼을 주목하세요!

위 내용은 WebView 로딩 최적화 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!