Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
*******HTML********
**Web服務本質**
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http協議 簡化
conn.send(b"<h1>Hello world!</h1>")#發送內容
conn.close()
sk.close()
瀏覽器發送請求-->HTTP協議-->服務器接受請求-->服務端返回響應-->服務端把HTML文件內容發送給瀏覽器-->瀏覽器渲染頁面
What HTML?
*超文本標記語言(Hypertext Markup Language,HTML)是一種用于創建網頁標記語言
*本質上是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據規則渲染我們的頁面。
對于不同的瀏覽器,對于同一個標簽可能會有不同的解釋。(兼容性問題)
*網頁文件的擴展名:.html或.htm
*HTML是一種標記語言,他不是一種編程語言,HTML使用標簽來描述網頁。
****HTML文檔結構****
*最基本的HTML文檔**
<!DOCTYPE html>
<html lang = 'zh-CN'>
<head>
<meta chrset = 'UTF-8'>
<title> 標題 </title>
</head>
<body>
</body>
</html>
#解釋
1.<!DOCTYPE html>聲明為HTML5文檔
2.<html></html>是文檔的開始標記語言和結束標記,是HTML頁面的根本元素,在他們之間是文檔的頭部(head)和主題(body)
3.<head></head>定義了HTML文檔的開頭部分。他們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元(meta)數據
4.<title></title>定義了網頁標題,在瀏覽器標題欄顯示
5.<body></body>之間的文本是可見的網頁主體內容
注意:
對于中文網頁需要使用<meta charset='utf-8'>聲明編碼。否則會出現亂碼。這些瀏覽器會設置GBK為默認編碼,則需要我們設為
<meta charset='gbk'>
****HTML標簽格式****
*HTML標簽是由尖括號包圍的關鍵字
*HTML標簽通常是成對出現的,比如:<div>和</div>,第一個標簽是開始,第二個標簽是結束。結束標簽會有斜線。
*也有一部分標簽是單獨呈現的,比如:<br/>、<hr/>、<img src="1.jpg" />等。
*標簽里面可以有若干屬性,也可以不帶屬性。
****標簽的語法
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>
<標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
幾個很重要的屬性:
id:定義標簽的唯一ID,HTML文檔樹中唯一
class:為html元素定義一個或多個類名(classname)(CSS樣式類名)
style:規定元素的行內樣式(CSS樣式
****HTML注釋
<!--注釋內容-->
****<!DOCTYPE>標簽****
<!DOCTYPE> 聲明必須是HTML文檔的第一行,位于<html>標簽之前
<!DOCTYPE> 聲明不是HTML標簽,他是指示web瀏覽器關于頁面使用哪個HTML版本進行編寫的指令
****HTML常用標簽****
**head內常用的標簽**
1.<title></title> 定義網頁的標題
2.<style></style> 定義內部樣式表
3.<script><script>定義JS代碼或引入外部JS文件
4.<link/> 引入外部樣式文件
5.<meta/>定義網頁原信息
****Meta標簽
Meta標簽介紹:
<meta>元素可提供有關頁面的原信息(mata-information),針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位于文檔的頭部,不包含任何內容。
<meta>提供的信息是用戶不可見的。
meta標簽的組成:meta標簽共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不
同的參數值,這些不同的參數值就實現了不同的網頁功能。
1.http-equiv屬性:相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確地顯示
網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變量值。
<!--2秒后跳轉到對應的網址,注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.names屬性:主要用于描述網頁,與之對應的屬性值為content,content中的內容主要是便于搜索引擎
機器人查找信息和分類信息用的
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="Python">
******body內常用表標簽******
****基本標簽(塊級標簽和內聯標簽)****
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<a>刪除</a>
<p>段落標簽</p>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<!--換行-->
<br>
<!--水平線-->
<hr>
****特殊字符****
空格------
>-------->
<--------<
&--------&
¥--------¥
版權(??)---?
注冊(??)---?
****div標簽和span標簽****
div標簽用來定義一個塊級元素,并無實際的意義。主要通過CSS樣式為其賦予不同的表現。
span標簽用來定義內聯(行內)元素,并無實際的意義。主要通過CSS樣式為其賦予不同的表現。
塊級元素與行內元素的區別:
所謂塊元素,是以另起一行開始渲染的元素,行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素,不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
注意:
關于標簽嵌套:通常塊級元素可以包含內聯元素或某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其它內聯元素。
p標簽不能包含塊級標簽,p標簽也不能包含p標簽。
****img標簽****
<img src='圖片路徑' alt='圖片未加載成功時的提示' title='鼠標懸浮時提示信息' width='寬' height='高(寬高只有一個會等比縮放)'>
****a標簽****
超鏈接標簽
所謂的超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,
也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,
甚至是一個應用程序。
什么是URL?
URL是統一資源定位器(Uniform Resource Locator)的縮寫,也被稱為網頁地址,是因特網上標準的資源的地址。
URL舉例
http://www.baidu.com/stu/index.html
http://111.13.100.91/stu/index.html
URL地址由4部分組成
第1部分:為協議:http://、ftp://等
第2部分:為站點地址:可以是域名或IP地址
第3部分:為頁面在站點中的目錄:stu
第4部分:為頁面名稱,例如 index.html
各部分之間用“/”符號隔開。
<a target='_blank'>點擊我</a>
href屬性指定目標網頁地址。該地址可以有幾種類型:
1.絕對URL-指向另一個站點(不如 )
2.相對URL-指向當前站點中確切的路徑(href = 'index.html')
3.錨URL-指向頁面中的錨(href = '#top')
target:
1._blank表示在新標簽頁中打開目標頁面
2._self表示在當前標簽頁中打開目標頁面
****列表*****
1.無序列表
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>
type屬性:
1.disc(實心圓點,默認值)
2.circle(空心圓圈)
3.square(實行方塊)
4.none(無樣式)
2.有序列表
<ol type="1" start="2">
<li>第一項</li>
<li>第二項</li>
</ol>
type屬性:
1.1數字列表,默認值
2.A大寫字母
3.a小寫字母
4.I大寫羅馬
5.i小寫羅馬
3.標題列表
<dl>
<dt>標題1</dt>
<dt>內容1</dt>
<dt>標題2</dt>
<dt>內容1</dt>
<dt>內容2</dt>
</dl>
****表格****
表格是一個二維數據空間,一個表格由若干行組成,一行又有若干單元格組成,單元格里面可以
包括文字。列表。圖案。表單。數字符號。預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。
表格類數據是值最適合組織為表格格式(即按行和列組織)的數據
表格基本結構:
<table>
<thead>
<tr>
<td>序號</td>
<td>姓名</td>
<td>愛好</td>
</tr>
</theaf>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>吃老鼠</td>
</tr>
<tr>
<td>2</td>
<td>Jacl</td>
<td>吃奶酪</td>
</tr>
</tbody>
</table>
屬性:
1.border:表格邊框
2.cellpadding:內邊距
3.cellspacing:外邊距
4.width:像素百分比(最好通過css來設置長度)
5.rowspan:單元格豎跨多少行
6.colspan:單元格橫跨多少列(即合并單元格)
****form(表單)****
功能;
表單用于向服務器傳輸數據,從而實現用戶與web服務器的交互
表單能夠包含input系列標簽,比如文本字段、復選框、單選框、提交按鈕等等
表單還可以包含textarea、select、fieldest和lable標簽
***表單屬性
1.accept-charset 規定在被提交表單中使用的字符集(默認:頁面字符集)
2.action 規定在何處提交表單的地址(URL)(提交頁面)
3.autocomplete 規定瀏覽器應該自動完成表單(默認:開啟)
4.enctype 規定被提交數據的編碼(默認:url-encoded)
5.method 規定在提交表單時所用的HTTP方法(默認GET)
6.name 規定識別表單的名稱(對于DOM使用:document.forms.name)
7.novalidate規定瀏覽器不驗證表單
8.target規定action屬性中地址的目標(默認_self)
***表單元素
基本概念:
HTML表單是HTML元素中較為復雜的部分,表單往往和腳本、動態頁面、數據處理等功能相結合,因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理:
訪問者在瀏覽有表單的網頁時,可填寫必需的信息,然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤。
當數據完整無誤后,服務器反饋一個輸入完成的信息。
******input******
<input>元素會根據不同的type屬性,變化為多種形態
type屬性值表現形式對應代碼
text單行輸入文本<input type="text" />
password密碼輸入框<input type="password" />
date日期輸入框<input type="date" />
checkbox復選框<input type="checkbox" checked="checked" />
radio單選框<input type="radio" />
submit提交按鈕<input type="submit" value="提交" />
reset重置按鈕<input type="reset" value="重置" />
button普通按鈕<input type="button" value="普通按鈕" />
hidden隱藏輸入框<input type="hidden" />
file文本選擇框<input type="file" />
屬性說明:
1.name:表單提交時的“鍵”,注意和id的區別
2.value:表單提交時對應項的值
type = “button”,“reset”,“submit”時,為按鈕上顯示的文本信息
type = “text”,“password”,“hidden“時,為輸入框的初始值
type = ”checkbox“,”radio“,”file“時,為輸相關聯的值
3.checked:radio和checkbox默認被選中的項
4.readonly:text和password設置只讀
5.disabled:所有input均適用
******select標簽******
<from action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">成都</option>
<option value="3">西安</option>
</select>
</form>
屬性說明:
1.multiple:布爾屬性,設置后為多選,否則默認單選
2.disabled:禁用
3.selected:默認選中該項
4.value:定義提交時的選項值
******lable標簽******
定義:<lable>標簽為input元素定義標注(標記)
說明:
1.label元素不會向用戶呈現任何特殊效果
2.<lable>標簽的for屬性值應當與相關元素的id屬性值相同
<form>
<lable for="username">用戶名</lable>
<input type="text" id="username" name="username">
</form>
******textarea多行文本******
<textarea name="memo" id="memo" cols="30" rows="10">
默認內容
</textarea>
屬性說明:
1.name:名稱
2.rows:行數
3.cols:列數
4.disable:禁用
象語法樹(Abstract Syntax Trees),簡稱AST,如果您正在編寫代碼,那么 AST 很可能已經參與了您的開發流程。它們為您的開發流程的許多部分提供動力。 有些人可能在編譯器的上下文中聽說過它們,但它們被用于各種工具中。 即使您不編寫通用開發工具,AST 也可能是您工具帶中的有用工具。 在這篇文章中,我們將討論什么是 AST,它們在哪里使用以及如何利用它們。
什么是AST
抽象語法樹或 AST 是代碼的樹型數據結構表示。 它們是編譯器工作方式的基本部分。 當編譯器轉換某些代碼時,基本上有以下步驟:
詞法分析又名標記化
在此步驟中,您編寫的代碼將被轉換為一組描述代碼不同部分的標記。 這與基本語法突出顯示使用的方法基本相同。 這些標記令牌不了解事物如何組合在一起,并且僅關注文件的組件。
你可以想象這就像你將一個文本分解成單詞。 您可能能夠區分標點符號、動詞、名詞、數字等,但在這個階段,您對句子的組成部分或句子如何組合沒有任何更深入的了解。
語法分析又名解析
這是我們將標記列表轉換為抽象語法樹的步驟。 它將我們的標記轉換為表示代碼實際結構的樹。 以前在標記中我們只有一對 (),現在我們知道它是函數調用、函數定義、分組還是其他東西。
這里的等價物是將我們的單詞列表轉換為表示諸如句子之類的數據結構,某個名詞在句子中扮演什么角色,或者我們是否在列表中。
另一個可以與之比較的例子是 DOM。 上一步只是將 HTML 分解為“標簽”和“文本”,而這一步將生成表示為 DOM 樹的層次結構。
需要注意的一件事是沒有“單一”的 AST 格式。 它們可能會有所不同,這取決于您要轉換為 AST 的語言以及您用于解析的工具。 在 JavaScript 中,一個通用標準是 ESTree,但您會看到不同的工具可能會添加不同的屬性。
一般來說,AST 是一種樹結構,其中每個節點至少有一個類型來指定它所代表的內容。
代碼生成
此步驟本身可以是多個步驟。 一旦我們有了抽象語法樹,我們就可以操作它,也可以將它“打印”到不同類型的代碼中。 使用 AST 操作代碼比直接在代碼上作為文本或標記列表執行這些操作更安全。
操縱文本總是很危險的; 它顯示最少的上下文。 如果您曾經嘗試使用字符串替換或正則表達式來操作文本,您可能會注意到很容易出錯。而且不容易調試。
甚至操縱令牌也不容易。 雖然我們可能知道變量是什么,但如果我們想重命名它,我們將無法深入了解變量的范圍或可能與之沖突的任何變量。
AST 提供了有關代碼結構的足夠信息,我們可以更有信心地對其進行修改。 例如,我們可以確定變量的聲明位置,并確切地知道由于樹結構而影響程序的哪個部分。
一旦我們操縱了樹,我們就可以打印樹以輸出任何預期的代碼輸出。 例如,如果我們要構建一個像 TypeScript 編譯器這樣的編譯器,我們會輸出 JavaScript,而另一個編譯器可能會輸出機器代碼。
同樣,使用 AST 更容易實現這一點,因為相同結構的不同輸出可能具有不同的格式。 使用更線性的輸入(如文本或標記列表)生成輸出會相當困難。
如何處理 AST?
理論涵蓋了哪些實際生活中的 AST 用例? 我們討論了編譯器,但我們并不是整天都在構建編譯器。
AST 的用例很廣泛,通??梢苑譃槿齻€總體操作:讀取、修改和打印。 它們是一種添加劑,這意味著如果您正在打印 AST,那么您以前也閱讀過 AST 并對其進行修改的可能性很高。 但我們將介紹每個主要關注一個用例的示例。
讀取/遍歷 AST
從技術上講,使用 AST 的第一步是解析文本以創建 AST,但在大多數情況下,提供解析步驟的庫也提供了一種遍歷 AST 的方法。遍歷 AST 意味著訪問樹的不同節點以獲取細節或執行操作。
最常見的用例之一是 linting。 例如,ESLint 使用 espree 生成 AST,如果您想編寫任何自定義規則,您將根據不同的 AST 節點編寫這些規則。 ESLint 文檔有大量關于如何構建自定義規則、插件和格式化程序的文檔。
修改/轉換 AST
如前所述,與將代碼修改為標記或原始字符串相比,擁有 AST 使修改所述樹更容易、更安全。您可能想要使用 AST 修改某些代碼的原因有很多種。
例如,Babel 修改 AST 以向下編譯新功能或將 JSX 轉換為函數調用。例如,當您編譯 React 或 Preact 代碼時會發生這種情況。
另一個用例是捆綁代碼。在模塊的世界中,捆綁代碼通常比將文件附加在一起要復雜得多。更好地了解各個文件的結構可以更輕松地合并這些文件并在必要時調整導入和函數調用。如果您查看 webpack、parcel 或 rollup 等工具的代碼庫,您會發現它們都使用 AST 作為其捆綁工作流程的一部分。
打印 AST
在大多數情況下,打印和修改 AST 是齊頭并進的,因為您必須輸出剛剛修改的 AST。 但是,雖然像 recast 這樣的一些庫明確專注于以與原始代碼樣式相同的代碼樣式打印 AST,但也有各種用例,您希望以不同的方式顯式打印您的 AST。
例如,Prettier 使用 AST 根據您的配置重新格式化您的代碼,而無需更改代碼的內容/含義。 他們這樣做的方式是將您的代碼轉換為完全與格式無關的 AST,然后根據您的規則重寫它。
其他常見的用例是用不同的目標語言打印代碼或構建自己的縮小工具。
您可以使用幾種不同的工具來打印 AST,例如 escodegen 或 astring。 您還可以根據您的用例構建自己的格式化程序,或者為 Prettier 構建一個插件。
最后:
雖然 AST 可能是大多數開發人員每天都不會使用的東西,但我相信了解它對今后的工作會有幫助。感謝閱讀。
對于互聯網我們都不陌生,它完完全全改變了我們的生活,生活在這樣的時代還是很幸福的。我們平時查百度、逛淘寶、京東、用騰訊、愛奇藝看視頻等,我們在瀏覽器輸入一個域名,就可以進入到我們想要的系統或頁面,這其中發生了什么?是怎樣的流程,我想大多數人是不太清楚的,猿人就來給大家聊聊。
總體來說分為以下幾個過程:
URL是英語Uniform Resource Locator的縮寫,中文名叫:統一資源定位符(或稱統一資源定位器/定位地址、URL地址),有時也被俗稱為網頁地址(網址)。
URL就如同在網絡上的門牌,是因特網上標準的資源的地址(Address)。它最初是由蒂姆·伯納斯-李發明用來作為萬維網的地址?,F在它已經被萬維網聯盟編制為因特網標準。
標準的格式如下:
scheme://host.domain:port/path/filename
各部分解釋如下:
域名解析是把域名指向網站空間IP,讓人們通過注冊的域名可以方便地訪問到網站的一種服務。IP地址是網絡上標識站點的數字地址,為了方便記憶,采用域名來代替IP地址標識站點地址。域名解析就是域名到IP地址的轉換過程。域名的解析工作由DNS服務器完成。
IP 地址是指互聯網協議地址,是 IP Address 的縮寫。IP 地址是 IP 協議提供的一種統一的地址格式,它為互聯網上的每一個網絡和每一臺主機分配一個邏輯地址,以此來屏蔽物理地址的差異。IP 地址是一個 32 位的二進制數,比如 127.0.0.1 為本機 IP。
域名解析也叫域名指向、服務器設置、域名配置以及反向IP登記等等。說得簡單點就是將好記的域名解析成IP,服務由DNS服務器完成,是把域名解析到一個IP地址,然后在此IP地址的主機上將一個子目錄與域名綁定。
互聯網中的地址是數字的IP地址,域名解析的作用主要就是為了便于記憶。
DNS 協議提供通過域名查找 IP 地址,或逆向從 IP 地址反查域名的服務。DNS 是一個網絡服務器,我們的域名解析簡單來說就是在 DNS 上記錄一條信息記錄。
例如 baidu.com 220.114.23.56(服務器外網IP地址)80(服務器端口號)
當應用過程需要將一個主機域名映射為IP地址時,就調用域名解析函數,解析函數將待轉換的域名放在DNS請求中,以UDP報文方式發給本地域名服務器。本地的域名服務器查到域名后,將對應的IP地址放在應答報文中返回。同時域名服務器還必須具有連向其他服務器的信息以支持不能解析時的轉發。若域名服務器不能回答該請求,則此域名服務器就暫成為DNS中的另一個客戶,向根域名服務器發出請求解析,根域名服務器一定能找到下面的所有二級域名的域名服務器,這樣以此類推,一直向下解析,直到查詢到所請求的域名。
TCP位于傳輸層,作用是提供可靠的字節流服務,為了準確無誤地將數據送達目的地,TCP協議采納三次握手策略。
所謂三次握手(Three-way Handshake),是指建立一個TCP連接時,需要客戶端和服務器總共發送3個包。
三次握手的目的是連接服務器指定端口,建立TCP連接,并同步連接雙方的序列號和確認號并交換 TCP 窗口大小信息.在socket編程中,客戶端執行connect()時。將觸發三次握手。
原理
1)發送端首先發送一個帶有SYN(synchronize)標志地數據包給接收方。
2)接收方接收后,回傳一個帶有SYN/ACK標志的數據包傳遞確認信息,表示我收到了。
3)最后,發送方再回傳一個帶有ACK標志的數據包,代表我知道了,表示’握手‘結束。
通俗的說法
1)Client:嘿,李四,是我,聽到了嗎?
2)Server:我聽到了,你能聽到我的嗎?
3)Client:好的,我們互相都能聽到對方的話,我們的通信可以開始了。
TCP 三次握手結束后,開始發送 HTTP 請求報文。
請求報文由請求行(request line)、請求頭(header)、請求體三個部分組成,如下圖所示:
服務器是網絡環境中的高性能計算機,它偵聽網絡上的其他計算機(客戶機)提交的服務請求,并提供相應的服務,比如網頁服務、文件下載服務、郵件服務、視頻服務。而客戶端主要的功能是瀏覽網頁、看視頻、聽音樂等等,兩者截然不同。 每臺服務器上都會安裝處理請求的應用——web server。常見的 web server 產品有 apache、nginx、IIS 或 Lighttpd 等。 web server 擔任管控的角色,對于不同用戶發送的請求,會結合配置文件,把不同請求委托給服務器上處理相應請求的程序進行處理(例如 CGI 腳本,JSP 腳本,servlets,ASP 腳本,服務器端 JavaScript,Java或者一些其它的服務器端技術等),然后返回后臺程序處理產生的結果作為響應。
MVC 后臺處理
SpirngMVC的執行流程,猿人也給大家畫出來了,很詳細哦!
http響應報文格式
Http狀態碼
對于每一個請求,http服務器都會返回一個結果,不管是成功還是失敗,不同的狀態碼代表某一類結果。比如1開頭的代表服務器收到請求,需要請求者繼續執行操作,2開頭的代表返回成功,3開頭的代表重定向,4開頭的代表客戶端錯誤,5開頭的代表服務端錯誤。這樣我們就可以根據這些數字來判斷是否執行完成,也可以用來定位排查問題。
1** 信息,服務器收到請求,需要請求者繼續執行操作
2** 成功,操作被成功接收并處理
3** 重定向,需要進一步的操作以完成請求
4** 客戶端錯誤,請求包含語法錯誤或無法完成請求
5** 服務器錯誤,服務器在處理請求的過程中發生了錯誤
瀏覽器按順序解析HTML文件,構建DOM樹。準確地說,瀏覽器需要加載解析的不僅僅是HTML,還包括CSS、JS以及圖片、視頻等其他媒體資源。
瀏覽器通過解析HTML,生成DOM樹,解析CSS,生成CSS規則樹,然后通過DOM樹和CSS規則樹生成渲染樹。渲染樹與DOM樹不同,渲染樹中并沒有head、display為none等不必顯示的節點。
要注意的是,瀏覽器的解析過程并非是串連進行的,比如在解析CSS的同時,可以繼續加載解析HTML,但在解析執行JS腳本時,會停止解析后續HTML。
為了更好的用戶體驗,渲染引擎將會盡可能早的將內容呈現到屏幕上,并不會等到所有的html都解析完成之后再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容,同時,可能還在通過網絡下載其余內容。
上述所有步驟完成后,就需要斷開連接了。就比如我們兩個人打電話,打完后就需要揮一揮手,告別了,不然要扣話費了。同樣的道理,如果上述步驟執行完成后,不斷開連接,則會消耗網絡資源。
TCP的連接的拆除需要發送四個包,因此稱為四次揮手(four-way handshake)??蛻舳嘶蚍掌骶芍鲃影l起揮手動作,在socket編程中,任何一方執行close()操作即可產生揮手操作。
意義:當被動方收到主動方的FIN報文通知時,它僅僅表示主動方沒有數據再發送給被動方了。但未必被動方所有的數據都完整的發送給了主動方,所以被動方不會馬上關閉SOCKET,它可能還需要發送一些數據給主動方后,再發送FIN報文給主動方,告訴主動方同意關閉連接,所以這里的ACK報文和FIN報文多數情況下都是分開發送的。
原理
1)第一次揮手:Client發送一個FIN,用來關閉Client到Server的數據傳送,Client進入FIN_WAIT_1狀態。
2)第二次揮手:Server收到FIN后,發送一個ACK給Client,確認序號為收到序號+1(與SYN相同,一個FIN占用一個序號),Server進入CLOSE_WAIT狀態。
3)第三次揮手:Server發送一個FIN,用來關閉Server到Client的數據傳送,Server進入LAST_ACK狀態。
4)第四次揮手:Client收到FIN后,Client進入TIME_WAIT狀態,接著發送一個ACK給Server,確認序號為收到序號+1,Server進入CLOSED狀態,完成四次揮手。
通俗的說法
1)Client:我所有東西都說完了
2)Server:我已經全部聽到了,但是等等我,我還沒說完
3)Server:好了,我已經說完了
4)Client:好的,那我們的通信結束
寫到這里,我們基本上從技術的角度講解了從URL輸入到獲取資源,整個流程發生了什么。我們再來捋一捋,首先是DNS 解析:將域名解析成 IP 地址,解析完成后就需要建立TCP 連接:TCP 三次握手,然后發送 HTTP 請求,再到服務器處理請求并返回 HTTP 報文,服務器處理完成后瀏覽器解析渲染頁面,最后斷開連接:TCP 四次揮手,這樣整個流程就算是完成了,這個時候我們就可以在渲染的頁面愉快的看視頻、聽音樂、打游戲了,哈哈!
你多學一樣本事,就少說一句求人的話,現在的努力,是為了以后的不求別人,實力是最強的底氣。記住,活著不是靠淚水博得同情,而是靠汗水贏得掌聲。 ——《寫給程序員朋友》
私信“666”可獲取以下資料哦!
01【開源網站】獲取免費開源項目,找工作必備!
02【電子書】獲取1000+本Java開發精華電子書!
03【簡歷】獲取月薪三萬簡歷模板!
04【BAT面試】獲取全網最全一線大廠Java筆試面試題!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。