前端筆記01---html 的加載

文章目錄

- HTML
- - <meta>
  - <script>
  - MIME
- CSS
- HTML 與 DOM 有什么不同
- MDN
- - Mozilla
- 臟檢查
- 依賴注入
- 虛擬 DOM
- - 虛擬DOM性能開銷
- 性能
- - 性能開銷包括哪些方面
  - 性能瓶頸
  - 性能？
- 事件
- - 事件委托
  - 事件冒泡
  - passive: true
- 合成器線程

HTML

html head <meta>
<meta> 元素在 HTML 中用于提供關于文檔的元數據，例如描述、關鍵詞、作者和其他信息。這些元數據可以幫助搜索引擎更好地理解和索引網頁內容。
另外，元素還可以包含指示瀏覽器如何處理頁面內容的信息，比如字符集設定、視口設置等。

（元數據指的是描述數據的數據，或者說是關于數據的數據。在網頁開發中，元數據可以提供有關網頁內容的信息，如標題、關鍵詞、描述、作者、最后修改日期等。這些信息可以幫助搜索引擎和瀏覽器理解和處理網頁內容，并且對于 SEO（搜索引擎優化）和用戶體驗非常重要。）

src: 指定外部 JavaScript 文件的 URL。
type: 規定腳本的 MIME 類型。通常是 “text/javascript” 或 “module”。
async: 表示立即下載腳本，但不阻止頁面解析和其他操作。
defer: 表示腳本可以延遲到文檔完全被解析和顯示后再執行。
charset: 指定使用的字符集。

這些屬性可以幫助控制腳本的加載和執行行為，以及指定外部腳本文件的位置和類型。

MIME

MIME（）類型是一種標準，用于表示文檔的性質和格式。在HTML中，type屬性用于指定腳本的MIME類型。對于JavaScript腳本來說，常用的MIME類型是 text/javascript。另外，對于ES6模塊，可以使用 module 類型。這些類型信息有助于瀏覽器正確解釋腳本內容。

在 JavaScript 中，“module” 模塊指的是 ECMAScript 6 引入的模塊系統。使用 “module” 類型可以告訴瀏覽器，該腳本是一個 ES6 模塊，并且應該按照 ECMAScript 6 的模塊規范來解析。這允許開發者使用更現代的模塊化方式來組織和導入/導出 JavaScript 代碼。 ES6 模塊提供了更好的封裝性、依賴管理和可重用性，使得大型應用程序的開發變得更加模塊化和結構化。

async 是用于 <script> 元素的屬性之一。當設置為 async 時，腳本的下載和執行是異步進行的，這意味著它會在其他頁面內容加載的同時開始下載，并且在下載完成后立即執行，不會阻止頁面解析和渲染。如果有多個帶有 async 屬性的腳本，它們的執行順序可能是不確定的。這樣的行為對于不影響頁面加載以及彼此之間沒有依賴關系的腳本非常有用。

  name: 用于指定元數據的名稱，比如描述、關鍵詞等。content: 指定與 name 屬性相關聯的元數據的值。charset: 設置字符集，規定文檔使用的字符編碼。http-equiv: 用于模擬 HTTP 頭部中的響應字段，比如設置緩存控制、刷新等。viewport: 用于控制移動設備上的視口屬性，如寬度、縮放等。

這些屬性可以幫助網頁開發者提供有關文檔和視口的元數據信息，以及控制瀏覽器和搜索引擎的行為。

例如：當使用<meta>元素時，以下是一些常見的用法：

描述網頁內容：<meta name="description" content="這是網頁的描述">設置關鍵詞：<meta name="keywords" content="關鍵詞1, 關鍵詞2, 關鍵詞3">指定字符集：<meta charset="UTF-8">控制視口屬性（移動設備上常用）：<meta name="viewport" content="width=device-width,
initial-scale=1.0">刷新和重定向： <meta http-equiv="refresh" content="5;url=https://www.example.com">

這些示例展示了如何使用元素來提供關于文檔的元數據以及控制瀏覽器行為。

CSS

我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復計算。

HTML 與 DOM 有什么不同

HTML（HyperText Markup Language）是一種用于創建網頁結構和內容的標記語言，它定義了網頁的各種元素和其屬性。而 DOM（Document Object Model）是一種編程接口，它表示文檔的邏輯結構并允許程序和腳本語言（如 JavaScript）動態地訪問和修改文檔的內容、結構和樣式。

MDN

簡而言之，HTML 是一種標記語言，用于描述網頁的靜態結構和內容，而 DOM 則是由瀏覽器創建的文檔對象模型，可以通過編程方式來操作和修改頁面的內容和結構。 HTML 可以看作是網頁的靜態描述，而 DOM 可以看作是對網頁內容進行動態處理和交互的接口。

MDN 指的是 Mozilla 開發者網絡（Mozilla Developer Network），它是一個提供 Web 技術文檔、教程和資源的開放平臺。MDN 上包含了關于 HTML、CSS、JavaScript 和其他 Web 技術的詳盡文檔，以及各種示例代碼和教程。開發者可以在 MDN 上找到關于 Web 標準、瀏覽器兼容性、API 參考等方面的權威信息。

此外，MDN 還提供了許多社區驅動的內容，使得開發者能夠共享知識、經驗和最佳實踐。總之，MDN 是 Web 開發者們不可或缺的學習和參考資源之一。

Mozilla

Mozilla 是一家致力于開放式互聯網的非營利組織，也是全球最大的獨立的開源軟件公司之一。該組織以 Firefox 等項目為人所知。Mozilla 開發者網絡（MDN）是該組織旗下的一個平臺，提供了豐富的 Web 技術文檔和資源，致力于推廣開放式 Web 標準和技術。

除了瀏覽器之外，Mozilla 還致力于開發其他開源項目，如 Thunderbird 郵件客戶端、Firefox OS 移動操作系統等。此外，Mozilla 通過其開源理念和技術社區的支持，積極參與和推動開放標準和網絡隱私保護，以促進互聯網的健康發展。

臟檢查

臟檢查（Dirty Checking）是一種用于實現雙向數據綁定的技術。它通常用于一些 JavaScript 框架和庫中，比如 AngularJS。在臟檢查機制中，框架會持續監視數據模型的變化，并且在每次 UI 更新時檢查這些變化。如果檢測到數據模型發生了變化，框架會更新相關的 UI 組件。

臟檢查的實現方式一般是通過周期性地比較數據模型的先前狀態和當前狀態來執行的。這種方法的缺點是，即使數據沒有變化，也會頻繁地進行檢查，可能導致性能問題。

隨著現代的前端框架和庫的發展，許多新的技術和方法（比如虛擬 DOM）已經取代了臟檢查機制，并且更高效地實現了雙向數據綁定。

依賴注入

依賴注入（DI）是一種設計模式，用于管理組件或對象之間的依賴關系。在應用程序中使用依賴注入有助于提高靈活性、可測試性和可維護性。依賴注入的管理通常包括以下幾個方面：

容器管理：通常會有一個依賴注入容器，它負責創建、存儲和提供依賴項的實例。容器會跟蹤依賴項之間的關系，并在需要時進行實例化。配置：將依賴項與其所需的實例進行配對。這可以通過配置文件、元數據注解、代碼注冊等方式來完成。生命周期管理：管理依賴項的生命周期，包括單例、瞬態、作用域等。這確保了依賴項在整個應用程序中的合適使用和銷毀。解析和注入：容器負責根據配置和需要，在運行時解析依賴項的實例并注入到相應的位置。這需要考慮循環依賴、依賴關系的復雜性等因素。

不同的框架和庫對依賴注入的管理有不同的實現方式，比如 Angular 的注入器、Spring Framework 的應用上下文等。這些工具提供了一套機制來幫助開發者更輕松地管理應用程序中的依賴關系。

虛擬 DOM

虛擬 DOM（Virtual DOM）是一種用于提升 Web 應用性能的技術。它是一個輕量級的、存在于內存中的對真實 DOM 的映射，通過對其修改和比較，減少了對實際 DOM 的操作次數。

當數據發生變化時，前端框架會先對虛擬 DOM 進行更新，然后將新的虛擬 DOM 與舊的虛擬 DOM 進行比較，找出差異，最后僅僅對實際需要修改的部分進行 DOM 操作，以提高渲染效率。

使用虛擬 DOM 技術有助于減少對實際 DOM 的訪問次數，從而提升頁面性能。這種技術在諸如 React 和 Vue.js 等現代前端框架中被廣泛采用。

虛擬DOM性能開銷

在使用虛擬 DOM 技術時，會有一些性能開銷，包括以下幾個方面：

內存消耗：虛擬 DOM 需要占用一定的內存空間來存儲對真實 DOM 的映射關系以及更新前后的狀態信息。初始化時間：虛擬 DOM 需要在頁面初始加載時進行初始化，這可能會增加應用程序啟動時間。比較與差異計算：為了找出虛擬 DOM 中的差異，需要對新舊虛擬 DOM 進行比較和計算。這些操作可能會引起一定的計算性能開銷。更新成本：當數據發生變化時，需要更新虛擬 DOM，并計算出需要修改的部分。這也會導致一定的性能開銷。

盡管虛擬 DOM 存在一些性能開銷，但通常情況下，其優點（如最小化對實際 DOM 的操作次數）遠大于缺點。而且由于現代瀏覽器對 JavaScript 引擎和 DOM 操作進行了優化，虛擬 DOM 技術往往仍然能夠提升整體的頁面渲染性能。

性能

性能開銷包括哪些方面

性能開銷可能涉及多個方面，具體取決于應用程序的架構、運行環境和實際使用的技術。一般而言，以下是一些常見的性能開銷方面：

計算開銷：指在執行過程中產生的計算成本，包括對數據結構的操作、算法復雜度等。這可能導致 CPU 使用率增加以及響應時間延長。內存消耗：應用程序占用的內存資源，包括變量、對象、函數調用堆棧等。大量內存消耗可能導致系統的內存壓力，甚至觸發垃圾回收。網絡開銷：指應用程序與外部服務通信時產生的開銷，包括網絡延遲、帶寬消耗、請求響應時間等。網絡開銷可能導致頁面加載緩慢或接口響應不及時。I/O 操作：指應用程序對磁盤、文件系統、數據庫等進行讀寫操作所產生的開銷。頻繁的 I/O 操作可能成為性能瓶頸。并發和同步開銷：應用程序中多線程/進程之間的并發控制和同步操作可能引起上下文切換和鎖競爭，從而導致性能開銷。渲染性能開銷：針對前端應用程序，包括布局（layout）、繪制（paint）和合成（composite）等階段的渲染性能開銷。

減少性能開銷通常需要綜合考慮多個因素，采用合適的優化策略和技術手段，如緩存、異步處理、懶加載、代碼優化等。

性能瓶頸

性能瓶頸是指在應用程序中導致整體性能受限的特定部分或因素。它可能是影響應用程序響應速度、吞吐量或資源利用率的主要原因。

一些常見的性能瓶頸包括：

CPU 瓶頸：當應用程序的處理器使用達到極限時，可能會出現 CPU 瓶頸。這可能是由于計算密集型任務、大規模并發等造成的。內存瓶頸：如果應用程序消耗了過多的內存或者存在內存泄漏，就可能會面臨內存瓶頸。這可能導致系統性能下降、頁面交換或者甚至崩潰。網絡瓶頸：當網絡帶寬受限或者延遲過高時，可能會出現網絡瓶頸，導致請求響應時間延長或者頁面加載緩慢。I/O 瓶頸：磁盤 I/O、數據庫訪問等大量的輸入輸出操作可能成為性能瓶頸，尤其是在高并發或大規模數據處理情況下。渲染瓶頸：對于前端應用程序，渲染性能不佳可能成為性能瓶頸，包括布局計算、繪制和合成等階段。并發瓶頸：在多線程或多進程應用程序中，競爭條件、鎖競爭、上下文切換等問題可能導致并發瓶頸。

識別和解決性能瓶頸通常需要進行系統性能分析和性能優化，采用合適的工具和技術來監控、診斷和改進應用程序的性能表現。

性能？

性能通常指系統、應用程序或設備在特定條件下執行任務的效率和速度。對于計算機和軟件來說，性能可以從多個角度進行評估：

響應時間：指系統對請求作出響應的時間，例如用戶點擊按鈕后，系統產生相應動作所需的時間。吞吐量：指系統在單位時間內處理的工作量，比如每秒處理的請求數、數據傳輸速率等。資源利用率：包括 CPU 使用率、內存消耗、網絡帶寬利用率等，描述系統各種資源的使用情況。穩定性：系統在長時間運行時的表現，包括內存泄漏、崩潰率、錯誤率等。渲染性能：對于前端應用程序，渲染速度、交互流暢性以及頁面加載時間等指標也是性能的重要方面。

優化性能通常涉及多個層面和技術，包括代碼優化、算法改進、資源合理分配、并發控制、緩存策略、網絡優化等。對于 Web 應用程序，還可以采用前端優化技術、CDN 加速、服務器負載均衡等手段來提升性能。

總之，良好的性能意味著系統能夠高效地執行任務、快速響應用戶的操作，并且有效地利用資源。

事件

事件委托

事件委托（Event delegation）是一種常見的前端開發技術，用于管理和處理大量相似元素的事件。通過事件委托，可以將事件處理程序附加到它們的共同祖先，而不是每個單獨的元素上。

例如，在一個列表中有多個項目，如果每個項目都需要相同的點擊事件處理程序，那么可以將點擊事件處理程序添加到整個列表的父級元素上，并利用事件冒泡機制來處理具體的點擊事件。

事件委托的好處包括：

減少內存消耗：不需要為每個元素單獨綁定事件處理程序，從而減少了內存消耗。簡化代碼：只需在一個父級元素上添加事件處理程序，而不是遍歷每個元素并分別綁定事件處理程序。動態元素：對于后續添加到頁面的元素，無需額外操作，它們會自動繼承父級元素的事件處理程序。

事件委托通常基于事件冒泡機制實現，當事件在 DOM 樹上傳播時，可以在父級元素上捕獲到事件并進行相應處理。這使得事件委托成為處理大型動態 UI 的有效方法。

事件冒泡

事件冒泡（event bubbling）是指當一個特定的事件發生在 DOM 元素上時，這個事件將會向該元素的祖先元素一直傳播。換句話說，如果某個元素觸發了特定事件，比如點擊事件，那么這個事件將依次傳播到該元素的父級元素、更高級的祖先元素，直至文檔樹的根節點。

事件冒泡機制使得可以在更高層次的元素上統一捕獲和處理事件，而不需要為每個子元素單獨綁定事件處理程序。這對于實現事件委托非常有用，同時也提供了一種方便的方式來處理多個相關元素的事件。

對于事件冒泡，可以使用 JavaScript 的 addEventListener方法來在父級元素上注冊事件監聽器，然后在事件處理程序中使用事件對象的屬性來確定事件最初發生的具體目標元素。

document.getElementById('parentElement').addEventListener('click', function(event) {if (event.target.tagName === 'LI') {// 處理 LI 元素的點擊事件}
});

通過事件冒泡和事件委托，可以更高效地管理和處理大量相似元素的事件，減少代碼復雜度，并且能夠自動適應動態添加的元素。

事件委托（Event delegation）和事件冒泡（Event bubbling）是兩個相關但不同的概念：

事件委托：事件委托是一種利用事件冒泡機制來管理和處理事件的技術。通過將事件處理程序附加到共同祖先元素上，以代理管理其子元素的事件處理。可以減少內存消耗、簡化代碼結構，并且對于動態添加的元素具有適應性。事件冒泡：事件冒泡是指事件在 DOM 樹中向上傳播的過程。當特定事件在某個元素上觸發時，這個事件將會依次傳播給該元素的父級元素、更高級的祖先元素，直至根節點。事件冒泡使得可以在更高層次的元素上捕獲和處理事件，而無需為每個子元素單獨綁定事件處理程序。

因此，事件委托是基于事件冒泡機制的一種技術，它利用了事件冒泡的特性來實現更高效的事件管理和處理。事件冒泡是 JavaScript 事件模型的一部分，而事件委托則是利用了這一特性來達到優化代碼結構和性能的目的。

passive: true

在 Web 開發中，passive: true 是一個用于改進頁面滾動性能的選項。當你給 addEventListener 方法添加滾動事件監聽時，可以使用這個選項來指示瀏覽器該監聽器不會調用 preventDefault 來阻止默認的滾動行為。

通常，滾動事件監聽器可能會調用 event.preventDefault() 來阻止默認的滾動行為，比如在某些特定條件下阻止頁面的滾動。然而，當滾動事件監聽器使用 preventDefault 時，瀏覽器必須等待事件處理完成后才能繼續進行滾動，這可能會導致性能問題。

通過將 passive: true選項傳遞給 addEventListener，開發者告訴瀏覽器該監聽器永遠不會調用 preventDefault，從而使瀏覽器可以更好地優化滾動性能。這對于提高頁面的響應速度和流暢度非常有幫助，尤其是在移動設備上。

以下是使用 passive: true的示例：

// 添加滾動事件監聽器，并指定 passive 選項為 true
window.addEventListener('scroll', handleScroll, { passive: true });// 滾動事件處理函數
function handleScroll(event) {// 在這里處理滾動事件，但不調用 event.preventDefault()
}

需要注意的是，并非所有瀏覽器都支持 passive 選項。因此，在使用時需要確保瀏覽器支持該特性或提供替代方案。

合成器線程

合成器線程（Compositor Thread）是在瀏覽器中負責處理頁面渲染的一種特殊線程。它主要負責將 Web 頁面的圖層合成為屏幕上的最終像素，以實現流暢的頁面滾動、動畫效果和用戶交互。

在現代的 GPU 加速瀏覽器中，頁面通常被分割成多個圖層（Layers），這些圖層可以由 HTML 元素、CSS 樣式、Canvas 或視頻等元素組成。合成器線程利用硬件加速來對這些圖層進行復合（Compositing），并將它們合成為最終的頁面顯示。

合成器線程具有以下特點和作用：

硬件加速：利用 GPU 進行頁面圖層的合成和渲染，以提高頁面渲染性能。獨立線程：合成器線程通常是一個獨立于主線程和其他頁面渲染進程的線程，它專門負責圖層合成和渲染工作。優化頁面渲染：通過異步進行圖層的合成和渲染，可以減輕主線程的壓力，提高頁面的響應速度和流暢度。支持動畫與滾動：合成器線程的存在使得瀏覽器能夠更好地支持頁面中的動畫效果、滾動操作以及 CSS 3D 變換等功能。

總之，合成器線程在現代瀏覽器中扮演著重要的角色，它通過硬件加速和異步渲染等策略，幫助實現了流暢的頁面渲染和用戶交互體驗。