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

但是最近团队成员写完项目以后，发生了一种情况：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去试了。

（完）