途牛前端工程师在线笔试题（含答案和全面解析）

时间 2019-11-08

标签前端工程师在线笔试答案全面解析栏目快乐工作繁體版

原文原文链接

途牛前端工程师在线笔试题

知识点列表：

字符串转数字css
Math对象方法：round() pow() floor() ceil()html
parseInt前端
Math对象方法：round() pow() floor() ceil()html5
'use strict'java
对象字面量jquery
Object.create()css3
arrayweb
window方法ajax
jQuery筛选sql
css：盒子模型
版本控制
substring
Math方法
Array方法
js全局属性
html结构
浏览器端的存储技术
HTML5都有哪些新的JS API
JavaScript内部对象
js继承工做原理
减低页面加载时间的方法
文档类型
为何利用多个域名来存储网络资源会更有效？

1. 在JavaScript中定义变量var a="35", var b="7"运算a%b的结果为:

　　A. 357　　B. 5　　C. 0　　D. 57

　　答案：C. 0

　　解析：js中把字符串转换成数字有三种方法：转换函数、强制类型转换、利用js变量弱类型转换。

　　　　　　　　1）转换函数

　　　　　　　　js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其余类型返回的都是NaN(Not a Number)。

　　　　　　　　parseInt()方法还有基模式，能够把二进制、八进制、十六进制或其余任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的

　　　　　　　　parseFloat()方法与parseInt()方法的处理方式类似。
　　　　　　　　使用parseFloat()方法的另外一不一样之处在于，字符串必须以十进制形式表示浮点数，parseFloat()没有基模式。　　　　　

 1 console.log(parseInt("1245red"));       //1245
 2 console.log(parseFloat("1245red"));     //1245
 3 console.log(parseInt("1245.5red"));     //1245
 4 console.log(parseFloat("1245.555red")); //1245.555
 5 console.log(parseInt("red"));           //NaN
 6 console.log(parseInt("0xA"));           //10
 7 
 8 console.log(parseInt("AF", 16));        //175   10*16+15
 9 console.log(parseInt("10", 2));         //2
10 console.log(parseInt("10", 8));         //8
11 console.log(parseInt("10", 10));        //10
12 
13 //若是十进制数包含前导0，那么最好采用基数10，这样才不会意外地获得八进制的值
14 console.log(parseInt("010"));
15 console.log(parseInt("010",8));         //8
16 console.log(parseInt("010",10));        //10
17 
18 console.log(parseFloat("1234red"));     //1234
19 console.log(parseFloat("0xA"));         //0
20 console.log(parseFloat("22.5"));        //22.5
21 console.log(parseFloat("22.35.5"));     //22.35
22 console.log(parseFloat("0908"));        //908
23 console.log(parseFloat("blue"));        //NaN

　　　　　　　　2）强制类型转换

　　　　　　　　使用强制类型转换能够访问特定的值，即便它是另外一种类型的。ECMAScript中可用的3种强制类型转换有：

- - - Boolean(value)——把给定的值转换成Boolean型；
    - Number(value)——把给定的值转换成数字（能够是整数或浮点数）；
    - String(value)——把给定的值转换成字符串。

　　　　　　　　用这三个函数之一转换值，将建立一个新值，存放由原始值直接转换成的值。这会形成意想不到的后果。
　　　　　　　　当要转换的值是至少有一个字符的字符串、非0数字或对象时，Boolean()函数将返回true。若是该值是空字符串、数字0、undefined或null，它将返回false。

 1         //当要转换的值是至少有一个字符的字符串、非0数字或对象时，Boolean()函数将返回true。
 2         //若是该值是空字符串、数字0、undefined或null，它将返回false。
 3         console.log(Boolean(""));       //false
 4         console.log(Boolean("hi"));     //true
 5         console.log(Boolean(100));      //true
 6         console.log(Boolean(null));     //false
 7         console.log(Boolean(0));        //false
 8         console.log(Boolean(new Object())); //true
 9         console.log(Boolean({}));       //true
10         var a;
11         console.log(Boolean(a));        //false---undefined
12 
13         //Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式类似，只是它转换的是整个值，而不是部分值。
14         console.log(Number(false));     //0
15         console.log(Number(true));      //1
16         console.log(Number(undefined)); //NaN
17         console.log(Number(null));      //0
18         console.log(Number("5.5"));     //5.5
19         console.log(Number("5.6.7"));   //NaN
20         console.log(Number("5red"));    //NaN
21         console.log(Number(new Object()));  //NaN
22         console.log(Number(100));       //100
23         console.log(Number(a));         //NaN
24 
25         //String()转换成字符串
26         console.log(String(null));      //null
27         console.log(String(true));      //true
28         console.log(String(undefined)); //undefined
29         console.log(String(100));       //100
30         console.log(String(10.5));      //10.5
31         console.log(String(new Object()));  //[object Object]
32         console.log(String(a));         //undefined
33         console.log(String({p1:1,p2:2}));   //[object Object]
34         console.log(String({}));            //[object Object]
35         console.log(String(function b(){var c = 1;}));  //function b(){var c = 1;}
36         console.log(String(10*10));     //100

　　　　　　　　3）利用js弱类型进行转换　　

1 var str="012.345";
2 var x = str-1;
3 console.log(x); //11.345
4 
5 var str2 = "012.3456red";
6 var x = str2-2;
7 console.log(x);     //NaN

因此本题中，虽然a，b是字符串，可是对其进行加减乘除数学运算时，会因为js的弱类型特征自动转换计算，35%7=0. 故结果为0。

2. 如下代码运行结果是：var a=11.45; document.write(Math.round(a));

　　A. 11　　B. 12　　C. 11.4　　D. 11.5

　　答案：A

　　解析：round() 方法可把一个数字舍入为最接近的整数。对于 0.5，该方法将进行上舍入。例如，3.5 将舍入为 4，而 -3.5 将舍入为 -3。

1 console.log(Math.round(3.5));               //4
2 console.log(Math.round(-3.5));              //-3
3 console.log(Math.round(-3.500000001));      //-4
4 console.log(Math.round(3.49));              //3
5 console.log(Math.round(-3.49));             //-3

　　要注意不彻底是四舍五入！！当是正数时是四舍五入，是负数时，若小数正好0.5则会进行上舍入，若不是正好0.5，则会向更偏向的那一方舍入。

3. 下面代码运行结果是：var s1=parseInt( "10*22" ); document.write(s1);

　　A. 1022　　B. 220　　C. 10　　D. 200

　　答案：10

　　解析：类型转换方法同第一题。由于10*22是一个字符串，则进行parseInt转换时只会从前取数字部分。

4. Math对象的哪一个方法能够返回大于等于参数的整数？

　　A. round()　　B. pow()　　C. floor()　　D. ceil()

　　答案：D

　　解析：　　A. round()方法第二题解析过，是取与 x 最接近的整数，不必定大于等于参数

　　　　　　　B. pow(x, y)返回x的y次幂的值。x,y都是必须的且必须是数字。若是因为指数过大而引发浮点溢出，则该方法将返回 Infinity。

　　　　　　　C. floor() 方法可对一个数进行下舍入。该方法执行的是向下取整计算，它返回的是小于或等于函数参数，而且与之最接近的整数。

　　　　　　　D. ceil() 方法可对一个数进行上舍入。该方法执行的是向上取整计算，它返回的是大于或等于函数参数，而且与之最接近的整数。

5. "use strict"; var o={p:1,p:2};console.log(o); 会产生什么结果？

　　A. 语法错误　　B. o={p:1}　　C. o={p:2}　　D. o={p:1, p:2}

　　答案：A

　　解析：严格模式下，对象不能有重名的属性。正常模式下，若是对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。

　　　　　　严格模式详解参考：http://www.cnblogs.com/jiqing9006/p/5091491.html

　　　　我尝试结果是：

　　　　IE：

　　　　使用严格模式：（报错）

　　　　不使用严格模式：（不报错）

　　　　Chrome:

　　　　用不用严格模式都不报错：

　　　　Firefox：

　　　　用不用严格模式都不报错：

6. var o={p:1,p:2}; console.log(o); 会产生什么结果？

　　A. 语法错误　　B. o={p:1}　　C. o={p:2}　　D. o={p:1, p:2}

　　答案： C

　　解析：不在严格模式下执行，p关键字会被覆盖

7. var o={a:2, m: function(){return this.a+1;}}; var p=Object.create(o); p.a=12; console.log(p.m()); 输出值是多少？

　　A. 1　　B. 2　　C. 3　　D. 13

　　答案：D

　　解析：Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象建立方式，第一个参数是要继承的原型，若是不是一个子函数，能够传一个null，第二个参数是对象的属性描述符，这个参数是可选的。　　　　　

　　　　　propertiesObject 参数的详细解释：（默认都为false）

　　　　　数据属性

- - writable:是否可任意写
  - configurable：是否可以删除，是否可以被修改
  - enumerable：是否能用 for in 枚举
  - value：值

　　　　　访问属性：

- - get(): 访问
  - set(): 设置

　　　　　上面说第一个参数是要继承的原型，就是说新建立的对象o的原型就是Object.create()中传入的参数。能够console.log(p)看题干中获得的p：

　　　　　就是说，create(arg)中的参数实际上是赋给了建立的对象的原型。而根据原型链的做用下，p的函数m中调用的this.a 应该是12. 以上。

　　　　　若是要使用Object.create()方法建立一个普通的空对象，相似 var o = {}，则参数设置为：Object.prototype。参数不能为空，会报错。

　　　　　若是传入参数是Object呢？Object自己实际上是一个函数，因此输出的结果是一个函数：

　　　　　而若是参数是null，则会建立一个没有原型的空对象：

8. 下面代码运行结果是

　　a=new Array(2,4,,4,5,6};

　　sum=0;

　　for(i=1;i<a.length;i++){

　　　　sum += a[i];

　　}

　　document.write(sum);

　　A. 21　　B. 19　　C. 2, 4, 4, 5, 6　　D. 24456

　　答案：19

　　解析：很简单，i是从1开始的，因此是从第二个数组开始求和

9. window的哪一个方法能够显示输入框

　　A. confirm()　　B. open()　　C. alert()　　D. prompt()

　　答案：D. prompt()

　　解析：

confirm() 方法用于显示一个带有指定消息和OK 及取消按钮的对话框。若是用户点击肯定按钮，则confirm() 返回true。若是点击取消按钮，则confirm() 返回false.
open() 打开（弹出）一个新的窗体

　　　　window.open(url,name,features,replace);

- url -- 要载入窗体的URL
- name -- 新建窗体的名称(也能够是HTML target属性的取值，目标)
- features -- 表明窗体特性的字符串，字符串中每一个特性使用逗号分隔
- replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数一般不用指定

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

prompt() 方法用于显示可提示用户进行输入的对话框。

 1 //confirm
 2 if(confirm("Press a button")){
 3         //....
 4 } else {
 5         //...
 6 }
 7 //prompt()
 8 var name = prompt("Please enter your name: ", "");
 9 if(name != null && name != ""){
10         //.....
11 }

10. 下面哪一种不属于jquery的筛选？

　　A. 过滤　　B. 自动　　C. 查找　　D. 串联

　　答案：B

　　解析： jQuery的筛选函数提供了串联、查找和过滤函数

串联函数
1. andSelf():加入先前所选的加入当前元素中
  - e.g.
    - <div><p>test</p></div>
    - $('div').find('p').andSelf().addClass("class1");
    - //result
    - <div><p class="class1">test</p></div>
2. end():回到最近的一个"破坏性"操做以前。即，将匹配的元素列表变为前一次的状态。若是以前没有破坏性操做，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操做。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
查找函数
1. add(exp): 把与表达式匹配的元素添加到jQuery对象中。这个函数能够用于链接分别与两个表达式匹配的元素结果集。
2. children([expr]):取得一个包含匹配的元素集合中每个元素的全部子元素的元素集合。能够经过可选的表达式来过滤所匹配的子元素。注意：parents()将查找全部祖辈元素，而children()之考虑子元素而不考虑全部后代元素。
3. find(expr):搜索全部与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
4. next([expr]): 取得一个包含匹配的元素集合中每个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面全部的同辈元素（可使用nextAll）。能够用一个可选的表达式进行筛选。
5. nextAll([expr]): 查找当前元素以后全部的同辈元素。
6. offsetParent(): 返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
7. parent([expr]): 取得一个包含着全部匹配元素的惟一父元素的元素集合。
8. parents([expr]): 取得一个包含着全部匹配元素的祖先元素的元素集合（不包含根元素）。
9. prevAll([expr]): 查找当前元素以前全部的同辈元素;
10. siblings([expr]): 取得一个包含匹配的元素集合中每个元素的全部惟一同辈元素的元素集合。
过滤函数
1. eq(insex): 获取第N个元素.这个元素的位置是从0算起。
2. filter(expr): 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
3. filter(fn): 筛选出与指定函数返回值匹配的元素集合
4. hasClass(class): 检查当前的元素是否含有某个特定的类，若是有，则返回true。这其实就是 is("." + class)
5. is(expr): 用一个表达式来检查当前选择的元素集合，若是其中至少有一个元素符合这个给定的表达式就返回true。
6. map(callback): 将一组元素转换成其余数组（不管是否是元素数组);
7. not(expr): 删除与指定表达式匹配的元素
8. slice(start,[end]): 选取一个匹配的子集;

11. 使用（_）在元素的width属性中减去padding值计算容器的宽度

　　A. cale()　　B. box_sizing　　C. background-size　　D. 以上都不是

　　解析：

cale()是什么？没找到啊。css3中有一个calc()能够经过计算来肯定CSS属性值。
box-sizing：以特定的方式定义匹配某个区域的特定元素。
```
box-sizing: content-box|border-box|inherit;
```

background-size：规定背景图像的尺寸：

background-size: length|percentage|cover|contain;  （设定宽高（宽，高） | 以父元素的百分比来设置背景图像的宽度和高度 | 把背景图像扩展至足够大，以使背景图像彻底覆盖背景区域 | 把图像图像扩展至最大尺寸，以使其宽度和高度彻底适应内容区域。）

12. 哪一个工具不能用来作PHP的版本控制？

　　A. CVS　　B. CDN(静态资源管理)　　C. SVN　　D. VSS

　　解析：

- CVS（Concurrent Versions System）老牌的版本控制系统，它是基于客户端/服务器的行为使得其可容纳多用户，构成网络也很方便。这一特性使得CVS成为位于不一样地点的人同时处理数据文件（特别是程序的源代码）时的首选。
- 使用静态资源库能够访问线上资源文件，好比jquery库、bootstrap库
- SVN是Subversion的简称，是一个开放源代码的版本控制系统，相较于RCS、CVS，它采用了分支管理系统，它的设计目标就是取代CVS。互联网上不少版本控制服务已从CVS迁移到Subversion。
- VSS 的全称为 Visual Source Safe 。做为 Microsoft Visual Studio 的一名成员，它主要任务就是负责项目文件的管理，几乎能够适用任何软件项目。管理软件开发中各个不一样版本的源代码和文档，占用空间小而且方便各个版本代码和文档的获取,对开发小组中对源代码的访问进行有效的协调。

　　　　综上，应该选B吧？和版本控制无关。

13. 如下代码运行结果是

　　var mystring=" I am a student";

　　var a=mystring.substring(9,13);

　　document.write(a);

　　A. stud 　　B. tuden　　C. udent　　D. uden

　　答案：D

　　解析：substring() 方法用于提取字符串中介于两个指定下标之间的字符。返回是一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的全部字符，其长度为 stop 减start。

14.产生一个0~7之间(含0,7)的随机整数，正确的是

　　A. Math.floor(Math.random()*6)

　　B. Math.floor(Math.random()*7)

　　C. Math.floor(Math.random()*8)

　　D. Math.ceil(Math.random()*8)

　　答案：C

　　解析：

1 console.log(Math.floor(Math.random()*6));   //0 1 2 3 4 5
2 console.log(Math.floor(Math.random()*7));   //0 1 2 3 4 5 6
3 console.log(Math.floor(Math.random()*8));   //0 1 2 3 4 5 6 7
4 console.log(Math.ceil(Math.random()*8));   // 1 2 3 4 5 6 7 8

floor是向下取整，ceil是向上取整。

15. Array对象的哪一个方法向数组的末尾添加一个或更多元素，并返回新的长度

　　A. concat()　　B. pop()　　C. push()　　D.shift()

　　答案：C

　　解析：

concat()	向数组的副本添加新的元素，返回新的数组，原数组不受影响	arrayObject.concat(arrayX,arrayX,......,arrayX)	返回新的数组，原数组不受影响
join()	把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。	arr.join(separator)	返回一个字符串
pop()	删除并返回数组的最后一个元素	arrayObject.pop()	arrayObject 的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度	arrayObject.push(newelement1,newelement2,....,newelementX)	把指定的值添加到数组后的新长度。
reverse()	颠倒数组中元素的顺序	arr.reserve()		该方法会改变原来的数组，而不会建立新的数组
shift()	删除并返回数组的第一个元素	arrayObject.shift()	数组原来的第一个元素的值。	若是数组是空的，那么 shift() 方法将不进行任何操做，返回 undefined 值。请注意，该方法不建立新数组，而是直接修改原有的 arrayObject
slice()	从某个已有的数组返回选定的元素	arrayObject.slice(start,end)	返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素	该方法并不会修改数组，而是返回一个子数组。若是想删除数组中的一段元素，应该使用方法 Array.splice()
sort()	对数组的元素进行排序，有一个可选参数，为比较函数。	arrayObject.sort(sortby)	对数组的引用。请注意，数组在原数组上进行排序，不生成副本	sortby 可选，规定排序顺序，必须是函数
splice()	删除元素，并向数组添加新元素。	arrayObject.splice(index,howmany,item1,.....,itemX)	返回被删除的项目.包含被删除项目的新数组，若是有的话	splice() 方法可删除从 index 处开始的零个或多个元素，而且用参数列表中声明的一个或多个值来替换那些被删除的元素请注意，splice() 方法与 slice() 方法的做用是不一样的，splice() 方法会直接对数组进行修改
toSource()	表明对象的源代码.该原始值由 Array 对象派生的全部对象继承	object.toSource()		toSource() 方法一般由 JavaScript 在后台自动调用，并不显式地出如今代码中只有 Gecko 核心的浏览器（好比 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法
toString()	把数组转换为字符串，并返回结果。	arrayObject.toString()	arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同	当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。可是在某些状况下，须要显式地调用该方法
toLocaleString()	把数组转换为本地数组，并返回结果。	arrayObject.toLocaleString()	arrayObject 的本地字符串表示	首先调用每一个数组元素的 toLocaleString() 方法，而后使用地区特定的分隔符把生成的字符串链接起来，造成一个字符串
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。	arrayObject.unshift(newelement1,newelement2,....,newelementX)	arrayObject 的新长度	unshift() 方法不建立新的建立，而是直接修改原有的数组
valueOf()	返回 Boolean 对象的原始值			若是调用该方法的对象不是 Boolean，则抛出异常 TypeError

 1 concat()    //向数组的副本添加新的元素，返回新的数组，原数组不受影响 
 2     arrayObject.concat(arrayX,arrayX,......,arrayX)
 3 join()      //把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。   返回一个字符串
 4     arr.join(separator)
 5 pop()       //删除并返回数组的最后一个元素    
 6     arrayObject.pop()
 7 push()      //向数组的末尾添加一个或更多元素，并返回新的长度   
 8     arrayObject.push(newelement1,newelement2,....,newelementX)
 9 reverse()   //颠倒数组中元素的顺序   该方法会改变原来的数组，而不会建立新的数组 
10     arr.reserve()      
11 shift()     //删除并返回数组的第一个元素 若是数组是空的，那么 shift() 方法将不进行任何操做，返回 undefined 值。请注意，该方法不建立新数组，而是直接修改原有的 arrayObject
12     arrayObject.shift()    
13 slice()     //从某个已有的数组返回选定的元素   返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素     该方法并不会修改数组，而是返回一个子数组。若是想删除数组中的一段元素，应该使用方法 Array.splice()
14     arrayObject.slice(start,end)
15 sort()      //对数组的元素进行排序，有一个可选参数，为比较函数。    返回对数组的引用。请注意，数组在原数组上进行排序，不生成副本 
16     arrayObject.sort(sortby)    //sortby 可选，规定排序顺序，必须是函数       
17 splice()    //删除元素，并向数组添加新元素。   返回被删除的项目.包含被删除项目的新数组，若是有的话    splice() 方法可删除从 index 处开始的零个或多个元素，而且用参数列表中声明的一个或多个值来替换那些被删除的元素。 请注意，splice() 方法与 slice() 方法的做用是不一样的，splice() 方法会直接对数组进行修改
18     arrayObject.splice(index,howmany,item1,.....,itemX)
19 toSource()  //表明对象的源代码.该原始值由 Array 对象派生的全部对象继承  
20     object.toSource()
21 toSource() //方法一般由 JavaScript 在后台自动调用，并不显式地出如今代码中. 只有 Gecko 核心的浏览器（好比 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法
22 toString()  //把数组转换为字符串，并返回结果。  返回arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同      当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。可是在某些状况下，须要显式地调用该方法
23     arrayObject.toString()
24 toLocaleString()    //把数组转换为本地数组，并返回结果。 返回arrayObject 的本地字符串表示    首先调用每一个数组元素的 toLocaleString() 方法，而后使用地区特定的分隔符把生成的字符串链接起来，造成一个字符串
25     arrayObject.toLocaleString()  
26 unshift()   //向数组的开头添加一个或更多元素，并返回新的长度。   unshift() 方法不建立新的建立，而是直接修改原有的数组
27     arrayObject.unshift(newelement1,newelement2,....,newelementX)
28 valueOf()   //返回 Boolean 对象的原始值。若是调用该方法的对象不是 Boolean，则抛出异常 TypeError

16. 如下哪些是JavaScript中标准的全局属性(多选)

　　A. Infinity　　B. NaN　　C. undefined　　D. null

　　答案：ABC

　　解析：全局属性：NaN，Java，undefined，Infinity，Packages

　　顶层函数（全局函数）

函数	描述
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()	对字符串进行编码。
eval()	计算 JavaScript 字符串，并把它做为脚本代码来执行。
getClass()	返回一个 JavaObject 的 JavaClass。
isFinite()	检查某个值是否为有穷大的数。
isNaN()	检查某个值是不是数字。
Number()	把对象的值转换为数字。
parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。
String()	把对象的值转换为字符串。
unescape()	对由 escape() 编码的字符串进行解码。

　　顶层属性（全局属性）

方法	描述
Infinity	表明正的无穷大的数值。
java	表明 java.* 包层级的一个 JavaPackage。
NaN	指示某个值是否是数字值。
Packages	根 JavaPackage 对象。
undefined	指示未定义的值。

17. 按严格标准来讲下面有关html结构描述正确的有？

　　A. <ul><li></li></ul>

　　B. <ol><li></li></ol>

　　C. <dl><dt></dt><dd></dd></dl>

　　D. <table><tr><td></td></tr></table>

　　答案：ABCD

　　解析：< dl>< /dl>用来建立一个普通的列表,< dt>< /dt>用来建立列表中的上层项目，<dd>< /dd>用来建立列表中最下层项目，< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。dl下面能够嵌套dt、dd两个标签，能够省略dt，但不建议

　　　　　简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

18. 常见的浏览器端的存储技术有哪些？

　　A. cookie　　B. localStorage　　C. session　　D. userData

　　答案：ABD

　　解析：cookie 是靠谱的浏览器都支持；cookie会随着每次HTTP请求头信息一块儿发送，无形中增长了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不一样而不一样，IE6大约只能存储2K。

　　　　　localStorge 比 cookie 存的更多，获取更方便，并且存储内容不会随请求发送给服务器；

　　　　　session 虽然须要 cookie 支持（一般存放加密过的 sessionId），可是不在浏览器端存放主要信息，排除；

　　　　　IE 支持 userData 存储数据，可是基本不多使用到，除非有很强的浏览器兼容需求。IE浏览器可使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不须要安装额外的插件。缺点：它仅在IE下有效。

19. HMTL5都有哪些新的JS API

　　A. navigator　　B. websocket　　C. sessionStorage　　D. canvas

　　答案：

　　解析：

- 多媒体：video、audio、
- 游戏：canvas、webgl、
- 存储：localstorage、sessonstorage、websql、indexedDB
- 网络：websocket

- navigator对象包含有关浏览器的信息。好像是js的，不算是html5的api
- websocket
- sessionStorage
- canvas

20. 下面有关JavaScript内部对象的描述，正确的有？

　　A. History对象包含用户（在浏览器窗口）访问过的URL

　　B. Location对象包含当前有关URL的信息

　　C. Window对象包含浏览器中打开的窗口

　　D. Navigator对象包含有关浏览器的信息

　　答案：ABCD

　　解析：

- Navigator：提供有关浏览器的信息
  - Navigator 对象包含的属性描述了正在使用的浏览器。可使用这些属性进行平台专用的配置。
- Window：Window 对象表示浏览器中打开的窗口。
  - 若是文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档建立一个 window 对象，并为每一个框架建立一个额外的 window 对象。
  - Window对象处于对象层次的最顶层，它提供了处理Navagator窗口的方法和属性
- Location：提供了与当前打开的URL一块儿工做的方法和属性，是一个静态的对象。包含有关当前 URL 的信息，Location 对象是 Window 对象的一个部分，可经过 window.location 属性来访问
  - Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其余属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性很是类似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可使用表达式 location 来替代 location.href
- History：提供了与历史清单有关的信息。包含用户（在浏览器窗口中）访问过的 URL
  - History 对象是 window 对象的一部分，可经过 window.history 属性对其进行访问
  - History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的缘由，History 对象再也不容许脚本访问已经访问过的实际 URL。惟一保持使用的功能只有 back()、forward() 和 go() 方法
- Document：包含与文档元素一块儿工做的对象，它将这些元素封装起来供编程人员使用
- Screen 对象包含有关客户端显示屏幕的信息
  - 每一个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求

21. 你能解释一下JavaScript中的继承是如何工做的吗？（15分）

　　经过实现继承，通常依靠原型链来实现。

　　组合继承：使用原型链实现对原型属性和方法的继承，经过构造函数实现对实例属性的继承

 1         //组合继承：构造函数+原型
 2         function Parent(name){
 3             this.name = name;
 4             this.color = [1,2,3];
 5         }
 6         Parent.prototype.sayName = function(){
 7             console.log(this.name);
 8         }
 9         function Child(name,age){
10             Parent.apply(this,arguments);
11             this.age = age;
12         }
13         Child.prototype = new Parent();
14         
15         //或者可使用临时构造函数
16         // var F = function(){};
17         // F.prototype = Parent.prototype;
18         // Child.prototype = new F();
19 
20         Child.prototype.sayAge = function(){
21             console.log(this.age);
22         }

22. 请说出三种减低页面加载时间的方法（加载时间指感知的时间或者实际加载时间）（15分）

　　《高性能网站建设指南的14条规则》

　　页面加载时间应当包含：规则一、二、三、四、五、六、八、九、十、十二、 13

规则1：　　减小HTTP请求　　
　　　　　　　　1. 图片地图（map）
　　　　　　　　2. CSS Sprites
　　　　　　　　3. 内联图片　　data:[<mediatype>][;base64],<data>
　　　　　　　　4. 合并脚本和样式表

规则2：　　使用内容发布网络（CDN）

规则3：　　添加Expires头
　　　　　　　　更新方法：修改连接/组件文件名（好比设置版本号）


规则4：　　压缩组件（gzip）

规则5：　　将样式表放在顶部（使用link标签将样式表放在文档head中）

规则6：　　将脚本放在底部

规则7：　　避免CSS表达式　　
　　　　　　　　（IE：expression【推荐一次性表达式/事件处理器】）

规则8：　　使用外部JavaScript和CSS

规则9：　　减小DNS查找
　　　　　　　　经过keep-alive和较少的域名来减小DNS查找

规则10：　 精简JavaScript　　（精简、混淆）

规则11：　 避免重定向

规则12： 　删除重复脚本

规则13：　 配置ETag　　　　（配置或移除ETag）

规则14：　 使Ajax可缓存

23. 文档类型的做用是什么？你知道多少种文档类型？（15分）

　答：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签以前。此标签可告知浏览器文档使用哪一种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档

　　　　HTML 4.01/XHTML 规定了三种文档类型：Strict（严格模式）、Transitional（过渡模式）以及 Frameset（框架模式）

　　　　HTML5 将DOCTYPE的声明简化了，只须要<!DOCTYPE html>便可

24. 为何利用多个域名来存储网络资源会更有效？（15分）

　答：

- 动静分离需求，使用不一样的服务器处理请求。处理动态内容的只处理动态内容，不处理别的，提升效率。CDN缓存更方便
- 突破浏览器并发限制、
- Cookieless, 节省带宽，尤为是上行带宽通常比下行要慢。
  用户的每次访问，都会带上本身的cookie ，挺大的。假如twitter 的图片放在主站域名下，那么用户每次访问图片时，request header 里就会带有本身的cookie ，header 里的cookie 还不能压缩，而图片是不须要知道用户的cookie 的，因此这部分带宽就白白浪费了。
- 节约主域名的链接数，从而提升客户端网络带宽的利用率，优化页面响应。由于老的浏览器（IE6是典型），针对同一个域名只容许同时保持两个HTTP链接。将图片等资源请求分配到其余域名上，避免了大图片之类的并不必定重要的内容阻塞住主域名上其余后续资源的链接（好比ajax请求）。
- 避免没必要要的安全问题( 上传js窃取主站cookie之类的)

途牛前端工程师在线笔试题（含答案和全面解析）