當您在瀏覽器中輸入網址時會發生什么？

0、先問個問題

若客戶提出一個質量屬性要求，要實現一個Web查詢，性能200毫秒以內，請問這個要求高還是低？

對一個web系統來說，200毫秒是一個比較高的性能。

憑啥這么說，你要是做過架構的話，就明白這個道理。

作為架構師，必須了解完整過程，每一個細節。

你應該能把整個系統分解成若干個環節，并且各環節的細節你都能了解。這個環節是硬的還是軟的？會不會影響這個部分的性能開銷？

看下圖，能看到你從發起請求，一直到頁面呈現完了之后的4個主要環節。

要細分的話，其實當中還有更多的環節。

網絡大概走多少毫秒，差不多50ms，環節取決于網絡環境，要是跨國的話，從中國到美國，可能要上百。

這個是系統架構改變不了的。

那就是200已經去掉了50，或者100，剩下100多可以用。

收到數據之后，需要瀏覽器渲染出來，又需要多長時間呢？

這個時間不確認，看渲染結果復不復雜，有沒ajax再次請求這類情況。

可能簡單的，10幾毫秒，復雜的更長。

右邊從Web服務器到應用服務器、從應用服務器到數據庫DB之間，還有性能開銷。

數據庫檢索出來是一個值，這個值到了你的開發語言里面，經過底層框架，需要做數據類型轉換，變成程序里的一個對象。

一個架構師，就要學會區分，哪些是架構能左右的，能夠改善的，哪些是我不能解決的，最后在你能解決的部分里想辦法。

你都了解了之后，你就能專業地跟客戶說，這個200毫秒我做不到。

或者說在什么條件下，我能做到。

一個事情，只有你都了解的情況下，才能給出一個可行方案。

01、當您在瀏覽器中輸入 URL 時會發生什么？

讓我們一步步看一下整個過程：

用戶在瀏覽器中輸入 URL 并按下Enter鍵時，我們需要做的第一件事是將 URL 轉換為 IP 地址。映射通常存儲在緩存中，因此瀏覽器會在多層緩存中查找 IP 地址：瀏覽器緩存、操作系統緩存、本地緩存和 ISP 緩存。如果瀏覽器在緩存中找不到該映射，則會請求 DNS（域名系統）解析器進行解析。
如果在任何緩存中都找不到 IP 地址，則瀏覽器將前往 DNS 服務器進行遞歸 DNS 查找，直到找到 IP 地址。
現在我們有了服務器的IP地址，瀏覽器向服務器發送HTTP請求。為了安全訪問服務器資源，我們應該始終使用 HTTPS。它首先通過 TCP 3 次握手與服務器建立 TCP 連接。然后它將公鑰發送給客戶端。客戶端使用公鑰加密會話密鑰并發送給服務器。服務器使用私鑰來解密會話密鑰?？蛻舳撕头掌鳜F在可以使用會話密鑰交換加密數據。
服務器處理請求并發回響應。

對于成功的響應，狀態代碼為 200。
響應中有 3 部分：HTML、CSS 、 Javascript。
瀏覽器渲染的順序：
1. 瀏覽器解析HTML并生成DOM樹。
2. 解析 CSS 并生成 CSSOM 樹。
3. 結合 DOM 樹和 CSSOM 樹來構建渲染樹。
4. 節點布局
5. 最后頁面渲染，瀏覽器將內容呈現并顯示給用戶。

02、用一張圖解釋 8 種流行的網絡協議

HTTP（超文本傳輸協議）HTTP 是一種用于獲取 HTML 文檔等資源的協議。它是 Web 上任何數據交換的基礎，是一種客戶端-服務器協議。
HTTP/3HTTP/3 是 HTTP 的下一個主要修訂版。它運行在 QUIC 上，這是一種專為移動互聯網使用而設計的新傳輸協議。它依賴于 UDP 而不是 TCP，從而實現更快的網頁響應。VR 應用程序需要更多帶寬來渲染虛擬場景的復雜細節，并且可能會從遷移到由 QUIC 提供支持的 HTTP/3 中受益。
HTTPS（安全超文本傳輸協議）HTTPS 擴展了 HTTP 并使用加密來實現安全通信。
WebSocketWebSocket 是一種通過 TCP 提供全雙工通信的協議?？蛻舳私ebSocket來接收來自后端服務的實時更新。與總是“拉取”數據的 REST 不同，WebSocket 允許“推送”數據。在線游戲、股票交易和消息傳遞應用程序等應用程序利用 WebSocket 進行實時通信。
TCP（傳輸控制協議）TCP 旨在通過互聯網發送數據包，并確保通過網絡成功傳送數據和消息。許多應用層協議構建在 TCP 之上。
UDP（用戶數據報協議）UDP 直接將數據包發送到目標計算機，無需先建立連接。UDP 通常用于時間敏感的通信，其中偶爾丟棄數據包比等待更好。語音和視頻流量通常使用此協議發送。
SMTP（簡單郵件傳輸協議）SMTP 是一種用于將電子郵件從一個用戶傳輸到另一個用戶的標準協議。
FTP（文件傳輸協議）FTP 用于在客戶端和服務器之間傳輸計算機文件。它具有單獨的控制通道和數據通道連接。

TML究竟算不算是一門編程語言，這是爭執已久的話題。其實，從本質來講，HTML確實算不上是一門編程語言。

HTML全稱，HyperText Markup Language。字面理解，HTML就是一種超文本語言，何謂超文本，就是其用途和意義已經超越了純文本。因為，HTML重新定義了文本的格式，而且HTML不僅僅只有文本還包括音視頻。

相比其他語言，HTML的字面意義更容易理解，就是為了方便人類和機器閱讀。例如，我們常見的頭標簽，輸入標簽，換行符等等，都是HTML中常見和常用的。此類標簽不僅讓人類能夠輕松理解，而且對于電腦這種機器來說，也是很容理解的。

HTML語言不具備很強的邏輯性?；诖?，很多程序員都不承認HTML是一門編程語言。不像其他語言，例如Java，C++，Python等流行語言，這些語言都帶有很強的邏輯和流程控制功能。

不僅僅是HTML無邏輯性和流程控制的問題，同時HTML還是缺乏靈活性的，因為HTML都是按照W3C的標準限定死的語言，主要用于規范HTML文檔的書寫格式。不像其他語言，用戶可以自定義的地方有很多，千變萬化。

HTML不被承認是一門編程語言，最重要的一點是因為，HTML不能按照人類的設計對一件工作進行重復的循環，直至得到讓人類滿意的答案。這一點最重要，其他語言都可以輕松做到。

在編程語言方面的話，小編還是更為推崇c/c++的！雖然Java、Python熱度不斷上漲，但是作為編程界元老的C++依然具有其無可比擬的優勢，小編是一個有著7年工作經驗的架構師，對于c++，自己有做資料的整合，一個完整學習C語言c++的路線，學習資料和工具?？梢赃M我的群7418,18652領取，免費送給大家。希望你也能憑自己的努力，成為下一個優秀的程序員！

當然，我們也不能否認HTML的重要性，作為web領域的重要元老，在當前時候，前端工程師還是有相當大的發展前途的！

在程序員的眼中，HTML是算不上一門編程語言的。雖然如此，但是HTML在WEB領域的重要作用遠遠超越其他任何編程語言，瀏覽器打開i一個網頁第一步就要解析一個HTML的DOM樹，越簡單越重要。

元芳，你怎么看呢？

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實現延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動態創建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標簽定義了defer屬性。標簽定義了defer屬性元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行標簽定義了defer屬性。

用途：表明腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執行在<script>元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內容-->
</body>
</html>

說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標簽后再執行HTML5規范要求腳本按照它們出現的先后順序執行。在現實當中，延遲腳本并不一定會按照順序執行defer屬性只適用于外部腳本文件。支持HTML5的實現會忽略嵌入腳本設置的defer屬性

2、async屬性

HTML5 為<script>標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁面等待腳本下載和執行，從而異步加載頁面其他內容。異步腳本一定會在頁面 load 事件前執行。不能保證腳本會按順序執行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--這里放內容-->
</body>
</html>

async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。

缺點：不能控制加載的順序

3、動態創建DOM方式

//這些代碼應被放置在</ body>標簽前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement=document .createElement("script");
		element.src="defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload=downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調函數，成功獲取文件后執行的函數
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時間延遲加載js代碼，給網頁加載留出更多時間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應被放置在</body>標簽前(接近HTML文件底部)

<script type="text/javascript">
	function downloadJSAtonload() {
		var element=document.createElement("script");
		element.src="defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload=downloadJSAtOnload;
</script>

這段代碼意思等到整個文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復制上面代碼

6.2）粘貼代碼到HTML的標簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進行操作的javascript代碼(例如添加click事件。

在線咨詢

上一篇：物聯網的學習路線
下一篇：6.CSS字體屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

當您在瀏覽器中輸入網址時會發生什么？

0、先問個問題

01、當您在瀏覽器中輸入 URL 時會發生什么？

02、用一張圖解釋 8 種流行的網絡協議

1、defer屬性