面试--金蝶云之家经验总结

公司挺大的，人也挺好的，在面试中被技术面的时候有一些问题，是接触过但是忘记了，也有一些是平时没去了解太深的。特意在此写了一篇博客记录一下。

1.标签语义化

语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。

2.节流

在持续触发事件时，在一定时间内只调用一次函数，如果在规定时间内，再次触发此事件，则直接忽略不执行，其主要目的就是减少一段时间的触发频率。

应用场景：

DOM元素拖拽功能实现
计算鼠标移动距离
监听scroll滚动事件
搜索、提交等按钮功能

3.防抖

当持续触发事件时，在一定时间内没有再触发事件，事件才会处理函数一次，如果在设定的时间到来之前，又触发了事件，则重新开启定时器，执行最后一次触发事件。

应用场景：

scroll事件滚动
浏览器窗口的缩放resize事件
搜索框输入查询的时候
表单验证
按钮的提交事件

4.http缓存

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

我们使用 HTTP 缓存，通过复用缓存资源，减少了客户端等待时间和网络流量，同时也能缓解服务器端的压力。可以显著的提升我们网站和应用的性能。虽然 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的，HTTP 缓存是一个 web 性能优化的重要手段。

HTTP 缓存的类型
通常 HTTP 缓存策略分为两种：

强缓存 :强缓存即强制直接使用缓存,强缓存不会向服务器发送请求，直接从缓存中读取资源，在 chrome 控制台的 network 选项中可以看到该请求返回 200 的状态码，并且size显示from disk cache或from memory cache
协商缓存:协商缓存就得和服务器协商确认下这个缓存能不能用,协商缓存会先向服务器发送一个请求，服务器会根据这个请求的 request header 的一些参数来判断是否命中协商缓存，如果命中，则返回 304 状态码并带上新的 response header 通知浏览器从缓存中读取资源。
Expires
Expires 响应头，它是 HTTP/1.0 的产物。代表该资源的过期时间，其值为一个绝对时间。它告诉浏览器在过期时间之前可以直接从浏览器缓存中存取数据。由于是个绝对时间，客户端与服务端的时间时差或误差等因素可能造成客户端与服务端的时间不一致，将导致缓存命中的误差。如果在Cache-Control响应头设置了 max-age 或者 s-max-age 指令，那么 Expires 会被忽略。

Expires: Wed, 21 Oct 2015 07:28:00 GMT
复制代码
Cache-Control
Cache-Control 出现于 HTTP/1.1。可以通过指定多个指令来实现缓存机制。主要用表示资源缓存的最大有效时间。即在该时间端内，客户端不需要向服务器发送请求。优先级高于 Expires。其过期时间指令的值是相对时间，它解决了绝对时间的带来的问题。

Cache-Control: max-age=315360000
复制代码
Cache-Control 有很多属性，不同的属性代表的意义也不同

5.vue中组件传值

vue中有父子组件传值，兄弟组件传值等。可以使用bus和on，emit或者全局状态管理store。

其中父子组件传值涉及到了父子组件的生命周期问题

父的beforeCreate -> 父的create -> 父beforeMounted -> 子beforeCreate -> 子create ->

子beforeMounted -> 子mounted ->父mounted

父子组件更新问题

父beforeUpdate -> 子beforeUpdate -> 子update -> 父update

在子组件中可以使用emit发送事件和参数，在父组件调用子组件的时候加上@自定义事件接收。

兄弟组件传值可以使用bus和on，其中on用于设置监听，才能使用emit进行触发。

优缺点
优点：传递数据较为方便，可以进行兄弟之间，父子之间的传递
缺点：必须先on监听才能进行emit触发
注意事项
在订阅事件的组件里，一定要在组件销毁之前把监听事件也手动销毁一下。如果不销毁，会累积多次创建监听事件，一旦在B组件里触发了事件发布，组件A就会执行多次事件。
相对于状态管理，缺点也很明显：
订阅和发布必须成对出现，不然就没有意义
由于在页面使用里的灵活性，一旦事件多了后，难以对事件进行维护
在订阅事件的组件里，必须手动销毁监听，否则会引发多次执行
对于一些包含业务逻辑的通信，复用性差，需要在多个地方重复写逻辑
总结
中大型项目都不推荐用EventBus，建议用vuex做状态管理，方便日后维护。
小型项目，涉及到多处跨组件通信的情况，可以考虑使用。

6.怎么让浏览器兼容es6

针对ES6的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的ES6语法转换成ES5，相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel，jsx，traceur，es6-shim等。
一、babel运行的三个阶段
babel我们可以把他理解为一个编译器，也就是实现代码转换的功能，其转换过程分为三个阶段。
1、解析：将js代码转换成AST（抽象语法树）
2、转化：根据抽象语法树进行变换操作
3、生成：将转换后的抽象语法树生成新的代码

7.跨域问题

端口，域名包括子域名，协议三者有一个不同就是跨域，注：域名和域名对应的ip之间也属于跨域(localhost和127.0.0.1也是)，跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

8.new一个实例做了哪些操作

创建一个空对象，作为将要返回的对象实例(申请了一块内存空间)。
将这个空对象的原型，指向构造函数的prototype属性。
将这个空对象赋值给函数内部的this关键字。
开始执行构造函数内部的代码。
构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象

9.flex:1 代表什么

属性是 flex-grow(规定项目相对于其他灵活的项目进行扩展的量)、flex-shrink(规定项目相对于其他灵活的项目进行收缩的量) 和 flex-basis(项目的长度) 属性的简写属性，利用 flex: 1; 实现了三个不同内容的 div 平分空间,
flex:1; 即就是代表均匀分配元素；
flex: 1; === flex: 1 1 0;

总结：写在最后，面试的提问大多都是你在简历上提及的技术，以及你回答过程出现的技术。所以对于简历的技术和你说出来的技术一定要熟悉，最好是能了解到底层的程度。可以慢慢思考，语速慢一点，不用着急，但是一定要对于自己的所学有一个清晰的概念和描述。

参考链接：金蝶云之家面经 – 萌新小试 (sunn.asia)