启动 Vexo
窗口默认 1280×800,打开的是内置起始页,不联网。
./ui/build/vexo窗口默认 1280×800,打开的是内置起始页,不联网。
窗口上有什么
标签栏在内容区上方,贴着内容不留外框。可以新建、关闭、拖动重排。每个标签页有自己的一份内核实例和一份导航历史——两个标签页打开同一个网址,它们各自解析、各自排版。
工具栏从左到右:
| 按钮 | 作用 |
|---|---|
+ | 新建标签页 |
← / → | 后退 / 前进 |
↻ | 重新加载当前页 |
⌂ | 回到起始页 |
打开 | 弹系统文件对话框,选一个本地网页打开 |
| 地址栏 | 输入网址或文件路径,回车访问 |
− 100% + | 缩小 / 显示当前缩放 / 放大 |
地址栏在中间占满剩余宽度。它的提示文字写了几种路径写法:/path/page.html、./page.html、~/page.html。
状态栏在底部,显示当前状态:就绪、正在加载 <地址>、错误信息,或者滚动之后显示 地址 · 已滚到 N 像素。
起始页
不联网也能打开,因为它内置在内核里。启动时看到的那个页面就是它:一块展示内核能力的卡片式布局,上面有链接、圆角、行内块、表格。它走的是和普通网页完全相同的解析、层叠、排版、绘制流程——本来就是内核的产物,也是整条链路最直接的自检。
三个内置地址:
| 地址 | 内容 |
|---|---|
about:home | 起始页 |
about:blank | 全白空文档 |
about:help | 说明页,列出全部内置地址 |
about: 后面写别的,一律回到起始页。白屏会让人以为坏了,给个有东西的页面对判断状况更有利。
缩放
Ctrl+= 与 Ctrl+- 按 1.25 倍一步调整,Ctrl+0 回到 100%。范围夹在 25% 到 500% 之间。
缩放改的是布局视口宽度,页面会按新的宽度重新排版——不是把画好的画面拉伸。所以放大之后文字会变粗、换行位置会变,而不是变模糊。
滚动
滚轮一格滚 40 像素,横向滚轮也能用。PageUp / PageDown 按视口高度翻页,Home / End 跳到顶部和底部。
滚动是按需重绘的:只有滚动、加载完、改尺寸、改缩放的时候才渲染一帧,空闲时一帧都不画。滚到页面底部之后继续往下滚不会有额外开销。
点链接
鼠标移到链接上,光标变成手型。点下去按当前地址补全相对地址后导航。
命中测试是把坐标交给内核做的:内核回答「这个点上压着哪个链接」。外壳只负责拿这个结果去导航。
加载过程
地址栏回车之后:
- 内核解析地址,判断这是内置页面、本地文件还是网络地址
- 网络地址交给后台线程取回,界面不会卡住
- 内容到达后交给内核解析、排版、绘制
- 内核返回页面引用了哪些外部样式表,外壳逐个取回,取回一份应用一份
- 排版随样式到达逐步更新
第 4 步是一条容易忽略的链。一份页面引三份样式表,你会看到它先按无样式的样子出现,然后一步步变成最终的样子。这是设计如此,不是渲染出错。
打开本地文件
三条路:Ctrl+O 走系统文件对话框、把文件拖进窗口、或者直接在地址栏输路径。见本地文件与命令行。
退出
关掉窗口就行。没有需要手动保存的状态——书签、会话、历史都还没做。