使用CloudFlare Rocket Loader的注意事项

在启用CloudFlare以后，网站访问速度感觉稳定了不少，而且收录速度似乎更快了，在启用AMP之后，我也陆续将MIP支持了，但是出现一个问题就是MIP的规范要求<script>标签要么不能出现type，要么如果有type，其值必须为”text/javascript “、”application/javascript“，我在排查问题的时候发现MIP页面不符合规范，一看原来是<script>标签的type值有问题。如下图所示：

<script type="a850c044fbd65692abfffb84-text/javascript">

显然这个type的值是有问题的，可是我翻看源码并没有添加这个字段呢，于是我关闭WP-Rocket插件，发现依旧还有这个问题，那么我就猜测这个是CloudFlare造成了，通过缓存的配置、Page Rules等方式依旧没有解决，只能挨个尝试，最终发现原来是Rocket Loader的锅，查阅文档后得知，要想排除这个问题，需要在<script>标签上添加data-cfasync=”false”。于是将MIP模版的源码做了下修改，如下所示：

<script data-cfasync="false" src="https://c.mipcdn.com/static/v1/mip.js" type="text/javascript"></script><!--mip-->
<script data-cfasync="false" src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js" type="text/javascript"></script><!--分享组件 代码-->
<script data-cfasync="false" src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js" type="text/javascript"></script><!--百度统计-->
<script data-cfasync="false" src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js" type="text/javascript"></script>

此时清除缓存，再次刷新页面，发现标签消失，通过MIP在线规则校验也成功通过了校验。

那么 Rocket Loader是干嘛的呢？查看说明，开启后可以加快包括js在内的页面加载速度，从而提高您的google rankpage 排名。但是开启后<script>的type会变成text/rocketscript，然后去下载一个叫rocket-loader.min.js的文件。如果对页面规范比较严格的想MIP或者AMP这种的，建议在<script>标签内加入data-cfasync=”false”。来解决这个问题，其他的吗还是建议开启吧。

本文的解决办法参考自How can I have Rocket Loader ignore specific JavaScripts?