WebView

幻海流心
177 阅读9分钟

1. WebView首次加载1个html文档,速度较慢

尝试优化1

02 : 添加加载进度
2023-07-07 13:56:14.640 27991-27991/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s1
//
首次展示WebView,加载耗时180ms
//
2023-07-07 13:56:14.826 27991-27991/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s2
2023-07-07 13:56:14.826 27991-27991/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before initWebView.
2023-07-07 13:56:14.828 27991-27991/com.example.jet2022 I/TagTrackWebView: onCreateDialog. after initWebView.
2023-07-07 13:56:14.844 27991-27991/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before loadUrl.
2023-07-07 13:56:14.856 27991-27991/com.example.jet2022 I/TagTrackWebView: onCreateDialog. after loadUrl.
2023-07-07 13:56:15.081 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:10
2023-07-07 13:56:15.085 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onPageStarted. url:file:///android_asset/up_0.html
2023-07-07 13:56:15.085 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:21
***
2023-07-07 13:56:23.777 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:78
2023-07-07 13:56:23.910 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:79
2023-07-07 13:56:24.047 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:80
2023-07-07 13:56:24.195 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:80
2023-07-07 13:56:24.332 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-07 13:56:24.391 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-07 13:56:24.391 27991-27991/com.example.jet2022 I/TagTrackWebView: initWebView. onPageFinished. url:file:///android_asset/up_0.html

	//第二次展示WebView, 加载耗时10ms不到
	2023-07-07 14:01:18.183 32357-32357/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s1
	2023-07-07 14:01:18.191 32357-32357/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s2
	2023-07-07 14:01:18.191 32357-32357/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before initWebView.
	//

///////////////////////////////////////
03 : 添加加载进度 + 1个webView提前布局
2023-07-07 14:11:22.949 20674-20674/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s1
//
首次展示WebView,加载耗时不到10ms
//
2023-07-07 14:11:22.958 20674-20674/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s2
2023-07-07 14:11:22.958 20674-20674/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before initWebView.
2023-07-07 14:11:22.959 20674-20674/com.example.jet2022 I/TagTrackWebView: onCreateDialog. after initWebView.
2023-07-07 14:11:22.987 20674-20674/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before loadUrl.
2023-07-07 14:11:23.001 20674-20674/com.example.jet2022 I/TagTrackWebView: onCreateDialog. after loadUrl.
2023-07-07 14:11:23.415 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:10
2023-07-07 14:11:23.454 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onPageStarted. url:file:///android_asset/up_0.html
2023-07-07 14:11:23.454 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:21
***
2023-07-07 14:11:41.717 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:79
2023-07-07 14:11:41.908 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:80
2023-07-07 14:11:42.098 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:80
2023-07-07 14:11:47.055 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-07 14:11:47.150 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-07 14:11:47.150 20674-20674/com.example.jet2022 I/TagTrackWebView: initWebView. onPageFinished. url:file:///android_asset/up_0.html

02和03比较,说明单纯在Activity的xml里面添加1个WebView布局,也是可以在Dialog中显示WebView时,降低初始化时间

///////////////////////////////////////
04 : 添加加载进度 + 1个webView提前布局 + 提前load'
2023-07-07 14:26:14.109 12431-12431/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s1
2023-07-07 14:26:14.120 12431-12431/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s2
2023-07-07 14:26:14.120 12431-12431/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before initWebView.
2023-07-07 14:26:14.122 12431-12431/com.example.jet2022 I/TagTrackWebView: onCreateDialog. after initWebView.
2023-07-07 14:26:14.173 12431-12431/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before loadUrl.
2023-07-07 14:26:14.182 12431-12431/com.example.jet2022 I/TagTrackWebView: onCreateDialog. after loadUrl.
2023-07-07 14:26:14.482 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:10
2023-07-07 14:26:14.499 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onPageStarted. url:file:///android_asset/up_0.html
2023-07-07 14:26:14.500 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:21
2023-07-07 14:26:14.781 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:22
***
2023-07-07 14:26:42.477 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:79
2023-07-07 14:26:42.643 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:80
2023-07-07 14:26:42.810 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:80
2023-07-07 14:26:43.177 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-07 14:26:43.249 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-07 14:26:43.250 12431-12431/com.example.jet2022 I/TagTrackWebView: initWebView. onPageFinished. url:file:///android_asset/up_0.html

从加载进度看,04相比03反而更慢了,初始化耗时无变化.
视觉上,首次弹出Dialog显示出html速度也无变化.

///////////////////////////////////////
05 : 添加加载进度 + 1个webView提前布局 + 提前load + 弹出Dialog时直接使用该WebView
2023-07-07 15:40:07.743 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:10
2023-07-07 15:40:07.942 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onPageStarted. url:file:///android_asset/up_0.html
2023-07-07 15:40:07.942 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:21
2023-07-07 15:40:08.051 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:25
2023-07-07 15:40:09.964 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:25
2023-07-07 15:40:10.140 26118-26118/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s1
2023-07-07 15:40:10.143 26118-26118/com.example.jet2022 I/TagTrackWebView: onCreateDialog. s2
2023-07-07 15:40:10.143 26118-26118/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before initWebView.
2023-07-07 15:40:10.143 26118-26118/com.example.jet2022 I/TagTrackWebView: onCreateDialog. after initWebView.
2023-07-07 15:40:10.214 26118-26118/com.example.jet2022 I/TagTrackWebView: onCreateDialog. before loadUrl.
2023-07-07 15:40:10.214 26118-26118/com.example.jet2022 I/TagTrackWebView: onCreateDialog. after loadUrl.
2023-07-07 15:40:10.542 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:26
2023-07-07 15:40:10.552 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:46
***
2023-07-07 15:40:22.165 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-07 15:40:22.244 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-07 15:40:22.245 26118-26118/com.example.jet2022 I/TagTrackWebView: initWebView. onPageFinished. url:file:///android_asset/up_0.html

视觉上,首次弹出Dialog显示出html速度反而变慢了.

尝试优化2 :如果要在Dialog中使用WebView加载本地html

  1. Dialog布局xml中包含WebView
  2. 进入Activity就inflate该dialog布局,获取WebView,load,监听load进度
  3. 展示Dialog
    • 校验load是否结束(onPageFinished)
      • 已结束,直接使用dialog布局展示Dialog
      • 未结束,先展示loading,让用户等待.待load结束.
        • 移除loading
        • 使用dialog布局展示Dialog
  • 经过试验,如果本地html尺寸不大(验证html的50K左右),进入Activity后,500ms左右就已经load完成.
2023-07-10 17:05:49.846 24698-24698/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:10
2023-07-10 17:05:50.107 24698-24698/com.example.jet2022 I/TagTrackWebView: initWebView. onPageStarted. url:file:///android_asset/up_1.html
2023-07-10 17:05:50.107 24698-24698/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:70
2023-07-10 17:05:50.207 24698-24698/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:80
2023-07-10 17:05:50.430 24698-24698/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-10 17:05:50.431 24698-24698/com.example.jet2022 I/TagTrackWebView: initWebView. onProgressChanged. newProgress:100
2023-07-10 17:05:50.431 24698-24698/com.example.jet2022 I/TagTrackWebView: initWebView. onPageFinished. url:file:///android_asset/up_1.html
  • load结束后展示Dialog直接就显示了内容.看不到白屏.
  • 如果本地html尺寸很大,即使load结束,再展示,依然能看到白屏现象,还没有找到方案

示例代码:

class Step9Activity : AppCompatActivity() {
    lateinit var webView: WebView
    lateinit var content: View

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_step9)
        initView()
    }

    private fun initView() {
        content = LayoutInflater.from(this)
            .inflate(R.layout.***, null, false) as LinearLayout
        webView = content.findViewById(R.id.web)
        webView.isVerticalScrollBarEnabled = false
        webView.isHorizontalScrollBarEnabled = false
        webView.setBackgroundColor(Color.TRANSPARENT)
        webView.webViewClient = object : WebViewClient() {
            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                Log.i("TagTrackWebView", "initWebView. onPageStarted. url:$url")
                super.onPageStarted(view, url, favicon)
            }

            override fun onPageFinished(view: WebView?, url: String?) {
                Log.i("TagTrackWebView", "initWebView. onPageFinished. url:$url")
                super.onPageFinished(view, url)
            }
        }
        webView.webChromeClient = object : WebChromeClient() {
            override fun onProgressChanged(view: WebView?, newProgress: Int) {
                Log.i("TagTrackWebView", "initWebView. onProgressChanged. newProgress:$newProgress")
                super.onProgressChanged(view, newProgress)
            }
        }
        val url = "file:////android_asset/***.html"
        webView.loadUrl(url)
    }

    fun show(view: View) {
        Log.i("TagTrackWebView", "show Step9Activity")
        val dialog = ***DialogBuilder(
            this,
            ***.R.style.Theme_***_Dialog
        )
            .setTitle("标题")
            .setView(content)
            .create()
        dialog.show()
    }
}

尝试优化3 :监听WebView是否绘制完成/渲染完成

有文章说可以自定义WebView,如果其执行了onDraw,则当做已渲染完成. www.iteye.com/blog/tracy0…

class CustomWebView constructor(context: Context, attrs: AttributeSet?, defStyle: Int) :
    WebView(context, attrs, defStyle) {
    constructor(context: Context) : this(context, null, 0)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        Log.i("TagTrackWebView", "CustomWebView. onDraw.")
    }
}
  • 如果是想一开始不显示到屏幕上,待渲染完成再显示到屏幕上,这条路也走不通,因为其onDraw根本就不会走.
  • 对于WebView本来就已经在屏幕上的情况,可以试试这种方案.
avatar
文章
阅读
粉丝