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));
}
Q: 思维拓展题: 你有两个玻璃球,有个100米的高楼,求玻璃球在哪个楼层扔下会碎(用的次数最少);
问题的要点: 玻璃球碎(有限个数) ,确定楼层数 , 最少次数 => 就是求最优的公式
在这道题上给秀的一脸,我的第一次的思路
先折半,就变成[1-50][51-100], 那就是 1+50 = 51次 ...
面试大佬说,你用了快排的思路就肯定不是最优的..
憋了许久,想到开平方
, 这样的话,最多只要20次
然后又说给我三个球,在1000米的高楼,判断多少次...但是根据我上面的话,
开立方,
, 那最多不超过30次;
至于第一次丢球的位置如何确定, 就是开平之后的值作为一个区间.
若 N 个球和 M 米的大厦...第一次丢球的高度区间就是这个了
面试大佬说这个还可以...那就暂且告一段落
...回来用万能的搜索引擎找了下..最优方案+最少次数需要考虑的东西很多,没那么简单
传送门: 知乎有人讨论了这个问题;
但是高数还老师了..这种帖子看的一脸懵逼....抽空再好好研究下
Q: webpack 是什么?webpack 常见的优化手段有哪些;
webpack 是一个资源处理工具,它的出现节省了我们的人力和时间;可以对资源打包,解析,区分开发模式等等...
常见的优化手段:
- 分离第三方库(依赖),比如引入dll
- 引入多进程编译,比如happypack
- 提取公共的依赖模块,比如commonChunkPlugin
- 资源混淆和压缩:比如UglifyJS
- 分离样式这些,减小bundle chunk的大小,比如ExtractTextPlugin
- GZIP 压缩,在打包的时候对资源对齐压缩,只要部署的服务器能解析即可..减少请求的大小
- 还有按需加载这些,一般主流的框架都有对应的模块懒加载方式.
- 至于tree shaking目前webpack3/4已经默认集成
网友评论