今日面试题汇总2019-03-29

Q: CSS 有哪些样式可以给子元素继承!

可继承的:font-size,font-weight,line-height,color,cursor等
不可继承的一般是会改变盒子模型的:display,margin、border、padding、height等

更加全面的可以到引擎找

Q: CSS 中transition和animate有何区别? animate 如何停留在最后一帧!

transition一般用来做过渡的, 没时间轴的概念, 通过事件触发(一次),没中间状态(只有开始和结束)
而animate则是做动效,有时间轴的概念(帧可控),可以重复触发和有中间状态;
过渡的开销比动效小,前者一般用于交互居多,后者用于活动页居多;
至于如何让animate停留在最后一帧也好办,就它自身参数的一个值就可以了

animation-fill-mode: forwards;  
<!--backwards则停留在首帧,both是轮流-->

Q: 求[1, 10, 11, -1,'-5',12, 13, 14, 15, 2, 3, 4, 7, 8, 9]内最大值与最小值之差

// 来一个很粗糙的版本,只当传入是数组且可以隐性转为数字的
function MaxMinPlus(arr) {
  // 返回最大值与最小值之差
  return Array.isArray(arr) ? Math.max.apply(Math, arr) - Math.min.apply(Math, arr) : console.log('传入的不是数组亦或者未能解决的错误')
}

// 结果是 20

// 若是要完善的话,要考虑传入的是非数组,
//传入字符串的时候要判断,然后切割为数组..
// 都要考虑进去代码量不短

Q: 请给Array实现一个方法,去重后返回重复的字符(新数组)‘’

 var testArr = [1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3];
    
  Array.prototype.extraChar = function(){
      var cacheExtraChar = []; // 缓存重复出现的字符
      var that = this; // 缓存 this;
      this.map(function(item,index){
          // 怎么理解这段代码呢?
          // 就是向前往后查找一遍和从后往前查找一遍,不等就是没有重复
          // 为什么还要判断一遍缓存,是过滤缓存数组内多次写入
          (that.indexOf(item) !== that.lastIndexOf(item)) && cacheExtraChar.indexOf(item) === -1 ? cacheExtraChar.push(item) : -1;
      });
      return cacheExtraChar;
  }


testArr.extraChar(); // [1, 3, 7, 2, 4]

// 若是还需要排序就再排序下

[1,6,8,3,7,9,2,7,2,4,4,3,3,1,5,3]
.extraChar()
.sort(function(a,b){return a-b}) // [1, 2, 3, 4, 7]

Q: 谈谈你对 TCP 的理解;

文章连接

Q: HTTP 和 HTTPS 有何差异? 听说过 SPDY 么?

我只是粗浅的回答了下...

HTTP相对于 HTTPS来说,速度较快且开销较小(没有 SSL/TSL) 对接,默认是80端口;

HTTP容易遭受域名劫持,而HTTPS相对来说就较为安全但开销较大(数据以加密的形式传递),默认端口为443..

HTTP是明文跑在 TCP 上.而HTTPS跑在SSL/TLS应用层之下,TCP上的

Q: 那么 HTTPS中的TLS/SSL是如何保护数据的...

一般有两种形式,非对称加密,生成公钥和私钥,私钥丢服务器,公钥每次请求去比对验证;

更严谨的采用 CA(Certificate Authority),给密钥签名....

Q: 你说到对称加密和非对称加密,能说说整个流程如何运转的么(HTTPS)

对称加密:
- 双方都有同样的密钥,每次通讯都要生成一个唯一密钥,速度很快
- 安全性较低且密钥增长的数量极快
非对称加密(一般用 RSA)
- 安全性很高,对资源消耗很大(CPU),目前主流的加密算法(基本用于交换密钥或签名,而非所有通讯内容)
CA(数字签名):
- 这个是为了防止中间人给偷换了造成数据被窃取而诞生的
- 用一些权威机构颁布的算法来签名,权威机构做中间人,通讯过程都会跟机构核对一遍

懂得真心不多,回来找了下相关资料,有兴趣可以点击看看;

深入揭秘HTTPS安全问题&连接建立全过程
深入理解 https 通信加密过程:口语化 " : 看了上面那篇文章来看下面,会清晰很多

Q: SPDY 听说过么.什么来的?

谷歌推行一种协议(HTTP 之下SSL之上[TCP]),可以算是HTTP2的前身,有这么些优点

压缩数据(HEADER)
多路复用
优先级(可以给请求设置优先级)

而这些优点基本 HTTP2也继承下来了..

Q: 你对 HTTP 的状态吗了解多少...

这里列举一丢丢常见的..

1XX: 一般用来判断协议更换或者确认服务端收到请求这些
- 100: 服务端收到部分请求,若是没有拒绝的情况下可以继续传递后续内容
- 101: 客户端请求变换协议,服务端收到确认
2xx: 请求成功,是否创建链接,请求是否接受,是否有内容这些
- 200: (成功)服务器已成功处理了请求。
- 201: (已创建)请求成功并且服务器创建了新的资源。
- 202: (已接受)服务器已接受请求，但尚未处理。
- 204: (无内容)服务器成功处理了请求，但没有返回任何内容。
3XX: 一般用来判断重定向和缓存
- 301: 所有请求已经转移到新的 url(永久重定向),会被缓存
- 302: 临时重定向,不会被缓存
- 304: 本地资源暂未改动,优先使用本地的(根据If-Modified-Since or If-Match去比对服务器的资源,缓存)
4XX: 一般用来确认授权信息,请求是否出错,页面是否丢失
- 400: 请求出错
- 401: 未授权,不能读取某些资源
- 403: 阻止访问,一般也是权限问题
- 404: 页面丢失,资源没找到
- 408: 请求超时
- 415: 媒介类型不被支持，服务器不会接受请求。
5XX: 基本都是服务端的错误
- 500: 服务端错误
- 502: 网关错误
- 504: 网关超时

Q: HTTP的请求报文是怎么样的,能大体的说下么?

HTTP 的请求报文 = 请求行 + 请求头 + 请求体;

请求行: 这个好理解就是访问的方法+ 协议+ 访问的 URL 构成
请求头: 这个也好理解,比如 accept,content-type,user-agent这类值键对,服务端可以直接读取的
请求体: 比如 POST 提交的一个表单,我们编码后放在上面需要传递的

想深入了解的具体引擎搜索

Q: 请求报文知道,那你说说cookie是如何跟随请求的?

Cookie 就是保存在 HTTP 协议的请求或者应答头部(Cookie 是由服务端生成),这样一路漂泊...

Q: Cookie 隔离是什么,如何做;

cookie 隔离就是降低 header 的数据包含,以达到加快访问速度的目的

方案: 静态资源丢 CDN或者非主域来加载

Q: 浏览器缓存和服务端的缓存控制你了解多少,说说看?

文章链接

Q:有字符串 var test='abc345efgabcab'; 请根据提示实现对应要求

去掉字符串中的 a,b,c 字符 ,形成结果'345efg';

test.replace(/[abc]/g,''); // "345efg"

将字符串的数字用括号括起来, 形成结果: abc[3][4][5]efg....'

test.replace(/\d/g,'[$&]');  // "abc[3][4][5]efgabcab"

// 若是有分组则按照$1, $2, $3的形式进行引用，而 $& 则表示的是整个正则表达式匹配的内容。

将字符串中的每个数字的值分别乘以2,输出:'abc6810....'

var temp = test.split('').map(function(item){
  return /^\d$/.test(item) ? item * 2 : item;
}).join('');

// "abc6810efgabcab"

Q: Vue-Router的两种模式主要依赖什么实现的

hash主要依赖location.hash来改动 URL,达到不刷新跳转的效果.每次 hash 改变都会触发hashchange事件(来响应路由的变化,比如页面的更换)
history主要利用了 HTML5的 historyAPI 来实现,用pushState和replaceState来操作浏览历史记录栈

Q: MVVM 和 MVC 的差异? 听说过 MVP?

这类的文章好多,三个开发模式的诞生都有前后,不是同时出现的.

传送门:

Q: 你对基础算法这块掌握的如何....

来,这纸给你,写个快排试试...

// 快排的大体思路是这样的,
// 找个中位值,从原数组切割出来,
// 剩下的作为两个数组,每次都去比较;
// 直到递归的结果出来, 平均复杂度O(nlog n)

function quickSort(arr) {
  //如果数组长度<=1,则直接返回
  if (arr.length <= 1) {
    return arr;
  }
  // 中间位(基准)取长度的一半向下取整
  var pivotIndex = Math.floor(arr.length / 2);
  //把中间位从原数组切割出来, splice 会改变原数组!!!!
  var pivot = arr.splice(pivotIndex, 1)[0];
  //定义两个空数组来存放比对后的值
  var left = [];
  var right = [];

  //比基准小的放在left，比基准大的放在right
  for (var i = 0 , j = arr.length; i < j; i++) {
    if (arr[i] <= pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  //递归下去  arr = [ left , pivot , right]
  // 怎么个递归法,就是比对后的数组还是会重复之前的取基准再切开比较..直到最后没有可以切了
  return quickSort(left).concat([pivot], quickSort(right));
}