Web前端面試題目彙總

二、行內元素有哪些？塊級元素有哪些？ 空(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

五、什麼是CSS Hack?

通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。
IE瀏覽器Hack通常又分爲三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：

// 一、條件Hack<!--[if IE]><style>
            .test{color:red;}
      </style><![endif]-->// 二、屬性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */    _color:#ff0;  /* For IE6 and earlier */
    }
   // 三、選擇符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

九、瀏覽器的內核分別是什麼?

IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)

怎樣添加、移除、移動、複製、建立和查找節點？

1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點

2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入

3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性

如何消除一個數組裏面重復的元素？

// 方法一：var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];for(var i =0,len =arr1.length; i< len; 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僅僅是爲了在本地「存儲」數據而生。

一次完整的HTTP事務是怎樣的一個過程？

基本流程：

a. 域名解析

b. 發起TCP的3次握手

c. 創建TCP鏈接後發起http請求

d. 服務器端響應http請求，瀏覽器獲得html代碼

e. 瀏覽器解析html代碼，並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）

functiontrim(str) {if (str &&typeof str ==="string") {returnstr.replace(/(^\s*)|(\s*)$/g,"");//去除先後空白符}}

 

使用正則表達式驗證郵箱格式

var reg =/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;var email ="example@qq.com";console.log(reg.test(email));// true  

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

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

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

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

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

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

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

如何解決跨域問題

JSONP：

原理是：動態插入script標籤，經過script標籤引入一個js文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。

因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求，而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。

優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。

JSONP：json+padding（內填充），顧名思義，就是把JSON填充到一個盒子裏

 

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script>     function createJs(sUrl){           var oScript = document.createElement('script');         oScript.type = 'text/javascript';         oScript.src = sUrl;         document.getElementsByTagName('head')[0].appendChild(oScript);     }       createJs('jsonp.js');       box({        'name': 'test'     });       function box(json){         alert(json.name);     } </script>