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

最近在做一个前端的项目，因为需求是最好能够分享到微信朋友圈，那免不了兼容微信内置的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文件去更新资源，所以图片也就随之更新了，然而这个过程对用户来说不需要任何操作，岂不是很好？