2020-08-21

1. 你都做过哪些Vue的性能优化？
   编码阶段
   尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
   如果需要使用v-for给每项元素绑定事件时使用事件代理
   SPA 页面采用keep-alive缓存组件
   在更多的情况下，使用v-if替代v-show
   key保证唯一
   使用路由懒加载、异步组件
   防抖、节流
   第三方模块按需导入
   长列表滚动到可视区域动态加载
   图片懒加载
   SEO优化
   预渲染
   服务端渲染SSR
   打包优化
   压缩代码
   Tree Shaking/Scope Hoisting
   使用cdn加载第三方模块
   多线程打包happypack
   splitChunks抽离公共文件
   sourceMap优化
   用户体验
   骨架屏
   PWA
   还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。
   (优化是个大工程，会涉及很多方面，这里申请另开一个专栏)

2. 前端如何进行seo优化
   合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。
   语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
   重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
   重要内容不要用js输出：爬虫不会执行js获取内容
   少用iframe：搜索引擎不会抓取iframe中的内容
   非装饰性图片必须加alt
   提高网站速度：网站速度是搜索引擎排序的一个重要指标

3. 1000-div问题
   一次性插入1000个div，如何优化插入的性能
   使用Fragment
   var fragment = document.createDocumentFragment();
   fragment.appendChild(elem);
   向1000个并排的div元素中，插入一个平级的div元素，如何优化插入的性能
   先display:none 然后插入 再display:block
   赋予key，然后使用virtual-dom，先render，然后diff，最后patch
   脱离文档流，用GPU去渲染，开启硬件加速