后续的总结

1 Webpack 有哪些优化手段
参看的地址

1. css 怎么开启硬件加速(GPU 加速) ok

浏览器在处理下面的 css 的时候，会使用 GPU 渲染
1.transform（ 当3D变换的样式出现时,会使用 GPU 加速）
2.opacity     3.filter    4.will-change
当使用这些css的时候浏览器会开启硬件加速的哈~

常用设计模式有哪些并举例使用场景

1.工厂模式 - 传入参数即可创建实例
2.单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉
3.发布-订阅模式 (vue 事件机制)
4.观察者模式 (响应式数据原理)
5.装饰模式: (@装饰器的用法)
6.策略模式:指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略

2. 什么是缓存？

所谓浏览器缓存其实就是指在本地使用的计算机中开辟一个[内存区]，
同时也开辟一个[硬盘区]作为数据[传输的缓冲区]，
然后用这个【缓冲区】来【暂时】保存用户以前访问过的信息。

在读取缓存的时候，
1==>先查找内存，如果内存中存在，从内存中加载。
2==>如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；
3==>如果硬盘中未查找到，那就进行网络请求；
加载到的资源缓存到【硬盘】和【内存】；

如何设置缓存
在响应头中设置[Response Headers] cache-control: max-age=31536000
它的单位是s, 31536000s=一年。
如果我们不希望某一个文件缓存，我们可以将 cache-control:no-cache
当我们下一次在去请求这个网站的时候；
我们的浏览器回去检查max-age有没有过期
如果max-age过期了，就会重新去请求
如果max-age没有过期，则不会去重新请求，而是直接去使用本地之前的缓存

有的小伙伴会说前端怎么设置缓存？？？我想知道！！
真相很残酷，其实缓存并不是前端设置的。
而是后端去设置后否缓存，以及缓存的时间
cache  【kæ ʃ】 隐藏物

协商缓存:是服务端的一种缓存策略
当我们第二次发送求的时候，会告诉服务器请求资源以及[资源标识]

在前端性能优化的方式中，最重要的当然是缓存了，
使用好了缓存，对项目有很大的帮助。
缓存的运用:
比如我们访问网页时，使用网页后退功能，
会发现加载的非常快，体验感很好，这就是缓存的力量。

3. 缓存有那些好处

1. 缓解服务器压力，不用每次都去请求某些数据了。
2.提升性能，打开本地资源肯定会比请求服务器来的快。
3.减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗，
至于为什么打开本地资源也会产生网络消耗，下面会有说明。

4. web的缓存类型

Web缓存种类： 数据库缓存，CDN缓存，代理服务器缓存，浏览器缓存。

浏览器缓存位置一般分为四类：

 Service Worker-->Memory Cache-->Disk Cache-->Push Cache。

强缓存

强缓存是当我们访问URL的时候，不会向服务器发送请求，
直接从缓存中读取资源，但是会返回200的状态码。

什么是https

HTTPS 是在 HTTP 的基础上，利用 SSL/TLS 加密数据包。
它的作用是：1.对数据加密 2.验证网站服务器身份
https 加密使用了,使用了对称加密,和非对称加密的混合方式

304 是什么意思 一般什么场景出现 ，命中强缓存返回什么状态码

协商缓存命中返回 304;
这种方式使用到了 headers 请求头里的两个字段，Last-Modified & If-Modified-Since。
服务器通过响应头 Last-Modified 告知浏览器，资源最后被修改的时间：
Last-Modified: Thu, 20 Jun 2019 15:58:05 GMT

当再次请求该资源时，
浏览器需要再次向服务器确认，资源是否过期，
其中的凭证就是请求头 If-Modified-Since 字段，值
为上次请求中响应头 Last-Modified 字段的值：


浏览器在发送请求的时候服务器会检查请求头 request header 里面的 If-modified-Since，
如果最后修改时间相同则返回 304，
否则给返回头(response header)添加 last-Modified 并且返回数据(response body)。


另外，浏览器在发送请求的时候服务器会检查请求头(request header)
里面的 if-none-match 的值与当前文件的内容通过 hash 算法
（例如 nodejs: cryto.createHash('sha1')）
生成的内容摘要字符对比，相同则直接返回 304，
否则给返回头(response header)添加 etag 属性为当前的内容摘要字符，并且返回内容。

请求头last-modified的日期与响应头的last-modified一致
请求头if-none-match的hash与响应头的etag一致
这两种情况会返回Status Code: 304

babel是什么，原理了解吗？

Babel 是一个 JavaScript 编译器。
他把最新版的 javascript 编译成当下可以执行的版本。
利用 babel 就可以让我们在当前的项目中，
随意的使用这些新最新的 es6，甚至 es7 的语法。

Babel 的三个主要处理步骤分别是： 
解析（parse）,转换（transform）,生成（generate）。

解析:
将代码解析成抽象语法树（AST），
每个js引擎都有自己的(AST)解析器，
在解析过程中有两个阶段：(词法分析)和(语法分析)，
词法分析阶段把字符串形式的代码转换为令牌（tokens）流
而语法分析阶段则会把一个令牌流转换成 AST 的形式，同时这个阶段会把令牌中的信息转换成 AST 的表述结构。

转换
在这个阶段，Babel 接受得到 AST 并通过对其进行深度优先遍历，
在此过程中对节点进行添加、更新及移除操作。

生成
将经过转换的 AST通过 babel-generator 再转换成 js 代码，过程就是深度优先遍历整个 AST，然后构建可以表示转换后代码的字符串。

RAF 和 RIC 是什么

13 RAF 和 RIC 是什么
requestAnimationFrame： 告诉浏览器在下次重绘之前执行传入的回调函数
(通常是操纵 dom，更新动画的函数)；
由于是每帧执行一次，那结果就是每秒的执行次数与浏览器屏幕刷新次数一样，通常是每秒 60 次。

requestIdleCallback：: 会在浏览器空闲时间执行回调，
也就是允许开发人员在主事件循环中执行低优先级任务，
而不影响一些延迟关键事件。如果有多个回调，
会按照先进先出原则执行，但是当传入了 timeout，
为了避免超时，有可能会打乱这个顺序。
https://juejin.cn/post/6844903848981577735

写出下面的答案

Function.prototype.__proto__; //Object.prototype
Object.__proto__; //Function.prototype

是不是觉得很奇怪
Object instanceof Function; //true 
Function instanceof Object; //true

Function.prototype === Function.__proto__; //true
Object.prototype.__proto__; //null

tree shaking 是什么，原理是什么

Tree shaking 是一种通过清除多余代码方式，来优化项目打包体积的技术。
tree shaking 的原理是什么?
ES6 Module 引入[进行了静态分析]，在编译的时候，正确判断到底加载了那些模块。
静态分析程序流，判断那些模块和变量未被使用或者引用，进而删除对应代码

common.js 和 es6 中模块引入的区别？

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口（静态编译）。
CommonJs 是单个值导出，ES6 Module 可以导出多个
CommonJs 的 this 是当前模块，ES6 Module 的 this 是 undefined

===================================================
参考的连接: https://juejin.cn/post/6844903876231954446

1. 在vue中watch和created哪个先执行？为什么？

在wacth监控数据时，设置immediate：true；会优先执行watch,created后执行;反之则反

2. 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？

不可以，同名会报错：The computed property "xxxx" is already 
不可以，因为初始化vm的过程，会先把data绑定到vm,
再把computed的值绑定到vm，会把data覆盖了。

3. 我对重排的定义:

重排（回流）:当render树中的一部分或者全部，
因为大小边距等问题发生改变，而需要DOM树重新计算的过程叫做:重排（回流)。

v-show指令其原理就是改变display涉及到了DOM结构的改变。
所以放生了重排。

4. 在vue项目中穿透符有哪些？

1.css使用  >>>; 2. scss使用 ::v-deep ; 3. less使用 /deep/ 

5. vue-loader在webpack编译流程中的哪个阶段？

编译模板阶段：从入口文件出发，调用所有配置的Loader的模块进行编译，
再找出该模块依赖的模块，再递归本步骤，直到所有入口依赖的文件，都经过了本步骤的处理

6. v-if和v-show哪个优先级更高？ 你去看一下

没有优先级的说法

7. vue的v-for如何倒序输出？

1. 先把数组做一层reverse()倒叙处理，然后在执行v-for
2. 使用css3 flex 容器的 order

8. axios同时请求多个接口，如果当token过期时，怎么取消后面的请求？

axios的话可以使用cancelToken来实现。
如果是原生的XMLhttprequest的话，需要使用abort()方法实现。

9.你知道vue的模板语法用的是哪个web模板引擎的吗 说说你对这模板引擎的理解

用了Mustache模板引擎

vue的.sync 修饰符可以用表达式吗？

不可以

你知道style加scoped属性的用途和原理吗？

用途：scoped会在元素上添加唯一的属性（data-v-x形式），
css编译后也会加上属性选择器，在标签上绑定了自定义属性，
防止css全局污染

如何在子组件中访问父组件的实例？

this.$parent拿到父组件实例
this.$children拿到子组件实例（数组）

vue中如果父组件想调用子组件的方法，可以在子组件中加上ref，
然后通过this.$refs.ref.method调用(https://www.cnblogs.com/jin-zhe/p/9523029.html)

Vue中子组件调用父组件的方法，这里有三种方法提供参考：
1：直接在子组件中通过this.$parent.event来调用父组件的方法
2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件
3：父组件把方法传入子组件中，在子组件里直接调用这个方法
（https://www.cnblogs.com/jin-zhe/p/9523782.html）

watch的属性用箭头函数定义结果会怎么样？

因为箭头函数默绑定父级作用域的上下文，所以不会绑定vue实例，所以 this 是undefind

你有使用过babel-polyfill模块吗？主要是用来做什么的？

ES6的转码。IE的兼容

babel默认只转换语法,而不转换新的API,
如需使用新的API,
还需要使用对应的转换插件或者polyfill去模拟这些新特性。

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。
Babel就不会转码这个方法。如果想让这个方法运行，
必须使用babel-polyfill，为当前环境提供一个垫片。

currentTarget：事件绑定的元素
target:鼠标触发的元素

event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素。

在.vue文件中style是必须的吗？那script是必须的吗？为什么？

试验了下，在 .vue 文件中，template是必须的，而script与style都不是必须的。

vue怎么实现强制刷新组件？

this.$forceUpdate()

//模版上绑定key
<SomeComponent :key="theKey"/>
//选项里绑定data
data(){
  return{
      theKey:0
  }
}
//刷新key达到刷新组件的目的
theKey++;

vue变量名如果以_、$开头的属性会发生什么问题？怎么访问到它们的值？

报错 变量未定义
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。
你可以使用例如 $data.xxx或者_data.xxx 的方式访问这些属性。

在vue中created与activated有什么区别？

vue中mixins和extends有什么区别？

讲讲你对 sync修饰符的理解

Vue.observable你有了解过吗？说说看

vue中怎么重置data？

说说你对vue的错误处理的了解？

在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？

说下$attrs和$listeners的使用场景 #461

使用

普通的css使用 
<style scoped>
>>> .disanfangclass {
  color: gray;
}
</style>

scss使用
<style lang="scss" scoped>
::v-deep .formatter-text {
  color: red;
}
</style>


less使用  
<style scoped lang="less">
  /deep/  img{
    width: 100px;
    height: 100px;
  }
</style>

什么首屏加载

前端进阶高薪必看-HTTPS篇 (https://juejin.cn/post/6844904150115827725)

=====================================================================