(tab+swiper)点击tab切换，卡顿问题

问题是这样的：
每个tab项里面放了一个swiper，swiper设置的循环+自动播放。

当第一次点击的时候，每个swiper都会自动播放；第二次or more time，不会自动播放且swiper箭头点不动，拖拽swiper-item,之后，又可以自动播放；
在切换tab的时候，会很卡段。

差不多就是上面的情况。

最开始分析：以为是swiper的问题（仅仅）。

在网上搜索了一番，说的是tab的display:none导致了卡顿（这里我分析觉得并不是display:none导致卡顿，因为我尝试了swiper仅开启自动播放，切换tab,对应的swiper是会自动播放的，由于我的懒惰及时间问题，我没有深入探索问题）；照着他的解决方案：
解决了多次切换，swiper可以自动播放问题，但是在tab切换的时候却还是卡顿。
这个问题，我就很难去定位问题出现在哪里了?
我快要绝望的时候，旁边的大佬给我说：用chrome的performance分析一哈，
照着大佬说的，使用performace，最开始还是以为是swiper的锅，一直在看事件，看了1个小时，发现并没有什么异常。此时的我，再一次绝望了....

平复了一哈心情，bug还是要解决的。我一下看到了summary：发现renderingTime在切换tab的时候占用的比例非常的大，突然有一点点灵感了。
搜索：如何减少网页-rendering-time-渲染流程所需时间

查看了一篇文章：这篇文章说了一个点，图片过大会占用renderingTime。突然，醍醐灌顶。发现某个tab栏里面一张图片有4.5M的样子（用户自己上传的图片）。
其实本来系统是有图片压缩的功能的，但是由于程序的bug(自己写的bug)。
有一个tab项的图片没有压缩。由此，导致tab切换卡顿。

网页渲染：在手机端样式与chrome device toolbar下，样式差异很大

交代一下背景：本来是用的nuxt渲染站点，但是当网站过于复杂之后，性能在手机端就非常撇，首页可能需要加载6、7才能全部加载完成。非常的影响用户体验。
所以，主管决定不用nuxt渲染，基于vue的模板，使用模板字符串的形式实现渲染。

我呢？主要是辅助开放这个新版本渲染的前端部分。

one day：发现在手机端渲染出来的页面和在chrome device toolbar下，样式差异非常大。

这个艰巨的问题，自然就由我来解决了。

首先：我分析了一下，样式差异主要是在:写了height:100%的地方，全部都是全屏高了。？？？？why....当时的我，仅定位到导致手机浏览器出现差异的css，但是为啥会在手机浏览器上产生不一样的效果呢？没有一点点思路！

是不是渲染方式的不同，导致bug？
于是我就扒nuxt 渲染之后的静态html 及新渲染的html，在手机端访问，发现问题任然存在，排除渲染方式不同引起的bug
不是渲染方式：我觉得可能是css样式不同导致的问题。
对比两种渲染出来的css:发现“新渲程序”渲染的css没有浏览器前缀等。（我们使用的sass。在nuxt项目中，webpack脚手架已经做好了样式的处理，但是“新渲染程序”只是简单的sass to css,没有添加任何的浏览器兼容代码！）心里面非常开心，感觉自己找到为啥子会有这个bug了。

于是就将转好的css添加浏览器前缀
gen_css.sh文件代码如下

// 第一步：将sass 转成css
sass  ./assets/css:./dist/css --no-source-map
 // 第二步：css 添加前缀（这里需要注意一下：根目录下，需要设置浏览器列表(.browserslistrc文件)，不指定，只会生成-webkit前缀）
// see https://github.com/postcss/autoprefixer
npx postcss  ./dist/css/*.css  --use autoprefixer -d ./dist/css

高兴的把样式前缀添加上了，兴奋的测试，发现没有任何作用！on no....

不是代码样式的问题？
只能重新定位了问题....

接下来：我就把nuxt渲染生成的静态文件及新渲染程序的静态文件精简到我可以对比。精简之后，发现新渲染的静态页面头部第一行没有<!DOCTYPE html>，加上这行代码之后，样式则没有差异了...嗯嗯~此时的我，真的是既开心也有一点点悲伤....找了这么久的问题，就在文档的第一行.....