前端面试总结

1、如何看待前端框架选型

https://blog.csdn.net/qq_42774426/article/details/86600913

2、vue如何实现双向绑定

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他代码不变。

3、react虚拟DOM是什么

当我们更新了state中的值的时候，React会去调用render()方法来重新渲染整个组件的UI，但是如果我们真的去操作这么大量的DOM，显然性能是堪忧的。所以React实现了一个Virtual DOM，组件的真实DOM结构和Virtual DOM之间有一个映射的关系，React在虚拟DOM上实现了一个diff算法，当render()去重新渲染组件的时候，diff会找到需要变更的DOM，然后再把修改更新到浏览器上面的真实DOM上，所以，React并不是渲染了整个DOM树，Virtual DOM就是JS数据结构，所以比原生的DOM快得多。

4、diff算法将传统的复杂度o(n$^3$)变成o(n$^2$)

策略一（tree diff）：
Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。

策略二（component diff）：
拥有相同类的两个组件 生成相似的树形结构，
拥有不同类的两个组件 生成不同的树形结构。

策略三（element diff）：
对于同一层级的一组子节点，通过唯一id区分。

5、vue组件间传值的方式

• props/$emit（父->子）

  在父组件的data中定义一个数据，可以在子组件中使用props来接受

• 事件传递（子->父）

  在子组件中通过事件，将方法绑定，然后在methods中，完成自定义事件

  在父组件中，通过v-on:自定义事件=函数 并将此函数在method中实现

• 创建一个空的vue实例作为中央事件总线

  通过事件绑定这个自定义事件，通过Event(刚才创建的空实例).emit(自定义事件，传递数据)，同理在需要传递到的组件中，使用Event.$on(自定义事件，数据=> function)

• vuex

  如果项目大了，使用上面这个方面会显得不易于管理，可以采用vuex作为状态管理方法。vuex实现了一个单向数据流，在全局拥有一个State来存放数据。设置为严格模式时，确保state中的值只能在mutations中被修改。getter是State的计算属性。action和mutation类似，是对异步的函数写入这里，以保证mutaions来仅同步实现。module是为了放在一个state显得冗杂，可以module嵌套，每个module都有自己的属性。

6、前端网络攻击

• XSS跨站脚本攻击，开启cookie的HttpOnly

• SQL注入

• CSRF跨站请求伪造，利用浏览器的cookis或服务器的session策略，模拟用户向第三方网站发送恶意请求

  • 解决方式：1、同源检测：可以禁止外域或不受信任的域名对我们发起请求。可以通过origin header或者referer header判断请求源

    ​ 2、Token验证：请求提交的时候携带Token，并且每次的Token都是合法的随机数，采用post去传递token

7、前端跨域问题如何解决

常见的跨域常见

URL	说明	是否允许通信
http://www.domain.com/a.js http://www.domain.com/b.js http://www.domain.com/lab/c.js	同一域名，不同文件或路径	允许
http://www.domain.com:8000/a.js http://www.domain.com/b.js	同一域名，不同端口	不允许
http://www.domain.com/a.js https://www.domain.com/b.js	同一域名，不同协议	不允许
http://www.domain.com/a.js http://192.168.4.12/b.js	域名和域名对应相同ip	不允许
http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js	主域相同，子域不同	不允许
http://www.domain1.com/a.js http://www.domain2.com/b.js	不同域名	不允许

• JSONP

  当为了减轻web服务器的负载，我们把js、css、img等静态资源分离到另一个独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源。动态创建script，再请求一个带参数网址实现跨域通信。

• CORS跨域

  后端修改请求头

• document.domain + iframe跨域问题

  这两个域名必须属于同一个一级域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域。

  通过js强制设置document.domain为基础主域，就实现了同域

• location.hash+iframe

  不同域之间只能通过hash值单向通信，a借助一个辅助页c,再通过与a同域的数据传回，但是会直接暴露在url中，数据容量和类型都有限

  缺陷：只能实现get一种请求不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

• window.name+iframe跨域

  window.name在不同页面（甚至不同域名）加载后依旧存在，并且支持2MB的name值

  var proxy = function(url, callback) {
      var state = 0;
      var iframe = document.createElement('iframe');
  
      // 加载跨域页面
      iframe.src = url;
  
      // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
      iframe.onload = function() {
          if (state === 1) {
              // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
              callback(iframe.contentWindow.name);
              destoryFrame();
  
          } else if (state === 0) {
              // 第1次onload(跨域页)成功后，切换到同域代理页面
              iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
              state = 1;
          }
      };
  
      document.body.appendChild(iframe);
  
      // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
      function destoryFrame() {
          iframe.contentWindow.document.write('');
          iframe.contentWindow.close();
          document.body.removeChild(iframe);
      }
  };
  
  // 请求跨域b页面数据
  proxy('http://www.domain2.com/b.html', function(data){
      alert(data);
  });

8、RESTful API

REST全称是Representational State Transfer（表征性状态转移）

RESTful更多的是一种风格，只要符合标准的框架都是RESTful的

RESTful框架的主要原则

• 对网络上所有的资源都有一个资源标志符。
• 对资源的操作不会改变标识符。
• 同一资源有多种表现形式（xml、json）
• 所有操作都是无状态的（Stateless）

符合上述REST原则的架构方式称为RESTful

参考链接：https://blog.csdn.net/x541211190/article/details/81141459