1. 程式人生 > >HTML5常見面試題及答案(一)

HTML5常見面試題及答案(一)

1、文字超出顯示為省略號

//單行:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
//多行:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

2、div垂直居中

  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #000;
  -webkit-transform: translateX(-50%) translateY(-50%);

3、瀏覽器載入過程

    瀏覽器接收到html程式碼,可能是一份完整的文件,也可能是一個chunk,即開始解析。解析過程是先構建dom樹,再根據dom樹構建渲染樹,渲染樹根據渲染樹就會繪製到瀏覽器上。構建dom樹的過程即根據html程式碼自上而下構建dom樹,當遇到script檔案載入/執行會阻塞後面dom樹的構建(javascript可能會改變dom樹),而遇到css檔案則會阻塞渲染樹的構建,即dom樹依然繼續構建(除非遇到script標籤並且css檔案依舊未載入完成),但不會渲染繪製到頁面上。而無論哪個阻塞,該載入的檔案還是會載入,例如html文件中的其他css/js/圖片檔案。至於javascript被載入後就會被執行,執行的過程也阻塞樹的構建。是執行完了才解析其他內容,而不是執行完了才載入其他內容。


4、http請求過程

    a. 域名解析

    b. 發起TCP的3次握手

    c. 建立TCP連線後發起http請求

    d. 伺服器端響應http請求,瀏覽器得到html程式碼

    e. 瀏覽器解析html程式碼,並請求html程式碼中的資源

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

5、sessionStoragelocalStorage的區別,以及cookesweb storage的區別

    sessionStorage用於本地儲存一個會話(session)中的資料,這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存,僅僅是會話級別的儲存。而localStorage用於持久化的本地儲存,除非主動刪除資料,否則資料是永遠不會過期的。

6、web storagecookie的區別

    Web Storage的概念和cookie相似,區別是它是為了更大容量儲存設計的。Cookie的大小是受限的,並且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了頻寬,另外cookie還需要指定作用域,不可以跨域呼叫。除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發者自己封裝setCookiegetCookie。但是Cookie也是不可以或缺的:Cookie的作用是與伺服器進行互動,作為HTTP規範的一部分而存在,而Web Storage僅僅是為了在本地“儲存”資料而生。

7Ajax請求的原理?

    (1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件.

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

    (3)設定響應HTTP請求狀態變化的函式.

    (4)傳送HTTP請求.

    (5)獲取非同步呼叫返回的資料

    (6)使用JavaScript和DOM實現區域性重新整理

8、原型、原型鏈

    每個函式都有一個prototype(原型)屬性;物件是沒有原型的 ,但是有_proto_(原型鏈),指向父級函式的原型。

10、事件委託、事件冒泡、事件捕獲

    一個div裡面有個span元素 ,當滑鼠單擊span時,這個事件算是誰的?div還是span?

    事件冒泡: IE認為,這個事件首先觸發span,然後依次往父節點傳遞,最終傳遞到document,(這個過程稱為冒泡)

    事件捕獲:網景瀏覽器認為,任何事件都首先觸發document,然後依次往下傳遞到span元素,(這個過程稱為捕獲)

    事件委託:根據事件冒泡機制,任何事件都會冒泡到document,事件委託就是把所有事件處理函式繫結到document,根據事件引數判斷事件源物件,判斷不同的物件給予不同的處理函式,

11、跨域

a: josnp (最常用一種方式 ,耗時最短,最有效)是通過get請求

    簡單來說就是利用jsonp動態新增一個<script>標籤,而script標籤的src屬性是沒有跨域的限制的。這樣說來,這種跨域方式其實與ajax XmlHttpRequest協議了         

b :伺服器設定響應頭  

    http://localhost:8080 發起ajax請求

    介面所在伺服器http://localhost:8090

“Access-Control-Allow Origin”,“http://localhost:8090”

c : 伺服器重定向(代理)

    http://localhost:8080   發起ajax請求

    本地伺服器介面  http://localhost:8080做一個代理介面,後端調後端 繞過安全協議

    介面所在伺服器http://localhost:8090