欢聚时代2017前端A卷

本文主要是介绍欢聚时代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属性值：
color：用于指定颜色的控件。
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].οnclick=(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;
}
}