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腳本，這些操作沒有嚴格的先后順序，以下分別解釋

構建DOM樹：

Tokenizing：根據HTML規范將字符流解析為標記

Lexing：詞法分析將標記轉換為對象并定義屬性和規則

DOM construction：根據HTML標記關系將對象組成DOM樹

解析過程中遇到圖片、樣式表、js文件，啟動下載

構建CSSOM樹：

Tokenizing：字符流轉換為標記流

Node：根據標記創建節點

CSSOM：節點創建CSSOM樹

根據DOM樹和CSSOM樹構建渲染樹:

從DOM樹的根節點遍歷所有可見節點，不可見節點包括：1）script,meta這樣本身不可見的標簽。2)被css隱藏的節點，如display: none

對每一個可見節點，找到恰當的CSSOM規則并應用

發布可視節點的內容和計算樣式

js解析如下：

瀏覽器創建Document對象并解析HTML，將解析到的元素和文本節點添加到文檔中，此時document.readystate為loading

HTML解析器遇到沒有async和defer的script時，將他們添加到文檔中，然后執行行內或外部腳本。這些腳本會同步執行，并且在腳本下載和執行時解析器會暫停。這樣就可以用document.write()把文本插入到輸入流中。同步腳本經常簡單定義函數和注冊事件處理程序，他們可以遍歷和操作script和他們之前的文檔內容

當解析器遇到設置了async屬性的script時，開始下載腳本并繼續解析文檔。腳本會在它下載完成后盡快執行，但是解析器不會停下來等它下載。異步腳本禁止使用document.write()，它們可以訪問自己script和之前的文檔元素

當文檔完成解析，document.readState變成interactive

所有defer腳本會按照在文檔出現的順序執行，延遲腳本能訪問完整文檔樹，禁止使用document.write()

瀏覽器在Document對象上觸發DOMContentLoaded事件

此時文檔完全解析完成，瀏覽器可能還在等待如圖片等內容加載，等這些內容完成載入并且所有異步腳本完成載入和執行，document.readState變為complete,window觸發load事件

顯示頁面（HTML解析過程中會逐步顯示頁面）

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

• content方面

• 減少HTTP請求：合并文件、CSS精靈、inline Image
• 減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分布到恰當數量的主機名，平衡并行下載和DNS查詢
• 避免重定向：多余的中間訪問
• 使Ajax可緩存
• 非必須組件延遲加載
• 未來所需組件預加載
• 減少DOM元素數量
• 將資源放到不同的域下：瀏覽器同時從一個域下載資源的數目有限，增加域可以提高并行下載量
• 減少iframe數量
• 不要404

• Server方面

• 使用CDN
• 添加Expires或者Cache-Control響應頭
• 對組件使用Gzip壓縮
• 配置ETag
• Flush Buffer Early
• Ajax使用GET進行請求
• 避免空src的img標簽

• Cookie方面

• 減小cookie大小
• 引入資源的域名不要包含cookie

• css方面

• 將樣式表放到頁面頂部
• 不使用CSS表達式
• 少使用不使用@import
• 不使用IE的Filter

• Javascript方面

• 將腳本放到頁面底部
• 將javascript和css從外部引入
• 壓縮javascript和css
• 刪除不需要的腳本
• 減少DOM訪問
• 合理設計事件監聽器

• 圖片方面

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

• 移動方面

• 保證組件小于25k
• 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:

?

轉載于:https://www.cnblogs.com/FunkyEric/p/8979227.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的前端面试问题（HTML5+Http+web）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。