android Webview加载优化

本篇主要针对js，如果 ios 遇到这方面问题也可以跟你的同事沟通后试试这个方法。

先上一行代码吧：

setBlockNetworkImage(true)

做android开发的对这行代码一定不陌生，这是webview 阻塞图片资源加载的函数。一般都会在onPageFinished 改为

setBlockNetworkImage(false)

这个对于webview加载速度优化有很大作用。

但是。。

图片资源放在了onPageFinished之后还是加载很慢？？？别急，往下看。

webview在4.4一下采用的webkit，4.4版本以上用了chromium，但是API变化并不大。

用4.0的Webview举例，WebView LoadUrl后，首先拿到当前页的所有资源链接，包括css和js ，然后开子线程去缓存这些资源。

如果有的css和js比较大，又赶上移动终端网络不畅通，就会造成加载缓慢，耗时5-10秒或者更多。

这个时候的解决办法就是让webkit优先渲染html，不包含js等资源。什么？延迟加载js？不行，有的js文件必须优先加载。(这种问题交给前端工程师吧，相信你的同事会很好解决的。)

屁话了半天，来干货吧。看核心代码和优化前后对比。

js使用requirejs这个插件进行的延迟加载。

中文社区：http://www.requirejs.cn/

html引用<script src="resource/js/require.js"></script>

添加延迟加载代码：

<script type="text/javascript">
require(["../../resource/js/domReady!", "resource/js/zepto.min.js", "resource/js/swiper.jq.min.js","resource/js/gglife.js"], function() {
init(); //业务逻辑
});

改完以后Android上并不需要修改，只需要loadurl就行了。来看效果

没有做延迟处理：

延迟加载后：

做测试的时候没有记录时间，不过确实快多了，优化并不需要把所有资源都延迟加载的。用了这个方法后js和原生的交互需要用点小心思。