前端系列文章-html之基礎介紹

峽邇發表於2018-08-15
前端HTML

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由伺服器生成的資源識別符號！）

  • 瀏覽器的處理流程！

本地無快取的流程：

前端系列文章-html之基礎介紹

本地有快取的流程：

前端系列文章-html之基礎介紹

  • 瀏覽器快取行為還與使用者行為有關?

    • 位址列回車
    • 頁面連結跳轉
    • 新視窗開啟
    • 前進後退！
    • f5重新整理，對於強快取無效（不適用強快取），對於協商快取有效！
    • ctrl-f5重新整理，對於強快取和協商快取都無效！

cdn快取的機理？

前端系列文章-html之基礎介紹

js快取的原理？

  • 通過js的變數儲存ajax獲取的資料！
  • 或者通過localStroage儲存資料，本地
  • 或者通過sessionStroage儲存資料，會話資料！

總結

文章所有的圖片來自網路。

相關文章