阿里云提前批前端一面

尽量说慢一点，能拖时间就拖

1.简单介绍项目+遇到的难点
2.HTML、XML、XHTML有什么区别
  HTML（超文本标记语言）是一种标记语言，用于创建网页和Web应用程序。XML（可扩展标记语言）也用于创建网页和Web应用程序；它是动态的，因为它用于传输数据而不是用于显示数据，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
  XHTML 元素是以 XML 格式编写的 HTML 语言。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
3.defer和async的区别（AMD与CMD）
  二者都用于外部脚本，async是异步加载，浏览器在加载页面时，带有 async 的脚本也同时加载，加载完成后会立即执行，如果有一些需要操作 DOM 的脚本加载比较慢时，这样会造成 DOM 还没有加载好，脚本就进行操作，会造成错误。defer是推迟加载，加载完成后还需要等浏览器解析完html以后再执行
4.CSS选择器的优先级
(*通配符选择器)
  选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行。

5.CSS盒模型
  所有HTML元素都可以看做盒子，而CSS盒模型本质上是一个盒子，封装周围的HTML元素，定义了一种长方形的盒子，包括各自的内边距padding，外边距margin，边框border，内容content
6.CSSposition属性（引申）
  BFC、水平居中、垂直居中
7.JS原型链
  在js中，每个函数都有prototype属性，这个属性值是一个对象，同时它带有constructor属性，指向这个构造函数。
  通过new可以创建一个函数的实例，每个实例都有_proto_属性，指向构造函数的prototype对象。
  当我们在一个对象或者方法获取某个值的时候，会先查找实例上是否存在这个值，如果没有的话，就在原型里查找。
  继承跟原型链有关。每个函数都有个原型对象，这个对象用来存储通过这个函数所创建的所有实例的共有属性和方法。在读取某个对象属性的时候，从实例开始，如果实例有就返回，如果没有就找原型对象，找到了就返回。通过实例只能访问原型对象里的值，但是不能修改。这就实现了继承。
8.JS闭包，把变量保存在内存中有什么作用
  内部的变量可以多次重复使用，不会造成全局的变量污染；全局变量可能会造成命名冲突，使用闭包不用担心这个问题，因为它是私有化，加强了封装性。
9.JS this在不同情况下的指向
默认绑定
  •全局环境，默认绑定到window
  •函数独立调用的时候，this默认绑定到window
  •被嵌套的函数独立调用时，this默认绑定到window
  •立即执行的函数this是window
  •闭包的this默认绑定到window
隐式绑定
  •被直接对象所包含的函数调用时，也称为方法调用，this隐式绑定到该直接对象
显示绑定
  •通过call()、apply()、bind()方法把对象绑定到this上，叫做显式绑定。对于被调用的函数来说，叫做间接调用
new绑定
  •如果函数或者方法调用之前带有关键字new，它就构成构造函数调用。对于this绑定来说，称为new绑定
10.浏览器的同源策略
  同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。不同域的页面之间不能相互访问各自的页面内容。
11.http1.0与http2.0
  HTTP1.0 传输内容格式不限制，增加PUT、PATCH、HEAD、OPTIONS、DELETE命令
  HTTP2.0 多路复用、二进制分帧层、首部压缩、服务器推送等
  多路复用：用一个TCP进行连接共享，一个请求对应一个id，这样就可以发送多个请求，解决了http1.0队首阻塞和连接过多的问题
  二进制分帧层：改变了通信两端交互数据的方式，原先是以文本传输，现在要先对数据进行二进制编码，再把数据分成一个一个的帧，接着把帧送到数据流中，最后对方接受帧并拼接成一条消息，再处理请求
  首部压缩：http1.0的首部带有大量信息，每次都要重新发送，http2.0使用encoder来减少需要传输的首部大小，通信双方各自备份索引表，避免了重复首部的发送
  服务器推送：一次请求返回多个响应。
12.浏览器支持多少个请求并发（以谷歌浏览器为例）
  这个是真不会，现在也不会。6个
13.浏览器跨域
  由于浏览器的同源策略，当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
13.1 跨域的方式
1.JSONP
  通常为了减轻web服务器的负担，我们把js、css，img等静态资源分离到另一台'独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。只能处理GET请求。响应容易被拦截。
2.CORS（跨域资源共享）
  和前端没什么关系，客户端会在发送请求时出现两种情况，分别为简单请求和预检请求。对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务器是否允许该跨域请求。服务器确认允许之后，才发起实际的HTTP请求。多源不允许携带cookie。
  CORS是设置哪个头，服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求，前后端都需要设置。1. Access-Control-Allow-Origin不能为*，应为具体域名2. 服务端Access-Control-Allow-Credentials应为true3. 客户端XMLHttpRequest 的 withCredentials=true
3.基于post Message跨域
  是HTML5 XMLHttpRequest Level 2中的API，通常用于获取嵌入页面中的第三方页面（第三方开放api接口如：阿里等公共平台）数据。一个页面发送消息，另一个页面判断来源并接收消息。
4.基于iframe跨域
4.1.window.name + iframe跨域
  三个页面 A.html（1001） B.html（1002） proxy.html（1001）
4.2.document.domain+iframe跨域
  实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
  该方式只能用于二级域名相同的情况下
4.3.location.hash + iframe跨域
  实现原理： a欲与b跨域相互通信，通过中间页c来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
  具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。
5.基于http proxy跨域(了解）
  配合webpack webpack-dev-server实现
6.websocket和nginx反向代理（了解）

14.浏览器CSP内容安全策略
  内容安全策略主要是用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。CSP有如下几个功能：

1. 限制加载其他域下的资源文件，这样即使黑客插入了一个JS文件，这个文件也是无法被加载的
2. 禁止向第三方域提交数据，这样用户数据也不会外泄
3. 禁止执行内联脚本和未授权脚本
4. 还提供上报机制，这样可以帮助我们尽快发现有哪些XSS攻击，以便尽快修复问题。
   可以在http头部设置Content-Security-Policy: default-src http: https：表示只允许通过http、https的方式加载资源；
   还可以通过meta标签内设置http-equiv=’Content-Security-Policy'

14.1 XSS（跨站脚本）

1. 存储型XSS攻击：

• 首先黑客利用站点漏洞将一段恶意脚本代码提交到网站的数据库中；
• 然后用户向网站请求包含了恶意JS脚本的页面；
• 当用户浏览该页面的时候，恶意脚本就会将用户的Cookie等信息数据上传到服务器。

2. 反射型XSS攻击：

• 用户将一段含有恶意JS脚本请求提交给Web服务器，Web服务器收到请求时，又将恶意代码发送给浏览器

3. 基于DOM的XSS攻击

• 通过各种手段将恶意脚本注入到用户页面中，比如通过网络劫持（Wifi路由器劫持、本地恶意软件）在页面传输过程中修改HTML页面的内容。

4. 解决方法：
   使用CSP 或者设置cookie属性http-only，禁止通过js访问cookie。

14.2 CSRF（跨站请求伪造）
  诱导用户打开第三方网站，该网站利用用户的登录状态发起跨站请求。
  一般的 CSRF 攻击类型有三种：
  第一种是 GET 类型的 CSRF 攻击，比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提
交。
  第二种是 POST 类型的 CSRF 攻击，比如说构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。
  第三种是链接类型的 CSRF 攻击，比如说在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。
  解决方法：
  充分利用好cookie的Same-Site属性，即规定浏览器不能在跨域请求中携带 Cookie；
  验证请求的来源站点，因为CSRF攻击大多数都是来自第三方站点。通过http请求头中的Referer和Origin属性实现。referer属性记录了该http请求的来源地址，但有些场景不适合将来源URL暴露给服务器，所以可以设置不用上传，并且referer属性是可以修改的，所以在服务器端校验referer属性并没有那么可靠；origin属性通过XMLHttpRequest、Fetch发起的跨站请求或者Post方法发送请求时，都会带上origin,所以服务器可以优先判断Origin属性，再根据实际情况判断是否使用referer判断。
15.vue组件之间如何进行通信
（1）父子组件间通信
  第一种方法是子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
  第二种是通过 ref 属性给子组件设置一个名字。父组件通过 ＄refs 组件名来获得子组件，子组件通过 ＄parent 获得父组件，这样也可以实现通信。
  第三种是使用 provider/inject，在父组件中通过 provider 提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provider 中的数据。
（2）兄弟组件间通信
  第一种是使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。
  第二种是通过 ＄parent.$refs 来获取到兄弟组件，也可以进行通信。
（3）任意组件之间
  使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。
16.vue双向绑定如何实现
  应用的是数据劫持结合发布者-订阅者模式。首先监听器Observer通过Object.defineProperty()来劫持各个属性上的getter和setter，当数据变化时通知给订阅者Watcher，从而触发相应的监听回调来更新视图。MVVM作为一个数据接口还会有一个解析器Compile，对每个元素节点的指令进行扫描和解析，并替换模板数据，同时绑定相应的更新函数，当订阅者接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。
17.vue中T这个属性
18.前端工程化
19.前端性能优化