js基礎面試題，慢慢更新中，根據處處看見的資料

時間 2019-11-16

原文原文鏈接

1.javascript的typeof返回哪些數據類型。

答：首先寫出答案，number boolean underfind string Object function 。總共有六個答案，typeof 能判斷值類型，可是對引用類型並非那麼好用。看個例子javascript

typeof  "abc" //string

typeof  123//number

typeof undefined //undefined
typeof true //boolean

typeof {} //object
typeof [] //object

typeof console.log //functiong

typeof能準確判斷值類型，可是對引用類型不是那麼好使。那值類型和又有什麼區別，看個例子。css

var a = [1,2,3];
var b = a;
a = [1,2,3,4];
alert(a);//1,2,3,4
alert(b); //1,2,3

//2.使用push(操做了引用的對象)
var a = [1,2,3];
var b = a;
a.push(4);
alert(a);//1,2,3,4
alert(b); //1,2,3,4

在複製變量值時，基本類型會在變量對象上建立一個新值，再複製給新變量。此後，兩個變量的任何操做都不會影響到對方；而引用類型是將存儲在變量對象的值複製一份給新變量，可是兩個變量的值都指向存儲在堆中的一個對象，也就是說，其實他們引用了同一個對象，改變其中一個變量就會影響到另外一個變量。html

2,關於js的==和===的問題。前端

答：js中兩個等號(==)和三個等號(===)的區別：vue

1. "=="表示：equality -> 等同的意思，"=="使用兩個等號時，若是兩邊值的類型不一樣的時候，是要先先進行類型轉換後，才能作比較。 html5

2. "==="表示：identity -> 恆等的意思，"==="使用三個等號時，是不須要作類型轉換的，若是兩邊值的類型不一樣，就表示必定是不等的。java

3，在if語句中會轉化爲false的點：
node

答：0，NAN，「」，null，false；、css3

4，js中常見的內置函數：web

https://blog.csdn.net/u012396955/article/details/53941521；這篇博客介紹了不少

5，關於JSON的一些理解：

答：

6，遍歷對象的屬性的方法有哪些：

答：

<script>  
var myDog = {
  "name": "Happy Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["Free Code Camp Campers"]
};

for ( i in myDog)
{
alert(i);//屬性名稱
alert(myDog[i])    ;//屬性值
}
</script>

這個使用一個for in遍歷，還有個方法是

Object.keys();
var myDog = {
  "name": "Happy Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["Free Code Camp Campers"]
};
console.log(Object.keys(myDog));//會把全部屬性名做爲一個數組集合輸出

7，建立10個li，點擊彈出序號：

這個了是考一個做用域的問題，代碼貼下來，用了一個當即執行函數也就是閉包的方法。

 window.onload=function () {
        var i, a;
        for (i = 0; i < 10; i++) {
            (function (i) {
                a = document.createElement('a')
                a.innerHTML = i + '</br>';
                a.addEventListener('click', function (e) {
                    e.preventDefault()
                    alert(i)
                })
                document.body.appendChild(a)
            })(i)
        }
    }

這麼寫能存儲i的值。沒什麼好說的。

8，同步和異步的理解：

首先看個很簡單的例子，

   console.log(100)
    setTimeout(function () {
        console.log(200)
    },1000);
    console.log(300)

他會先打印100和300，過了一秒纔打印200.

9，html5爲何只須要寫<!doctype html>?

答：html5不是基於sgml（標準通用標記語言），不須要對dtd文件進行引用，可是須要doctype來規範瀏覽器的行爲，

不然瀏覽器將開啓怪異模式，而html4.01基於sgml，須要引入dtd，才能告知瀏覽器文檔使用的文檔類型

html4.01有三個申明方式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

10，行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？

行內元素有：a b span img input select strong（強調的語氣）

塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素：

這裏說一下<meta>標籤：

1，META標籤用來描述一個HTML網頁文檔的屬性，例如做者、日期和時間、關鍵詞、頁面刷新。

2，<meta charset="UTF-8">這個是咱們創建網頁，編譯器自帶的只是說明了字符的使用。
3， <meta name="keywords"content="關於怎麼吃香蕉的">

<meta name="description" content="HTML中<meta>標籤如何正確使用">

這是常見的seo告訴網頁是幹啥的。

4，還有個重要的屬性，http-equiv.<meta http-equiv="content-type" content="text/html; charset=UTF-8">

告訴瀏覽器怎麼識別你的網頁。

5，還有就是移動端的一些規定。大概就這些了吧。

11，頁面導入樣式時，使用link和@import有什麼區別？

答：1，link和import都是頁面樣式引入，然而link是xhtml除了能加載這個還能加載一些其餘的。import只能加載css。

2，link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

3，import有時候低版本不支持。

12，常見瀏覽器的內核有哪些？

答，這個問題的話，就從四個最多見的瀏覽器來回答吧。

IE:Trident.

FireFox:Gecko

Chrome:Webkit

Opera7:Presto內核.

13,iframe有哪些優缺點？

首先iframes是文檔的內聯框架

答：優勢：1，解決跨域問題

2，重載頁面時不須要重載整個頁面，只須要重載頁面中的一個框架頁

3，製做導航欄舒服。

缺點：1，不利於seo.

2，增長服務器的http請求

14, label的做用是什麼？是怎麼使用的？

答： Label 中有兩個屬性是很是有用的,一個是FOR、另一個就是ACCESSKEY了。

1，當用戶點擊label時，就會觸發控件。瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

簡單點說，你點label，與label綁定的表單控件就會獲取焦點。那怎麼綁定就是用for屬性了。

2，<Label FOR=」InputBox」 ACCESSKEY＝」N」>姓名</Label><input ID=」InputBox」 type=」text」>

當你點擊labei光標會轉移到input文字框中，只能說算個快捷方式，感受好像也沒啥用。

15，實現不使用border，畫出1px高的線，在不一樣瀏覽器下的Quirksmode和CSSCompat模式下都能保持一致的效果？

<div style=」height:1px;overflow:hidden;background:red」></div>後面的什麼兼容性看不懂。

16，介紹一下標準的css的盒子模型？與低版本IE的盒子模型有什麼不一樣？

答：盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型

W3C 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分

IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 pading。

值得一提的是border一個常常用到的場景，就是畫什麼三角形，四邊形利用的是border的實際上是一個等腰梯形。

17，如何居中div，如何居中一個浮動元素？如何讓絕對定位的div居中？

第一種比較簡單文本直接屬性，盒子的話用margin ：auto；

1st，第一種是盒子絕對定位，top: 0; right: 0; bottom: 0; left: 0;而後設置margin: auto;隨便說下理解吧。

.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
}

首先若是隻設置top: 0或者right: 0是不行的。不設置盒子寬度，left，right，都是0那麼盒子的寬度是個自適應。就等於父元素寬度。

這時若是給盒子設置一個寬度。那就等於他本身的寬度自適應那個做廢，而後根據left和top優先定位。

這時在給盒子設置一個margin：auto；那麼就有了計算空間了。上下自適應，左右自適應那麼就垂直水平居中了。

大概就是有了top:0,bottom:0；高度被子元素所有填充，而後有了具體高度，多餘的填充空間被釋放出來。而後用margin的屬性就好了。

2nd，絕對定位，而後left: 50%; top: 50%;而後magin-left:-本身寬度一半，margin-top：-本身高度一半。

3rd，經常使用的text-align，line-height。說下行高垂直居中的原理，給文本設置了行高，可是和文本高度是兩回事，文本高度在行高裏面有個上下間距不設置的話就是上下自適應因此。

這樣就垂直居中了。

4th，浮動元素居中的話，能夠先給浮動元素套個父盒子，父盒子用maring居中，而後在用子盒子給父盒子填滿就好了。

5th，父元素浮動left：50%相對定位。子元素也浮動，right：50%。相對定位。原理是子元素挨着中線，而後向左移動50%。就居中了。

大概就這些了。

18，display有哪些值？說明他們的做用？

block :塊對象的默認值。

none :隱藏對象，空間也隱藏了。

inline :內聯對象的默認值。

19，position的值relative和absolute的定位原點是什麼？

答：有父元素都是找父元素，沒父元素absolute的話是找瀏覽器的左上角，relative是找body

20，display設置爲inline-block時，li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

答：行框的排列會受到中間空白（回車空格等等）瀏覽器會把他渲染成一個空格，這些空白也會被應用樣式，佔據空間，因此會有間隔。

1，將全部<li>寫在同一行。不足：代碼不美觀。

2，<ul>內的字符尺寸直接設爲0，即font-size: 0。不足：<ul>中的其餘字符尺寸也被設爲0，須要額外從新設定其餘字符尺寸。

21，在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

偶數字號相對更容易和 web 設計的其餘部分構成比例關係

使用奇數號字體很差的地方是，文本段落沒法對齊

22，請解釋下爲何會出現浮動和何時須要清除浮動？清除浮動的方式？

答： a.添加新的元素、應用 clear：both;//元素不容許旁邊有浮動本身下去了，盒子爲了包住他也下去了，而後高度被拉長。

b.父級定義 overflow: auto（注意：是父級div也就是這裏的 div.outer）一個對seo比較友好，另個hidden對seo不是太友好

在IE6中還須要觸發 hasLayout ，例如 zoom：1；

c.聽說是最高大上的方法 :after

方法：（注意：做用於浮動元素的父親）IE6-7不支持:after，

使用 zoom:1觸發 hasLayout

{zoom:1;} /*==for IE6/7 Maxthon2==*/

:after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

2三、元素豎向的百分比設定是相對於容器的高度嗎？

答：相對於父容器的寬度

width: 100%;
height:0;
padding-bottom:40%;
background: red;
這裏寬度滿，盒子高度等於百分之40.

2四、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容較低版本的IE？

答：一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。

優勢：

面對不一樣分辨率設備靈活性強

可以快捷解決多設備顯示適應問題

缺點：

兼容各類設備工做量大，效率低下

代碼累贅，會出現隱藏無用的元素，加載時間加長

其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

25，null和undefined的區別？

null和undefined是數據類型Null和Undefine的一個僅有的值。

null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。

null表示」沒有對象」，即該處不該該有值

（1）做爲函數的參數，表示該函數的參數不是對象。

（2）做爲對象原型鏈的終點。

（3）獲取一個不存在的對象時，值爲null,如獲取一個不存在的DOM對象：

undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值爲undefined。

（4）函數沒有返回值時，默認返回undefined。

26，

什麼是閉包（closure）？爲何要用它？

閉包就是可以讀取其餘函數內部變量的函數

因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成」定義在一個函數內部的函數」。

因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

閉包的用途：

閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中

重用變量又不能形成全局污染

2七、js代碼中」use strict」是什麼意思？使用它區別是什麼？

進入」嚴格模式」的標誌，老版本的瀏覽器會把它看成一行普通字符串，加以忽略

將」use strict」放在腳本文件的第一行，則整個腳本都將以」嚴格模式」運行。若是這行語句不在第一行，則無效，整個腳本以」正常模式」運行。若是不一樣模式的代碼文件合併成一個文件，這一點須要特別注意。

(嚴格地說，只要前面不是產生實際運行結果的語句，」use strict」能夠不在第一行，好比直接跟在一個空的分號後面。)

將」use strict」放在函數體的第一行，則整個函數以」嚴格模式」運行

由於第一種調用方法不利於文件合併，因此更好的作法是，借用第二種方法，將整個腳本文件放在一個當即執行的匿名函數之中

– 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

– 消除代碼運行的一些不安全之處，保證代碼運行的安全；

– 提升編譯器效率，增長運行速度；

– 爲將來新版本的Javascript作好鋪墊。

2八、js中有一個函數，執行對象查找時，永遠不會去查找原型，這個函數是什麼？

hasOwnProperty()函數用於指示一個對象自身(不包括原型鏈)是否具備指定名稱的屬性。若是有，返回true，不然返回false。該方法屬於Object對象，因爲全部的對象都」繼承」了Object的對象實例，所以幾乎全部的實例對象均可以使用該方法。

29，什麼是window對象？什麼是document對象？

window它是一個頂層對象,而不是另外一個對象的屬性即瀏覽器的窗口。

document對象是window對象的一個對象屬性

30，document.write和innerHTML的區別？

1.document.write是直接寫入到頁面的內容流，若是在寫以前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉以後從新調用該函數，會致使頁面被重寫。

2.innerHTML則是DOM頁面元素的一個屬性，表明該元素的html內容。你能夠精確到某一個具體的元素來進行更改。若是想修改document的內容，則須要修改document.documentElement.innerElement。

3.二者均可動態包含外部資源如JavaScript文件

經過document.write插入<script></script>元素會自動執行其中的腳本；

大多數瀏覽器中，經過innerHTML插入<script></script>元素並不會執行其中的腳本

innerHTML不少狀況下都優於document.write，其緣由在於其容許更精確的控制要刷新頁面的那一個部分。

這裏須要注意window.onload事件是在文檔內容徹底加載完畢再去執行事件處理函數，固然文檔流已經關閉了，這個時候執行doucment.writ()函數會自動調用document.open()函數建立一個新的文檔流，並寫入新的內容，再經過瀏覽器展示，這樣就會覆蓋原來的內容。

31，call()和.apply()的含義和區別？

每一個函數都包含兩個非繼承而來的方法：call()方法和apply()方法

一、call，apply都屬於Function.prototype的一個方法，它是JavaScript引擎內在實現的，由於屬於Function.prototype，因此每一個Function對象實例(就是每一個方法)都有call，apply屬性。既然做爲方法的屬性，那它們的使用就固然是針對方法的了，這兩個方法是容易混淆的，由於它們的做用同樣，只是使用方式不一樣。

二、語法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);

三、相同點：兩個方法產生的做用是徹底同樣的。

四、不一樣點：方法傳遞的參數不一樣，單個單數傳入，另外一個能夠以數組方式傳入

32，JQ和JQUI有啥區別？

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是」write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。

jQuery UI 是創建在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。

33，js的數據類型都有哪些？

答：字符串、數字、布爾、數組、對象、Null、Undefined

3四、已知ID的input輸入框，但願獲取這個輸入框的輸入值，怎麼作？(不使用第三方框架)

document.getElementById(id).value;

35，但願獲取到頁面中全部的checkbox怎麼作？(不使用第三方框架)

document.getElementsByTagName(‘input’);

遍歷循環

36，設置一個已知ID的div和html內容爲xxx，字體顏色設置爲黑色？(不使用第三方框架)

var div = document.getElementById(id);

div.innerHTML = 」;

div.style.color = 」;

37，

當一個dom節點被點擊時，咱們須要可以執行一個函數，應該怎麼作？

直接在DOM裏綁定事件：」<div onclick=」test()」>xx</div>」 …

在JS裏經過onclick綁定：xxx.onclick = test

經過事件添加進行綁定：addEventListener(xxx, ‘click’, test)

　　那麼問題來了，Javascript的事件流模型都有什麼？

「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播

「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的

「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡

ps：事件默認狀況下采起的是事件冒泡的方法，addEventListener(event, function, useCapture)

最後一個參數默認是false，也就是默認事件是冒泡，設置爲true時是事件捕獲，而後常見的阻止事件冒泡的方法

1.event.stopPropagation()方法

這是阻止事件的冒泡方法，不讓事件向documen上蔓延，可是默認事件任然會執行，當你掉用這個方法的時候，若是點擊一個鏈接，這個鏈接仍然會被打開，

2.event.preventDefault()方法

這是阻止默認事件的方法，調用此方法是，鏈接不會被打開，可是會發生冒泡，冒泡會傳遞到上一層的父元素；

3.return false ；

這個方法比較暴力，他會同事阻止事件冒泡也會阻止默認事件；寫上此代碼，鏈接不會被打開，事件也不會傳遞到上一層的父元素；能夠理解爲return false就等於同時調用了event.stopPropagation()和event.preventDefault()

38，js的typeof返回哪些數據類型？

有以下6種返回值：

1）number；

2）string；

3）boolean；

4）object

5）function

6）undefined;

有個值得的注意的是typeof(null)返回的是Object.

39，split() join()的區別？

join() 方法用於把數組中的全部元素放入一個字符串。

元素是經過指定的分隔符進行分隔的。

指定分隔符方法join(「#」);其中#能夠是任意

與之相反的是split()方法：用於把一個字符串分割成字符串數組.

一個將數組拼成字符串，一個將字符串分割爲數組。

var num=[0,1,2,3,4,5,6,7,8,9];

        var num1=["a","b","c"];
        var num3=["d","e","f"];
        num.push(10);//將11放在數組的末尾。
        num.push(11,12);//將12，13按順序排好。放在末尾。
        num.unshift(-1);//將-1放在開頭
        num.unshift(-3,-2);//而後-3打頭，-2接着。
        num.pop();//刪除最後一個元素。
        num.shift();//刪除第一個元素。
        num.splice(5,3);//第一個參數5，表明一個索引值。3表明刪了從索引值爲5開始的三個元素。這兩個參數都是必須的，第三個參數是替代品
        num.splice(5,0,2,3,4);//第一個仍是個索引值，第二個表明刪除爲0，也就是添加了。從索引5開始的2，3，4，
       var num2= num.concat(num1,num3);//連接兩個數組。
刪的都返回刪的值，添加的都返回新數組的長度。
slice()不會改變贗本的數組，提取一部分東西。slice（start，end）若是沒有end那麼就是開始到結尾懂了吧。
replace（）是個替換字符串的元素，replace（/要替換的/g，「替換的東西」）

40，js的本地對象，內置對象和宿主對象？

本地對象：

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError官方定義好了的對象

內置對象： Global 和 Math，內置對象是本地對象的一種

宿主對象：全部的BOM和DOM對象都是宿主對象，是那些官方未定義，你本身構建的對象加上DOM和BOM對象組成的

關於window對象是宿主對象也就是在必定的環境中才會生成的對象（這裏也就是指瀏覽器），而global對象是在任何環境中都存在的

window對象，是global的一個子對象。瀏覽器環境下，global對象指的就是window對象。global對象是單體內置對象，即不依賴宿主環境的對象。而window對象依賴瀏覽器。

41，對web標準以及w3c的理解與認識？

（1）web標準規範要求，書寫標籤必須閉合、標籤小寫、不亂嵌套，可提升搜索機器人對網頁內容的搜索概率。— SEO

（2）建議使用外鏈css和js腳本，從而達到結構與行爲、結構與表現的分離，提升頁面的渲染速度，能更快地顯示頁面的內容。

（3）樣式與標籤的分離，更合理的語義化標籤，使內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，從而下降維護成本、改版更方便

（4）不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性

42，XHTML是HTML 4.01和XML1.0的雜交，XHTML1.0是基於HTML4.01的

HTML是一種基於標準通用標記語言（SGML）的應用，而XHTML則基於可擴展標記語言（XML），HTML和XHTML實際上是平行發展的兩個標準。本質上說，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。創建XHTML的目的就是實現HTML向XML的過渡

一、XHTML要求正確嵌套

二、XHTML全部元素必須關閉

三、XHTML區分大小寫

四、XHTML屬性值要加引號

五、XHTML用id屬性代替name屬性

六、屬性值不能簡寫

遵循w3c制定的web標準，可以使用戶瀏覽者更方便的閱讀，使網頁開發者之間更好的交流。

43,css選擇器有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和import哪一個級別更高？

派生選擇器，id選擇器，類選擇器，

可繼承的：font-size font-family color

不可繼承的：border padding margin background-color width height

優先級：!important > [ id > class > tag ] important 比內聯優先級高

44，前端頁面有哪三層構成，分別是什麼？做用是什麼？

結構層、表示層、行爲層

結構層（structural layer）

由 HTML 或 XHTML之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：」這是一個文本段。」

表示層（presentation layer）

由 CSS 負責建立。 CSS對」如何顯示有關內容」的問題作出了回答。

行爲層（behaviorlayer）

負責回答」內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域

45，

var numberArray = [3,6,2,4,1,5];

1) 實現對該數組的倒排，輸出[5,1,4,2,6,3]

　　2) 實現對該數組的降序排列，輸出[6,5,4,3,2,1]

var numberArray = [3,6,2,4,1,5];

numberArray.reverse(); // 5,1,4,2,6,3

numberArray.sort(function(a,b){ //6,5,4,3,2,1

return b-a;

})

46，你能描述一下漸進加強和優雅降級之間的不一樣嗎?

漸進加強就是讓牛b的瀏覽器的效果更好，優雅降級就是讓2b的瀏覽器在功能ok的狀況下效果通常。

47，請解釋一下什麼是」語義化的 HTML」？

語義化的HTML就是：標題用h1-h6，文字段落用p，列表用ul li，大體如此

<header></header>語義化標籤頭部，<footer></footer>語義化標籤尾部。

<article></article>下面section的一個子集，完整一個圖文板塊,語意更明確。

<section></section>完整的一個板塊。這些了是h5提出的一些語義化的標籤。

48，請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）

1.優化圖片

2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

3.優化CSS（壓縮合並css，如margin-top,margin-left…)

4.網址後加斜槓（如www.campr.com/目錄，會判斷這個」目錄是什麼文件類型，或者是目錄。）

5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。

當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）

6.減小http請求（合併文件，合併圖片）。

49，瀏覽器標準模式和怪異模式之間的區別是什麼？

1）盒模型： IE下標準模式爲標準w3c盒模型【content+padding+border+margin】，怪異模式爲IE盒模型【content+margin：padding與border包含在content寬高中】
2）行內元素的垂直對齊：基於 Gecko 的瀏覽器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】標準模式對齊至基線，怪異模式對齊至底部
3）怪異模式中，IE6/7/8都不認識!important聲明
4）設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
5）使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效。

50，data-屬性的做用是什麼？

data-爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取

div.dataset.commentNum; // 10

51，解釋下 CSS sprites，以及你要如何在頁面或網站中使用它？

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的」background-image」，」background- repeat」，」background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。

52，事件委託，或者事件代理，事件監聽的原理及其應用？

答：事件委託是利用事件的冒泡原理來實現的，

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}
這個是點擊li彈出123，這麼作很麻煩。
window.onload = function(){

    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}
這麼就是li上面不用綁定事件，有點擊事件交給他老爹ul去幫他作，可是點他老爹也會談很煩，那麼稍微限制下他老爹
window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　	alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}
傳入一個事件參數，事件對象的做用是存下一些有用的信息。而後寫了下兼容性。事件對象有個屬性ev.target || ev.srcElement叫作target。這個是target指向的是被點擊的那個元素。而後
判斷下是否是li，是的話在彈出內容。

事件監聽的話也是綁定事件的一種方法。綁定事件，監聽函數。element.addEventListener(event, function, useCapture)最後一個參數的意思是
是在捕獲階段執行，仍是在冒泡階段執行。簡單點就是事件留採起哪一種方式。通常默認是冒泡。
事件對象通常是默認的第一個參數傳入，傳入後就能使用這個事件對象了。

53，簡單介紹瀏覽器端的幾種存儲技術？

答：cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞；而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存；

cookie是與服務端通訊，默認下生命週期短，傳輸的數據有限。優勢：能用於和服務器端通訊；當cookie快要過時時，能夠從新設置而不是刪除。安全性問題

被人攔截後那些人不用知道意義，再轉發一次就好了。

localStorage：h5新特性，存儲空間大不少。存儲在本地沒有時間限制。

缺點：瀏覽器要考慮兼容性，localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡

sessionStorage與localStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對就會被清空。

大體來講：cookie能和服務端通訊，可是要發送http請求相對也增大負擔。其餘的只能本地存儲。cookie存儲空間過小了，其餘連個大不少。可是相對讀取內容變大，頁面

也會卡頓。locaStorage存儲時間久，sessionStorage則會話結束就完了。

54，深拷貝，淺拷貝。

function simpleClone(initalObj) {    
      var obj = {};    
      for ( var i in initalObj) {
        obj[i] = initalObj[i];
      }    
      return obj;
    }

這是一個最簡但的淺拷貝，利用for in遍歷對象的屬性，而後複製給新的對象。好比一些簡單的值類型數字，字符串，就能複製下來。可是對於引用類型則

不是那麼好使了。你們都知道，引用類型複製的實際上是個指針，數據仍是會改變。這時候就要深拷貝了。對於一些簡單的數組這些類型的能夠用JSON對象的

兩個屬性parse和stringgify。可是對函數不是那麼好用因此通常採用遞歸

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    if (typeof initalObj[i] === 'object') {
      obj[i] = (initalObj[i].constructor === Array) ? [] : {};            
      arguments.callee(initalObj[i], obj[i]);
    } else {
      obj[i] = initalObj[i];
    }
  }    
  return obj;
}
var str = {};
var obj = { a: {a: "hello", b: 21} };
deepClone(obj, str);
console.log(str.a);

這裏是個深拷貝的寫法，利用了遞歸的寫法，先判斷屬性是否是引用類型，而後判斷是數組仍是對象。而後返回一個空的給克隆對象。而後此次利用遞歸再來一次

脫掉引用類型的全部的外衣找到真正能夠複製的值類型。至關於[[[[{a:2}]]]]給前面的外殼去了而後複製那個a:2；可是感受沒複製到屬性名不知道也不知道對不對。

55，arguments的一些簡單用法？

function showargs() {
    console.log( arguments );
}

showargs(1,2,a,b,c);

arguments[5]0：1，1：2，2:a,3:b,4:c;意思他造成像數組同樣的存儲方式。只是像而已並非數組。而後介紹下arguments.callee爲啥能成遞歸了？
functong a(){
var a=2;
cosole.log(arguments.callee)

}
打印的結果是他返回了一個a函數，也就是和上面那個同樣。

56，( 1 )獲取隨機數的方法：__Math.radom()______。

　　（2）JS中將一個變量強制改成浮點類型的方法：__parseFloat()______。

　　（3）根據id獲取元素的原生JS方法：__document.getElementById______。

　　（4）將文檔聲明爲HTML5文檔類型，須要在文檔頭添加：___<! doctype html>_____。

　　（5）Chrome瀏覽器的私有樣式前綴：_-webkit_______。

　　（6）CSS3設置圓角的屬性名：___border-radius_____。

　　（7）CSS中，#是根據____id____來選擇元素，.是根據_class_______來選擇元素。

　　（8）form標籤特有的屬性請列舉三個：________、________、________。

　　（9）正則表達式中，$是什麼意思：__（匹配）______。

　　（10）typeof‘123’返回：___string____。

還有一兩個不知道的哪時候在查查，隨便作了下，表格好像全忘了。

57，em px,rem 之間的區別：

px是固定的，也就是平時咱們所說的像素

rem是相對於html根元素的，也是放大倍數，通常能夠設置html的font-size而後rem是根據這個來設置大小的。

em是相對於父元素的放大倍數

默認狀況下1rem=16px；

58，var x=foo()；

   var foo=function () {
            return 2;
        };

        console.log(x);

這道題不算很難。變量的提早申明，而後給foo（）賦值給x可是這時候函數尚未解析，因此會報錯。

59，關於JSON的一些常識和用法？

答：1，JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）。

2，JSON 是輕量級的文本數據交換格式。

3，JSON 使用 Javascript語法來描述數據對象，可是 JSON 仍然獨立於語言和平臺

JSON的值有那些？格式？

數字，字符串，邏輯值。數組，對象，null 格式： "name" : "菜鳥教程"名稱，值對。

能夠用點和[]來獲取他的值。能夠用delete來刪除他的屬性。

經常使用的一些方法，

1，JSON.parse:將JSON數據（字符串）轉化爲js對象。

2 JSON.stringify將js對象，也就是（json對象）轉化爲字符串。

3 JSON.eval 和JSON.parse基本同樣的功能，可是他要執行裏面的代碼不推薦使用。

59.根據代碼判斷？

r n=(2).toString()
console.log(typeof(n));

答：首先根據字符串操做，那個n等於一個字符串‘2’，而後判斷類型就是字符串了。

59.1 dom 的操做，經常使用的有哪些，如何建立、添加、移除、移動、複製、查找節點？

答：建立: document.createElement()

添加 appendChild()

移除 removeChild()

移動 insertBefore()

複製 cloneNode()

查找 getElementById()

59.2 href和src的區別：

答： href標識超文本引用，用在link和a等元素上，href是引用和頁面關聯，是在當前元素和引用資源之間創建聯繫

src表示引用資源，表示替換當前元素，用在img，script，iframe上，src是頁面內容不可缺乏的一部分。

一個是引入，一個是引用，引入不影響頁面結構，引用影響。

59.3，css3新增的一些屬性？

答：border-radius：這個是設置圓角的；border-shaow:給方框添加陰影；border-image:給邊框設置圖片；

background-size ：屬性規定背景圖片的尺寸；text-shadow：字體的陰影；

word-wrap：容許那些文本超出盒子，而後放在下一排；

61：父組件與子組件傳值？

答：首先在父組件註冊子組件，<child message="hello">這是父組件，子組件

子組件用個props接受。能夠稍微增強下，用個動態綁定v-bind:

隨便說下v-bind:簡寫就是：就好了。主要用做屬性的綁定，後面vue寫多了慢慢能體會到這個的用法。

如今說下子組件向父組件傳值：

子組件觸發事件，像父組件傳遞一個

 onClickMe: function(){
        this.$emit('child-say',this.somedata);
      }

而後父組件在他的那個子標籤裏面監聽這個事件

<component-a  v-on:child-say="listenToMyBoy"></component-a>
 listenToMyBoy: function (somedata){
              this.childWords = somedata
            }

父組件監聽到後，而後執行函數把這個值獲取到。而後這就是基本的了。

62，vue路由之間的跳轉？

通常的幾個導航標籤直接用<router-link to="/singer">這個就好了。到了後面有些頁面跳轉通常是點擊事件而後觸發跳轉。而後差很少就長這個樣子：this.$router.push(this.id)。

頁面的註冊在router的index.js的那個文件裏面能夠設置默認路由。就先說那麼多吧。


63，v-show和v-if的共同點，不一樣點？
答：v-show是經過修改元素的css的display來顯示隱藏的，
而後v-if是直接刪除和重建dom。

64，<keep-alive>的做用的用法？

答：<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免從新渲染。

65，請列舉出3個Vue中經常使用的生命週期鉤子函數？
1，：el 和 data 並未初始化 。el是將實例化後的vue掛載到指定的dom元素中beforecreated

2，:完成了 data 數據的初始化，el沒有。
3，：完成了 el 和 data 初始化 ，而後先給坑佔好了。還沒渲染出來。
4， ：完成掛載。
5，beforeupdate 和update寫的例子沒怎麼體現出差異。都是修改了數據，都觸發了。
6，執行了destroy操做，改變數據，vue沒有作出響應，估計託管了吧。createdbeforeMountmounted

66，