欢聚时代2017前端A卷

1、使用了"use strict"后，以下哪些描述错误

正确答案: A B C

"use strict";

var x = 17;

with (obj) {

  x;

}

//会报obj未定义的错误

"use strict";

var x;
delete x;

//运行正常

function f(a){
"use strict";
a = 42;

    return a==arguments[0];

}

f(5); //运行结果为true

function f(str){

"use strict";

    return eval(str);

}

f(‘alert(1)’);

//运行正常，弹窗1的对话框

2、以下输出结果为true的有

正确答案: A B C

’’==false

’’==0

’’==[]

’’=={}

3、以下代码执行的结果是（）

var a = 0;

function b(c) {

 console.log(a);

 var a = 1;

 arguments[0] = 2;

 console.log(c);

 console.log(a);

}

b(3);

console.log(a);

正确答案: A

undefined,2,1,0

1,2,2,0

undefined,3,1,0

undefined,3,2,0

4、以下代码的执行后将输出（）

var a = 0;

var obj = {

 a:'obj',

 b:function(a){

 setTimeout(function(){

 console.log(this.a);

 },1000)

 }

}

obj.b(1);

正确答案: C

undefined

’obj’

0

1

5、以下运算结果不是number类型的是

正确答案: D

"a"-1

1/0

0 && "a"

new Number(1)

说明：12345题见欢聚时代2017前端C卷

6、你如何对网站的文件和资源进行优化?期待的解决方案包括：（ ）

正确答案: A B C D

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

解析：
文件合并（目的是减少http请求）

文件压缩：目的是直接减少文件下载的体积；

使用 CDN （内容分发网络）来托管资源；

缓存的使用（并且多个域名来提供缓存）

GZIP 压缩你的 JS 和 CSS 文件

7、WEB应用从服务器主动推送Data到客户端有那些方式？

正确答案: A B C D E

html5 websoket

WebSocket通过Flash

XHR长时间连接

XHR Multipart Streaming

不可见的Iframe

8、以下选项中，哪些是html5 input的新属性

正确答案: B C E

file

search

number

reset

tel

解析：file和reset不是H5新增的，以前就有

在HTML5中，为input元素新增了以下一些type属性值：
colo
4000
r：用于指定颜色的控件。

date：用于输入日期的控件（年，月，日，不包括时间）。

month：用于输入年月的控件，不带时区。

week：用于输入一个由星期-年组成的日期，日期不包括时区

time：用于输入不含时区的时间控件。

datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。

datetime-local：用于输入日期时间控件，不包含时区。

email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

number: 用于应该包含数值的输入域。只能输入数字

range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果

url：用于编辑URL的字段。

9、以下单词属于javascript关键字：

正确答案: A B C

with

void

class

parent

10、IE和DOM事件流的区别

正确答案: A B C

执行顺序不一样

参数不一样

this指向问题

参数一样，但事件不加on

解析：区别如下
IE采用冒泡型事件，DOM使用先捕获后冒泡事件

事件侦听函数的参数不一样

this指向不同，IE下时间的绑定this指向window

11、typeof function( ){} 输出的是 1 。

答案：function

12、在ES6中提供了（）用于二进制的操作。

答案：ArrayBuffer、TypeArray、DataView

13、css reset的作用和用途（）。

答案：reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

14、写出4个正则表达式中的特殊字符 。

答案：[]、/、{}、()、^、$、*、+、.、?、\、|

15、浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的进程叫做（）

答案：reflow

16、请写出HTML5新增的布局标签?

答案

header、footer、nav、menu、artical、section、figure、aside、hgroup

17、请使用CSS3画出一个线性渐变，渐变的方向是从右上角到左下角，起点颜色是从白色到黑色，请写出标准的写法 （）

答案：background:linear-gradient(to bottom left,#fff,#000)

18、CSS属性position有哪些属性值？ 

答案：relative、absolute、fixed、static

19、HTML5的设计目的 ？

答案：为了在移动设备上支持多媒体

20、==和===的区别是？

答案：是否会进行强制类型转换

21、请问当执行这句代码var jay = new Person();时new运算符所做的工作，请尽量详细描述。

答案：
创建一个空对象

将构造函数的作用域赋给新对象（this指向新对象）

执行构造函数中的代码（为新对象添加属性）

返回新对象（返回this）

22、什么是TCP中的RTT和RTO？

答案：RTT，客户端到服务器往返时间。RTO，重传超时时间。

23、你觉得https和http的区别是什么？有什么优点和缺点？

区别：

1. http 的URL 以http:// 开头，https以https:// 开头

2. http 标准端口是80 ，https是443

3.https 协议需要到ca申请证书，http不需要。

4.http 是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议

5.http 的连接很简单,是无状态的，https协议是由SSL+http协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全

优点：

1.  通过证书可以更信任服务器

2.  更安全，防篡改

缺点：

1.  https 需要证书。

2.  因为对传输进行加密，会一定程度增加cpu消耗。

3.  由于https 要还密钥和确认加密算法的需要，所以首次建立连接会慢一些。

4.  带宽消耗会增加。

24、请实现一个闭包，并说明它的作用。

答案：

for(var i=0;i<5elements.length;i++){

    elements[i].onclick=(function(num){

        return num;

    })(i);

}

获取包含函数变量i的值

25、请用js实现一个简单的双向循环链表，定义出类的成员变量和主要方法，并实现从链表头部插的方法，尽量用ES6完成

答案：

class Chain {
constructor() {
this.size = 0;
this.head = null;
}
travel() { } // 遍历
getHead() {
// 得到链表head
if (this.head) {
return this.head;
}
}
insertHead(data) {
let node = new Node(data);
this.size++;
if (this.head === null) {
node.prev = node;
node.next = node;
this.head = node;
} else {
let p = this.head;
node.next = p;
p.prev = node;
node.prev = p.next;
p.next = node;
}
}

}

class Node {
constructor(data) {
this.next = null;
this.prev = null;
this.data = data;
}

}

【主要考察点】

1.node 的数据结构

2.Chain 的size，head

3. 遍历和获取头节点

26、请用HTML5+CSS3实现左中右的三列布局（图1），默认内容宽度为960px并居中，里面的六种颜色可自由配色，但不能超过七种色彩；

当窗口宽度小于960px并大于768px时，变成（图2）的布局；

当窗口宽度小于768px时，变成（图3）的布局。（10分）



答案：

HTML：

<div class="container">

    <div class="left"></div>

    <div class="center">

        <div class="pink pink-color "></div>

        <div class="yellow yellow-color"></div>

        <div class="yellow yellow-color"></div>

        <div class="black black-color"></div>

        <div class="black black-color"></div>

        <div class="yellow yellow-color"></div>

        <div class="yellow yellow-color"></div>

    </div>

    <div class="right"></div>

</div>

CSS：

html,body{

    width: 100%;

    margin: 0;

    padding: 0;

    font-size: 0;

}

.container{

    width: 100%;

    margin: 0 auto;

}

.left{

    background: green;

}

.right{

    background: purple;

}

.pink-color{

    background: pink;

    box-sizing: border-box;

    border: gray 10px solid;

}

.yellow-color{

    background: yellow;

    box-sizing: border-box;

    border: gray 10px solid;

}

.black-color{

    background: black;

    box-sizing: border-box;

    border: gray 10px solid;

}
@media (min-width: 960px){

    .container{

        width: 960px;

    }

    .left{

        width: 16.6%;

        height: 300px;

        display: inline-block;

    }

    .center{

        display: inline-block;

        width: 74.999%;

        font-size: 0;

        height: 300px;

    }

    .right{

        display: inline-block;

        width: 8%;

        height: 300px;

    }

    .pink{

        width: 100%;

        display: inline-block;

        height: 33.3%;

    }

    .yellow{

        width: 25%;

        display: inline-block;

        height: 33.3%;

    }

    .black{

        width: 50%;

        display: inline-block;

        height: 33.3%;

    }

}
@media (min-width: 768px) and (max-width: 960px) {

    .container{

        width: 960px;

        margin: 0 auto;

    }

    .pink,.yellow,.black{

        width:100%;

        height: 100px;

    }

    .center{

        float: left;

        width: 33.3%;

        border: 10px white solid;

        border-top: 0;

    }

    .left{

        float: left;

        width: 30%;

        height: 100px;

    }

    .right{

        float: left;

        width: 33.3%;

        height: 100px;

    }

}
@media (max-width: 768px){

    .container{

        width: 100%;

        height: 100px;

    }

    .left,.right{

        width: 100%;

        display: block;

        height: 100px;

        box-sizing: border-box;

        border: gray 10px solid;

    }

    .center{

        width: 100%;

    }

    .pink,.yellow,.black{

        width: 100%;

        height: 100px;

    }

}