首頁 web前端 js教程 5m 初學者如何使用網絡

5m 初學者如何使用網絡

Dec 08, 2024 pm 06:54 PM

How the web works for beginners in 5m
您將了解在電腦或手機上的網路瀏覽器中查看網頁時所發生情況的簡化視圖。

客戶端和伺服器

連接到網際網路的電腦稱為客戶端伺服器。簡化版

How the web works for beginners in 5m

  • 用戶端是典型網路使用者的網路連線裝置(例如,連接到 Wi-Fi 的電腦)以及這些裝置上可用的網路存取軟體(通常是 Chrome 等網路瀏覽器)。
  • 伺服器是儲存網頁、網站或應用程式的電腦。當客戶端設備想要存取網頁時,網頁的副本將從伺服器下載到客戶端電腦上,以顯示在使用者的網頁瀏覽器中。

除了客戶端和服務端之外,我們還需要向以下物件打招呼:

  • 您的網路連線:讓您在網路上傳送和接收資料。

  • TCP/IP:傳輸控制協定和網際網路協定是定義資料如何在網際網路上傳輸的通訊協定。

  • DNS:網域名稱系統就像是網站的通訊錄。當您在瀏覽器中鍵入網址時,瀏覽器會在檢索網站之前查看 DNS 以尋找網站的 IP 位址。瀏覽器需要找出網站所在的伺服器,以便它可以將 HTTP 訊息傳送到正確的位置(請參閱下文)。

  • HTTP:超文本傳輸協定是一種應用程式協議,定義客戶端和伺服器相互通訊的語言。

  • 元件檔:網站由許多不同的文件組成,這些文件主要有兩種類型:

    • 程式碼檔案:網站主要由 HTML、CSS 和 JavaScript 建構。
    • 資產:這是構成網站的所有其他內容的統稱,例如圖像、音樂、影片、Word 文件和 PDF。

當您在瀏覽器中輸入網址時

  1. 瀏覽器前往DNS伺服器,找到網站所在伺服器的真實位址
  2. 瀏覽器向伺服器傳送 HTTP 請求訊息,要求伺服器傳送網站的副本給客戶端。此訊息以及用戶端和伺服器之間發送的所有其他資料均使用 TCP/IP 透過網際網路連線傳送。
  3. 如果伺服器批准了客戶端的請求,伺服器會向客戶端發送“200 OK”訊息,這意味著“當然你可以查看該網站!就是這裡”,然後開始將網站的檔案傳送到瀏覽器作為一系列稱為資料包的小塊
  4. 瀏覽器將這些小塊組裝成一個完整的網頁並顯示給您。

檔案解析順序

  • HTML 解析:瀏覽器先解析 HTML 文件,偵測 外部 CSS 和 <script> 標籤JavaScript 標籤。 </script>

  • 取得 CSS 和 JavaScript:解析 HTML 時,瀏覽器會向伺服器發送請求以取得引用的 CSS 和 JavaScript 檔案。

  • 解析與編譯:

    • HTML 產生 DOM 樹(文件物件模型)。
    • CSS 產生 CSSOM 樹(CSS 物件模型)。
    • JavaScript 被編譯並執行。
  • 頁面渲染:瀏覽器結合 DOM 和 CSSOM 來設計內容並執行 JavaScript,將頁面的視覺表示繪製到螢幕上,允許使用者互動。

什麼是 DNS(網域名稱系統)?

真實的網址並不是您在網址列中輸入的漂亮、令人難忘的字串來尋找您最喜愛的網站。它們是特殊的數字,如下所示:192.0.2.172。

這稱為 IP 位址,它代表網路上的唯一位置。然而,它並不容易記住,不是嗎?這就是發明域名系統的原因。本系統使用特殊伺服器將您在瀏覽器中輸入的網址(例如「mozilla.org」)與網站的真實(IP)位址進行配對。

資源:

  • MDN 網路文件

以上是5m 初學者如何使用網絡的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Laravel 教程
1602
29
PHP教程
1504
276
如何在node.js中提出HTTP請求? 如何在node.js中提出HTTP請求? Jul 13, 2025 am 02:18 AM

在Node.js中發起HTTP請求有三種常用方式:使用內置模塊、axios和node-fetch。 1.使用內置的http/https模塊無需依賴,適合基礎場景,但需手動處理數據拼接和錯誤監聽,例如用https.get()獲取數據或通過.write()發送POST請求;2.axios是基於Promise的第三方庫,語法簡潔且功能強大,支持async/await、自動JSON轉換、攔截器等,推薦用於簡化異步請求操作;3.node-fetch提供類似瀏覽器fetch的風格,基於Promise且語法簡單

JavaScript數據類型:原始與參考 JavaScript數據類型:原始與參考 Jul 13, 2025 am 02:43 AM

JavaScript的數據類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol,其值不可變且賦值時復制副本,因此互不影響;引用類型如對象、數組和函數存儲的是內存地址,指向同一對象的變量會相互影響。判斷類型可用typeof和instanceof,但需注意typeofnull的歷史問題。理解這兩類差異有助於編寫更穩定可靠的代碼。

超越地圖和過濾器的高階功能的JS綜述 超越地圖和過濾器的高階功能的JS綜述 Jul 10, 2025 am 11:41 AM

JavaScript數組中,除了map和filter,還有其他強大且不常用的方法。 1.reduce不僅能求和,還可計數、分組、展平數組、構建新結構;2.find和findIndex用於查找單個元素或索引;3.some和every用於判斷是否存在或全部滿足條件;4.sort可排序但會改變原數組;5.使用時注意複製數組避免副作用。這些方法使代碼更簡潔高效。

過濾JavaScript中的一系列對象 過濾JavaScript中的一系列對象 Jul 12, 2025 am 03:14 AM

JavaScript中filter()方法用於創建一個包含所有通過測試元素的新數組。 1.filter()不修改原數組,而是返回符合條件元素的新數組;2.基本語法為array.filter((element)=>{returncondition;});3.可按屬性值過濾對像數組,如篩選年齡大於30的用戶;4.支持多條件篩選,例如同時滿足年齡和名字長度條件;5.可處理動態條件,將篩選參數傳入函數以實現靈活過濾;6.使用時注意必須返回布爾值,避免返回空數組,以及結合其他方法實現字符串匹配等複雜邏

如何檢查數組是否在JavaScript中包含一個值 如何檢查數組是否在JavaScript中包含一個值 Jul 13, 2025 am 02:16 AM

在JavaScript中檢查數組是否包含某個值,最常用方法是includes(),它返回布爾值,語法為array.includes(valueToFind),例如fruits.includes('banana')返回true;若需兼容舊環境,則使用indexOf(),如numbers.indexOf(20)!==-1返回true;對於對像或複雜數據,應使用some()方法進行深度比較,如users.some(user=>user.id===1)返回true。

JavaScript上下文中解釋的虛擬DOM的概念 JavaScript上下文中解釋的虛擬DOM的概念 Jul 12, 2025 am 03:09 AM

虛擬DOM是一種優化真實DOM更新的編程概念,通過在內存中創建與真實DOM對應的樹形結構,避免頻繁直接操作真實DOM。其核心原理是:1.數據變化時生成新的虛擬DOM;2.對比新舊虛擬DOM找出最小差異;3.批量更新真實DOM以減少重排重繪開銷。此外,使用唯一穩定key可提升列表對比效率,而部分現代框架已採用其他技術替代虛擬DOM。

在異步/等待JavaScript函數中處理錯誤 在異步/等待JavaScript函數中處理錯誤 Jul 12, 2025 am 03:17 AM

處理異步函數中的錯誤應使用try/catch、在調用鏈中處理、使用.catch()方法、並監聽unhandledrejection事件。 1.使用try/catch捕獲錯誤是推薦方式,結構清晰且能處理await中的異常;2.在調用鏈中處理錯誤可集中邏輯,適合多步驟流程;3.使用.catch()可在調用async函數後捕獲錯誤,適用於Promise組合場景;4.監聽unhandledrejection事件可記錄未處理的rejection,作為最後一道防線;以上方法共同確保異步錯誤被正確捕獲和處理。

如何處理JavaScript中的時區? 如何處理JavaScript中的時區? Jul 11, 2025 am 02:41 AM

處理JavaScript時區問題的關鍵在於選擇合適的方法。 1.使用原生Date對象時,推薦以UTC時間進行存儲和傳輸,並在展示時轉換為用戶本地時區;2.對於復雜時區操作,可使用moment-timezone,它支持IANA時區數據庫並提供便捷的格式化與轉換功能;3.若需本地化顯示時間且不想引入第三方庫,可使用Intl.DateTimeFormat;4.推薦現代輕量方案day.js配合timezone和utc插件,其API簡潔、性能良好並支持時區轉換。

See all articles