资讯专栏INFORMATION COLUMN

[翻译]一个新式的基于文本的浏览器 Browsh

BlackMass / 1413人阅读

摘要:介绍介绍什么是什么是是一个纯文本浏览器,可以运行在大多数的终端环境和任何浏览器。设计设计包含一个最小的客户端和一个浏览器。当启动时,它会查找兼容的浏览器目前只有并以无头模式启动它。浏览器启动后,将打开远程调试连接并安装扩展。

介绍

什么是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/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2010.html

相关文章

  • 览器显示及交互背后原理

    摘要:浏览器显示及交互背后的原理引子因为笔者爱编程的光头强近期在写一本关于小程序入门的书籍。不基于浏览器背后的运行原理,是很难说清楚虚拟被引入的真正原因和最大好处的。它是浏览器的核心部分。 浏览器显示及交互背后的原理 引子 因为笔者(爱编程的光头强)近期在写一本关于小程序入门的书籍。其中有一章是介绍虚拟DOM的,它是位于Javascript和真正DOM之间的一层缓存层。为什么引入它,为什么它...

    hatlonely 评论0 收藏0
  • 览器显示及交互背后原理

    摘要:浏览器显示及交互背后的原理引子因为笔者爱编程的光头强近期在写一本关于小程序入门的书籍。不基于浏览器背后的运行原理,是很难说清楚虚拟被引入的真正原因和最大好处的。它是浏览器的核心部分。 浏览器显示及交互背后的原理 引子 因为笔者(爱编程的光头强)近期在写一本关于小程序入门的书籍。其中有一章是介绍虚拟DOM的,它是位于Javascript和真正DOM之间的一层缓存层。为什么引入它,为什么它...

    idisfkj 评论0 收藏0
  • Html/Css/Jquery知识点集锦

    摘要:首先,巧妙的使用这一标记,将游览器从所有情况中分离出来。接着,再次使用将和分离开来,这样已经独立识别。元素不能用作语义用途以外的其他目的。Html1、Html5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区别HTML和HTML5?HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。拖拽释放(Drag and drop) ...

    shiweifu 评论0 收藏0
  • [Python3]Python面向对象程序设计

    摘要:于发表了著名的有害论的论文引起了长达数年的论战并由此产生了结构化程序设计方法。到现在为止面向对象已经成为了主流的开发思想。面向对象的程序设计优点解决了程序的扩展性。 [Python3]Python面向对象的程序设计 一、面向对象的程序设计的由来 1.第一阶段:面向机器,1940年以前 最早的程序设计都是采用机器语言来编写的,直接使用二进制码来表示机器能够识别和执行的指令和数据。 简单来...

    OpenDigg 评论0 收藏0
  • python 中type和object关系

    摘要:这说明类已经处于继承链条的顶端,是所有类的父类。这就是说这一元类的父类是。我们来捋一捋,也就是说类是由元类创建的,但是类又继承了类。元类的类则是由元类自身创建的。 学习python的同学都知道这么几句话 object类是所有新式类的父类。 type是所有类的类。 那么type和object是什么关系呢?object是一个新式类,我们可以通过object.__class__和obje...

    Keven 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<