今天去面试了兔狗科技，记录一下这次面试，以前的面试忘记记录了都忘记题目了。。
事件冒泡机制
事件冒泡
微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
事件捕获
网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
事件代理
使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。
图片懒加载设计
1、img标签的data-src属性上面保存着我们后面需要动态加载的图片地址，初始化时图片没有设置任何链接；
2、监听scroll事件，计算元素位置并且和浏览器视口相应宽高进行对比即可判断元素是否出现在可视区域中；
3、加载图片，判断是否需要显示图片，需要的话，立即从图片对象中的data-src属性中取得链接并赋值给当前图片的src进行加载
HTML5语义化标签
header元素
header元素代表“网页”或“section”的页眉。通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
footer元素
footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
nav元素
nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
aside元素
aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
section元素
section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
article元素
article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
js数组去重方法
我之前有篇博客已经整理过js常用的几种数组去重方法：《js实现数组去重的六种方法总结》。
MVVM原理
MVVM是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。它包括：1.修改View层，Model对应数据发生变化。2.Model数据变化，不需要查找DOM，直接更新View。
MVVM的实现方式
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
前端性能优化
- 减少HTTP请求数
(1)从设计实现层面简化页面
(2)合理设置HTTP缓存 - 将资源合并与压缩
- 图片懒加载
- 将外部脚本置底
浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源。所以将脚本尽可能的往后挪，可以减少对并发下载的影响。 - 将CSS放在HEAD中
如果将CSS放在其他地方比如BODY中，则浏览器有可能还未下载和解析到CSS就已经开始渲染页面了 - 减少DOM操作
- 图片压缩
xss和csrf
XSS：跨站脚本（Cross-site scripting）
XSS全称“跨站脚本”，是注入攻击的一种。其特点是不对服务器端造成任何伤害，而是通过一些正常的站内交互途径，例如发布评论，提交含有JavaScript的内容文本。这时服务器端如果没有过滤或转义掉这些脚本，作为内容发布到了页面上，其他用户访问这个页面的时候就会运行这些脚本。
CSRF：跨站请求伪造（Cross-site request forgery）
CSRF顾名思义，是伪造请求，冒充用户在站内的正常操作。我们知道，绝大多数网站是通过cookie等方式辨识用户身份（包括使用服务器端Session的网站，因为Session ID也是大多保存在cookie里面的），再予以授权的。所以要伪造用户的正常操作，最好的方法是通过XSS或链接欺骗等途径，让用户在本机（即拥有身份cookie的浏览器端）发起用户所不知道的请求。
跨域解决方式
jsonp
利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据。JSONP请求一定需要对方的服务器做支持才可以。JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性。
CORS
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。CORS优点在于功能更加强大支持各种HTTP Method，缺点是兼容性不如JSONP。
WebSocket
WebSocket和HTTP都是应用层协议，都基于TCP协议。但是WebSocket是一种双向通信协议，在建立连接之后，WebSocket的server与client都能主动向对方发送或接收数据。同时，WebSocket在建立连接时需要借助HTTP协议，连接建立好了之后client与server之间的双向通信就与 HTTP无关了。
nginx代理
通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
大致差不多就是这些问题，面试过程中有些答得不是很好，刚刚放完清明假期，也没有好好准备面试，部分题目面试完以后又上网查询了相关资料以后整理起来了，日后还是要多积累。