詳解iOS webview加載時序和緩存問題總結

更新時間：2017年09月07日 16:44:10 作者：lolDragon

本篇文章主要介紹了iOS webview加載時序和緩存問題總結，這兩天學習了Vue.js 感覺組件這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。

iOS webView的加載時序

UIWebView加載順序：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

  NSLog(@"開始請求webview:%@",request.URL.relativeString);
  return YES;

}
 - (void)webViewDidStartLoad:(UIWebView *)webView {
    NSLog(@"開始加載webview");  
}
- (void)webViewDidFinishLoad:(UIWebView *)webView { 
   NSLog(@"結束加載webview");  
}  
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nonnull NSError *)error {
 　　 NSLog(@"webView加載失敗");
 }

加載的結果：

2017-04-27 08:53:00.535 H5頁面調試[1273:150877] 開始請求webview:http://xxxx/index1.html
2017-04-27 08:53:00.537 H5頁面調試[1273:150877] 開始加載webview

-----------------顯示開始加載html CSS js 和圖片資源等（JS引擎單線程順序執(zhí)行）---------------

2017-04-27 08:53:01.069 H5頁面調試[1273:150877] 結束加載webview

WKWebView加載時序:

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
  NSLog(@"webview開始請求");
  decisionHandler(WKNavigationActionPolicyAllow);
}
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
  NSLog(@"webView開始加載");
}
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {
  NSLog(@"webview開始收到響應");
  decisionHandler(WKNavigationResponsePolicyAllow);
}

-----------------顯示開始加載html CSS js 和圖片資源等（JS引擎單線程順序執(zhí)行）---------------

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
  NSLog(@"1");
}
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
  NSLog(@"webview結束加載內(nèi)容");
}
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error{
  NSLog(@"webview加載失敗");
}
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{
  NSLog(@"開始重定向的函數(shù)");
}
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition, NSURLCredential *))completionHandler
{
  NSLog(@"2");
  completionHandler(NSURLSessionAuthChallengePerformDefaultHandling, nil);
}

iOS webView加載html5緩存

1.加載html5的過程

每次加載一個HTML5頁面，都會有較多的請求。除了HTML主URL自身的請求外，HTML外部引用的JS、CSS、字體文件、圖片都是一個獨立的HTTP請求，每一個請求都串行的（可能有連接復用）。

2.設置清除html5頁面緩存

html5端設置meta標簽：

復制代碼代碼如下:

<meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Expires" content="0" />

ios:設置加載的網(wǎng)絡請求不采用本地緩存和遠程緩存

PS:設置上面的只是緊緊可以保證html文件每次從服務器中獲取，不從緩存文件中拿，而對于外聯(lián)CSS JS圖片等文件仍舊是從緩存中獲取的；

3.設置css JS文件不從緩存中讀取

通過添加版本號的和隨機數(shù)的方法，保證每次加載JS CSS連接都是最新的，通常的做法是添加一個版本號，在每次更新了JS CSS時給版本號+1；保證沒有更新時采用緩存文件

有更新可以從服務中獲??；

解決方法

1、隨機數(shù)法

方法一：

document.write( " <script src='test.js?rnd= " + Math.random() + " '></s " + " cript> " )

方法二：

var js = document.createElement( " script " )

js.src = " test.js " + Math.random()

document.body.appendChild(js)

這樣采用隨機數(shù)的話， js文件將永遠得不到緩存，每次都必須重新從服務器加載，即使沒有任何更改。

大家如果經(jīng)常上國外網(wǎng)站的話，可以看到他們通常采用這樣的方式來解決：

<script src="test.js?ver=113"></script>

其中 ver=113 的 113就是版本號

這樣真正做到了應該緩存的時候緩存靜態(tài)文件，當版本有更新的時候從獲取最新的版本，并更新緩存。

對于圖像 <img src="test.jps?ver=版本號"> 來有效利用和更新緩存.

4.iOS清除緩存文件

- (void)removeWebCache{
  if ([[UIDevice currentDevice].systemVersion floatValue] >= 9.0) {
    NSSet *websiteDataTypes= [NSSet setWithArray:@[
                            WKWebsiteDataTypeDiskCache,
                            //WKWebsiteDataTypeOfflineWebApplication
                            WKWebsiteDataTypeMemoryCache,
                            //WKWebsiteDataTypeLocal
                            WKWebsiteDataTypeCookies,
                            //WKWebsiteDataTypeSessionStorage,
                            //WKWebsiteDataTypeIndexedDBDatabases,
                            //WKWebsiteDataTypeWebSQLDatabases
                            ]];
    
    // All kinds of data
    //NSSet *websiteDataTypes = [WKWebsiteDataStore allWebsiteDataTypes];
    NSDate *dateFrom = [NSDate dateWithTimeIntervalSince1970:0];
    [[WKWebsiteDataStore defaultDataStore] removeDataOfTypes:websiteDataTypes modifiedSince:dateFrom completionHandler:^{
      
    }];
    [[NSURLCache sharedURLCache] removeAllCachedResponses];
    
  } else {
    //先刪除cookie
    NSHTTPCookie *cookie;
    NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
    for (cookie in [storage cookies])
    {
      [storage deleteCookie:cookie];
    }
    
    NSString *libraryDir = [NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES) objectAtIndex:0];
    NSString *bundleId = [[[NSBundle mainBundle] infoDictionary]
                objectForKey:@"CFBundleIdentifier"];
    NSString *webkitFolderInLib = [NSString stringWithFormat:@"%@/WebKit",libraryDir];
    NSString *webKitFolderInCaches = [NSString
                     stringWithFormat:@"%@/Caches/%@/WebKit",libraryDir,bundleId];
    NSString *webKitFolderInCachesfs = [NSString
                      stringWithFormat:@"%@/Caches/%@/fsCachedData",libraryDir,bundleId];
    NSError *error;
    /* iOS8.0 WebView Cache的存放路徑 */
    [[NSFileManager defaultManager] removeItemAtPath:webKitFolderInCaches error:&error];
    [[NSFileManager defaultManager] removeItemAtPath:webkitFolderInLib error:nil];
    /* iOS7.0 WebView Cache的存放路徑 */
    [[NSFileManager defaultManager] removeItemAtPath:webKitFolderInCachesfs error:&error];
    NSString *cookiesFolderPath = [libraryDir stringByAppendingString:@"/Cookies"];
    [[NSFileManager defaultManager] removeItemAtPath:cookiesFolderPath error:&error];
    [[NSURLCache sharedURLCache] removeAllCachedResponses];
  }
}

關于保存在沙盒中的緩存文件如下圖：

5.針對UIWebView出現(xiàn)的內(nèi)存泄漏方法（網(wǎng)上）

  - (void)webViewDidFinishLoad:(UIWebView *)webView
  {
    //防止內(nèi)存泄漏
    [[NSUserDefaults standardUserDefaults] setInteger:0 forKey:@"WebKitCacheModelPreferenceKey"];
    //本地webkit硬盤圖片的緩存；
    [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"WebKitDiskImageCacheEnabled"];//自己添加的，原文沒有提到。
    //靜止webkit離線緩存
    [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"WebKitOfflineWebApplicationCacheEnabled"];//自己添加的，，原文沒有提到。
    [[NSUserDefaults standardUserDefaults] synchronize];
  }

  - (void)dealloc
  {
    [webView loadHTMLString:@"" baseURL:nil];
    [webView stopLoading];
    [webView removeFromSuperview];
    webView = nil;
    [[NSURLCache sharedURLCache] removeAllCachedResponses]; 
    [[NSURLCache sharedURLCache] setDiskCapacity:0]; 
    [[NSURLCache sharedURLCache] setMemoryCapacity:0]; 
    NSLog(@"釋放了webview");
  }


  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ 
     int cacheSizeMemory = 4*1024*1024; // 4MB int      

     cacheSizeDisk = 32*1024*1024; // 32MB 
     NSURLCache *sharedCache = [[NSURLCache alloc] initWithMemoryCapacity:cacheSizeMemory diskCapacity:cacheSizeDisk diskPath:@"nsurlcache"];
     [NSURLCache setSharedURLCache:sharedCache]; 
  ｝ 
  - (void)applicationDidReceiveMemoryWarning:(UIApplication *)application { 
     [[NSURLCache sharedURLCache] removeAllCachedResponses];
  }

PS：經(jīng)測試好像沒什么卵用，先放在這里反正寫了也沒什么壞處

確定

1.如果沒有CDN緩存影響；每次殺死APP后重新進入，第一次加載webview，都會加載全部的數(shù)據(jù)資源（外聯(lián)js,外聯(lián)css，圖片等）退出去后，如果在沒有更新js,css內(nèi)容時，默認只會加載html內(nèi)容，PS:html中的內(nèi)容在每次加載webView中都會從服務器中更新一下；

2.如果js css后面都添加了版本號，那么在每次更新版本號時，或者說資源鏈接變化時，webView一定會重新加載新的內(nèi)容；如下圖

<script type="text/javascript" src="index1.js?v=1.0.0"></script>

疑問？

1.經(jīng)測試發(fā)現(xiàn)，JS CSS沒有加版本號，更新JS CSS的內(nèi)容有時候也會及時從服務器中更新獲取，大多數(shù)時候又不會更新；不知道是不是跟web服務器的緩存策略有關，還是文件超期了？還是CDN緩存有關？

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

iOS13 適配和Xcode11.0踩坑小結
這篇文章主要介紹了iOS13 適配和Xcode11.0踩坑小結,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
Flutter?GetPageRoute實現(xiàn)嵌套導航學習
這篇文章主要為大家介紹了Flutter?GetPageRoute實現(xiàn)嵌套導航的示例學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
IOS上iframe的滾動條失效的解決辦法
這篇文章主要為大家詳細介紹了IOS上iframe的滾動條失效的解決辦法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
iOS新功能引導提示界面實例詳解
在開發(fā)中，現(xiàn)在很多app更新了新功能時都會給出用戶一個提示，以方便用戶更好的體驗，那么這個功能如何實現(xiàn)的呢？下面通過本文給大家分享iOS新功能引導提示界面實例詳解，需要的的朋友參考下吧
2017-04-04
Objective-C的MKNetworkKit開發(fā)框架解析
這篇文章主要介紹了Objective-C的MKNetworkKit開發(fā)框架解析,MKNetworkKit是一個用于iOS開發(fā)的輕量級框架,需要的朋友可以參考下
2015-11-11
IOS程序開發(fā)之禁止輸入表情符號實例代碼
如何禁止輸入表情符號呢？下面腳本之家小編給大家分享IOS程序開發(fā)之禁止輸入表情符號實例代碼，感興趣的朋友參考下吧
2016-04-04
關于iOS中的各種顏色設置總結大全（推薦）
這篇文章主要給大家介紹了關于iOS中顏色設置的相關資料，其中包括導航欄、狀態(tài)欄、Tabbar、Button、TextField、AttributedString和通用部分的顏色設置方法示例，對大家具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。
2017-09-09
iOS APP 多服務器環(huán)境分離的方法
這篇文章主要介紹了iOS APP 多服務器環(huán)境分離的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
iOS框架AVFoundation實現(xiàn)相機拍照、錄制視頻
這篇文章主要為大家詳細介紹了iOS框架AVFoundation實現(xiàn)相機拍照、錄制視頻功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
iOS中sqlite的詳細用法
在iOS中，也同樣支持sqlite。目前有很多第三方庫，封裝了sqlite操作，比如swift語言寫的SQLite.swift，對sqlite感興趣的小伙伴們可以參考一下
2016-05-05