[翻译]一个新式的基于文本的浏览器 Browsh
介绍
什么是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/
[翻译]一个新式的基于文本的浏览器 Browsh的更多相关文章
- 浏览器在一次 HTTP 请求中,需要传输一个 4097 字节的文本数据给服务端,可以采用那些方式?
浏览器在一次 HTTP 请求中,需要传输一个 4097 字节的文本数据给服务端,可以采用那些方式? 存入 IndexdDB 写入 COOKIE 放在 URL 参数 写入 Session 使用 POST ...
- Vim,一个开放源代码的文本编辑器(转)
Vim,http://linux.21ds.net/2002/03/13/0268dc26fd9c725c23dae68d797935f3/ 作者:Bram Moolenaar 翻译:slimzhao ...
- 一个简单的基于HTTP协议的屏幕共享应用
HTTP协议可以能是应用层协议里使用最广泛并且用途最多样的一个了.我们一般使用HTTP协议来浏览网页,但是HTTP协议还用来做很多其它用途.对开发人员来讲很常见的一种就是用HTTP协议作为各种版本控制 ...
- Atitit图片复制父目录给你设计的实现 基于win 图片浏览器
Atitit图片复制父目录给你设计的实现 基于win 图片浏览器 打开属性,获取其路径...1 Ahk参数传递,使用环境变量即可1 如何ahk异常转换为java异常1 如何获取ahk的输出.1 C:\ ...
- 基于文本图形(ncurses)的文本搜索工具 ncgrep
背景 作为一个VIM党,日常工作开发中,会经常利用grep进行关键词搜索,以快速定位到文件.如图: 利用grep进行文本搜索 但是,这一过程会有两个效率问题: 展示的结果无法进行直接交互,需要手动粘贴 ...
- 【翻译】IdentityServer4:基于资源的配置
这篇文章基于https://leastprivilege.com/2016/12/01/new-in-identityserver4-resource-based-configuration/进行翻译 ...
- 基于promise用于浏览器和node.js的http客户端的axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支 ...
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
- 一个C++源文件从文本到可执行文件经历的过程
一个C++源文件从文本到可执行文件经历的过程 以Hello World为例进行说明 首先我们编写一个cpp源程序 test.cpp #include <iostream> using na ...
随机推荐
- IDEA打开maven项目dependencies红线
第一步:install报红的项目,从maven库下载需要的包,看看日志还缺哪些本地包,少了就去下,丢到库里.不缺包后,reimport一下一般就OK了,如果还是红的,重启一下就好了. 如果第一步还没好 ...
- Codeforces Round #425 (Div. 2)
A 题意:给你n根棍子,两个人每次拿m根你,你先拿,如果该谁拿的时候棍子数<m,这人就输,对手就赢,问你第一个拿的人能赢吗 代码: #include<stdio.h>#define ...
- Oracle Data Guard配置
Oracle Data Guard 的配置在网上有很多资料,但是没有一个完整的,配置下来多少有些问题.在踩了各种坑之后,自己终于配置成功,就想把这过程记录下来. 1 测试环境 主数据库:windo ...
- 解析Java分布式系统中的缓存架构(上)
作者 陈彩华 文章转载交流请联系 caison@aliyun.com 本文主要介绍大型分布式系统中缓存的相关理论,常见的缓存组件以及应用场景. 1 缓存概述 2 缓存的分类 缓存主要分为以下四类 2. ...
- 知乎技术分享:从单机到2000万QPS并发的Redis高性能缓存实践之路
本文来自知乎官方技术团队的“知乎技术专栏”,感谢原作者陈鹏的无私分享. 1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动 ...
- wordpress使用阿里云邮件推送服务实现发送邮件
之前用腾迅云时,配置了wordpress是可以使用邮件服务的,然而到了阿里云,却无法使用了,有人说是因为阿里云关了25端口,但腾迅好像也关了. 百度看看有没有其他方法,最终让我找到个方法,可惜不是很完 ...
- 使用Java类加载SpringBoot、SpringCloud配置文件
我们都知道平常在使用SpringBoot和SpringCloud的时候,如果需要加载一两个配置文件的话我们通常使用@Value("${属性名称}")注解去加载.但是如果配置文件属性 ...
- Logistic回归Cost函数和J(θ)的推导(二)----梯度下降算法求解最小值
前言 在上一篇随笔里,我们讲了Logistic回归cost函数的推导过程.接下来的算法求解使用如下的cost函数形式: 简单回顾一下几个变量的含义: 表1 cost函数解释 x(i) 每个样本数据点在 ...
- (转载)Javascript 中的非空判断 undefined,null, NaN的区别
原文地址:https://blog.csdn.net/oscar999/article/details/9353713 在介绍这三个之间的差别之前, 先来看一下JS 的数据类型. 在 Java ,C ...
- dubbo实用知识点总结(三)
1. 服务降级 2. 优雅停机 3. 主机绑定 4. 访问日志 5. Multicast注册中心 6. zookeeper注册中心 7. 推荐用法 8. 容量规划 9. 基准测试工具包