如何使用浏览器

  • ~3.68K 字
  1. 1. 前言
  2. 2. 浏览器工作原理
  3. 3. 爬虫
  4. 4. 高级搜索方法
  5. 5. RAG
  6. 6. 模板URL
  7. 7. 抓包
  8. 8. 封包
  9. 9. URL Scheme
  10. 10. 常见拦截
  11. 11. 常见 IP 地址
  12. 12. 服务器、NAS 和 Alist
  13. 13. Chromium
  14. 14. Extension

前言

自大学以来,我最初长期使用 Edge。当时由于还不会科学上网,Edge 在众多浏览器中脱颖而出。至于使用 Edge 之前用的浏览器,已记不太清——大概尝试过一些应用商店里的零散浏览器。

在使用 Edge 的过程中,我逐渐探索了浏览器的各种实用功能:从批量清理广告、开启垂直标签页,到尝试各种插件,这些简单而便利的功能极大地丰富了日常使用体验。

随着需求的增长,作者又开始尝试 Google Chrome 和 Firefox。直到今天,这三款浏览器依然是我的主力选择。

浏览器工作原理

南京邮电大学生存手册为例,简单来说:

  1. 你在浏览器中输入 njuptnavi.top
  2. njupnavi.top 经过 DNS 解析转换成 IP 地址(一串数字,比如 192.168.1.1,事实上并不是这串)
  3. 通过 IP 地址,浏览器和目标服务器建立连接(能通信)
  4. 建立连接后,浏览器发送资源请求,正式请求需要什么
  5. 服务器收到请求后,将资源(也就是你看到的东西,比如文字,图片,音频,视频)返回

添加更多条件(使用 linux 系统,连接校园网,同时开启 clash-verge-rev 的系统代理和虚拟网卡,使用规则),来看看真实情况的简化版本:

  1. 我在 google 浏览器中输入 njuptnavi.top,打开 google 浏览器其实是启动 /opt/google/chrome/chrome 进程,由于要请求的资源包括文字、图片等多种媒体文件,而请求这些资源的端口是不一样的,所以会同时有多个端口在工作,使用命令 ps aux | grep google 可以看到相关信息
  2. 因为我同时打开了系统代理和虚拟网卡(只在浏览器应用场景中,只打开系统代理,或者只打开虚拟网卡都是可以的,这里以我实际使用情况为例),实际的请求会交给虚拟网卡来处理,虚拟网卡实际地址是 28.0.0.1,虚拟网卡收到请求后将数据发给实际代理工具 28.0.0.2,由代理工具进行实际的加密和转发
  3. 经过加密的数据发送到校园网,校园网进行 DNS 解析,将 njuptnavi.top 转换成一个 IP 地址,因为 njuptnavi.top 是有 CDN 服务的(DNS 解析可能不会直接返回网站本体的 IP,而是返回离你最近或最快的 CDN 节点 IP),实际访问的是原网站的镜像站点,校园网将这个 IP 地址返回给本地计算机
  4. 本地计算机再次请求,使用这个 IP 地址通過三次握手和目标服务器建立 TCP 连接(通常是 443 端口,如果是 HTTPS)
  5. 如果是 HTTPS,TCP 建立完成后,会启动 TLS 握手,协商加密算法和证书验证。完成 TLS 握手后,通信才进入加密通道
  6. 当 TCP 和 TLS 建立完成后,浏览器才真正发送 HTTP 请求,比如请求 HTML 文件、图片、JS 文件等
  7. 浏览器收到资源的字节流后,还需要进行本地的解码,渲染,最终将页面呈现给用户

接下来文章将基本按照上面的请求流程逐层拓展。

更详细的内容看相关拓展资料。

相关拓展资料:
家庭网络通信原理

爬虫

爬虫是通过代码模拟用户使用浏览器的行为的技术。一般我们用 Python 来写(其他各种各样的都有)。当你理解浏览器是怎么工作的,你就可以开始写爬虫了。爬虫的具体使用方法请参考相关拓展资料,这里只进行一些综述。

通过爬虫,你可以将一些文档、音频、视频资源下载到本地。常用的一些场景:

  1. 爬取一款商品的所有带有某关键字的评论
  2. 在某些视频下架之前下载视频到本地
  3. 或者某些网站播放视频过卡,通过下载到本地来提升观看流畅度
  4. 爬取某些作业网站上的所有题目,方便复习

通常,一些知名网站的相关周边都不会少,不用重复造轮子

此技术通常也是 Python 卖课点。

相关拓展资料:
爬虫

高级搜索方法

为什么搜索关键词通常要比搜索一句话要好?
搜索引擎会把关键词拆分成“重要词”,然后去索引数据库匹配网页。
你可以试试这个高级搜索,它实际上是发送更加符合浏览器的思维的关键词搜索。
这会启示你平常的搜索方法。

强烈建议看相关拓展资料

相关拓展资料:
信息检索

RAG

大模型是如何搜集资料,建立数据库的?以 RAG(Retrieval-Augmented Generation,检索增强生成)和秘塔AI为例,你可以指定它的搜索数据库的范围,比如“全网”。
当你向它提出问题(类似于在浏览器中输入搜索关键词)时,它会先对你的问题进行处理:
你问他一些问题(类似于在浏览器中输入你的关键词),他会将你的问题提取出核心词,生成向量化的查询,然后在知识库(全网)中进行语义搜索,可以理解为类似于爬虫的行为,然后再进行信息的整合和回答生成。

在模型爬取一些网页资源的过程中,可能会对这些网页发送大量的请求,而这种行为,类似于 DDos 攻击,会导致网站服务器崩溃。
在学习爬虫的时候,你可能听说过 Robots 协议,现在,添加这些协议可能更多的是为了防 AI。

模板URL

在浏览器->设置->搜索引擎->网站搜索中,我添加了这么一条:
https://www.deepl.com/zh/translator#zh/en-us/%s
其中 %s 是一个占位符,会被浏览器自动替换成你输入的内容。

我在实际搜索时,可以只输入 fan retrieval(fan是我自定义的“翻译”的意思),然后就可以直接进入 Deepl 页面看到 retrieval 的翻译结果了。

抓包

有没有什么方法可以看到本地计算机和远程服务器具体通信内容呢?

有的,这种技术称为抓包。

抓包的原理,是在网络传输的过程中,将 数据包(packet)截获并保存下来,然后对其进行分析。这样我们就能看到:

  • 本地程序发送了什么请求(HTTP 请求头、参数等)
  • 远程服务器返回了什么响应(响应码、数据内容等)
  • 通信是否加密(HTTP 明文 vs HTTPS 加密流量)
  • 哪些端口、协议在实际工作(TCP、UDP、TLS、DNS等)

常见的抓包工具:

  • Wireshark(跨平台桌面工具,功能强大,能解析各种协议)
  • PCAPdroid(Android 上的抓包工具,可以不 root 直接捕获流量)
  • tcpdump(命令行抓包工具,Linux 常用,输出原始数据包,可结合 Wireshark 解析)

抓包常常用于调试、分析性能、排查问题,但在公共网络上随意抓别人流量是违法的。

封包

与抓包对应的一个概念是封包。

封包,就是把要传输的数据,按照网络协议的要求,逐层加上必要的“头部信息”,形成一个个可以在网络上传输的小单元——数据包(Packet)的过程。

常见用词:游戏封包(外挂原理)

URL Scheme

这种东西只在某些手机上有,我是在看手机去除广告的相关方案时看到的。

比如 weixin:// 可以直接打开微信,taobao:// 可以直接跳淘宝。

这些 URL 协议叫做 Deep Link(深度链接) 或 URI Scheme

常见拦截

某些网站无法访问的原因可能是 GFW 的 DNS 劫持和 DNS 污染

从 qq 访问某些网页链接被拦截属于应用层(weixin110)拦截。

相关内容直接看拓展

相关拓展资料:
DNS劫持和污染

常见 IP 地址

  • 127.0.0.1 此为本地计算机回环地址,等同于 localhost,如果你发送带有这个地址的网页,其他人是看不到的
  • 192.168.1.1 这个通常是路由器网关地址

服务器、NAS 和 Alist

刚开始学习计算机的时候,我常常不能很清楚的理解服务器是什么,它到底是在哪个国家,哪个地方。事实上,你自己的一台电脑,也可以同时充当客户端和服务器的角色。只要在请求资源,就是客户端,只要在提供资源,就是服务器。

像阿里云、华为云这些提供的服务器,叫做云服务器技术,比如你要训练一个大模型,需要用到 GPU,开学买的轻薄本根本没有GPU,怎么用 CUDA 啊。这时候就可以租用一些大公司的服务器来使用。

如果你有存储大量文件和分享的需求,比如需要拍摄大量照片和视频,本地存储不下,或者需要更好的数据安全性和集中管理,可以考虑自行部署 NAS(这是硬件)。然后使用 Alist(软件) 进行分享。

Chromium

Chromium 和 Chrome 并不是同一个东西,Chromium 是内核,像 Chrome,Edge,Brave 等一系列浏览器和某些不是浏览器的应用或者内置浏览器的应用都和 Chromium 密不可分。
它现在不仅吃内存,还增加了反防代理的难度。

相关拓展资料:
CEF Detector

Extension

毫无疑问推荐的是 沉浸式翻译 插件。

其他插件自行了解。

另外,自行开发插件的难度并不是很高。比如想换一个浏览器主题(插件商店里提供的优质主题还是少了些,使用浏览器插件自定义最好了),可以自行 vibe coding。
现在常用的貌似是 Plasmo 框架。