途牛前端工程師在線筆試題（含答案和全面解析）

途牛前端工程師在線筆試題

知識點列表：

---

 

1. 字符串轉數字

2. Math對象方法：round() pow() floor() ceil()

3. parseInt

4. Math對象方法：round() pow() floor() ceil()

5. 'use strict'

6. 對象字面量

7. Object.create()

8. array

9. window方法

10. jQuery篩選

11. css：盒子模型

12. 版本控制

13. substring

14. Math方法

15. Array方法

16. js全局屬性

17. html結構

18. 瀏覽器端的存儲技術

19. HTML5都有哪些新的JS API

20. JavaScript內部對象

21. js繼承工作原理

22. 減低頁面加載時間的方法

23. 文檔類型

24. 為什么利用多個域名來存儲網絡資源會更有效？

---

 

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()沒有基模式。　　　　　

console.log(parseInt("1245red"));       //1245
console.log(parseFloat("1245red"));     //1245
console.log(parseInt("1245.5red"));     //1245
console.log(parseFloat("1245.555red")); //1245.555
console.log(parseInt("red"));           //NaN
console.log(parseInt("0xA"));           //10

console.log(parseInt("AF", 16));        //175   10*16+15
console.log(parseInt("10", 2));         //2
console.log(parseInt("10", 8));         //8
console.log(parseInt("10", 10));        //10

//如果十進制數包含前導0，那么最好采用基數10，這樣才不會意外地得到八進制的值
console.log(parseInt("010"));
console.log(parseInt("010",8));         //8
console.log(parseInt("010",10));        //10

console.log(parseFloat("1234red"));     //1234
console.log(parseFloat("0xA"));         //0
console.log(parseFloat("22.5"));        //22.5
console.log(parseFloat("22.35.5"));     //22.35
console.log(parseFloat("0908"));        //908
console.log(parseFloat("blue"));        //NaN

　　　　　　　　2）強制類型轉換

　　　　　　　　使用強制類型轉換可以訪問特定的值，即使它是另一種類型的。ECMAScript中可用的3種強制類型轉換有：

• • • • Boolean(value)——把給定的值轉換成Boolean型；
      • Number(value)——把給定的值轉換成數字（可以是整數或浮點數）；
      • String(value)——把給定的值轉換成字符串。

　　　　　　　　用這三個函數之一轉換值，將創建一個新值，存放由原始值直接轉換成的值。這會造成意想不到的后果。
　　　　　　　　當要轉換的值是至少有一個字符的字符串、非0數字或對象時，Boolean()函數將返回true。如果該值是空字符串、數字0、undefined或null，它將返回false。

        //當要轉換的值是至少有一個字符的字符串、非0數字或對象時，Boolean()函數將返回true。
        //如果該值是空字符串、數字0、undefined或null，它將返回false。
        console.log(Boolean(""));       //false
        console.log(Boolean("hi"));     //true
        console.log(Boolean(100));      //true
        console.log(Boolean(null));     //false
        console.log(Boolean(0));        //false
        console.log(Boolean(new Object())); //true
        console.log(Boolean({}));       //true
        var a;
        console.log(Boolean(a));        //false---undefined

        //Number()的強制類型轉換與parseInt()和parseFloat()方法的處理方式相似，只是它轉換的是整個值，而不是部分值。
        console.log(Number(false));     //0
        console.log(Number(true));      //1
        console.log(Number(undefined)); //NaN
        console.log(Number(null));      //0
        console.log(Number("5.5"));     //5.5
        console.log(Number("5.6.7"));   //NaN
        console.log(Number("5red"));    //NaN
        console.log(Number(new Object()));  //NaN
        console.log(Number(100));       //100
        console.log(Number(a));         //NaN

        //String()轉換成字符串
        console.log(String(null));      //null
        console.log(String(true));      //true
        console.log(String(undefined)); //undefined
        console.log(String(100));       //100
        console.log(String(10.5));      //10.5
        console.log(String(new Object()));  //[object Object]
        console.log(String(a));         //undefined
        console.log(String({p1:1,p2:2}));   //[object Object]
        console.log(String({}));            //[object Object]
        console.log(String(function b(){var c = 1;}));  //function b(){var c = 1;}
        console.log(String(10*10));     //100

　　　　　　　　3）利用js弱類型進行轉換　　

var str="012.345";
var x = str-1;
console.log(x); //11.345

var str2 = "012.3456red";
var x = str2-2;
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。

console.log(Math.round(3.5));               //4
console.log(Math.round(-3.5));              //-3
console.log(Math.round(-3.500000001));      //-4
console.log(Math.round(3.49));              //3
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() 方法用於顯示可提示用戶進行輸入的對話框。

 

//confirm
if(confirm("Press a button")){
        //....
} else {
        //...
}
//prompt()
var name = prompt("Please enter your name: ", "");
if(name != null && name != ""){
        //.....
}

 

10. 下面哪種不屬於jquery的篩選？

---

　　A. 過濾　　B. 自動　　C. 查找　　D. 串聯

　　答案：B

　　解析：  jQuery的篩選函數提供了串聯、查找和過濾函數

1. 串聯函數

   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'。

2. 查找函數

   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]): 取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。

3.  過濾函數

   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

　　解析：

console.log(Math.floor(Math.random()*6));   //0 1 2 3 4 5
console.log(Math.floor(Math.random()*7));   //0 1 2 3 4 5 6
console.log(Math.floor(Math.random()*8));   //0 1 2 3 4 5 6 7
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

concat()    //向數組的副本添加新的元素，返回新的數組，原數組不受影響 
    arrayObject.concat(arrayX,arrayX,......,arrayX)
join()      //把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。   返回一個字符串
    arr.join(separator)
pop()       //刪除並返回數組的最后一個元素    
    arrayObject.pop()
push()      //向數組的末尾添加一個或更多元素，並返回新的長度   
    arrayObject.push(newelement1,newelement2,....,newelementX)
reverse()   //顛倒數組中元素的順序   該方法會改變原來的數組，而不會創建新的數組 
    arr.reserve()      
shift()     //刪除並返回數組的第一個元素 如果數組是空的，那么 shift() 方法將不進行任何操作，返回 undefined 值。請注意，該方法不創建新數組，而是直接修改原有的 arrayObject
    arrayObject.shift()    
slice()     //從某個已有的數組返回選定的元素   返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素     該方法並不會修改數組，而是返回一個子數組。如果想刪除數組中的一段元素，應該使用方法 Array.splice()
    arrayObject.slice(start,end)
sort()      //對數組的元素進行排序，有一個可選參數，為比較函數。    返回對數組的引用。請注意，數組在原數組上進行排序，不生成副本 
    arrayObject.sort(sortby)    //sortby 可選，規定排序順序，必須是函數       
splice()    //刪除元素，並向數組添加新元素。   返回被刪除的項目.包含被刪除項目的新數組，如果有的話    splice() 方法可刪除從 index 處開始的零個或多個元素，並且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。 請注意，splice() 方法與 slice() 方法的作用是不同的，splice() 方法會直接對數組進行修改
    arrayObject.splice(index,howmany,item1,.....,itemX)
toSource()  //代表對象的源代碼.該原始值由 Array 對象派生的所有對象繼承  
    object.toSource()
toSource() //方法通常由 JavaScript 在后台自動調用，並不顯式地出現在代碼中. 只有 Gecko 核心的瀏覽器（比如 Firefox）支持該方法，也就是說 IE、Safari、Chrome、Opera 等瀏覽器均不支持該方法
toString()  //把數組轉換為字符串，並返回結果。  返回arrayObject 的字符串表示。返回值與沒有參數的 join() 方法返回的字符串相同      當數組用於字符串環境時，JavaScript 會調用這一方法將數組自動轉換成字符串。但是在某些情況下，需要顯式地調用該方法
    arrayObject.toString()
toLocaleString()    //把數組轉換為本地數組，並返回結果。 返回arrayObject 的本地字符串表示    首先調用每個數組元素的 toLocaleString() 方法，然后使用地區特定的分隔符把生成的字符串連接起來，形成一個字符串
    arrayObject.toLocaleString()  
unshift()   //向數組的開頭添加一個或更多元素，並返回新的長度。   unshift() 方法不創建新的創建，而是直接修改原有的數組
    arrayObject.unshift(newelement1,newelement2,....,newelementX)
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分）

 　　通過實現繼承，一般依靠原型鏈來實現。

　　組合繼承：使用原型鏈實現對原型屬性和方法的繼承，通過構造函數實現對實例屬性的繼承

        //組合繼承：構造函數+原型
        function Parent(name){
            this.name = name;
            this.color = [1,2,3];
        }
        Parent.prototype.sayName = function(){
            console.log(this.name);
        }
        function Child(name,age){
            Parent.apply(this,arguments);
            this.age = age;
        }
        Child.prototype = new Parent();
        
        //或者可以使用臨時構造函數
        // var F = function(){};
        // F.prototype = Parent.prototype;
        // Child.prototype = new F();

        Child.prototype.sayAge = function(){
            console.log(this.age);
        }        

 

22. 請說出三種減低頁面加載時間的方法（加載時間指感知的時間或者實際加載時間）（15分）

　　《高性能網站建設指南的14條規則》

　　頁面加載時間應當包含：規則1、2、3、4、5、 6、 8、 9、 10、 12、 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之類的)