tag 瀏覽器原理

標籤
貢獻12
68
08:03 PM · Oct 26 ,2025
momeak9 頭像 dvqlfbwm 頭像 winnn 頭像 cloudyttt 頭像 skychx 頭像 user_p5fejtxs 頭像 daimaxieshen 頭像 fantasticlbp 頭像 delai 頭像 woai3c 頭像 yinzhixiaxue 頭像 steven_code 頭像

@瀏覽器原理 / 博客 RSS 訂閱

momeak9 頭像

泯瀧 - Web Woker 與主線程通信場景下對postMessage的簡潔封裝

在Web Worker與主線程之間進行通信時，使用postMessage是一種常見的方式。然而，在某些業務場景中，postMessage可能會顯得不夠簡潔，因為它涉及到手動序列化和反序列化數據，以及通過事件監聽器處理消息。以下是一些常見問題和解決方案，以簡化在Web Worker與主線程之間的通信場景中使用postMessage的問題。 結構化克隆問題 在Web Worker與主線程之間傳輸數據時

瀏覽器 , webworker , 瀏覽器原理 , 前端 , Javascript

收藏 評論

cloudyttt 頭像

雲魚 - 深入瞭解瀏覽器渲染進程的工作方式

你是否曾經好奇過瀏覽器是如何渲染網頁的？本文將通過 30 張圖將帶你瞭解瀏覽器渲染進程的內部工作機制。 渲染進程負責處理標籤頁中的所有內容。 在渲染進程中，主線程處理大部分發送給用户的代碼。如果使用 Web Worker 或 Service Worker，部分 JavaScript 會由工作線程處理。另外，合成器線程和光柵化線程也在渲染進程中運行，確保網頁高效、流暢地渲染。 渲染進程的核心任務是將

性能優化 , 面試 , 瀏覽器原理

收藏 評論

momeak9 頭像

泯瀧 - Chrome瀏覽器插件Manifest V3 簡介

隨着互聯網的快速發展，瀏覽器插件成為了許多用户提升瀏覽器功能和個性化體驗的重要工具。Chrome瀏覽器作為全球最受歡迎的瀏覽器之一，其插件生態系統也日益壯大。為了保證插件的安全性和性能，Chrome團隊推出了Manifest V3，這是一種新的插件開發規範。 A step in the direction of security, privacy, and performance. 向安全性

插件 , 瀏覽器 , 瀏覽器原理 , 前端 , Javascript

收藏 評論

dvqlfbwm 頭像

愛吃雞蛋餅 - 知識訂正：瀏覽器是如何渲染頁面的？

一.瀏覽器是如何渲染頁面的？   當瀏覽器的網絡線程收到 HTML 文檔後，會產生一個渲染任務，並將其傳遞給渲染主線程的消息隊列。在事件循環機制的作用下，渲染主線程取出消息隊列中的渲染任務，開啓渲染流程。   整個渲染流程分為多個階段，分別是： HTML 解析（Parse HTML）、樣式計算（Computed Style）、佈局（Layout）、分層（Layer）、繪製（Paint）、

瀏覽器原理 , 前端 , Javascript

收藏 評論

skychx 頭像

鹵代烴 - ⚡️ [性能優化] 瀏覽器是如何用 HTML Preload Scanner 偷偷優化資源下載的

如果你喜歡我的文章，希望點贊👍 收藏 📁 評論 💬 三連支持一下，謝謝你，這對我真的很重要！ 大家好，我是專注於做性能優化的鹵代烴。 做網頁相關的性能優化時，需要對瀏覽器的底層原理有一定的瞭解，這樣才能更好的讓頁面走在 happy path 上。今天我們就瞭解一個很少被人所知的瀏覽器默認性能優化方案 —— HTML Preload Scanner，看看它是如何優化網絡資源加載速度的。 瀏覽器

性能優化 , chrome , 瀏覽器原理 , 前端

收藏 評論

dvqlfbwm 頭像

愛吃雞蛋餅 - 知識訂正：瀏覽器工作原理與事件循環

  現代瀏覽器的複雜程度如同操作系統，只有日益完善的機制才能應對現今越來越複雜的網頁交互。筆者前文曾述JS單線程引起的思考，如今看來錯漏百出，知識內容早已過時。基於現在的知識積累，如今再發一文作為勘誤，希望能加深印象，有所收貨。   如同上文的“JS單線程”，筆者之前所學還是片面的知識，JS的單線程在哪個進程之內，交互操作，代碼執行瀏覽器線程更側重誰都是一知半解。現在重新系統學習了一遍知識後

瀏覽器原理 , 前端 , Javascript

收藏 評論

momeak9 頭像

泯瀧 - 強緩存和協商緩存

為什麼有這個東西？ web緩存描述 ： Web 緩存是可以自動保存常見文檔副本的 HTTP 設備。當 Web 請求抵達緩存時， 如果本地有“已緩存的”副本，就可以從本地存儲設備而不是原始服務器中提取這 個文檔。（此結論來自http權威指南） 緩存的優缺點： 優點： 緩存減少了冗餘的數據傳輸，節省了你的網絡費用。 緩存緩解了網絡瓶頸的問題。不需要更多的帶寬就能夠更快地加載頁面。 緩存降低了對

瀏覽器 , 瀏覽器原理 , 網絡 , 網絡傳輸協議 , 前端

收藏 評論

user_p5fejtxs 頭像

林一一 - 瀏覽器原理-瀏覽器緩存和本地存儲篇

大家好，我是林一一，這是一篇關於瀏覽器 緩存原理 和 本地存儲 的文章，後續回持續推出關於，瀏覽器原理的文章。 一、瀏覽器的緩存篇 思維導圖 所謂瀏覽器的緩存，就是瀏覽器通過 HTTP 請求網絡資源後將資源留在本地的一種行為。在頁面上點擊 返回和前進的按鈕 就是利用瀏覽器的緩存。 瀏覽器的緩存分為兩種 強緩存 和 協商緩存。 瀏覽器緩存資源的位置放置四個地方 Service W

瀏覽器原理 , webstorage , cookie , 瀏覽器緩存

收藏 評論

daimaxieshen 頭像

瓏墨 - JavaScript 引擎如何工作？💭

😘前言：要了解 JavaScript 引擎，你必須瞭解當我們編譯和執行代碼時它的內容。一旦你完全閲讀了這篇文章，你就可以寫出一段優秀的代碼。這篇文章是關於JavaScript引擎的，它將幫助你瞭解JavaScript引擎的性能及其最有價值的功能，嘎嘎嘎，看下面😍。 一、什麼是 JavaScript 引擎？🧐 JavaScript引擎是一個程序，有助於將JavaScript代碼轉換為較低級別的

瀏覽器原理 , challenge , 前端 , html5 , Javascript

收藏 評論

fantasticlbp 頭像

杭城小劉 - 瀏覽器渲染原理

瀏覽器是如何渲染頁面的 當瀏覽器的網絡線程收到 HTML 文檔後，會產生一個渲染任務，並將其傳遞給渲染主線程的消息隊列。在事件循環機制下，渲染主線程取出消息隊列中的渲染任務，開啓渲染流程。 整個渲染流程分為多個階段：HTML 解析、樣式計算、佈局、分層、繪製、分塊、光柵化、畫。每個階段都有明確的輸入輸出，上一個階段的輸出就是下一個階段的輸入，整個流程類似流水線一樣。 下面針對每個階段做詳細的研

大前端 , 瀏覽器 , 瀏覽器原理 , 前端 , Javascript

收藏 評論

delai 頭像

德來 - JS 一定要放在 Body 的最底部麼？聊聊瀏覽器的渲染機制

説明： 本文提到的瀏覽器均是指Chrome。 “script標籤“指的都是普通的不帶其他屬性的外聯javascript。 web性能優化的手段並不是非黑即白的，有些手段過頭了反而降低性能，所以在討論條件和結論的時候，雖然很多條件本身會帶來其他細微的負面或正面影響，為了不使論述失去重點，不會擴展太開。 一、從一個面試題説起 面試前端的時候我喜歡問一些看上去

瀏覽器原理 , web性能優化 , Javascript

收藏 評論

woai3c 頭像

woai3c - 從零開始實現一個玩具版瀏覽器渲染引擎

前言 瀏覽器渲染原理作為前端必須要了解的知識點之一，在面試中經常會被問到。在一些前端書籍或者培訓課程裏也會經常被提及，比如 MDN 文檔中就有渲染原理的相關描述。 作為一名工作多年的前端，我對於渲染原理自然也是瞭解的，但是對於它的理解只停留在理論知識層面。所以我決定自己動手實現一個玩具版的渲染引擎。 渲染引擎是瀏覽器的一部分，它負責將網頁內容（HTML、CSS、JavaScript 等）轉化為用户

瀏覽器原理 , 前端 , Javascript

收藏 評論

winnn 頭像

Winn - 【前端面試】V8事件輪詢

在前端面試中，面試官可能會問你V8的引擎機制，給你這樣的一道題目如下： console.log(1); setTimeout(() = { console.log(2); }); new Promise(reslove = { console.log(3); reslove(); }).then(() = { console.log(4); }); console.log(5)

v8 , 面試 , 瀏覽器原理 , 程序員 , 前端

收藏 評論

yinzhixiaxue 頭像

銀之夏雪 - CSS 真的會阻塞文檔解析嗎？從瀏覽器渲染原理深入探究一下

在網頁開發領域，一個常見的疑問是 CSS 是否會阻塞文檔解析。理解這一問題對於優化網頁性能、提升用户體驗至關重要。要深入解答這個問題，需要從瀏覽器渲染網頁的原理説起。 瀏覽器渲染網頁的基本流程 瀏覽器在接收到 HTML 文檔後，會依次進行以下幾個主要步驟： 解析 HTML：瀏覽器從網絡或本地獲取 HTML 文件，然後開始解析，將 HTML 代碼轉換為 DOM（Document Object M

瀏覽器 , 瀏覽器原理 , Css , 前端 , Javascript

收藏 評論

steven_code 頭像

Steven - 微前端的靠譜實現方案 —— iframe

一年多之前，為了能在老舊的 Vue 項目中開發 React 頁面，特地調研了一些主流的微前端框架：qiankun、無界等等。但都發現其實現的方案無法擺脱 JavaScript 的限制，不是 100%的將多個框架分離開，實施過程中，坑太多。於是採用了iframe這個天然的沙箱，將多個框架 100%分離開。從現在的角度來看，這個技術選型依然是正確的。接下來，詳細介紹一下iframe。 介紹 ifram

iframe , 瀏覽器原理 , 微前端

收藏 評論

winnn 頭像

Winn - js性能優化之數組模式

首先我們來看看下面這兩段代碼，兩段代碼都是在初始化一個長度為1億的數組，唯一區別是在片段二中，先為最後一項賦值1次，大家覺得會有區別嗎？ 代碼一： const arr1 = []; for ( let i = 0; i 100000000; ++i ) { arr1[i] = 1; } 代碼二： const arr2 = []; arr2[100000000 - 1] = 1; for (

性能優化 , 數組方法 , 瀏覽器原理 , 前端 , Javascript

收藏 評論