相信技术的力量

Android webview加载H5页面时css样式丢失

混合开发,原生应用内通过Webview组件嵌入H5是非常普遍的,最近两年也一直在使用中。

但是最近团队成员写完项目以后,发生了一种情况:70%以上的概率,会发生加载的H5详情页CSS样式丢失的情况,页面js也能请求到数据,但是由于没有CSS样式,所以所有的数据都堆积到了页面左上角。

通过观察发现:

  1. 能正常加载出来的页面,一般需要耗时1-2秒,中间有明显的webview读条
  2. css样式丢失的页面,一般在读条至1/3处时停止,然后页面加载停止,出现DOM堆积+无CSS样式+有JS请求到的数据的页面。

一开始摸不着头脑,最后分析可能是缓存原因,网上搜索获知可能根硬件加速也有关系。

最终通过如下方式解决:

第一,设置不使用缓存,每次都重新加载(亲测此设置能解决80%的问题)

//缓存设置
settings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 设置缓存模式

第二, 关闭硬件加速(亲测能解决10~20%的问题)

有多种设置级别,比如应用级别,Activity级别,控件级别。这里只记录后两者:

1.Activity级别,在AndroidManifest.xml清单文件中设置

<activity android:name=".activity.WebViewActivity" android:hardwareAccelerated="false"/>

2.控件级别,在布局文件中配置

<com.tencent.smtt.sdk.WebView
                android:id="@+id/wv_webview_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layerType="none"/>

第三,使用腾讯X5内核,此方案对于本问题的解决效果未知。X5内核完全兼容WebView,因此配置简单,直接参考官网 腾讯浏览服务 即可。

总结

通过以上三步,尤其是前两步的配置,CSS样式丢失问题基本上得到了100%的解决,至于这里面有没有X5内核的功劳,不清楚,也懒得再换回原生WebView去试了。

(完)

⬆️