首页 > 其他分享> 文章详细

面试小记（一）

2021-12-16 14:32:41 阅读：121 来源： 互联网

标签：跨域复杂度面试 ajax iframe 小记 com 页面

一、关于Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。

1.vuex有哪几种属性

state, getters, mutations, actions, modules。

1）state：vuex的基本数据，用来存储变量，只能有一个（字符串，数组，对象）

2）getters：从基本数据(state)派生的数据，相当于state的计算属性

3）mutations：提交更新数据的方法，相当于我们vue里面的methods，也是定义方法的，只不

过这个方法可以在多个组件调用了。但必须是同步的(如果需要异步使用actions)

方法定义

使用$\color{red}{commit}$调用

最后使用

4）actions：和mutations的功能大致相同，不同之处在于 ==》a. actions 提交的是

mutation，而不是直接变更状态。 b. actions 可以包含任意异步操作。

调用的话就不是使用commit了，而是使用$\color{red}{dispatch}$

5）modules：模块化vuex，可以让每一个模块拥有自己的state、mutations、actions、getter

s,使得结构非常清晰，方便管理。

定义模块A

2.Vuex优点（不使用Vuex的缺点）

可维护性下降（你要想修改数据，你得维护三个地方）
可读性会下降（因为一个组件里的数据，你根本就看不出来是从哪来的）
增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。
兄弟组件通信用Vuex

二、iframe

1. iframe优缺点

优点：

1）iframe能够把嵌入的网页原样展现出来；
2）模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；
3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；
4）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；
5）重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；
6）方便制作导航栏。

缺点:

1）样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；
2）代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；
3）框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；
4）链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去；
5）产生多个页面，不易管理；
6）多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
7）iframes阻塞页面加载，影响网页加载速度

2. iframe与frame比较

1）frame不能脱离frameSet单独使用，iframe可以；
2）frame不能放在body中；
3）嵌套在frameSet中的iframe必需放在body中，不嵌套在frameSet中的iframe可以随意使用；
4）frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制；
5）如果在同一个页面使用了两个以上的iframe，在IE中可以正常显示，在firefox中只能显示出第一个；使用两个以上的frame在IE和firefox中均可正常。

三、跨域

1.什么是跨域？

当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。

https://www.cnblogs.com/hongplum
https://www.cnblogs.com/hongplum/p/14681987.html
没跨域同源（协议、域名、端口号相同）

http://www.cnblogs.com/hongplum
https://www.cnblogs.com/hongplum
跨域协议不同（http/https）

https://www.blog.com/hongplum
https://www.cnblogs.com/hongplum
跨域主域名不同

https://blog.cnblogs.com/hongplum
https://www.cnblogs.t.com/hongplum
跨域子域名不同（www/blog）

https://blog.cnblogs.com:80
https://blog.cnblogs.com:8080
跨域端口号不同（80/8080）

2.跨域产生原因？(原文：https://blog.moonlet.cn/archives/563)

出于浏览器的同源策略限制。

同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。。所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。

非同源会出现的限制

无法读取非同源网页的cookie、localstorage等
无法接触非同源网页的DOM和js对象
无法向非同源地址发送Ajax请求

3.解决跨域的方法

1）nginx反向代理解决跨域（前端常用）

正向代理：a=>c=>b

a-->b访问不了，可以找个中间的服务器c, 先访问c再从c到b,类似曲线救国。
明确访问的目的地，但是用户不知道中间的代理服务器。（忽略中间服务器）

反向代理：a=>c<=b

a明确访问c代理服务器，但是不知道c的内容从哪里来，c反向从别的地方拿来数据。(忽略的是目标地址)

浏览器可以访问a,而服务器之间不存在跨域问题，浏览器先访问a的服务器c，让c服务器作为代理去访问b服务器,拿到之后再返回数据给a。

例如：
nginx是静态服务器，跨域请求放在api下面好管理http://www.baidu.com:80/api/user
可以在nginx下面的config下面的nginx.conf里面配置从80端口进来的就拦截一下，代理到81端口

server{
    location /api {
        //拦截一下
        proxy_pass  http://www.baidu.com:81;
    }
}

2）添加响应头解决跨域（常用）

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

3）通过jsonp解决跨域（老方法）

实现原理：通常为了减轻web服务器的负载，我们把js、css、图片等静态资源分离到另一台独立域名的服务器上，在html页面中再通过script标签从不同域名下加载静态资源，而被浏览器允许。

优点

它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；
它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数据，至于提供服务以后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同一个jsonp服务。

缺点

它只支持GET请求而不支持POST等其它类型的HTTP请求
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
jsonp在调用失败的时候不会返回各种HTTP状态码。
安全性低，万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

4）使用HTML5中新引进的window.postMessage方法来跨域传送数据

四、防抖和节流

窗口的resize、scroll，输入框内容校验等操作时，如果这些操作处理函数较为复杂或页面频繁重渲染等操作时，如果事件触发的频率无限制，会加重浏览器的负担，用户体验不好。可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。

1.防抖（debounce）

当持续触发事件时，debounce会合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件

function debounce(fn, delay) {
  var ctx;
  var args;
  var timer = null;

  var later = function () {
    fn.apply(ctx, args);
    // 当事件真正执行后，清空定时器
    timer = null;
  };

  return function () {
    ctx = this;
    args = arguments;
    // 当持续触发事件时，若发现事件触发的定时器已设置时，则清除之前的定时器
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 重新设置事件触发的定时器
    timer = setTimeout(later, delay);
  };
}

效果：

2.节流（throttle ）

throttle会合并一定时间内的事件，并在该时间结束时真正去触发一次事件

function throttle(fn, delay) {
  var ctx;
  var args;
  // 记录上次触发事件
  var previous = Date.now();

  var later = function () {
    fn.apply(ctx, args);
  };

  return function () {
    ctx = this;
    args = arguments;
    var now = Date.now();
    // 本次事件触发与上一次的时间比较
    var diff = now - previous - delay;

    // 如果隔间时间超过设定时间，即再次设置事件触发的定时器
    if (diff >= 0) {
      // 更新最近事件触发的时间
      previous = now;
      setTimeout(later, delay);
    }
  };
}

效果：

两者间的核心区别就在于持续触发事件时，前者合并事件并在最后时间去触发事件，而后者则是隔间时间触发一次～

五、数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少？

数组可以直接根据索引取的对应的元素，所以不管取哪个位置的元素的时间复杂度都是 O(1)，无论数据规模多大，都可以在一次计算后找到目标
$\color{red}{得出结论：消耗时间几乎一致，差异可以忽略不计}$

延伸

时间复杂度O(1),O(n), O(logn), O(nlogn)。算法时间复杂度有的时候说O(1), O(n), O(logn), O(nlogn)，这是算法的时空复杂度的表示。不仅仅用于表示时间复杂度，也用于表示空间复杂度。O后面的括号中有一个函数，指明某个算法的耗时/耗空间与数据增长量之间的关系。其中的n代表输入数据的量。O描述的是算法的运行时间和输入数据之间的关系。

1.时间复杂度为O(1)。

是最低的时空复杂度了，也就是耗时/耗空间与输入数据大小无关，无论输入数据增大多少倍，耗时/耗空间都不变。
$\color{red}{哈希算法}$就是典型的O(1)时间复杂度，无论数据规模多大，都可以在一次计算后找到目标。

2.时间复杂度为O(n)。

O(n)就代表数据量增大几倍，耗时也增大几倍。
比如常见的$\color{red}{遍历算法}$。
O(n^2)就代表数据量增大n倍时，耗时增大n的平方倍，这是比线性更高的时间复杂度。
比如$\color{red}{冒泡排序}$，就是典型的O(n^2)的算法，对n个数排序，需要扫描n×n次。

3.时间复杂度为O(logn)。

当数据增大n倍时，耗时增大logn倍（这里的log是以2为底的，比如，当数据增大256倍时，耗时只增大8倍，是比线性还要低的时间复杂度）。
$\color{red}{二分查找}$就是O(logn)的算法，每找一次排除一半的可能，256个数据中查找只要找8次就可以找到目标。

4.时间复杂度为O(nlogn)。

就是n乘以logn，当数据增大256倍时，耗时增大256*8=2048倍。这个复杂度高于线性低于平方。
$\color{red}{归并排序}$就是O(nlogn)的时间复杂度。

六、axios

1.axios、ajax和fetch区别

1）axios

通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios。

优点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

axios({
    url: 'http://jsonplaceholder.typicode.com/users',
    method: 'get',
    responseType: 'json', // 默认的
    data: {
        //'a': 1,
        //'b': 2,
    }
}).then(function (response) {
    console.log(response);
    console.log(response.data);
}).catch(function (error) {
    console.log(error);
})

2）ajax

优点：

提高了性能和速度：减少了客户端和服务器之间的流量传输，同时减少了双方响应的时间，响应更快，因此提高了性能和速度
交互性好：使用ajax，可以开发更快，更具交互性的Web应用程序
异步调用：Ajax对Web服务器进行异步调用。这意味着客户端浏览器在开始渲染之前避免等待所有数据到达。
节省带宽：基于Ajax的应用程序使用较少的服务器带宽，因为无需重新加载完整的页面
底层使用XMLHttpRequest
拥有开源JavaScript库： JQuery，Prototype，Scriptaculous等。
AJAX通过HTTP协议进行通信。

缺点：

增加了设计和开发的时间
比构建经典Web应用程序更复杂
Ajax应用程序中的安全性较低（容易收到CSRF和XSS攻击)，因为所有文件都是在客户端下载的。
可能出现网络延迟的问题
禁用javascript的浏览器无法使用该应用程序
由于安全限制，只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息，则无法在AJAX中显示。

$.ajax({
    url: 'http://jsonplaceholder.typicode.com/users',
    type: 'get',
    dataType: 'json',
    data: {undefined
        //'a': 1,
        //'b': 2,
    },
    success: function (response) {
        console.log(response)；
    }
})

3）fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像$.ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

优点：

符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象中
更好更方便的写法
更加底层，提供的API丰富（request，response）
脱离了XHR，是ES规范里新的实现方式

缺点：

fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
fetch默认不会带cookie，需要添加配置项
fetch不支持abort,不支持超时控制，使用setTimeout及Promise.reject和Promise.race结合setTimeout实现的超时控制并不能阻止请求过程继续在后台执行，造成了量的浪费
fetch没有办法原生监测请求的进度，而XHR可以

try {
    let response = await fetch(url);
    let data = response.json();
    console.log(data);
} catch(e) {
    console.log("Oops, error", e);
}

标签：跨域,复杂度,面试,ajax,iframe,小记,com,页面
来源： https://www.cnblogs.com/hongplum/p/15697823.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

面试小记（一）

一、关于Vuex

1.vuex有哪几种属性

1）state：vuex的基本数据，用来存储变量，只能有一个（字符串，数组，对象）

2）getters：从基本数据(state)派生的数据，相当于state的计算属性

3）mutations：提交更新数据的方法，相当于我们vue里面的methods，也是定义方法的，只不

4）actions：和mutations的功能大致相同，不同之处在于 ==》a. actions 提交的是

5）modules：模块化vuex，可以让每一个模块拥有自己的state、mutations、actions、getter

2.Vuex优点（不使用Vuex的缺点）

二、iframe

1. iframe优缺点

2. iframe与frame比较

三、跨域

1.什么是跨域？

2.跨域产生原因？(原文：https://blog.moonlet.cn/archives/563)

非同源会出现的限制

3.解决跨域的方法

1）nginx反向代理解决跨域（前端常用）

2）添加响应头解决跨域（常用）

3）通过jsonp解决跨域（老方法）

4）使用HTML5中新引进的window.postMessage方法来跨域传送数据

四、防抖和节流

1.防抖（debounce）

2.节流（throttle ）

五、数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少？

1.时间复杂度为O(1)。

2.时间复杂度为O(n)。

3.时间复杂度为O(logn)。

4.时间复杂度为O(nlogn)。

六、axios

1.axios、ajax和fetch区别

1）axios

2）ajax

3）fetch