小程序webview加载网页优化(微信小程序使用webview)

1.软文推荐

2.软文推荐

3.软文推荐

目录： 1、Webview加载网页速度为什么比直接用浏览器慢 2、android webview加载太慢怎么解决 3、android webview加载网页很慢，而浏览器很快 4、如何有效提升WebView的加载速度 Webview加载网页速度为什么比直接用浏览器慢

浏览器显示网页或图片是通过网络上超文本传输协议（HTTP）来实现的，浏览器其实就是个翻译网页代码的一个工具，你说你的浏览器显示图片速度慢无非就三点原因：

1.你的网速比较慢。这个问题只有你提速没有办法。

2.浏览器在运作的同时也会加载很多控件，单击浏览器工具查看“管理加载项”，把你认为没用的东西都删掉。

3.网站资源不好，我是说是没有经过优化的，比如说你要看的网站上的图片比较大，图片代码没有优化，那么打开肯定比较慢。

建议用第三方优化软件优化一次，同时打开工具---internet选项---浏览历史记录---删除（除了第一项不打勾，其余都打勾）android webview加载太慢怎么解决

android webview加载慢的话，可以优化js、特别是图片资源等，使用进度条来提示一下，提升用户的体验。

android webview加载网页很慢，而浏览器很快

Android客户端中混搭HTML页面，会出现虽然HTML内容载入完成，标题也正常显示，但是整个网页需要等到近5秒（甚至更多）时间才会显示出来。研究了很久，搜遍了国外很多网站，也看过PhoneGap的代码，一直无解。

一般人堆WebView的加速，都是建议先用webView.getSettings().setBlockNetworkImage(true); 将图片下载阻塞，然后在浏览器的OnPageFinished事件中设置webView.getSettings().setBlockNetworkImage(false); 通过图片的延迟载入，让网页能更快地显示。

但是，通过实际的日志发现，Android的OnPageFinished事件会在Javascript脚本执行完成之后才会触发。如果在页面中使用JQuery，会在处理完DOM对象，执行完$(document).ready(function() {});事件自会后才会渲染并显示页面。如下图

详细代码

如何有效提升WebView的加载速度

在做混合应用的时候，有几个痛点，一个是无网络无法使用，还有一个是受网络环境影响的网页加载速度。今天就这两个问题，和大家交流一下自己的经验。

离线缓存

这个比较容易，开启webView的缓存功能就可以了。

WebSettings settings = webView.getSettings();

settings.setAppCacheEnabled(true);

settings.setDatabaseEnabled(true);

settings.setDomStorageEnabled(true);//开启DOM缓存，关闭的话H5自身的一些操作是无效的settings.setCacheMode(WebSettings.LOAD_DEFAULT);

这边我们通过setCacheMode方法来设置WebView的缓存策略，WebSettings.LOAD_DEFAULT是默认的缓存策略，它在缓存可获取并且没有过期的情况下加载缓存，否则通过网络获取资源。这样的话可以减少页面的网络请求次数，那我们如何在离线的情况下也能打开页面呢，这里我们在加载页面的时候可以通过判断网络状态，在无网络的情况下更改webview的缓存策略。

ConnectivityManager cm = (ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE);

NetworkInfo info = cm.getActiveNetworkInfo();if(info.isAvailable())

{

settings.setCacheMode(WebSettings.LOAD_DEFAULT);

}else {

settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);//不使用网络，只加载缓存}

这样我们就可以使我们的混合应用在没有网络的情况下也能使用一部分的功能，不至于什么都显示不了了，当然如果我们将缓存做的更好一些，在网络好的时候，比如说在WIFI状态下，去后台加载一些网页缓存起来，这样处理的话，即使在无网络情况下第一次打开某些页面的时候，也能将该页面显示出来。

当然缓存资源后随之会带来一个问题，那就是资源无法及时更新，WebSettings.LOAD_DEFAULT中的页面中的缓存版本好像不是很起作用，所以我们这边可能需要自己做一个缓存版本控制。这个缓存版本控制可以放在APP版本更新中。

if (upgrade.cacheControl cacheControl)

{

webView.clearCache(true);//删除DOM缓存

VersionUtils.clearCache(mContext.getCacheDir());//删除APP缓存

try

{

mContext.deleteDatabase("webview.db");//删除数据库缓存

mContext.deleteDatabase("webviewCache.db");

} catch (Exception e)

{

}

}

预加载

有时候一个页面资源比较多，图片，CSS，js比较多，还引用了JQuery这种庞然巨兽，从加载到页面渲染完成需要比较长的时间，有一个解决方案是将这些资源打包进APK里面，然后当页面加载这些资源的时候让它从本地获取，这样可以提升加载速度也能减少服务器压力。重写WebClient类中的shouldInterceptRequest方法，再将这个类设置给WebView。

webView.setWebViewClient(new WebViewClient()

{ @Override

public WebResourceResponse shouldInterceptRequest(WebView view, String url)

{ if (url.contains("[tag]"))

{

String localPath = url.replaceFirst("^http.*[tag]\]", ""); try

{

InputStream is = getApplicationContext().getAssets().open(localPath);

Log.d(TAG, "shouldInterceptRequest: localPath " + localPath);

String mimeType = "text/javascript"; if (localPath.endsWith("css"))

{

mimeType = "text/css";

} return new WebResourceResponse(mimeType, "UTF-8", is);

} catch (Exception e)

{

e.printStackTrace(); return null;

}

} else

{ return null;

}

}

});

这里我们队页面中带有特殊标记的请求进行过滤替换，也就是上面代码中的[tag]，这个可以跟做后台开发的同事约定好来就行了。对图片资源或者其他资源进行替换也是可以的。补充一个小点可以通过settings.setLoadsImagesAutomatically(true);来设置在页面装载完成之后再去加载图片。

H5优化

Android的OnPageFinished事件会在Javascript脚本执行完成之后才会触发。如果在页面中使 用JQuery，会在处理完DOM对象，执行完$(document).ready(function() {});事件自会后才会渲染并显示页面。而同样的页面在iPhone上却是载入相当的快，因为iPhone是显示完页面才会触发脚本的执行。所以我们这边的解决方案延迟JS脚本的载入，这个方面的问题是需要Web前端工程师帮忙优化的，网上应该有比较多LazyLoad插件，这里放一个比较老的链接Painless JavaScript lazy loading with LazyLoad,同样也放上一小段前端代码，仅供参考。

script src="/css/j/lazyload-min.js" type="text/javascript"/scriptscript type="text/javascript" charset="utf-8"

loadComplete() { //instead of document.read();

}

function loadscript() {

LazyLoad.loadOnce([ '/css/j/jquery-1.6.2.min.js', '/css/j/flow/jquery.flow.1.1.min.js', '/css/j/min.js?v=2011100852'

], loadComplete);

}

setTimeout(loadscript,10);/script