WebView 显示PPT 的两秒延时问题

236 阅读2分钟

前言

根据 《WebView 性能、体验分析与优化》, 优化点主要在以下两点:

  • 其一,初始化一个全局 WebView 待用
  • 其二, 客户端代理数据请求,就是初始化WebView 时,直接由 native 开始网络请求,待页面初始化完成,直接使用获取到的数据

仔细观察问题,发现页面显示白屏很是正常耗时,而且数据都是在本地,不考虑网络耗时,那么主要耗时点在渲染那块。

优化点一

Html 的 Head代码,存在网络地址

<!-- 这是使用网络-->
<script src="http://lib.sinaapp.com/js/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<!-- 这是使用本地-->
<script>if (!window.jQuery){var script = document.createElement('script');script.src = "../jquery-1.8.1.min.js";document.body.appendChild(script);}</script>

优化点二

在页面框架加载这一部分,能够优化的点参照雅虎14条就够了;但注意不要犯错,一个小小的内联JS放错位置也会让性能下降很多。

  1. CSS的加载会在HTML解析到CSS的标签时开始,所以CSS的标签要尽量靠前。
  2. 但是,CSS链接下面不能有任何的JS标签(包括很简单的内联JS),否则会阻塞HTML的解析。
  3. 如果必须要在头部增加内联脚本,一定要放在CSS标签之前。

因此,整理 head ,将所有css 移动到 js 下面

优化后的 Head

此处的优化都是针对渲染耗时,优化都的代码如下:

<script>var firsttag="5281a115ce50f8fd676e56b295aee5e4";var optjson={read:0,desc:"",up:0,vip:8,wtoption:3};</script>
... ...
<script src="../nav.all.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="../5281a115ce50f8fd676e56b295aee5e4/data/f.css">
... ...
<link rel="stylesheet" type="text/css" href="../nav.css">

其实还可以深入js代码,去除不必要或优化的耗时代码

优化点三,优化WebView 初始化耗时

一般安卓的 WebView 初始化都有 70 到700ms的耗时,表现在白屏之前的耗时,可参看

优化:

  1. 此处可以使用静态单例,第一次初始化后,二次使用就不需要初始化,但要注意内存溢出和退出页面的清理工作。