HTML之基礎介紹
簡單介紹html的歷史、html文件的結構,同時也擴充了其他前端知識點,如樣式指令碼的非同步載入、頁面渲染原理及優化!
html的歷史
html誕生於1993年,應用最廣泛的為html4和xhtml,現在最新版本為html5。html全稱超文字標記語言(英語:HyperText Markup Language),它是一種用於建立網頁的標準標記語言,頁面內可以包含圖片、連結,甚至音樂、程式等非文字元素。如果頁面需要考慮相容性(如需相容至ie8),提出幾條具體建議:
- 編寫格式嚴格的html語法,瞭解html5的最新特性!
- 所有標籤屬性加引號 :<p id="pp">
- 所有標籤使用小寫形式
- 屬性值不進行省略:<input type="checkbox" checked="checked"/>
- 自閉合標籤需要閉合:<br/>
- 線上相容性查詢網站:caniuse.com/
html規範
html控制結構,css控制樣式,js控制行為,如何組織程式碼結構?提高首屏渲染速度?進行seo優化?下述規範來自於網易NEC規範~
<!DOCTYPE html>
<html>
<head>
<!--定義網頁編碼資訊-->
<meta charset="utf-8"/>
<!--定義網頁標題-->
<title>html基本介紹</title>
<!--定義網頁資訊,方便搜尋引擎自動收集網站資訊-->
<!--定義網頁關鍵詞-->
<meta name="keywords" content=""/>
<!--定義網頁描述內容-->
<meta name="description" content=""/>
<!--/定義網頁資訊,方便搜尋引擎自動收集網站資訊-->
<!--優化網頁在移動裝置上的顯示效果-->
<meta name="viewport" content="width=device-width"/>
<!--定義頁面2秒後跳轉指定連結。http-equiv還可以對cache、cookie等進行控制!-->
<meta http-equiv="refresh" content="2;URL=#">
<!--匯入css樣式表-->
<link rel="stylesheet" href="./css/01/style.css"/>
<!--設定網頁的小圖示-->
<link rel="shortcut icon" href="../source/img/favicon.ico"/>
<link rel="apple-touch-icon" href="../source/img/touchicon.png"/>
<!--設定css樣式-->
<style>
.g-doc {
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 1px 1px 5px #aaa;
}
</style>
<!--設定或者匯入js指令碼-->
<script>
window.onload = function () {
alert('我是js指令碼!')
}
</script>
</head>
<body>
<!--主要編輯區域-->
<div class="g-doc">
<p>hello world!</p>
</div>
<!--/主要編輯區域-->
<!--匯入外部js指令碼-->
<script src="./js/01/index.js"></script>
</body>
</html>
複製程式碼
html衍生
從輸入網址到顯示網頁的過程中發生了什麼?
發生了什麼過程?
- 使用者輸入url,客戶端從伺服器獲取資料
- 客戶端獲取資料後開始渲染頁面
獲取資料的過程?
-
查詢瀏覽器快取
-
輸入地址url,通過dns解析獲取對應的ip
-
瀏覽器通過tcp三次握手建立tcp/ip連結
-
瀏覽器通過tcp/ip傳送http請求!
-
伺服器永久重定向響應
-
瀏覽器跟蹤重定向地址
-
伺服器處理請求,伺服器返回http響應!
-
瀏覽器顯示html內容
瀏覽器傳送請求獲取嵌入在 HTML 中的資源(如圖片、音訊、視訊、CSS、JS等等) 靜態檔案會允許瀏覽器對其進行快取。有的檔案可能會不需要與伺服器通訊,而從快取中直接讀取 複製程式碼
-
瀏覽器發出ajax請求!
瀏覽器渲染對應的事件
- document.ready事件,表示dom已經載入完成(同步 JavaScript 會暫停 DOM 的解析。)(不包含圖片等非文字媒體)【html5標準事件DOMContentLoaded】
- window.onload事件,表示包含圖片等所有元素都載入完成
- document.onreadystatechange事件,當文件的readyState屬性發生改變,readystatechange事件會被觸發。
瀏覽器渲染原理及流程
原理和流程
渲染引擎首先通過網路獲得所請求文件的內容,接著對html文件進行渲染,渲染流程為:
解析html以構建dom樹和css樹 -> 構建render樹(dom和css整合生成) -> 佈局render樹(根據資訊計算元素的位置) -> 繪製render樹(在螢幕繪製)
複製程式碼
瞭解渲染流程,首先理解幾個基本概念:
- DOM Tree:瀏覽器將HTML解析成樹形的資料結構。
- CSS Rule Tree:瀏覽器將CSS解析成樹形的資料結構。
- Render Tree: DOM和CSSOM合併後生成Render Tree。
- layout: 有了Render Tree,瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係,從而去計算出每個節點在螢幕中的位置。
- painting: 按照算出來的規則,通過顯示卡,把內容畫到螢幕上。
- reflow(重排):當瀏覽器發現某個部分發生了點變化影響了佈局,需要倒回去重新渲染,內行稱這個回退的過程叫 reflow。reflow 幾乎是無法避免的。現在介面上流行的一些效果,比如樹狀目錄的摺疊、展開(實質上是元素的顯 示與隱藏)等,都將引起瀏覽器的 reflow。滑鼠滑過、點選……只要這些行為引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化,都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的程式碼,它們都彼此相互影響著。
- repaint(重繪):改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時,螢幕的一部分要重畫,但是元素的幾何尺寸沒有變。
注意:上述過程是逐步完成的,但是渲染引擎會盡可能早的將內容呈現到螢幕!
重排和重繪對頁面顯示有何影響?
重排和重繪會迫使瀏覽器重新計算重新整理頁面,消耗計算機效能!良好的設計必須減少重排和重繪!具體規則如下:
display:none會觸發重排!visibility: hidden會觸發重繪!
改變元素定位方式position、浮動float、盒模型等都可能觸發重排!
改變元素的背景色等會觸發重繪!
複製程式碼
如何優化?
優化的重點在於,如何減少重排重繪對頁面的影響,為此有以下幾點建議
減少修改html結構的次數,如文件片段、innerHtml等技術,對html只修改一次!
避免在設定元素css屬性後立即獲取元素資訊(如通過getComputedStyle獲取寬高等資訊),避免瀏覽器強制渲染頁面!(現代瀏覽器對重排重繪進行了優化!)
複製程式碼
外部樣式和外部指令碼
外部樣式
通過link載入外部樣式檔案,css檔案會並行下載,等待解析!具體規則如下:
外部樣式檔案不會阻塞dom的解析,但是會阻塞頁面渲染!
外部樣式檔案不會阻塞外部指令碼的載入,但會阻塞外部指令碼的執行(外部樣式必須載入完成後js才會執行!)。
複製程式碼
外部指令碼
!(javascript)[image-static.segmentfault.com/28/4a/284ae…]
通過script載入外部指令碼檔案,會阻塞html解析和渲染,等待js執行完後接著渲染!具體規則如下:
外部指令碼檔案預設會阻塞html解析!
async屬性,指外部指令碼檔案非同步載入,載入完後立即執行!
defer屬性,指外部指令碼檔案非同步載入,載入完後等待html解析完後執行(DOMContentLoaded 事件之前)
複製程式碼
如何減少渲染阻塞節點?(前端效能優化之一)
傳統的前端優化要點,具體可以參考“雅虎軍規35條”
通過在\<body/>之前載入外部樣式或指令碼檔案!(此時頁面全部解析完成!)
通過動態js程式碼載入外部檔案,如在window.onload事件中呼叫loadScript函式!
重要css樣式或js程式碼可以直接解除安裝html文件當中!
複製程式碼
前端快取的機理?
前端快取的分類?
- 服務端快取,如:CDN
- 客戶端快取,瀏覽器對於靜態資源(CSS,JS,圖片)的快取!
- 通過js對ajax獲取的資料進行快取!
為什麼要使用快取?
- 請求更快,在不影響互動的前提下,大大加快網站訪問的速度!
- 節省頻寬,對已快取的檔案,可以減少網路請求!
- 降低伺服器壓力,將靜態資源放在多個節點上降低伺服器壓力!
瀏覽器快取的機理?
-
瀏覽器快取的分類?
- 強快取,瀏覽器在載入資源時,先根據這個資源的一些http header判斷它是否命中強快取,強快取如果命中,瀏覽器直接從自己的快取中讀取資源,不會發請求到伺服器。
- 協商快取,當強快取沒有命中的時候,瀏覽器一定會傳送一個請求到伺服器,通過伺服器端依據資源的另外一些http header驗證這個資源是否命中協商快取,如果協商快取命中,伺服器會將這個請求返回(304),但是不會返回這個資源的資料,而是告訴客戶端可以直接從快取中載入這個資源,於是瀏覽器就又會從自己的快取中去載入這個資源;若未命中請求,則將資源返回客戶端,並更新本地快取資料(200)。
-
如何設定快取?
- http meta標籤,,這段程式碼告訴瀏覽器當前頁面不快取!
- 通過設定http頭部資訊,如:Expires(強快取)、Cache-control(強快取)、Last-Modified/If-Modified-Since(協商快取)、Etag/If-None-Match(協商快取)
- Expires設定資源過期時間(絕對時間),Expires:Thu, 31 Dec 2016 23:55:55 GMT
- Cache-control設定資源過期事件(相對事件,藉助max-age屬性!)(cache-control還有其他屬性值,如public、private、no-cache、no-store等)
- Expires和Cache-Control同時存在時,Cache-Control優先順序高於Expires!
- last-Modified/If-Modified-Since協商快取,需要配合cache-control使用!(當強快取失效時,瀏覽器攜帶If-Modified-Since頭部。服務端接受後,將Last-Modified與資源最後修改時間進行確認,若檔案更新了則200,否則304!)(缺點:檔案可能定期重新整理,但是內容沒更新,導致快取無法使用!)
- Etag/If-None-Match協商快取,需配合cache-control使用!(當資源過期時,瀏覽器攜帶If-None-Match頭部。伺服器接受後,將Etag與資源識別符號進行對比,若相同則304,否則200!)(etag解決了上述問題,etag由伺服器生成的資源識別符號!)
-
瀏覽器的處理流程!
本地無快取的流程:
本地有快取的流程:
-
瀏覽器快取行為還與使用者行為有關?
- 位址列回車
- 頁面連結跳轉
- 新視窗開啟
- 前進後退!
- f5重新整理,對於強快取無效(不適用強快取),對於協商快取有效!
- ctrl-f5重新整理,對於強快取和協商快取都無效!
cdn快取的機理?
js快取的原理?
- 通過js的變數儲存ajax獲取的資料!
- 或者通過localStroage儲存資料,本地
- 或者通過sessionStroage儲存資料,會話資料!
總結
文章所有的圖片來自網路。