整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          瀏覽器架構(gòu)的溫故知新

          響應(yīng)分析ーー瀏覽器從響應(yīng)中分析 HTML 數(shù)據(jù)。

          DOM 樹創(chuàng)建ーー從解析的 HTML 構(gòu)建文檔對(duì)象模型(DOM)樹。

          樣式表解析ーー解析樣式表,將呈現(xiàn)數(shù)據(jù)鏈接到 DOM 節(jié)點(diǎn)。

          執(zhí)行ーー執(zhí)行 代碼,修改 DOM 。

          頁面渲染ーー使用 DOM 和樣式數(shù)據(jù)顯示網(wǎng)頁。

          3.1 HTML 解析

          瀏覽器一個(gè)字符一個(gè)字符地讀取 HTML,標(biāo)識(shí)元素、屬性和文本,然后構(gòu)建表示網(wǎng)頁結(jié)構(gòu)的 DOM 樹,并確保正確顯示 HTML 代碼。

          3.2 CSS 對(duì)象模型

          CSS 對(duì)象模型表達(dá)了應(yīng)用于 HTML 元素的樣式,類似于 DOM 樹的結(jié)構(gòu)化層次結(jié)構(gòu),并考慮了樣式的特殊性和級(jí)聯(lián)性,允許訪問、操作和計(jì)算樣式。

          3.3 布局管理器

          布局管理器結(jié)合 DOM 和 CSS 對(duì)象模型形成渲染樹,根據(jù)內(nèi)容、填充等確定Box的尺寸,使用各種方法構(gòu)建具體位置。同時(shí),使用堆疊上下文和 Z 索引處理重疊元素,使用批處理等技術(shù)來優(yōu)化布局變更。最后,在屏幕上繪制元素,在用戶交互期間不斷更新。

          4 插件機(jī)制

          當(dāng)使用插件時(shí),瀏覽器的操作比普通網(wǎng)頁還要簡單。渲染過程負(fù)責(zé)運(yùn)行網(wǎng)頁,打開頁面時(shí),.js被加載并注入到網(wǎng)頁環(huán)境中,操作類似于 ,操作 DOM 樹并改變顯示。GPU 進(jìn)程支持渲染插件接口的硬件功能,網(wǎng)絡(luò)進(jìn)程管理插件中的外部資源請(qǐng)求,例如,插件依賴于外部 的JS 資源。同時(shí),存儲(chǔ)進(jìn)程為插件提供了本地存儲(chǔ)功能,使用chrome.storage.local在chrome擴(kuò)展中本地存儲(chǔ)和檢索數(shù)據(jù)。瀏覽器進(jìn)程起到了橋梁的作用,促進(jìn)了 Page和.js之間的通信。

          4.1 插件的發(fā)展歷程

          插件機(jī)制的發(fā)展過程如下:

          總體而言,Chrome 插件(也被稱為擴(kuò)展)已經(jīng)經(jīng)歷了3個(gè)主要版本的版本開發(fā): V1、 V2和 V3。

          V1 (MV1)是 Chrome 擴(kuò)展清單的初始版本,已經(jīng)被放棄。 V2 (MV2)是當(dāng)前 Chrome 擴(kuò)展中廣泛使用的主流版本,它提供了一個(gè)健壯的框架,用于構(gòu)建具有增強(qiáng)瀏覽器功能的特性和功能的擴(kuò)展。 V3是最新的版本,正在逐步取代 MV2。引入 MV3是為了解決安全性和性能方面的問題,它強(qiáng)化了更強(qiáng)的安全措施,并促進(jìn)了擴(kuò)展開發(fā)中的更好性能。從 Chrome 127開始(2024年6月) ,谷歌開始在預(yù)穩(wěn)定版本的 Chrome 中禁用 V2擴(kuò)展,鼓勵(lì)開發(fā)者轉(zhuǎn)向 MV3。

          4.2 的 功能特點(diǎn)與版本遷移

          V2 的功能特性:

          V3 的功能特性:

          瀏覽器插件讀寫數(shù)據(jù)庫_插件瀏覽庫器讀寫數(shù)據(jù)在哪_插件瀏覽庫器讀寫數(shù)據(jù)錯(cuò)誤

          V3代表了從 V1和 V2的重大轉(zhuǎn)變,受到 Chrome 致力于提高隱私、安全性和擴(kuò)展的整體性能的驅(qū)動(dòng)。與之前的版本不同, V3優(yōu)先考慮資源利用率,解決了人們對(duì) Chrome 歷史性的高資源利用率的擔(dān)憂。其核心目標(biāo)是通過擴(kuò)展來限制系統(tǒng)資源消耗,以優(yōu)化瀏覽器性能。在施加額外限制的同時(shí), V3引入了顯著的好處。 功能允許擴(kuò)展操作,而無需一直駐留在后臺(tái)。這樣可以回收擴(kuò)展資源,有效地減少總體瀏覽器開銷。對(duì)規(guī)則計(jì)算的限制作為一種控制機(jī)制,確保單個(gè)擴(kuò)展不會(huì)過度消耗資源。這些改變共同促進(jìn)了 Chrome 瀏覽器更加流暢的體驗(yàn),符合用戶對(duì)提高瀏覽器效率的期望。

          在從V2遷移到V3的時(shí)候,由于缺少用于配置頁面背景的 . html,與 V2版本不同的是,windows 對(duì)象上的 不再適用于 . html 來構(gòu)造 AJAX 請(qǐng)求。相反,必須利用提取方法來獲取接口數(shù)據(jù)。

          另外,由于service workers 的生命周期很短,并且在非活動(dòng)期間終止,因此他們?cè)谡麄€(gè)插件生命周期中偶爾啟動(dòng)、運(yùn)行和終止,從而引入不穩(wěn)定性。在 MV2中,全局變量被用來直接存儲(chǔ)數(shù)據(jù)。為了適應(yīng)這種情況,需要對(duì) .js 中的邏輯進(jìn)行修改,以提高穩(wěn)定性和功能性。而且,從 API 過渡到 API 需要大量的代碼重構(gòu)。

          4.3 Chrome 插件的主要構(gòu)成4.3.1 文件

          .json 文件對(duì)于位于根目錄中的 Chrome 插件非常重要。它用于配置所有插件設(shè)置,其基本參數(shù)為 Manif_ version、 name 和 version。

          V2 的一個(gè)示例如下:

          {
          "manifest_version": 2,
          // Plugin name
          "name": "...",
          // Plugin version
          "version": "1.0.0",
          // Plugin description
          "description": "...",
          "icons": {
          "16": "img/icon16.png",
          "48": "img/icon48.png",
          "128": "img/icon128.png"
          },
          // Persistent background JS or background page
          "background": {
          "scripts": ["js/background.js"]
          },
          // Browser icon settings :browser_action, page_action, app
          "browser_action": {
          "default_icon": "img/icon.png",
          "default_title": "...",
          "default_popup": "popup.html"
          },
          // Icon displayed only when specific pages are open
          "page_action": {
          "default_icon": "img/icon.png",
          "default_title": "...",
          "default_popup": "popup.html"
          },
          // JS directly injected into pages
          "content_scripts": [{
          "matches": [""],
          "js": ["js/content-script.js"],
          "css": ["css/custom.css"],
          // Code injection timing, default is document_idle
          "run_at": "document_start"
          }],
          // Permissions requested
          "permissions": [
          "contextMenus", // Right-click menu
          "tabs", // Tabs
          "notifications", // Notifications
          "webRequest", // Web requests
          "webRequestBlocking",
          "storage", // Plugin local storage
          "https://*/*" // Websites accessible via executeScript or insertCSS
          ],
          // List of plugin resources directly accessible by normal pages "web_accessible_resources": ["js/inject.js"],
          "homepage_url": "...", // Plugin homepage
          "chrome_url_overrides": { // Override browser default pages
          "newtab": "newtab.html"
          },
          "options_ui": { // Plugin options page
          "page": "options.html",
          "chrome_style": true
          },
          "omnibox": { "keyword" : "..." }, // Register a keyword in the address bar for search suggestions, only one keyword can be set
          "default_locale": "en", // Default language
          "devtools_page": "devtools.html", // Devtools page entry, can only point to an HTML file "content_security_policy": "...", // Security policy
          "web_accessible_resources": [ // Loadable resources
          "RESOURCE_PATHS"
          ]
          }

          V3的一個(gè)示例如下:

          {
          "manifest_version": 3,
          "name": "...",
          "version": "1.0.0",
          "description": "...",
          "icons": {
          "16": "img/icon16.png",
          "48": "img/icon48.png",
          "128": "img/icon128.png"
          },
          "background": {
          "service_worker": "js/background.js"
          },
          "action": {
          "default_icon": "img/icon.png",
          "default_title": "...",
          "default_popup": "popup.html"
          },
          "content_security_policy": {
          "extension_pages": "...",
          "sandbox": "..."
          },
          "web_accessible_resources": [
          {
          "resources": ["RESOURCE_PATHS"]
          }
          ],
          "permissions": [
          "contextMenus",
          "tabs",
          "notifications",
          "webRequest",
          "webRequestBlocking",
          "storage",
          "https://*/*"
          ],
          "web_accessible_resources": ["js/inject.js"],
          "homepage_url": "...",
          "chrome_url_overrides": {
          "newtab": "newtab.html"
          },
          "options_ui": {
          "page": "options.html",
          "chrome_style": true
          },
          "omnibox": {
          "keyword": "..."
          },
          "default_locale": "zh_CN",
          "devtools_page": "devtools.html",
          "content_security_policy": "...",
          "web_accessible_resources": ["RESOURCE_PATHS"]
          }

          4.3.2 內(nèi)容腳本

          Chrome 插件中的內(nèi)容腳本通過配置將 JS 和 CSS 注入到指定的頁面中。它們與原始頁面共享 DOM,但不與 JS 共享。訪問頁面 JS 變量需要注入 JS。內(nèi)容腳本無法訪問大多數(shù) Chrome API,除了:

          * chrome.

          * chrome.i18n

          * chrome.runtime

          * chrome.storage

          對(duì)于其他 API,需要與后臺(tái)或service worker進(jìn)行通信。

          4.3.3 后臺(tái)腳本

          瀏覽器插件讀寫數(shù)據(jù)庫_插件瀏覽庫器讀寫數(shù)據(jù)錯(cuò)誤_插件瀏覽庫器讀寫數(shù)據(jù)在哪

          Chrome 擴(kuò)展中的后臺(tái)腳本具有最長的生命周期,并且在瀏覽器打開時(shí)連續(xù)運(yùn)行。它擁有廣泛的權(quán)限,允許訪問大多數(shù) Chrome 擴(kuò)展 API 和跨源請(qǐng)求,而不受 CORS 限制。在 V3中,后臺(tái)頁被具有較短生命周期和基于事件的執(zhí)行的服務(wù)工作者所替代,這使得它們不適合存儲(chǔ)全局變量。

          4.3.4 彈窗

          彈出窗口是一個(gè)小窗口的網(wǎng)頁,出現(xiàn)在點(diǎn)擊右上角的圖標(biāo)。當(dāng)用戶在網(wǎng)頁之外進(jìn)行互動(dòng)時(shí),它會(huì)迅速關(guān)閉。通常用于臨時(shí)交互,其權(quán)限級(jí)別類似于背景,但具有較短的生命周期。

          4.3.5 注入腳本

          開發(fā)者在 Chrome 插件開發(fā)過程中創(chuàng)造了“注入腳本”這個(gè)術(shù)語。它表示通過 DOM 操作注入到頁面中的 。內(nèi)容腳本雖然能夠操作 DOM,但由于訪問限制,DOM 不能直接調(diào)用它。這種限制在事件綁定中是顯而易見的。為了滿足在 Web 頁面中添加一個(gè)按鈕來觸發(fā)插件的常見需求,大家采用了插入腳本。

          4.4 Chrome 插件的通信機(jī)制

          在 Chrome 插件中,通信依賴于五種類型的腳本:

          注入腳本,表示動(dòng)態(tài)注入到網(wǎng)頁中的腳本,通常依賴于 window.。

          內(nèi)容腳本,在特定網(wǎng)頁上下文中執(zhí)行的腳本,利用 window.、 chrome.runtime. 和 chrome.runtime.connect 進(jìn)行腳本間通信。

          彈窗腳本,與插件的彈出式界面相關(guān)聯(lián),通常使用 chrome.tabs. 和 chrome.tabs.connect 進(jìn)行通信。

          后臺(tái)腳本,在后臺(tái)獨(dú)立運(yùn)行的腳本,涉及多種方法,例如 chrome.tabs.、 chrome.tabs.connect、 chrome.tension. 和 chrome.tension.getView。

          ,開發(fā)工具的附加功能, 使用諸如 chrome...eval 和 chrome.runtime. 之類的特定 API 進(jìn)行交互。

          每個(gè)腳本擁有不同的權(quán)限,強(qiáng)調(diào)了它們之間通信的重要性。這種交互對(duì)于啟用廣泛的插件功能非常重要。

          5. 一句話小結(jié)

          溫故而知新,瀏覽器架構(gòu)作為現(xiàn)代互聯(lián)網(wǎng)的基石,歷經(jīng)多次迭代與創(chuàng)新,始終承載著用戶與網(wǎng)頁內(nèi)容之間的橋梁作用。回顧其發(fā)展歷程,從早期的單一渲染引擎到如今的多進(jìn)程、多線程架構(gòu),每一次變革都帶來了更為流暢、安全的瀏覽體驗(yàn)。展望未來,瀏覽器架構(gòu)將繼續(xù)深化其性能優(yōu)化與安全性提升,為用戶帶來更加出色的網(wǎng)絡(luò)瀏覽體驗(yàn)。

          【關(guān)聯(lián)閱讀】


          主站蜘蛛池模板: 国产SUV精品一区二区四 | 在线播放一区二区| 日韩在线视频一区二区三区| 日本不卡在线一区二区三区视频| 国产一区二区三区不卡在线看| 精品国产一区二区三区色欲| 奇米精品一区二区三区在线观看| 日韩AV在线不卡一区二区三区 | 毛片一区二区三区无码| 中文字幕一区在线观看视频| 亚洲熟女综合一区二区三区| 亚洲av无码一区二区三区不卡 | 成人精品一区二区三区中文字幕| 女人和拘做受全程看视频日本综合a一区二区视频 | 亚洲韩国精品无码一区二区三区| 无码精品黑人一区二区三区| 日本片免费观看一区二区| 中文字幕在线一区二区三区| 午夜视频久久久久一区 | 无码日韩精品一区二区三区免费| 国产乱码精品一区二区三 | 成人在线观看一区| 国产福利无码一区在线| 精品国产a∨无码一区二区三区| 国产成人精品视频一区二区不卡 | 91视频一区二区| 精品黑人一区二区三区| 日韩一区二区a片免费观看| 亚洲精品无码一区二区| 日韩一区二区在线免费观看| 精品久久国产一区二区三区香蕉| 无码少妇一区二区浪潮av| 亚洲片一区二区三区| 国产精品视频一区二区猎奇| 美女视频一区二区| 变态调教一区二区三区| 熟女大屁股白浆一区二区| 大帝AV在线一区二区三区| 在线视频精品一区| 成人免费一区二区三区| 一区二区三区观看免费中文视频在线播放 |