前端试题

1. 请写出下列代码段的输出结果

1)alert(-1? true: false) // true

2)alert("" ? true: false) // false

3)alert(0 ? true: false) // false

2. MVC, MVP, MVVM 区别

参考链接（阮一峰）：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

3.如何获取浏览器URL中查询字符串中的参数？

详见location对象

location.href, location.search

4.写出使用this的典型应用

1）在html元素事件属性中使用

2）构造函数

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}
3）input点击，获取值

<input type="button" id="text" value="点击一下" />
<script type="text/javascript">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value); //此处的this是按钮元素
}
</script>
4）

apply()/call()求数组最值

var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(this, numbers);
console.log(maxInNumbers); // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215);
console.log(maxInNumbers); // 458
5. call ,apply, bind 理解

call、apply、bind的作用是改变函数运行时this的指向

getName.call(obj, 'Dot', 'Dolby') 我的理解是 getName方法被obj调用；

call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。

var arr = [1, 2, 3, 89, 46]
var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89

var obj = {
    message: 'My name is: '
}

function getName(firstName, lastName) {
    console.log(this.message + firstName + ' ' + lastName)
}

getName.call(obj, 'Dot', 'Dolby')

apply接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89

var obj = {
    message: 'My name is: '
}

function getName(firstName, lastName) {
    console.log(this.message + firstName + ' ' + lastName)
}

getName.apply(obj, ['Dot', 'Dolby'])// My name is: Dot Dolby

bind返回对应函数, 便于稍后调用； apply, call则是立即调用。

在 ES6 的箭头函数下, call 和 apply 将失效;

6. 箭头函数内部this：

箭头函数内部的this是词法作用域，由上下文确定。

如果使用箭头函数，以前的那种hack写法就不需要了：

var that = this;

箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()

7.谈谈你对模块化的理解

所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数

8. TCP三次握手

位码即tcp标志位,有6种标示:SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急)

Sequence number(顺序号码) Acknowledge number(确认号码)

第一次握手：主机A发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器，主机B由SYN=1知道，A要求建立联机；

第二次握手：主机B收到请求后要确认联机信息，向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包

第三次握手：主机A收到后检查ack number是否正确，即第一次发送的seq number+1,以及位码ack是否为1，若正确，主机A会再发送ack number=(主机B的seq+1),ack=1，主机B收到后确认seq值与ack=1则连接建立成功。

完成三次握手，主机A与主机B开始传送数据。

参考链接：https://www.cnblogs.com/rootq/articles/1377355.html

9.前端优化

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源

按粒度大致可以分为两类：

第一类是页面级别的优化

1. 减少 HTTP请求数

减少 HTTP请求数的主要途径包括：

(1). 从设计实现层面简化页面

(2). 合理设置 HTTP缓存

(3). 资源合并与压缩

(4). CSS Sprites（雪碧图，精灵图）

（5）Lazy Load Images

（6）将外部脚本置底（将脚本内容在页面信息内容加载后再加载）

（7）避免重复的资源请求

第二类则是代码级别的优化

减少dom 操作 DOM操作应该是脚本中最耗性能的一类操作

10.移动端点击穿透问题和滑动穿透问题

在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟

这个时间大概在300ms左右（即使给元素绑定的是touch事件，touchstart=>touchend=>click，click事件依然会被触发）

解决方案

不要混用touch和click

吃掉或者消费掉touch之后的click

把页面内所有click全部换成touch事件（touchstart、touchend、tap）

,需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span+tap控制跳转

 滑动穿透分析
出现滑动穿透的问题是滚动条在body元素上，而滑动的时候body自然是可以响应的
解决方案原理：禁用body的滚动条，由于滚动条的位置会丢失，所以需要在展示弹窗之前保存滚动条的位置，隐藏弹窗时恢复滚动条的位置。

箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

猜你喜欢