我们都知道vue单页应用要支持seo不太容易，虽然vue框架本身支持服务端渲染，也有Nuxt等框架来做SSR，但是都存在这样或者那样的问题（主要有对业务代码侵入性，上手难度大，优化难度大等问题）
由于之前的一个vue单页项目，突然需要支持seo，代码已经比较庞大，工期也比较紧，不具备做seo改造的条件，因此想到了使用无头浏览器为搜索引擎的爬虫生成页面，入口通过nginx的ua字段进行判断是否为搜索引擎爬虫
整个方案事实下来遇到了几个问题
1、依赖问题，puppeteer 比 phantomjs 依赖更复杂，由于我们最后是使用Linux服务器部署puppeteer的依赖比phantomjs更多，也许是我安装的姿势不对，我是使用npm来安装puppeteer，我使用的Linux发型版是Debian ，最后我通过在Debian安装一个完整的桌面环境来解决了puppeteer的依赖问题
2、权限问题，在mac在调试好的代码在Linux里面报错了，启动之后报错 No usable sandbox! ，大概排查了下原因，就是headless模式其实默认是运行在一个sandbox里面的，但是默认是不能以root用户的身份运行sandbox的，由于我整个程序环境是在docker里面，直接通过添加启动参数 args: ['--no-sandbox', '--disable-setuid-sandbox']屏蔽了sandbox特性
3、渲染性能优化、在服务端使用无头浏览器渲染整个页面必然会有性能方面的问题，我找到了一篇国外到文章姣好的解决了这个问题
How to disable images and CSS in Puppeteer to speed up web scraping
主要思想就是，我使用无头浏览器其实是想要vue框架渲染出来的dom结构，对图片和样式等内容并不关心
在puppeteer框架中主要是通过监听request事件来拦截请求的，可以完美禁止headless browser 加载 css和图片等内容，大大节省了cpu和内存资源，不过一旦监听了request事件，浏览器的请求缓存就会通通失效 puppeteer目前好像还没有比较好的解决方案
4、DataURL，熟悉前端单页的肯定都知道vue项目一般会把比较小的图片打包成DataURL的形式，提高页面性能，不过在SSR的场景下会使文档变得非常巨大，非常不利于SEO，这个解决方案也很多，
比如可以把原来的IMG标签换成背景图片，这样DataURL就会跑到CSS里面了，不会体现在文档上了
4、无用组件渲染，我们页面里面有很多使用百度echart渲染的图表，在headless环境下也会加载巨大的图形库，很消耗资源，还好我们项目中的echart调用已经统一封装在了一个vue组件中，只需要在该组件内通过navigator.webdriver字段来判断headless 并阻止加载echart模块就可以进一步提高性能