前端面試題

 

 1.xhtml和html有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

最主要的不一樣：

     XHTML 元素必須被正確地嵌套。

     XHTML 元素必須被關閉。

   標籤名必須用小寫字母。

     XHTML 文檔必須擁有根元素

二、簡述一下src與href的區別：

href 是指向網絡資源所在位置，創建和當前元素(錨點)或當前文檔(連接)之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置;在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

三、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote

空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

四、 form中的action屬性和method屬性的含義是什麼？method經常使用值有哪些？

action屬性用於指定form表單提交的後臺程序地址；method屬性用於指定form表單提交的方法。

method的經常使用值有：get和post

五、 表單元素新增的屬性有哪些？

required： 必填項目

placeholder：提示信息，點擊input內容時會消失

pattern:校驗正則表達式

autofocus：自動得到焦點

autocomplete:自動完成

6.向指定服務器提交數據的方法有哪些？

   Ajax  表單Form  

   URL?參數 

   AngularJS的$HTTP

JQ Ajax: $.POST(,,)  $.GET(,,)  $.Ajax({})

JS Ajax: 5步。(參考25題)

七、寫一個function，清除字符串先後的空格。(兼容全部瀏覽器)

function trim(str) {

   if (str && typeof str === "string") {

            return str.replace(/(^\s*)|(\s*)$/g,"");   //去除先後空白符

           }

} 

八、如何消除一個數組裏面重復的元素?

var arr1 =[1,2,2,2,3,3,3,4,5,6],

 var arr2 = [ ];

    for(var i = 0； i< arr1.length; i++){

        if(arr2.indexOf(arr1[i]) < 0){

         arr2.push(arr1[i]);

        }

}

document.write(arr2); // 1,2,3,4,5,6

九、請描述一下cookies，sessionStorage和localStorage的區別

sessionStorage用於本地存儲一個會話(session)中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

10、cookie和session的區別是什麼？

   Cookie 保存在客戶端本機；

   Session保存在服務器端；

  聯繫：session的id存在cookie中。

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

1）.link屬於XHTML標籤，而@import是CSS提供的；

2）.頁面被加載的時，link會同事被加載，而@import引用的CSS會等到頁面被加載完再加載；

3）.import只有在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

4）.link 方式的樣式的權重>@import的權重

12.簡單描述下定位Position:

Relative:相對定位。相對於自身原有位置定位，原DOM空間會保留；

Absolute：絕對定位。相對於第一個非static定位的祖先元素進行定位，會刪除原DOM空間；

Fixed：固定定位器窗口進行定位； 會刪除DOM空間

Static： 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。

Inherit：規定從父元素繼承 position 屬性的值。

13.display有哪些值？說明他們的做用。

  block         象塊類型元素同樣顯示。

  none          缺省值。象行內元素類型同樣顯示。

  inline-block    象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。

  list-item     象塊類型元素同樣顯示，並添加樣式列表標記。

  table         此元素會做爲塊級表格來顯示

  inherit       規定應該從父元素繼承 display 屬性的值

14、jquery中如何將數組轉化爲json字符串，而後再轉化回來？

$.parseJSON

$.fn.stringify = function() {

   return JSON.stringify(this);

}

使用：$(array).stringify();

15.JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。

它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

如：{"age":"12", "name":"back"}

JSON字符串轉換爲JSON對象:

var obj =eval('('+ str +')');

var obj = str.parseJSON();

var obj = JSON.parse(str);

JSON對象轉換爲JSON字符串：

var last=obj.toJSONString();

var last=JSON.stringify(obj);

1六、什麼是響應式設計？響應式設計的基本原理是什麼？

   根據不一樣設備的屏幕大小、分辨率、方向等，統一網站展現爲不一樣效果。

   移動優先。可使用JS跳轉不一樣手機站和PC站，可使用MediaQuery檢測不一樣設備的屬性展現不一樣的CSS，可使用各類響應式前端框架。

   優勢：用戶體驗好，尤爲是手機端。

   缺點：包含大量冗餘代碼，開發成本較大(可是遠低於開發手機站+PC站的模式)

17. visibility：hidden和display：none的區別？

使用display：none隱藏之後，元素的空間被釋放，其他元素能夠佔用空間；

使用visibility：hidden僅僅是看不見，可是元素的空間依然佔據，別的元素沒法使用。

1八、 列舉數組相關的經常使用方法

push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

19、 列舉字符串相關的經常使用方法

indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

20、常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內核：Netscape6及以上版本，FireFox（火狐）,MozillaSuite/SeaMonkey等

Presto內核：Opera7及以上。      [Opera內核原爲：Presto，現爲：Blink;]

Webkit內核：Safari（蘋果自帶的瀏覽器）,Chrome（谷歌）等。   [ Chrome的：Blink（WebKit的分支）]

21.title與h1的區別、b與strong的區別、i與em的區別？

   title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

  strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<b>是展現強調內容。

  i內容展現爲斜體，em表示強調的文本；

22、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

  區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；

  有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。

23.對前端工程師這個職位你是怎麼樣理解的?

a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

b. 參與項目，快速高質量完成實現效果圖，精確到1px;

c. 與團隊成員，UI設計，產品經理的溝通;

d. 作好的頁面結構，頁面重構和用戶體驗;

e. 處理hack，兼容、寫出優美的代碼格式;

f. 針對服務器的優化、擁抱最新前端技術。

24、什麼是閉包(closure),爲何要用它？

閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域，將函數內部的變量和方法傳遞到外部。能夠把閉包簡單理解成「定義在一個函數內部的函數」

閉包的特性：

1.函數內再嵌套函數

2.內部函數能夠引用外層的參數和變量

3.參數和變量不會被垃圾回收機制回收

//li節點的onclick事件都能正確的彈出當前被點擊的li索引

 <ul id="test">

    <li> index = 0</li>

    <li> index = 1</li>

    <li> index = 2</li>

    <li> index = 3</li>

</ul>

<script type="text/javascript">

    var nodes = document.getElementsByTagName("li");

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

      nodes[i].onclick = function(){

      console.log(i+1);        //不用閉包的話，值每次都是4

        }(i);

    }

</script>

25、Ajax是什麼？如何建立一個Ajax？

ajax全稱爲：Asynchronous javascript and XML,即異步的JavaScript和xml，也稱頁面無刷技術。這裏的異步能夠簡單的理解爲：向服務器發送請求的時候，咱們沒必要等待結果，而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗。

如何建立一個Ajax？

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

(3)設置響應HTTP請求狀態變化的函數

(4)發送HTTP請求

(5)獲取異步調用返回的數據

(6)使用JavaScript和DOM實現局部刷新

26.原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不一樣？如何用原生JS實現Jq的ready方法？

window.onload()方法是必須等到頁面內包括圖片的全部元素加載完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

27.（設計題）想實現一個對頁面某個節點的拖曳？如何作？（使用原生JS）

回答出概念便可，下面是幾個要點

給須要拖拽的節點綁定mousedown, mousemove, mouseup事件

mousedown事件觸發後，開始拖拽

mousemove時，須要經過event.clientX和clientY獲取拖拽位置，並實時更新位置

mouseup時，拖拽結束

28、 apply, call和bind有什麼區別?

三者均可以把一個函數應用到其餘對象上，注意不是自身對象．apply,call是直接執行函數調用，bind是綁定，執行須要再次調用．

apply和call的區別是apply接受數組做爲參數，而call是接受逗號分隔的無限多個參數列表，

代碼演示

    function Person() {

    }

    Person.prototype.sayName() { alert(this.name); }

    var obj = {name: 'michaelqin'}; // 注意這是一個普通對象，它不是Person的實例

    1) apply

    Person.prototype.sayName.apply(obj, [param1, param2, param3]);

    2) call

    Person.prototype.sayName.call(obj, param1, param2, param3);

    3) bind

    var sn = Person.prototype.sayName.bind(obj);    

    sn([param1, param2, param3]); // bind須要先綁定，再執行

   sn(param1, param2, param3); // bind須要先綁定，再執行

29、iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；

*搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript

動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

30、如何解決ajax跨域問題？

jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

本身的作法：

jQuery中ajax的使用

$.ajax({

dataType:’jsonp’

})