[Day 2] Web 基礎知識

2023 iThome 鐵人賽

DAY 2

Security

從 Moblie Development 主題被損友洗腦鬼轉 Security 的我真的可以完賽嗎？系列第 2 篇

15th鐵人賽

ali8888

團隊好想放假大學

2023-09-17 13:59:41

333 瀏覽

分享至

HTML、CSS、JavaScript

HTML：網頁內容的框架

HTML（HyperText Markup Language）是用來描述網頁內容的標記語言。HTML 使用一系列的標籤來定義元素和數據結構，例如 <p> 用於段落，<a> 用於超鏈接等。

<!DOCTYPE html>
<html>
<head>
    <title>我的網站</title>
</head>
<body>
    <p>這是一個段落。</p>
    <a href="https://www.example.com">訪問例子網站</a>
</body>
</html>

CSS：用於設計網頁的樣式

CSS（Cascading Style Sheets）是用於描述 HTML 元素如何在螢幕上顯示的樣式表語言。CSS 可以控制字體、顏色、間距和位置等。

p {
    font-size: 16px;
    color: blue;
}

JavaScript：在客戶端執行，用於網頁交互

JavaScript 是一種用於網頁交互的腳本語言。它可以修改 DOM、發送網絡請求，以及處理各種用戶事件。

document.querySelector('p').addEventListener('click', function() {
    alert('你點擊了段落！');
});

瀏覽器是如何解析網站的？

如何從服務器獲取資料

當你在瀏覽器輸入一個網址（URL）後，瀏覽器會發送一個 HTTP 請求到指定的服務器。服務器接收到請求後，會回傳相應的 HTML、CSS 和 JavaScript 文件。

分成以下幾個步驟：

DNS 解析
- 域名系統（DNS）解析：瀏覽器首先需要將輸入的域名（如 www.example.com）解析成相對應的 IP 地址。這一步通常由 DNS 服務來完成。
發送 HTTP 請求
- 建立連接：瀏覽器使用解析後獲取的 IP 地址，通過 TCP/IP 協議與服務器建立一個連接。
- 發送 HTTP 請求：連接建立後，瀏覽器會向服務器發送一個 HTTP 請求。這個請求包含了一些元數據（如請求方法、headers 等）和可能的請求主體（如表單數據）。
服務器處理請求
- 服務器處理：服務器收到請求後，會根據請求的內容進行相應的處理。這可能涉及數據庫查詢、認證等步驟。
- 返回 HTTP 響應：處理完請求後，服務器會將生成的 HTML、CSS、JavaScript 文件和其他資源，通過 HTTP 響應返回給瀏覽器。
瀏覽器接收和解析資料
- 接收資料：瀏覽器接收到服務器返回的資料後，會開始解析 HTML、CSS 和 JavaScript 內容。
- 渲染網頁：最後，瀏覽器會根據解析後的資料渲染（或刷新）網頁。
閉合連接
- 關閉連接：在數據交換完畢後，通常會關閉與服務器的連接，除非使用了持久連接（HTTP/2）。

這個過程可能會因為多種因素而有所不同，例如使用的協議（HTTP/1.1、HTTP/2）、安全層（HTTPS）、服務器的配置等。但機制大致相同。

DOM（文檔對象模型）的構建過程：從 HTML 文檔到交互式網頁

文檔對象模型（DOM）是一種表示網頁結構的模型。在這個模型中，網頁的每個部分（如標題、段落、圖像等）都會被表示為一個對象，並且這些對象會形成一個樹狀結構。下面我們將探討 DOM 的構建過程。

讀取 HTML 文檔
- 下載 HTML 文件：當瀏覽器從服務器獲取了 HTML 文件後，它會從頭到尾讀取文件內容。
創建初始 DOM 樹
- 創建 Document 對象：瀏覽器會首先創建一個 Document 對象，代表整個文檔。
- 解析標籤：瀏覽器會解析 HTML 文件中的標籤（例如 <html>, <head>, <body> 等）並為每個標籤創建相應的 DOM 對象。
- 建立樹狀結構：這些 DOM 對象會按照其在 HTML 文件中的嵌套關係來形成一個樹狀結構。
處理 CSS
- 解析 CSS：瀏覽器會解析所有相關的 CSS 規則，並確定如何渲染每一個 DOM 對象。
- 計算樣式：瀏覽器會根據 CSS 規則計算出每個 DOM 對象的最終樣式。
JavaScript 處理
- 執行 JavaScript：如果 HTML 文件中包含 JavaScript，瀏覽器會在適當的時候執行這些腳本。腳本可能會讀取或修改 DOM，或者觸發網頁上的交互。
動態更新 DOM
- 動態變更：由於 DOM 是交互式的，因此在瀏覽器完成初始渲染後，DOM 結構仍然可以被 JavaScript 动态地讀取或修改。
完成渲染
- 完成渲染：瀏覽器根據 DOM 樹和計算出的樣式來渲染最終的網頁。

這是一個簡化的過程，實際情況會更為複雜。例如，某些 JavaScript 函數會阻塞 DOM 的構建，某些 CSS 資源如果未完全加載也會影響渲染等。

CSS 的解析和應用：從原始規則到渲染網頁

CSS（Cascading Style Sheets）是用於設計網頁樣式的一種標記語言。CSS 規則定義了網頁元素如何在瀏覽器中呈現，包括字體、顏色、間距等各方面。在這篇文章中，我們將研究 CSS 是如何被解析和應用的。

CSS 的加載
- 外部和內聯 CSS：CSS 可以通過外部文件（通常以 .css 為擴展名）來引入，也可以直接在 HTML 文檔中使用 <style> 標籤來內聯。
- 瀏覽器請求：對於外部 CSS，瀏覽器會發出 HTTP 請求來下載它。
- 解析到 CSSOM：一旦 CSS 文件被下載完成或內聯 CSS 被讀取，瀏覽器會解析 CSS 規則並創建一個稱為 CSSOM（CSS Object Model）的樹狀結構。
CSS 的解析
- 選擇器和屬性：CSS 規則由選擇器和一組屬性組成。選擇器用於定義哪些元素會受到該規則的影響，而屬性則描述了元素應如何呈現。
- 優先級和繼承：瀏覽器會根據各種規則（如選擇器的專一性，重要性等）來解析 CSS，以決定哪一個規則最終會被應用到特定的元素上。
CSS 和 DOM 的合併
- 計算樣式：瀏覽器會將 CSSOM 和 DOM 合併，以計算出每個 DOM 節點的最終樣式。
- 視覺格式模型：使用這些計算出的樣式，瀏覽器會創建一個視覺格式模型。這個模型會決定元素在網頁上的佈局和位置。
繪製和渲染
- 繪製：瀏覽器將根據視覺格式模型來繪製每個元素。
- 渲染：最後，瀏覽器會將繪製的元素呈現在螢幕上。
動態變更
- 動態樣式更改：JavaScript 可用於動態更改元素的樣式。這些更改會觸發瀏覽器重新計算樣式，可能會導致 DOM 的部分或全部重新渲染。

JavaScript 的執行：從載入到運行

JavaScript 是一種廣泛用於網頁開發的程式語言，負責實現網頁的交互效果。以下是 JavaScript 在瀏覽器中執行的基本步驟：

載入腳本
- 外部與內嵌腳本：JavaScript 腳本可以是外部的（通過 <script src="..."></script> 標籤引入）或是內嵌在 HTML 中（在 <script> 和 </script> 標籤之間）。
- 非阻塞與延遲加載：使用 async 或 defer 屬性可以改變腳本的加載和執行時機。
解析與編譯
- 解析成抽象語法樹（AST）：瀏覽器會將載入的 JavaScript 代碼解析成一個抽象語法樹。
- 即時編譯（JIT）：現代瀏覽器通常使用即時編譯技術，將 AST 轉換為本地機器代碼，以提高執行效率。
執行上下文與作用域
- 全局執行上下文：當腳本開始執行時，會首先進入全局執行上下文。
- 函數執行上下文：當調用一個函數時，會創建一個新的執行上下文。
- 變數作用域：在執行過程中，JavaScript 會按照作用域規則來查找變數。
事件循環與異步操作
- 事件循環：JavaScript 是單線程的，但它可以進行非阻塞的異步操作，這主要是通過事件循環來實現的。
- 回調、Promise 和 Async/Await：這些都是處理異步操作的不同方法。
DOM 與 JavaScript
- DOM 操作：JavaScript 可以讀取和修改 DOM，這通常是通過 Document Object Model（DOM）API 來完成的。
- 事件監聽與處理：可以使用 JavaScript 來添加事件監聽器，當某些事件（如點擊、鍵盤輸入等）發生時，會觸發相應的處理函數。
錯誤處理
- try...catch...finally：這是 JavaScript 中處理異常的一種機制。
- 錯誤報告與調試：瀏覽器的開發者工具提供了豐富的錯誤報告和調試功能。