4.2号面的第一次，秒黑
先做了一个多小时的编程题，才开始的电话面试。

1、vue的双向数据绑定

参考链接：浅谈Vue双向数据绑定的原理

vue实现对数据的双向绑定，通过对数据劫持结合发布者-订阅者模式实现的。

Object.defineProperty

vue通过object.defineProperty来实现数据劫持
会对数据对象每个属性添加对应的get和set方法，对数据进行读取和赋值操作，分别调用get和set方法

Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {

        // do something

        return val;
    },
    set: function(newVal) {

        // do something
    }
});

实现过程：

首先要对数据进行数据监听，需要一个***Observer，监听所有属性。
如果属性发生变化，会调用setter和getter，
再去告诉订阅者Watcher是否需要更新。
由于订阅者有很多个，我们需要一个消息订阅器Dep来专门收集这些订阅者，然后在***Observer和订阅者Watcher之间进行统一管理。
我们需要一个指令解析器Complie，对每个元素进行扫描和解析，
将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或绑定相应函数。
当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

图片说明

observer

实现：object.defineProperty
如果要监听所有属性的话，则需要通过递归遍历，对每个子属性都defineProperty

2、dom事件流机制

事件冒泡-事件处理-事件捕获

3、状态码了解哪些，常用的有哪些

我只说了200,206，304,404
事实上有很多：
1xx继续：
100（继续）：请求者应该继续提出请求
101（切换协议）

2xx（成功）：
200成功
204无内容
206范围请求

3xx重定向：
300多种选择
301永远移动
302临时移动
304未修改

4XX请求错误：
400 错误请求
401未授权
403禁止
404未找到

5xx服务器错误

4、返回304的流程

我的回答：
浏览器第一次访问一个页面时，首先向服务器发送请求，服务器返回数据，数据中会有过期时间expires和max-age（又问，这两个过期时间有什么区别）（沃日哦，我只知道这是两个协议不同的属性啊晕）。当浏览器第二次要访问这个页面时，首先查看这个数据的过期时间，看是否过期，没有过期就直接显示。过期的话就带着ETag和If-None-Modefied-Since访问服务器，服务器将自身数据和ETag进行对比，如果没有发生改变，则返回304,改变了就返回200和数据。

沃日哦，错了。

第一次响应的时候携带的是ETag和Last-Modefined响应头。
客户端再发送统一地址的请求时，携带的是If-None-Match和If-Modefined-Since.If-None-Match就是ETag的值，If-Modefined-Since就是Last-Modefined的值。
至于expires和max-age。。。。我可能是个***，这是cookie的内容。。为何我这么垃圾，我心太塞了

（学习不扎实，错误一大堆）

完整版：
1、客户端第一次请求服务端的某个地址时，服务端会在响应时携带 ETag 与 Last-Modefined 响应头，
2、客户端下次再发送同一地址的请求时，会携带 If-None-Match 与 If-Modefined-Since 请求头，而 If-None-Match 就是 ETag 的值，If-Modefined-Since 就是 Last-Modefined 的值，
3、这时服务端在接收请求后会获取请求头中的这两个值，然后进行比对，若资源没有更新，则响应 304 状态码，表示请求的资源没有更新，客户端可以从自己的缓存里获取，
4、若资源已更新，则响应 200 状态码，同第一次请求一样，又会在响应时携带新的 ETag 与 Last-Modefined 响应头，之后同上逻辑循环。

---还是补充：expires和max-age的区别
他们都是用于指定cookie的生存期，默认情况下cookie是暂时存在的。如果想要让cookie存在一段时间，就要为expires属性设置一个过期时间，现在已经被max-age所取代。max-age是用秒来设置cookie的生存期。

max-age--->http1.1指的是一个文档被访问后的存活时间，这个值是一个相对值。这个相对的是文档的请求时间
expires---->http1.0指的是一个绝对的过期时间，相对文件的最后访问时间或者修改时间。

5、跨域

子问题：什么是同源策略

jsonp--------scripte
document.domain----主域同子域不同
websocket-----origin
window.name
location.hash
cors

6、vue项目的性能优化

7、webpack

8、浏览器的安全问题----即攻击方式--和防御方式

我的答案：
xss攻击--通过将攻击代码放入原本网页的代码中，当运行的时候就会运行这个攻击代码
csrf攻击--通过伪造他人的信息访问网页
防御方式：httponly

重新来过：

xss攻击就是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。

原理就是：网页由html代码构成，html代码一般都由html标签<>构成，所以当我插入的内容中有<和>的时候就会误以为是网页本身的代码。通过这些标签所引入的js代码就会被执行
分为反射型、持久型和dom型
cookie里面设置httponly，过滤用户输入。

-csrf攻击就是跨站点伪造请求
防范：http请求头referer里面是否是当前的链接。随机的token检查。

不说了，我是个什么辣鸡，直接上答案吧
https://blog.nowcoder.net/n/1bf97add9a744f5e9d97e038ef33a589

我被捞了
4.10下午再次一面
希望这次会比上一次好得多。
但还是感觉自己啥都不会（忧愁）

面向面经之我自己的腾讯实习一面面经