[翻譯]一個新式的基於文本的瀏覽器 Browsh

来源:https://www.cnblogs.com/AlienXu/archive/2018/07/15/9314205.html
-Advertisement-
Play Games

介紹 什麼是Browsh? Browsh是一個純文本瀏覽器,可以運行在大多數的TTY終端環境和任何瀏覽器。目前1 ,終端客戶端比瀏覽器客戶端更先進2。 TTY 客戶端 終端客戶端即時更新和交付,以便於體驗新的功能,例如,你可以觀看視頻。它使用UTF 8半塊技巧(& 9600;)3從每個字元單元中獲取 ...


介紹

什麼是Browsh?

Browsh是一個純文本瀏覽器,可以運行在大多數的TTY終端環境和任何瀏覽器。目前1 ,終端客戶端比瀏覽器客戶端更先進2

TTY 客戶端

終端客戶端即時更新和交付,以便於體驗新的功能,例如,你可以觀看視頻。它使用UTF-8半塊技巧(▀)3從每個字元單元中獲取2中顏色,從而模擬基本圖形。對那些支持它的終端,除了鍵盤輸入,它也可以理解滑鼠輸入。因此,你可以點擊鏈接,甚至在素描彩繪APP中繪製線條。

瀏覽器客戶端

瀏覽器客戶端有些複雜,容易混淆。Browsh在另一個瀏覽器中運行解析,然後在瀏覽器客戶端上呈現出簡單HTML和純文本。Browsh輸出的HTML和文本是極其輕量級的,這一點很關鍵。在2018年,普通的網站寫入,需要下載大約3M數據,併發出超過100獨立HTTP請求。換到Browsh,它大約需要15kb,2個HTTP請求-一個用於HTML/文本,另一個用於favicon。

目前,HTML/文本 輸出非實時更新,也非互動式,希望瀏覽器客戶端最終具有與TTY客戶端相同的功能。

安裝

請參閱安裝頁面。

設計

Browsh包含一個最小的Golang CLI客戶端和一個瀏覽器webextension。當CLI啟動時,它會查找相容的瀏覽器(目前只有Firefox)並以無頭模式4啟動它。瀏覽器啟動後,將打開遠程調試連接並安裝擴展。

當網頁在瀏覽器中載入時,自定義腳本將註入頁面,然後在webextension中連接到Browsh的後臺進程。此後臺進程本身通過websocket連接到CLI客戶端。

每頁內容腳本還應用一些自定義CSS,以嘗試使頁面儘可能接近剛性網格,如終端單元所強制執行的那樣。這並不總是成功的,因為網頁經常小心地將元素定位到不是字元單元格的像素值 - 因此當2個字元想要占據相同的單元格時,有時需要做出妥協。

為了節省必須解析每個角色的顏色和可見度,Browsh使用自定義的單字形全塊字體,其中每個字元都是:▇。解析元素的計算樣式在計算上是昂貴的。因此,為了獲得字元的顏色,框架構建器檢查頁面的屏幕截圖的像素值,該像素值對應於字元的位置。這還有一個額外的好處,即能夠在不解析CSS的情況下檢測角色的可見性 - 如果在顯示和隱藏文本時像素值改變顏色,則角色是可見的。當然有邊緣情況,但它們的頻率意味著處理它們仍然比CSS解析更便宜。

在TTY客戶端的情況下,幀的圖形是在原始頁面的隱藏文本狀態期間生成的。然後將此屏幕截圖縮放到與活動終端相同的大小。然後將那些像素值轉換為終端顏色轉義碼。最後,文本在圖形上分層並呈現給終端。

譯者註:
1.官網顯示該介紹更新於2018年7月13日
2.更先進的意思大略是指終端客戶端的完善度較瀏覽器客戶端高
3.UTF-8 方塊元素 HTML字元集
4.headless mode:指可以在不打開UI界面的情況下使用瀏覽器

英文原文:https://www.brow.sh/docs/introduction/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 在本系列上一篇文章Android包管理機制(一)PackageInstaller的初始化中我們學習了PackageInstaller是如何初始化的,這一篇文章我們接著學習PackageInstaller是如何安裝APK的。本系列文章的源碼基於Android8.0。 1.PackageInsta ...
  • 網路請求數據格式: 總的網路請求數據格式: 外層數據格式 數據模型: .h文件 .m文件 initWithDictionary: 解析數據 解析數據: 結果: 中間層數據格式 1 categories = ( 2 { 3 alias = Politics; 4 name = "\U65f6\U653 ...
  • 前言 包管理機制是Android中的重要機制,是應用開發和系統開發需要掌握的知識點之一。 包指的是Apk、jar和so文件等等,它們被載入到Android記憶體中,由一個包轉變成可執行的代碼,這就需要一個機制來進行包的載入、解析、管理等操作,這就是包管理機制。包管理機制由許多類一起組成,其中核心為Pa ...
  • 總結了一周學習Js的筆記、關於git、GitHub、this、作用域等 ...
  • 1.前言 Vue 是一款友好的、多用途且高性能的javascript框架,與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用,它能夠幫你創建可維護性和可測試性更強的代碼庫,Vue是漸進式的javascript框架庫。 2.安裝簡介 Vue集成環境三大核心組件:node.js,npm,vue ...
  • 網路載入類 減少 HTTP 資源請求次數 合併靜態資源圖片、JavaScript 或 CSS 代碼,減少頁面請求數和資源請求消耗 避免重覆的資源,防止增加多餘請求 減小 HTTP 請求大小 減少沒必要的圖片、JavaScript、CSS 及 HTML 代碼 對文件進行壓縮優化 使用 gzip 等方式 ...
  • 表單選擇器 :input(匹配所有input、textarea、select和button元素) :text(匹配所有單行文本框) :password(匹配所有密碼框) :radio(匹配所有單項按鈕) :checkbox(匹配所有覆選框) :submit(匹配所有提交按鈕) :image(匹配所有 ...
  • 在《JavaScript高級程式設計》第三版 4.1.3,講到傳遞參數: ECMAscript中所有函數的參數都是按值傳遞 按值傳遞 也就是,把函數外部的值複製給函數內部的參數,就和把值從一個變數複製到另一個變數一樣 當傳遞value給函數foo的時候,相當於拷貝一份value給foo假設拷貝的那份 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...