解决前端开发之微信内置浏览器页面渲染和缓存问题

最近在做一个前端的项目,因为需求是最好能够分享到微信朋友圈,那免不了兼容微信内置的QQ浏览器。

我不得不说,微信内置的浏览器简直就是前端开发的绊脚石,业界之毒瘤啊!w(゚Д゚)w说白了就是个手机版的IE,对H5响应式页面支持非常差,但我们必须承认微信这整个生态圈是很NB的。

另外页面缓存问题也是大家很烦恼的,由于微信内置的简易浏览器没有提供刷新功能,后台更新图片资源后,根本刷新不了。

那么现在我们就来说说我遇到两个例子的解决办法,大家如果有和鄙人相似的可以参考参考。

 

第一个,大家都经常看到那种在网页在向下滑动的过程中,悬浮的文本会跟着动,但是背景图片没有动的效果,这其实就是我们给 background-attachment 设置了 fixed 属性,下面看示例:

section.our-business {
	padding: 100px 0;
	/*-- W3layouts --*/
	background: url(../images/service_fixed_2.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}

这个看上去没有任何问题,经过我测试,除了QQ浏览器(也就是微信内置浏览器),其它浏览器都能达到预期效果。

那么,在微信上是个什么效果呢?你会看到,在向下滑动的过程中,那一部分出现随机的白块,给人一种没加载出来的感觉,而且背景图片也无法固定,出现了错乱的重复平铺。整个滑动过程也特别不流畅。

具体原因我不太清楚,大概查了下,说是QQ浏览器的渲染引擎为了节省资源所致。

解决办法:将 fixed 属性改成 scroll,也就是说,让背景图跟随用户滚轮或手势一起滑动,不再固定,这样一来,算是委曲求全吧,微信上面不再出现白块了。(后来我也查了下,可以通过JS来判断是否为微信浏览器,然后根据不同情况加载不同css也是可以的,这样就不会影响其它浏览器的体验了)

 

第二个,就来说说缓存吧,我也在网上查了下,很多方法可谓是大动干戈,有一些去专门的网站清除微信X5内核的缓存,还有一些简单粗暴的直接清理App数据的,这些都管用。但是,用户不是开发者,我们为了看到效果,可以这样做,但不可能让用户去做这些麻烦的操作。我们只能从后台去改变。

解决办法:研究了一下缓存之后发现,其缓存都是根据索引来缓存的,也就是说根据你图片资源的文件名来缓存。那么基于这个原理,我们就可以在后台把图片名字全部改了,比如你以前叫 img.jpg,现在改成 img1.jpg,当然要同时记得改html代码里的索引。

这样一来,根本不需要刷新了,再从微信里看,它找不到之前的索引了,就不得不根据html文件去更新资源,所以图片也就随之更新了,然而这个过程对用户来说不需要任何操作,岂不是很好?

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页