2018前端經典面試題
1， html和xml有什麼區別
html是超文字標記語言 xml是可擴充套件標記語言
html語法寬鬆，xml語法嚴謹
html使用固有標記，xml沒有固有標記
html標籤預定義，xml標籤可擴充套件，可定義
html是用來顯示資料的，xml是用來描述和儲存資料的
2， css有哪幾種選擇器？權重的優先順序？
第一種為 屬性選擇器
第二種為 id選擇器
第三種為 class選擇器
第四種為 偽類選擇器
第五種是 後代選擇器
第六種是 標籤選擇器
第七種是 通用選擇器
第八種是 偽元素選擇器
- 第一等：代表內聯樣式，如: style=””，權值為1000。
- 第二等：代表ID選擇器，如：#content，權值為0100。
- 第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
- 第四等：代表型別選擇器和偽元素選擇器，如div p，權值為0001。
- 萬用字元、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
- 繼承的樣式沒有權值。
3， 網頁有哪幾部分組成？
結構層：html
表示層：css
行為層：js和dom
4， 一個200*200的div在不同解析度螢幕上下左右居中，用css實現
Div{
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
5， 闡述清楚浮動的幾種方式
第一種 父級div定義高度height 適合高度固定的佈局
第二種 父級div定義 overflow：hidden
第三種 結尾處加空標籤 clear： both 讓父級自動獲取高度
第四種 父級div定義 偽類:after 和 zoom
6， 解釋css sprites，如何使用？
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
CSS Sprites為一些大型的網站節約了頻寬，讓提高了使用者的載入速度和使用者體驗，不需要載入更多的圖片
7， 如何用原生js給一個按鈕繫結兩個onclick事件？
Var btn1 =document. getElementsById(“btn”);
btn1.addEnventListener(“click”,”hello1);
btn1.addEnventListener(“click”,”hello2);
function hello1(){
alert(“hello1”);
}
function hello2(){
alert(“hello2”);
}
8, 拖曳會用到哪些事件？
Dragstart
Dragenter
Dragover
Dragleave
Drag
Drop
Dragend
9, 請列舉jQuery中選擇器？
1， 基本選擇器
ID，class，元素之類的
2， 層級選擇器
返回的是jQuery物件才可以進行的鏈式操作
如 後代元素，子元素，兄弟元素，相鄰元素
3， 過濾選擇器
基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單物件屬性過濾選擇器
10，JavaScript中有哪些定時器，他們的區別和用法是什麼？
SetTimeout 只會執行一次
SetInterval 會一直重複執行
方式都為：settimeout（函式，時間）
11，請描述一下cookies sessionstorage 和localstorage區別
相同點：都儲存在客戶端上
不同點：1 儲存大小
Cookies 資料大小不能超過4k
Sessionstorage和Localstorage 比cookies大 ，可以達到5m或更多
2有效時間
Localstorage 儲存持久資料，瀏覽器關閉後也不會丟失，除非主動刪除資料
Sessionstorage 資料在關閉遊覽器之後自動刪除
Cookies 設定的cookies過期時間之前一直有效，即使視窗和遊覽器關閉。
3資料與伺服器之間的互動方式
Cookies的資料會自動的傳遞到伺服器，伺服器端也可以寫cookies到客戶端
Sessionstorage和localstorage 不會上傳到伺服器，僅在本地儲存
12，計算一個數組arr所有元素的和
//可以通過 document.getelmentbyid（）.value;來獲取輸入框中的值
function sum2(){
var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i=0;i<=arr1.length;i++) {
if (typeof arr1[i]==“number”) {
sum1+=arr1[i];
}
}
document.write(sum1);
}
13，編寫一個方法去掉數組裡的重複內容 var arr=[1,2,3,4,5,1,2,3]
function arr1(){
var arr2 = [1,2,3,4,5,1,2,3];
var s= [];
for(i= 0;i<arr2.length;i++){
if(s.indexOf(arr2[i]) == -1){
s.push(arr2[i]);
}
}
console.log(s);
}
14，document.write和innerHTML的區別是什麼？
Document.write是直接寫入到頁面的內容流，如果之前沒有呼叫document.Open。那麼瀏覽器會自動呼叫open，頁面被重寫
innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪。精準。
15，ajax的步驟
Ajax 非同步JavaScript和xml 能夠區域性重新整理網頁資料而不是重新載入整個網頁
第一步，建立xmlhttprequest物件，var xmlhttp = new XmlHTTPrequest（）；
Xmlhttprequest物件用來和伺服器交換資料
Var xhttp；
If(windows.XMLHttpRequest){
//現在主流瀏覽器
Xhttp = new XMLHttpRequst();
}else{
Xhttp =new ActiveXObject(“Mirosoft.XMLHTTP”);
}
第二步，xmlHTTPrequest物件的open（）和send（）方法傳送資源請求到伺服器，
第三步，使用xmlhttprequest物件的responseText或responseXML屬性獲得伺服器的響應
第四部，onreadystatechange函式，當傳送請求到伺服器，我們想要伺服器響應執行一些功能就需要使用使用onreadystatechange函式，每次xmlhttprequest物件的readystate發生改變都會觸發onreadystatechange函式。
16，xml和json的區別，請用四點來形容
Json相對於xml來講，資料體積小，傳輸速度快
Json與JavaScript更好互動，更好的資料互動
Xml對資料描述性比較好
Json的解析速度要遠遠快於XML
17，box-sizing常用的屬性有哪些？有哪些作用？
屬性值
· box-sizing：content-box
· box-sizing：border-box
· box-sizing：inherit
content-box
· 這是box-sizing的預設屬性值
· 是CSS2.1中規定的寬度高度的顯示行為
· 在CSS中定義的寬度和高度就對應到元素的內容框
· 在CSS中定義的寬度和高度之外繪製元素的內邊距和邊框
border-box
· 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒
· 即為元素在設定內邊距和邊框是在已經設定好的寬度和高度之內進行繪製
· CSS中設定的寬度和高度減去邊框和內間距才能得到元素內容所佔的實際寬度和高度
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
18，使一個300*200的div實現螢幕水平居中
前面已經有一種方法了
第二種方法：
div{
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
position: absolute;
height: 200px;
width: 300px;
}
第三種方法是利用jQuery
$(window).resize(function(){
$(".myblock").css({
position: "absolute",
left: ($(window).width() - $(".myblock").outerWidth())/2,
top: ($(window).height() - $(".myblock").outerHeight())/2 });
});
此外在頁面載入時，就需要呼叫resize()方法
$(function(){
$(window).resize();
});
19，三個盒子，左右定寬，中間自適應的方法有幾個？
第一種方法：左右採用浮動 中間採用margin-left和margin-right的方法
程式碼：
第二種方法：左右採用絕對定位，中間採用margin-left和margin-right
程式碼：
11
33
22
第三種方法 負margin值
main content left content right#main {
float: left;
width: 100%;
}
#mainContainer {
margin: 0 230px;
height: 200px;
background: green;
}
#left {
float: left;
margin-left: -100%;
width: 230px}
#right {
float: left;
margin-left: -230px;
width: 230px;
}
#left .inner,
#right .inner {
background: orange;
margin: 0 10px;
height: 200px;
}
20，js有幾種資料型別？其中基本資料型別有哪些？
基本資料型別有 Boolean，undefined，null，number，string
應用型別有 object，array，function
21，undefined和null的區別
Null 代表空值，代表一個空物件指標，一個特殊的物件值
Undefined 是未定義，型別也是undefined
22，http和https有什麼區別？如何靈活運用？
Http是http執行在TCP之上，傳輸內容是明文，客戶端和伺服器無法驗證對方身份。
HTTPS是http執行在SSL/tls之上，SSL/tls執行在TCP上，所有內容都是經過加密。加密採用對稱加密，但是祕鑰用伺服器證書進行非對稱加密。伺服器和客戶端都是可以互相驗證身份。
23，常見的Http狀態碼
2開頭，請求成功，表示成功處理了請求的狀態程式碼
3開頭，請求重定向，表示完成請求，需要進一步操作，一般是重定向
4開頭，請求錯誤，表示請求出錯，妨礙了伺服器的處理
5開頭，這些狀態碼錶示伺服器在嘗試處理請求時發生內部錯誤，伺服器本身出錯而不是請求出錯
24，如何進行網站效能的優化
原因：使用者角度 載入速度提高，更好的互動體驗
服務商角度 減少頁面請求，降低頻寬，節省資源
方法：1，JavaScript優化和打包
2，按需載入資源
3，在使用DOM操作庫時用上array-ids
4，快取
5，啟用HTTP/2
6，應用效能分析
7，使用負載均衡方案
8，同構
9，使用索引加快資料庫查詢
10，使用更快的轉譯方案
11，避免因JavaScript和css的使用而阻塞渲染
12，圖片編碼優化
25，react和vue有哪些不同，說說你對這兩個框架的看法
相同點：都支援伺服器渲染
都有virtual DOM，元件化開發，通過props引數進行父子元件資料的傳遞，都實現了webComponent規範
資料驅動檢視
都支援native方案，react的react native 和vue的weex
不同點：react嚴格上只針對MVC的view層，vue則是mvvm模式
Virtual DOM不一樣，vue會跟蹤每一個元件的依賴關係，不需要重新渲染整個元件樹，而對於react來說，每次應用狀態被改變，全部元件都會被重新渲染，所以react需要shouldComponentUPdate這個生命週期函式來進行控制。
元件的寫法不一樣。。。
資料繫結，vue是雙向的，react是單向的
State物件在react應用中不可變的，需要使用setstate方法更新狀態，在vue中state物件物件不是必須的，資料由data屬性在vue物件中管理
26，什麼是mvvm mvc 有什麼區別，原理？
1，MVC（model-view-controller）
MVC是比較直觀的架構模式，使用者模式->view(負責接收使用者的操作輸入)->controller(業務邏輯處理)->view(將結果反饋給view)
2，MVVM（model-view-viewmodel）
將”資料模型資料雙向繫結”的思想作為核心，因此model和view沒有什麼關係，之後痛過viewmodel進行互動，而model和viewmodel之間的互動是雙向的，因此資料的檢視的變化會同時修改資料來源，而資料來源的資料變化也會立刻反應view。
27，px和em的區別
Px表示畫素，是一個絕對單位，不會因為其他元素而改變
Em表示相對於父元素的字型大小，em是相對單位，會受到其他元素的影響
28，優雅降級和漸進增強
漸進增強（向上相容）：一開始就針對低版本瀏覽器進行構築介面，完成基本功能，然後在針對高階瀏覽器進行效果，互動，追加功能達到更好的體驗
優雅降級（向下相容）：一開始就構建站點的完整功能，然後針對瀏覽器測試和修復。
29，eval()的作用
把字串引數解析成JS程式碼並執行，並返回執行的結果；
例如：eval(“2+3”);//執行加運算並返回執行的結果。
Eval(“var age=10”);//宣告一個變數age
Eval()的作用域
Function(){
Eval(“var x=1”);//等效於var x=1；
Console.log(x);//輸出1
}
a();
console.log(x);//錯誤，沒有定義x
30，js哪些操作會洩露記憶體
1， 意外的全域性變數引起的記憶體洩漏
2， 閉包引起的
3， 沒有清理DOM元素的應用
4， 被遺忘的定時器或者回調
5， 子元素存在引起的
31，瀏覽器快取有哪些？通常的快取有哪幾種？
1， HTTP快取
2， Websql
3， Cookies
4， Localstorage
5， Sessionstorage
6， Flash快取
32，bootstrap響應式原理
百分比佈局+媒體查詢
33，關於js事件冒泡與js時間代理（事件委託）
1， 事件冒泡：
當一個子元素被觸發時（如onclick），該事件會從事件源（被觸發的子元素）開始逐級向上傳播，出發父級元素的點選事件。
2， 事件委託：
將子元素的事件通過冒泡的形式交由父元素來執行
例如：
- var ul = document.getElementById(‘parentUl’);
-
ul.onclick=function (event) { -
var e = event||window.event, -
source = e.target || e.srcElement;//target表示在事件冒泡中觸發事件的源元素，在IE中是srcElement -
if(source.nodeName.toLowerCase() == "li"){ //判斷只有li觸發的才會輸出內容 -
alert(source.innerHTML); -
} -
stopPropagation(e); //阻止繼續冒泡 -
}; -
function addElement() { -
var li = document.createElement('li'); -
li.innerHTML="我是新孩子"; -
ul.appendChild(li); -
}
34，css樣式覆蓋規則
規則一：由於繼承而發生樣式衝突時，最近祖先獲勝（就近原則）；
規則二：繼承樣式和直接指定的樣式衝突時，直接指定的樣式獲勝
規則三：直接指定樣式發生衝突時，樣式權值高的獲勝；
規則四：樣式權值相等時，後者獲勝。
規則五：！important的樣式不被覆蓋。
35，請簡要描述margin重合問題以及解決方式
1，同向margin重疊
這時候重疊之後的margin值由發生重疊兩片的最大值決定；如果其中一個出現負值，則由最大的正邊距減去絕對值最大的負邊距，如果沒有最大正邊距，則由0減去絕對值最大的負邊距。
解決方法：
（1） 在最外層的div中加入overflow：hidden；zoom：1；（zoom這個屬性是ie專有屬性，除了設定或者檢索物件的縮放比例之外，它還有可以觸發ie的haslayout屬性，清除浮動，清除margin重疊等作用。）
（2） 在最外層加入padding：1px；
（3） 在最外層加入：border：1px solid #000000;
2,異向重疊問題：
Float：left（ie6專屬，或解決ie8+等瀏覽器的同向重疊問題）
36，position的值,relative\absolute\fixed分別相對於進行誰定位？
Absolute：絕對定位 相對於最近一級
Fixed：絕對定位 相對於瀏覽器視窗或frame進行定位
Relative：相對定位 相對於其在普通流的位置
Static：預設值 沒有定位
Sticky：粘性定位 文件位置根據正常文件流計算得出
37，什麼是閉包，如何使用，為什麼使用？
閉包就是在函式內定義一個函式。
優點：可以讀取函式內部的變數 這些變數的值始終儲存在記憶體中
缺點：記憶體消耗大且容易造成記憶體洩漏 閉包會在父函式外部，改變父函式內部變數的值
38，請解釋一下jsonp的工作原理，以及它為什麼不是真正的ajax。
Jsonp是一個簡單的跨域方式；HTML中的script標籤可以載入並執行其他域的javascript，於是我們可以通過script標記來動態載入其他域的資源
JSONP易於實現，但是也會存在一些安全隱患，如果第三方的指令碼隨意地執行，那麼它就可以篡改頁面內容，截獲敏感資料。但是在受信任的雙方傳遞資料，JSONP是非常合適的選擇。
AJAX是不跨域的，而JSONP是一個是跨域的，還有就是二者接收引數形式不一樣
39，請解釋一下JavaScript的同源政策。
同源政策規定跨域之間的指令碼是隔離的，一個域的指令碼不能訪問和操作另外一個域的絕大部分屬性和方法。當兩個域具有相同的協議，相同的埠，相同的host，那麼我們就可以認為是相同的域。
40，怎樣新增，移除，移動，複製，建立和查詢節點？
1， 建立新節點
Createdocumentfragment（） //建立一個DOM片段
CreateElement() //建立一個具體的元素
CreateTextNode() //建立一個文字節點
2， 新增，移除，替換，插入
Appendchild（）//新增
Removechild（） //移除
Replacechild（） //替換
InsertBefore（） //插入
3， 查詢
GetelementsBytagname（）//通過標籤名
Getelementsbyname（）//通過元素的name屬性的值
GetelementbyId（）//通過元素id，唯一性
41，垃圾回收機制方式及記憶體管理
垃圾回收機制
1， 定義和用法：垃圾回收機制，執行環境負責管理程式碼執行過程中使用的記憶體。
2， 原理：垃圾回收機制會定期找出那些不再使用的變數，然後釋放其記憶體。但是這個過程不是實時的，開銷較大，所以會按固定時間間隔週期性的執行。
3， 例項如下：
function fn1() {
var obj = {name: ‘hanzichi’, age: 10};
}
function fn2() {
var obj = {name:‘hanzichi’, age: 10};
return obj;
}var a = fn1();var b = fn2();
fn1中定義的obj為區域性變數，而當呼叫結束後，出了fn1的環境，那麼該塊記憶體會被js引擎中的垃圾回收器自動釋放；在fn2被呼叫的過程中，返回的物件被全域性變數b所指向，所以該塊記憶體並不會被釋放。
4， 標記回收策略：標記清除和引用計數。
42，jQuery的事件委託方法blind，live，delegate，on之間有什麼區別？
（1），blind
定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；
語法：bind(type,[data],function(eventObject))；
特點：
(1)、適用於頁面元素靜態繫結。只能給呼叫它的時候已經存在的元素繫結事件，不能給未來新增的元素繫結事件。
(2)、當頁面載入完的時候，你才可以進行bind()，所以可能產生效率問題。
例項如下：$( “#members li a” ).bind( “click”, function( e ) {} );
（2），live
定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；
語法：live(type, [data], fn);
特點：
(1)、live方法並沒有將監聽器繫結到自己(this)身上，而是繫結到了this.context上了。
(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新新增的元素不必再繫結一次監聽器。
(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即(“body”).find(“ul”).live…不行；
例項如下：$( document ).on( “click”, “#members li a”, function( e ) {} );
（3），delegate
定義和用法：將監聽事件繫結在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特點：
(1)、選擇就近的父級元素，因為事件可以更快的冒泡上去，能夠在第一時間進行處理。
(2)、更精確的小範圍使用事件代理，效能優於.live()。可以用在動態新增的元素上。
例項如下：
$("#info_table").delegate(“td”,“click”,function(){/顯示更多資訊/});
$(“table”).find("#info").delegate(“td”,“click”,function(){/顯示更多資訊/});
（4），on
定義和用法：將監聽事件繫結到指定元素上。
語法：on(type,[selector],[data],fn)
例項如下：$("#info_table").on(“click”,“td”,function(){/顯示更多資訊/});引數的位置寫法與delegate不一樣。
說明：on方法是當前JQuery推薦使用的事件繫結方法，附加只執行一次就刪除函式的方法是one()。
總結：.bind(), .live(), .delegate(), .on()分別對應的相反事件為：.unbind(),.die(), .undelegate(),.off()
43，瀏覽器的核心分別是什麼？
IE：trident核心
Firefox：gecko核心
Safari：webkit核心
Opera：現在blink核心
Chrome：blink核心
44，瀏覽器是如何渲染畫面的？
渲染的流程如下：
1， 解析HTML檔案，建立dom樹
自上而下，遇到任何樣式和指令碼都會阻塞
2， 解析css。優先順序：瀏覽器預設設定<使用者設定<外部樣式<內聯樣式<HTML中的style樣式；
3， 將css和DOM合併，構建渲染樹
4， 佈局和繪製，重繪和重排
45，css3新增了很多屬性，一起分析一下新增的屬性：
1.CSS3邊框：
· border-radius：CSS3圓角邊框。在 CSS2 中新增圓角矩形需要技巧，我們必須為每個圓角使用不同的圖片，在 CSS3 中，建立圓角是非常容易的，在 CSS3 中，border-radius 屬性用於建立圓角。border：2px solid;
· box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用於向方框新增陰影。box-shadow:10px 10px 5px #888888;
· border-image：CSS3邊框圖片。通過 CSS3 的 border-image 屬性，您可以使用圖片來建立邊框。border-image：url(border.png) 30 30 round;
2.CSS3背景：
· background-size： 屬性規定背景圖片的尺寸。在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重複使用背景圖片。您能夠以畫素或百分比規定尺寸。如果以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。
· background-origin ：屬性規定背景圖片的定位區域。背景圖片可以放置於 content-box、padding-box 或 border-box 區域。
3.CSS3文字效果：
· text-shadow：在 CSS3 中，text-shadow 可向文字應用陰影。text-shadow:5px 5px 5px #FFFFFF;
· word-wrap :單詞太長的話就可能無法超出某個區域，允許對長單詞進行拆分，並換行到下一行：p{word-wrap:break-word;}
4.CSS3 2D轉換：
transform：通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
· translate()：元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側移動 50 畫素，從頂端移動 100 畫素。
· rotate()：元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。
· scale():元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）引數：transform:scale(2,4);值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高x() 5.CSS3 3D轉換：
· rotateX()：元素圍繞其 X 軸以給定的度數進行旋轉。transform：rotateX(120deg);
· rotateY()：元素圍繞其 Y 軸以給定的度數進行旋轉。transform：rotateY(120deg);
6.CSS3 過渡：當元素從一種樣式變換為另一種樣式時為元素新增效果。
7.CSS3動畫：通過 CSS3，我們能夠建立動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
8.CSS3多列：
· column-count：屬性規定元素應該被分隔的列數。
· column-gap：屬性規定列之間的間隔。
· column-rule ：屬性設定列之間的寬度、樣式和顏色規則。
9.CSS3使用者介面：
· resize：屬性規定是否可由使用者調整元素尺寸。
· box-sizing：屬性允許您以確切的方式定義適應某個區域的具體內容。
· outline-offset ：屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
46，從輸入url到顯示頁面，都經歷了什麼？
1、首先，在瀏覽器位址列中輸入url
2、瀏覽器先檢視瀏覽器快取-系統快取-路由器快取，如果快取中有，會直接在螢幕中顯示頁面內容。若沒有，則跳到第三步操作。
3、在傳送http請求前，需要域名解析(DNS解析)(DNS（域名系統，Domain Name System）是網際網路的一項核心服務，它作為可以將域名和IP地址相互對映的一個分散式資料庫，能夠使人更方便的訪問網際網路，而不用去記住IP地址。)，解析獲取相應的IP地址。
4、瀏覽器向伺服器發起tcp連線，與瀏覽器建立tcp三次握手。（TCP即傳輸控制協議。TCP連線是網際網路連線協議集的一種。）
5、握手成功後，瀏覽器向伺服器傳送http請求，請求資料包。
6、伺服器處理收到的請求，將資料返回至瀏覽器
7、瀏覽器收到HTTP響應
8、讀取頁面內容，瀏覽器渲染，解析html原始碼
9、生成Dom樹、解析css樣式、js互動
10、客戶端和伺服器互動
11、ajax查詢
47，對標籤有什麼理解？
Meta標籤提供關於html文件的元資料。它不會顯示在頁面上，但是對於機器是可讀的。可用於瀏覽器，搜尋引擎，或其他web服務。
作用：
Meta裡的資料是供機器解讀的，告訴機器如何解析這個頁面，還有一個用途是可以新增伺服器傳送到瀏覽器的http頭部內容。
48，h5新特性，
(1)新的語義標籤和屬性
(2)表單新特性
(3)視訊和音訊
(4)Canvas繪圖
(5)SVG繪圖
(6)地理定位
(7)拖放API
49，display：none 和 visibility：hidden的區別
1.display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素；
2.使用visibility:hidden比display:none效能上要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建，此時就是迴流。所有頁面第一次載入時需要產生一次迴流），而visibility切換是否顯示時則不會引起迴流。
50，JavaScript如何檢測一個變數是一個string型別
typeof(obj) === “string”
typeof obj === “string”
obj.constructor === String
**51，(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，並呼叫執行繫結的函式。
52，get和post之間的區別？
1， 傳輸大小 get比post傳輸內容要小
2， Get請求引數會被保留在歷史記錄中，而post不會
3， Post是加密傳輸，get是明文傳輸，post要比get安全
4， Get只能接受url編碼，而post沒有限制