HTML之基礎介紹

時間 2019-12-04

標籤 html 基礎介紹欄目 HTML 简体版

原文原文鏈接

HTML之基礎介紹

簡單介紹html的歷史、html文檔的結構，同時也拓展了其餘前端知識點，如樣式腳本的異步加載、頁面渲染原理及優化！

html的歷史

html誕生於1993年，應用最普遍的爲html4和xhtml，如今最新版本爲html5。html全稱超文本標記語言（英語：HyperText Markup Language），它是一種用於建立網頁的標準標記語言，頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。若是頁面須要考慮兼容性（如需兼容至ie8），提出幾條具體建議：javascript

編寫格式嚴格的html語法，瞭解html5的最新特性！
全部標籤屬性加引號：<p id="pp"></p>
全部標籤使用小寫形式
屬性值不進行省略：<input type="checkbox" checked="checked"/>
自閉合標籤須要閉合：<br/>
在線兼容性查詢網站：https://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>

補充衍生

從輸入網址到顯示網頁的過程當中發生了什麼？

發生了什麼過程？

用戶輸入url，客戶端從服務器獲取數據
客戶端獲取數據後開始渲染頁面

獲取數據的過程？

查找瀏覽器緩存
輸入地址url，經過dns解析獲取對應的ip
瀏覽器經過tcp三次握手創建tcp/ip連接
瀏覽器經過tcp/ip發送http請求！
服務器永久重定向響應
瀏覽器跟蹤重定向地址
服務器處理請求，服務器返回http響應！
瀏覽器顯示html內容
瀏覽器發送請求獲取嵌入在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等等）
靜態文件會容許瀏覽器對其進行緩存。有的文件可能會不須要與服務器通信，而從緩存中直接讀取css
瀏覽器發出ajax請求！

瀏覽器渲染對應的事件

document.ready事件，表示dom已經加載完成（同步 JavaScript 會暫停 DOM 的解析。）（不包含圖片等非文字媒體）【html5標準事件DOMContentLoaded】
window.onload事件，表示包含圖片等全部元素都加載完成
document.onreadystatechange事件，當文檔的readyState屬性發生改變，readystatechange事件會被觸發。

瀏覽器渲染原理及流程

原理和流程

渲染引擎首先經過網絡得到所請求文檔的內容，接着對html文檔進行渲染，渲染流程爲：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（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時，屏幕的一部分要重畫，可是元素的幾何尺寸沒有變。

注意：上述過程是逐步完成的，可是渲染引擎會盡量早的將內容呈現到屏幕！html5

重排和重繪對頁面顯示有何影響？

重排和重繪會迫使瀏覽器從新計算刷新頁面，消耗計算機性能！良好的設計必須減小重排和重繪！具體規則以下：java

display:none會觸發重排！visibility: hidden會觸發重繪！
改變元素定位方式position、浮動float、盒模型等均可能觸發重排！
改變元素的背景色等會觸發重繪！

如何優化？

優化的重點在於，如何減小重排重繪對頁面的影響，爲此有如下幾點建議ajax

減小修改html結構的次數，如文檔片斷、innerHtml等技術，對html只修改一次！
避免在設置元素css屬性後當即獲取元素信息（如經過getComputedStyle獲取寬高等信息），避免瀏覽器強制渲染頁面！（現代瀏覽器對重排重繪進行了優化！）

外部樣式和外部腳本

外部樣式

經過link加載外部樣式文件，css文件會並行下載，等待解析！具體規則以下：segmentfault

外部樣式文件不會阻塞dom的解析，可是會阻塞頁面渲染！
外部樣式文件不會阻塞外部腳本的加載，但會阻塞外部腳本的執行（外部樣式必須加載完成後js纔會執行！）。

外部腳本

!(javascript)[https://image-static.segmentf...]瀏覽器

經過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標籤，<META HTTP-EQUIV="Pragma" CONTENT="no-cache">，這段代碼告訴瀏覽器當前頁面不緩存！
- 經過設置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由服務器生成的資源標識符！）
瀏覽器的處理流程！