整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
塊的文章網上也是比較多的，但大多數都是講解DOM樹的渲染，對于頁面從請求到展示的詳細流程講解還是比較少的，而且有些說的也不容易理解，下面我將以圖文結合的形式給大伙講講。
作用
DNS 的作用就是通過域名查詢到具體的 IP。
背景
因為 IP 存在數字和英文的組合（IPv6），很不利于人類記憶，所以就出現了域名。你可以把域名看成是某個 IP 的別名，DNS 就是去查詢這個別名的真正名稱是什么。
過程
在 TCP 握手之前就已經進行了 DNS 查詢，這個查詢是操作系統自己做的。當你在瀏覽器中想訪問 www.test.com 時，會進行一下操作：
以上介紹的是 DNS 迭代查詢，還有種是遞歸查詢，區別就是前者是由客戶端去做請求，后者是由系統配置的 DNS 服務器做請求，得到結果后將數據返回給客戶端。
在進行完DNS解析之后，接下來就是 TCP 握手，應用層會下發數據給傳輸層，這里 TCP 協議會指明兩端的端口號，然后下發給網絡層。網絡層中的 IP 協議會確定 IP 地址，并且指示了數據傳輸中如何跳轉路由器。然后包會再被封裝到數據鏈路層的數據幀結構中，最后就是物理層面的傳輸了。
TCP建立連接的三次握手
首先假設主動發起請求的一端稱為客戶端，被動連接的一端稱為服務端。不管是客戶端還是服務端，TCP 連接建立完后都能發送和接收數據，所以 TCP 是一個全雙工的協議。
起初，兩端都為 CLOSED 狀態。在通信開始前，雙方都會創建 TCB。 服務器創建完 TCB 后便進入 LISTEN 狀態，此時開始等待客戶端發送數據。
第一次握手
客戶端向服務端發送連接請求報文段。該報文段中包含自身的數據通訊初始序號。請求發送后，客戶端便進入 SYN-SENT 狀態。
第二次握手
服務端收到連接請求報文段后，如果同意連接，則會發送一個應答，該應答中也會包含自身的數據通訊初始序號，發送完成后便進入 SYN-RECEIVED 狀態。
第三次握手
當客戶端收到連接同意的應答后，還要向服務端發送一個確認報文。客戶端發完這個報文段后便進入 ESTABLISHED 狀態，服務端收到這個應答后也進入 ESTABLISHED 狀態，此時連接建立成功。
第三次握手中可以包含數據，通過快速打開（TFO）技術就可以實現這一功能。其實只要涉及到握手的協議，都可以使用類似 TFO 的方式，客戶端和服務端存儲相同的 cookie，下次握手時發出 cookie 達到減少 RTT 的目的。
TLS 協議位于傳輸層之上，應用層之下，主要是對HTTP請求進行加密。首次進行 TLS 協議傳輸需要兩個 RTT ，接下來可以通過 Session Resumption 減少到一個 RTT。
TLS 握手過程如下圖：
通過以上步驟可知，在 TLS 握手階段，兩端使用非對稱加密的方式來通信，但是因為非對稱加密損耗的性能比對稱加密大，所以在正式傳輸數據時，兩端使用對稱加密的方式通信。
數據在進入服務端之前，可能還會先經過負責負載均衡的服務器，它的作用就是將請求合理的分發到多臺服務器上，這時假設服務端會響應一個 HTML 文件。
首先瀏覽器會判斷狀態碼是什么，如果是 200 那就繼續解析，如果 400 或 500 的話就會報錯，如果 300 的話會進行重定向，這里會有個重定向計數器，避免過多次的重定向，超過次數也會報錯。
瀏覽器解析
瀏覽器開始解析文件，如果是 gzip 格式的話會先解壓一下，然后通過文件的編碼格式去解碼文件。
文件解碼成功后會正式開始渲染流程，先會根據 HTML 構建 DOM 樹，有 CSS 的話會去構建 CSSOM 樹。如果遇到 script 標簽的話，會判斷是否存在 async 或者 defer ，前者會并行進行下載并執行 JS，后者會先下載文件，然后等待 HTML 解析完成后順序執行。
如果以上都沒有，就會阻塞住渲染流程直到 JS 執行完畢。遇到文件下載的會去下載文件，這里如果使用 HTTP/2 協議的話會極大的提高多圖的下載效率。
CSSOM 樹和 DOM 樹構建完成后會開始生成 Render 樹，這一步就是確定頁面元素的布局、樣式等等諸多方面的東西
在生成 Render 樹的過程中，瀏覽器就開始調用 GPU 繪制，合成圖層，將內容顯示在屏幕上了。
總的來說，今天這篇文章主要是帶著大家從 DNS 查詢開始到渲染出畫面完整的了解一遍過程，里面涉及到DNS、HTTP、TLS、負載均衡和瀏覽器渲染等等內容，算不上非常詳細，但如果面試的時候能說出來這些，相信面試官也會對你刮目相看的。
語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代 碼語義化）。通俗來講就是用正確的標簽做正確的事情。
語義化的優點如下：
對機器友好，帶有語義的文字表現力豐富，更適合搜索引擎的爬蟲爬 取有效信息，有利于 SEO。除此之外，語義類還支持讀屏軟件，根據 文章可以自動生成目錄；
對開發者友好，使用語義類標簽增強了可讀性，結構更加清晰，開發 者能清晰地看出網頁的結構，便于團隊的開發與維護。
常見的語義化標簽：
DOCTYPE 是 HTML5 中一種標準通用標記語言的文檔類型聲明，它的目 的是告訴瀏覽器（解析器）應該以什么樣（html 或 xhtml）的文檔類 行定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚?JavaScript 腳本的解析。它必須聲明在 HTML?檔的第??。
瀏覽器渲染頁面的兩種模式（可通過 document.compatMode 獲取，比 如，語雀官網的文檔類型是 CSS1Compat）：
CSS1Compat：標準模式（Strick mode），默認模式，瀏覽器使用 W3C 的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈 現頁面。
BackCompat：怪異模式(混雜模式)(Quick mode)，瀏覽器使用自己的 怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后 兼容的方式顯示。
如果沒有 defer 或 async 屬性，瀏覽器會立即加載并執行相應的腳本。它不會等待后續加載的文檔元素，讀取到就會開始加載和執行，這樣 就阻塞了后續文檔的加載。
下圖可以直觀地看出三者之間的區別:
其中藍色代表 js 腳本網絡加載時間，紅色代表 js 腳本執行時間，綠 色代表 html 解析。
defer 和 async 屬性都是去異步加載外部的 JS 腳本文件，它們都不 會阻塞頁面的解析，其區別如下：
執行順序：多個帶 async 屬性的標簽，不能保證加載的順序；多個帶 defer 屬性的標簽，按照加載順序執行；
腳本是否并行執行：async 屬性，表示后續文檔的加載和執行與 js 腳本的加載和執行是并行進行的，即異步執行；defer 屬性，加載后 續文檔的過程和 js 腳本的加載(此時僅加載不執行)是并行進行的(異步)，js 腳本需要等到文檔所有元素解析完成之后才執行，DOMContentLoaded 事件觸發執行之前。
行內元素有：a b span img input select strong；
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
空元素，即沒有內容的 HTML 元素。空元素是在開始標簽中關閉的，也就是空元素沒有閉合標簽：
常見的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鮮見的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第一次訪問頁面 ，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源并且進行離線存儲。如果已經 訪問過頁面并且資源已經進行離線存儲了，那么瀏覽器就會使用離線 的資源加載頁面，然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做任何操作，如果文 件改變了，就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器會直接使用離線存儲的資源。
（1）SVG：
SVG 可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標 記語言 XML 描述的 2D 圖形的語言，SVG 基于 XML 就意味著 SVG DOM 中的每個元素都是可用的，可以為某個元素附加 Javascript 事件處 理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象 的屬性發生變化，那么瀏覽器能夠自動重現圖形。
其特點如下：
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）不適合游戲應用
（2）Canvas：
Canvas 是畫布，通過 Javascript 來繪制 2D 圖形，是逐像素進行渲 染的。其位置發生改變，就會重新進行繪制。
其特點如下：
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
注：矢量圖，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一 系列由線連接的點。矢量文件中的圖形元素稱為對象。每個對象都是
一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等 屬性。
dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發。
darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發。dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發。dragover：事件主體是目標元素，在被拖放在某元素內移動時觸發。dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸 發。
drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發。
dragend：事件主體是被拖放元素，在整個拖放操作結束時觸發。
三部分 附錄（因為暫時不支持插入超鏈接所以部分內容無法顯示）
附錄一 DIV命名規范
附錄二 CSS精靈
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定義狀態*/
text-indent:-2015px; /*隱藏文字*/
background-image:url(button.png); /*定義背景圖片*/
background-position:0 0;
/*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/
}
a:hover {
background-position:0 -66px;
/*定義鏈接的滑過狀態，此時顯示的為中間部分，向下取負值*/
}
a:active {
background-position:0 -132px;
/*定 義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/
}
附錄三 一些tips解決方案
頁面優化實踐
寫DIV+CSS 的一些常識
常用代碼片段
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
table-layout: fixed; word-break: break-all;;border-collapse: collapse
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”> <span style=”background:#f00; display:table-cell; vertical-align:middle;”> <input type=”button” value=”item1″ /> </span> </div>
filter:alpha(opacity=50); /*1-100*/ -moz-opacity:0.5; /*0-1.0*/ -khtml-opacity:0.5; /*0-1.0*/ opacity:0.5; /*0-1.0*/
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
.fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}
一些總結
一些概念
學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
