前端面試問題（HTML5+Http+web）

HTML(5)

1.簡要介紹HTML5的新特性

首先HTML5爲了更好的實踐Web語義化，增長了header、footer、nav、aside、article、section等語義化標籤。

在表單方面，爲了加強表單，爲input增長color、email、date、range等類型，

在存儲方面提供了sessionStorage 、localStorage和離線存儲，經過這些存儲方式方便數據在客戶端的存儲和獲取，

在多媒體方面規定了音頻和視頻元素audio和vedio；

另外還有地理定位、canvas畫布、拖放、多線程編程的web workers和websocket協議

 

2.塊級元素和行內元素有哪些？

塊級元素有表示佈局類的div、section、header、footer、aside、nav、article等，

列表類ul li、ol之類的，form、p、table、

標題h1~h6

行內元素：a、span、button、input、select、textarea、i、em、strong

3.HTML5的存儲方案有哪些

HTML5提供了sessionStorage、localStorage和離線存儲做爲新的存儲方案，其中sessionStorage和localStorage 都是採用鍵值對的形式存儲，二者都是經過setItem、getItem、removeItem來實現增刪查改，

而sessionStorage是會話存儲，也就是說 當瀏覽器關閉以後sessionStorage也自動清空了，

而localStorage不會，它沒有時間上的限制。

離線存儲也就是應用程序緩存，這個一般用來 確保web應用可以在離線狀況下使用，經過在html標籤中屬性manifest來聲明須要緩存的文件，這個屬性的值是一個包含須要緩存的文件的文件名的文件， 這個manifest文件聲明的緩存文件可在初次加載後緩存在客戶端，能夠經過更新這個manifest文件來達到更新緩存文件的目的。

4.viewport的常見設置有哪些

viewport經常使用在響應式開發以及移動web開發中，viewport顧名思義就是用來設置視口，主要是規定視口的寬度、視口的初始縮放值、 視口的最小縮放值、視口的最大縮放值、是否容許用戶縮放等。一個常見的viewport設置以下：

<meta name="viewport"  content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" />

其中同時設置width和initial-scale的目的是爲了解決iphone、ipad、ie橫豎屏不分的狀況，由於這兩個值同時存在時會取較大值。

 

5.從瀏覽器地址欄輸入url到顯示頁面的步驟(以HTTP爲例)

1.在瀏覽器地址欄輸入URL

2.瀏覽器查看緩存，若是請求資源在緩存中而且新鮮，跳轉到轉碼步驟

3.瀏覽器解析URL獲取協議，主機，端口，path

4.瀏覽器組裝一個HTTP（GET）請求報文

5.瀏覽器獲取主機ip地址

6.打開一個socket與目標IP地址，端口創建TCP連接，三次握手

7.TCP連接創建後發送HTTP請求

8.服務器檢查HTTP請求頭是否包含緩存驗證信息若是驗證緩存新鮮，返回304等對應狀態碼

9.服務器將響應報文經過TCP鏈接發送回瀏覽器

10.瀏覽器接收HTTP響應，而後根據狀況選擇關閉TCP鏈接或者保留重用，

11.瀏覽器檢查響應狀態嗎：是否爲1XX，3XX， 4XX， 5XX，這些狀況處理與2XX不一樣

12.若是資源可緩存，進行緩存

13.對響應進行解碼（例如gzip壓縮）

14.根據資源類型決定如何處理（假設資源爲HTML文檔）

15.解析HTML文檔，構件DOM樹，下載資源，構造CSSOM樹，執行js腳本，這些操做沒有嚴格的前後順序，如下分別解釋

1. 構建DOM樹：
   1. Tokenizing：根據HTML規範將字符流解析爲標記
   2. Lexing：詞法分析將標記轉換爲對象並定義屬性和規則
   3. DOM construction：根據HTML標記關係將對象組成DOM樹
2. 解析過程當中遇到圖片、樣式表、js文件，啓動下載
3. 構建CSSOM樹：
   1. Tokenizing：字符流轉換爲標記流
   2. Node：根據標記建立節點
   3. CSSOM：節點建立CSSOM樹
4. 根據DOM樹和CSSOM樹構建渲染樹:
   1. 從DOM樹的根節點遍歷全部可見節點，不可見節點包括：1）script,meta這樣自己不可見的標籤。2)被css隱藏的節點，如display: none
   2. 對每個可見節點，找到恰當的CSSOM規則並應用
   3. 發佈可視節點的內容和計算樣式
5. js解析以下：
   1. 瀏覽器建立Document對象並解析HTML，將解析到的元素和文本節點添加到文檔中，此時document.readystate爲loading
   2. HTML解析器遇到沒有async和defer的script時，將他們添加到文檔中，而後執行行內或外部腳本。這些腳本會同步執行，而且在腳本下載和執行時解析器會暫停。這樣就能夠用document.write()把文本插入到輸入流中。同步腳本常常簡單定義函數和註冊事件處理程序，他們能夠遍歷和操做script和他們以前的文檔內容
   3. 當解析器遇到設置了async屬性的script時，開始下載腳本並繼續解析文檔。腳本會在它下載完成後儘快執行，可是解析器不會停下來等它下載。異步腳本禁止使用document.write()，它們能夠訪問本身script和以前的文檔元素
   4. 當文檔完成解析，document.readState變成interactive
   5. 全部defer腳本會按照在文檔出現的順序執行，延遲腳本能訪問完整文檔樹，禁止使用document.write()
   6. 瀏覽器在Document對象上觸發DOMContentLoaded事件
   7. 此時文檔徹底解析完成，瀏覽器可能還在等待如圖片等內容加載，等這些內容完成載入而且全部異步腳本完成載入和執行，document.readState變爲complete,window觸發load事件
6. 顯示頁面（HTML解析過程當中會逐步顯示頁面）

6.如何進行網站性能優化

• content方面

  1. 減小HTTP請求：合併文件、CSS精靈、inline Image
  2. 減小DNS查詢：DNS查詢完成以前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢
  3. 避免重定向：多餘的中間訪問
  4. 使Ajax可緩存
  5. 非必須組件延遲加載
  6. 將來所需組件預加載
  7. 減小DOM元素數量
  8. 將資源放到不一樣的域下：瀏覽器同時從一個域下載資源的數目有限，增長域能夠提升並行下載量
  9. 減小iframe數量
  10. 不要404

• Server方面

  1. 使用CDN
  2. 添加Expires或者Cache-Control響應頭
  3. 對組件使用Gzip壓縮
  4. 配置ETag
  5. Flush Buffer Early
  6. Ajax使用GET進行請求
  7. 避免空src的img標籤

• Cookie方面

  1. 減少cookie大小
  2. 引入資源的域名不要包含cookie

• css方面

  1. 將樣式表放到頁面頂部
  2. 不使用CSS表達式
  3. 少使用不使用@import
  4. 不使用IE的Filter

• Javascript方面

  1. 將腳本放到頁面底部
  2. 將javascript和css從外部引入
  3. 壓縮javascript和css
  4. 刪除不須要的腳本
  5. 減小DOM訪問
  6. 合理設計事件監聽器

• 圖片方面

  1. 優化圖片：根據實際顏色須要選擇色深、壓縮
  2. 優化css精靈
  3. 不要在HTML中拉伸圖片
  4. 保證favicon.ico小而且可緩存

• 移動方面

  1. 保證組件小於25k
  2. Pack Components into a Multipart Document

7.什麼是漸進加強

漸進加強是指在web設計時強調可訪問性、語義化HTML標籤、外部樣式表和腳本。保證全部人都能訪問頁面的基本內容和功能同時爲高級瀏覽器和高帶寬用戶提供更好的用戶體驗。核心原則以下:

• 全部瀏覽器都必須能訪問基本內容
• 全部瀏覽器都必須能使用基本功能
• 全部內容都包含在語義化標籤中
• 經過外部CSS提供加強的佈局
• 經過非侵入式、外部javascript提供加強功能
• end-user web browser preferences are respected

8.HTTP狀態碼及其含義

• 1XX：信息狀態碼
  • 100 Continue：客戶端應當繼續發送請求。這個臨時相應是用來通知客戶端它的部分請求已經被服務器接收，且仍未被拒絕。客戶端應當繼續發送請求的剩餘部分，或者若是請求已經完成，忽略這個響應。服務器必須在請求萬仇向客戶端發送一個最終響應
  • 101 Switching Protocols：服務器已經理解力客戶端的請求，並將經過Upgrade消息頭通知客戶端採用不一樣的協議來完成這個請求。在發送完這個響應最後的空行後，服務器將會切換到Upgrade消息頭中定義的那些協議。
• 2XX：成功狀態碼
  • 200 OK：請求成功，請求所但願的響應頭或數據體將隨此響應返回
  • 201 Created：
  • 202 Accepted：
  • 203 Non-Authoritative Information：
  • 204 No Content：
  • 205 Reset Content：
  • 206 Partial Content：
• 3XX：重定向
  • 300 Multiple Choices：
  • 301 Moved Permanently：
  • 302 Found：
  • 303 See Other：
  • 304 Not Modified：
  • 305 Use Proxy：
  • 306 （unused）：
  • 307 Temporary Redirect：
• 4XX：客戶端錯誤
  • 400 Bad Request:
  • 401 Unauthorized:
  • 402 Payment Required:
  • 403 Forbidden:
  • 404 Not Found:
  • 405 Method Not Allowed:
  • 406 Not Acceptable:
  • 407 Proxy Authentication Required:
  • 408 Request Timeout:
  • 409 Conflict:
  • 410 Gone:
  • 411 Length Required:
  • 412 Precondition Failed:
  • 413 Request Entity Too Large:
  • 414 Request-URI Too Long:
  • 415 Unsupported Media Type:
  • 416 Requested Range Not Satisfiable:
  • 417 Expectation Failed:
• 5XX: 服務器錯誤
  • 500 Internal Server Error:
  • 501 Not Implemented:
  • 502 Bad Gateway:
  • 503 Service Unavailable:
  • 504 Gateway Timeout:
  • 505 HTTP Version Not Supported: