性能优化方法面试题
优化系列
1、路由懒加载
⑴：Vue异步组件
vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
component: resolve => require(['放入需要加载的路由地址'], resolve)
⑵：ES6标准语法import（）---------推荐使用！！！！！ const Foo = () => import('../components/Foo')
⑶：webpack的require.ensure()
2、keep-alive缓存页面
3、使用v-show复用DOM
4、v-for遍历避免同时使用v-if， 计算属性提前把数组进行过滤
5、长列表性能优化
如果列表纯粹是显示数据 不会有改变 数据就不需要响应式 , 使用freeze方法进行冻结，或者更改属性为false 如果是大数据列表，可以采用虚拟滚动，只渲染少部分区域内容
6、事件销毁
vue组件销毁时，会自动解绑他的全部指令及事件监听器，但仅限于组件本身的事件
7、图片懒加载
对于图片过多的页面 为了加速页面的加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片不做加载，等到滚动到可视区域之后再去加载
8、第三方插件按需导入
像element-ui这样的第三方组件库可以按需映入避免体积太大
9.子组件分割
子组件中有一些比较耗时的就单独分割成为一个组件，自己做自己的渲染，不会影响其他的组件
10、变量本地化
reault实际上是computed出来的属性 同时也是base的属性 base属性比较耗时
11、SSR
12、静态资源使用 CDN
13、使用字体图标 iconfont 代替图片图标
14、压缩文件
15、减少 ES6 转为 ES5 的冗余代码
16、减少重绘重排
减少重绘回流
样式设置
1、避免使用层级较深的选择器，或其他一些复杂的选择器，以提高CSS渲染效率
2、避免使用CSS表达式，CSS表达式是动态设置CSS属性的强大但危险方法，它的问题就在于计算频率很快。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次
3、元素适当地定义高度或最小高度，否则元素的动态内容载入时，会出现页面元素的晃动或位置，造成回流
4、给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流
5、不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间
6、能够使用CSS实现的效果，尽量使用CSS而不使用JS实现
渲染层
1、此外，将需要多次重绘的元素独立为render layer渲染层，如设置absolute，可以减少重绘范围
2、对于一些进行动画的元素，使用硬件渲染，从而避免重绘和回流
DOM优化
1、缓存DOM
const div = document.getElementById('div')
由于查询DOM比较耗时，在同一个节点无需多次查询的情况下，可以缓存DOM
2、减少DOM深度及DOM数量
HTML 中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
3、批量操作DOM
由于DOM操作比较耗时，且可能会造成回流，因此要避免频繁操作DOM，可以批量操作DOM，先用字符串拼接完毕，再用innerHTML更新DOM
4、批量操作CSS样式
通过切换class或者使用元素的style.csstext属性去批量操作元素样式
5、在内存中操作DOM
使用DocumentFragment对象，让DOM操作发生在内存中，而不是页面上
6、DOM元素离线更新
对DOM进行相关操作时，例、appendChild等都可以使用Document Fragment对象进行离线操作，带元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作
7、DOM读写分离
浏览器具有惰性渲染机制，连接多次修改DOM可能只触发浏览器的一次渲染。而如果修改DOM后，立即读取DOM。为了保证读取到正确的DOM值，会触发浏览器的一次渲染。因此，修改DOM的操作要与访问DOM分开进行
8、事件代理
事件代理是指将事件监听器注册在父级元素上，由于子元素的事件会通过事件冒泡的方式向上传播到父节点，因此，可以由父节点的监听函数统一处理多个子元素的事件
利用事件代理，可以减少内存使用，提高性能及降低代码复杂度
9、防抖和节流
使用函数节流（throttle）或函数去抖（debounce），限制某一个方法的频繁触发
10、及时清理环境
及时消除对象引用，清除定时器，清除事件监听器，创建最小作用域变量，可以及时回收内存