前端常见概念

layout viewport、visual viewport 和 ideal viewport 三者区别

视口（Viewport）是移动端 Web 开发核心概念，最早由苹果在推出 iPhone 时提出。

设计初衷：让手机小屏幕可以完整展示 PC 网页，把原始网页整体缩小适配手机屏幕，后续绝大多数移动端浏览器都沿用这套机制。

视口理解：浏览器用来渲染、展示页面内容的屏幕区域。

移动端浏览器 3 种视口：布局视口、视觉视口、理想视口。

布局视口 Layout Viewport

布局视口是浏览器绘制网页的容器，页面全部元素都渲染在这个视口内部；尺寸由文档决定，用户缩放页面不会改变布局视口大小。

获取布局视口宽度：

document.documentElement.clientWidth || document.body.clientWidth

备注：移动端浏览器会给布局视口设置一个默认宽度，常见 980px、768px、1024px。这个尺寸来源于 PC 网页，目的是让传统 PC 网页可以在手机完整渲染，但默认值并不适配手机屏幕物理尺寸。

视觉视口 Visual Viewport

视觉视口：屏幕上用户真正肉眼可见的网页区域。排除虚拟键盘、浏览器控件、缩放后看不见的页面部分。

获取视觉视口宽度：

window.innerWidth

备注：用户双指缩放页面、弹出/收起手机虚拟键盘，都会改变视觉视口；布局视口不会跟着变化。

理想视口 Ideal Viewport

理想视口：最适配当前设备的视口，布局视口宽度等于设备屏幕宽度。开启理想视口后网页按照手机屏幕尺寸渲染，获得移动端最佳阅读体验。

通过 <meta name="viewport"> 设置理想视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">

获取设备屏幕尺寸（理想视口参考值）：

window.screen.width

亚像素（布局亚像素）

前端日常交流的亚像素，特指布局亚像素。

该问题源自 jQuery 作者 John Resig 2008 年文章《Sub-Pixel Problems in CSS》：百分比布局产生小数尺寸，不同浏览器取整策略不一样，出现缝隙、同等大小盒子渲染出来尺寸不一致。

WebKit、Blink 内核实现亚像素布局 Subpixel Layout，内核内部使用高精度 LayoutUnit（精度 1/64 CSS 像素）保存坐标与尺寸，布局阶段完整保留小数，到绘制光栅化阶段再对齐设备物理像素。

亚像素问题根源：CSS计算得到小数的尺寸、坐标；布局阶段允许小数CSS像素参与排版，但屏幕最小绘制单元是整数设备像素；光栅化绘制时盒子边界必须对齐整数设备像素，于是出现缝隙、同尺寸盒子渲染大小不一致、线条模糊等视觉bug。

基础概念

• CSS 像素：浏览器布局使用的逻辑单位。rem、百分比等相对单位最终转为 CSS 像素；布局阶段允许保存小数尺寸、坐标。
• 布局单位 LayoutUnit：浏览器内核内部高精度存储单位，排版碰撞检测完整保留小数精度。
• 设备像素：屏幕硬件最小不可分割绘制单元；devicePixelRatio（DPR）定义 1 个 CSS 像素对应多少个设备像素。

浏览器渲染

渲染管线：样式计算 → 使用值计算 → Layout布局 → 绘制光栅化 → 图层合成。

• 布局与绘制相互分离：布局阶段不会提前取整，文档流占位严格使用小数尺寸运算。
• 绘制取整逻辑：绘制高度 = round(终点坐标) − round(起点坐标)。连续排布元素，小数余数会沿着主轴向后传递；CSS计算尺寸完全一样的盒子，因为起止坐标取整时机差异，渲染后会出现1px的差值。
• 不同CSS属性取整行为差异
  • width、height、top、left：布局保留小数，光栅化绘制阶段才对齐设备像素。容易出现缝隙、同尺寸盒子渲染大小不一致。
  • border-width：在使用值阶段就对齐设备像素；同一个固定边框，不会随机粗细跳动。但是如果盒子本身存在亚像素坐标偏移，边框依旧错位出现缝隙；小于 1px 小数边框各浏览器行为不一致，可能消失或变粗。
  • transform: translate()：不改动文档流布局，仅图层合成阶段偏移画布。偏移是非整数 CSS 像素，浏览器做抗锯齿插值，画面模糊；偏移值在 0.5px 时模糊感最强。
• DPR 的影响
  • DPR ≥ 2 高分屏：1 个 CSS 像素对应多个物理像素，小数误差被分摊，亚像素现象肉眼不容易察觉。
  • DPR = 1 的一倍屏：亚像素缝隙、尺寸差异问题暴露最明显。

API 区分：getComputedStyle()：返回布局运算后的原始小数尺寸；clientHeight、offsetHeight：返回光栅化绘制取整后的整数；两个接口返回值不一样，就代表发生亚像素取整。

亚像素规避思路

没有通用手段可以彻底根治亚像素，根源来自浏览器渲染管线与硬件屏幕限制，上层 JS、CSS 无法修改取整规则。

只能事前规避，降低复现概率：

• 尽量让盒子最终计算尺寸为整数 CSS 像素；
• 减少百分比、rem 换算出来小数尺寸。
• 对对齐要求严苛的布局，不要完全交给浏览器自动均分产生小数。
• transform 动画平移尽量使用整数坐标，减少图层抗锯齿模糊。
• 对视觉要求极高的 UI，尽量避免小数尺寸参与布局。

新版浏览器：Chrome LayoutNG 在 100% 缩放、简单静态列表场景做了优化，观测不到交替 1px 尺寸差。但是页面缩放、动态 DOM 渲染、其它浏览器下，亚像素现象依旧可以复现。

域名结构分类

顶级域名 TLD

顶级域名 TLD（Top-Level Domain）是域名最右侧，最后一个 . 后面的后缀。例：www.example.com 中的 .com。

• 通用顶级域名 gTLD
  • 传统：.com商业、.net网络机构、.org非营利、.edu教育、.gov政府、.mil军事、.int国际组织。
  • 新 gTLD（2012 后 ICANN 新增）：.app、.shop、.xyz、.online、.ai、.io、.club 等上千种后缀。
• 国家、地区代码顶级域名 ccTLD（两位字母） .cn中国、.us美国、.uk英国、.jp日本、.de德国、.hk香港、.tw台湾、.mo澳门。

很多 ccTLD 被脱离本意使用：

• .io 英属印度洋领地，多用于技术项目；
• .ai 安圭拉，多用于 AI 人工智能项目；
• .tv 图瓦卢，多用于视频直播网站。

二级域名 SLD

二级域名 SLD（Second-Level Domain）是用户注册域名时自定义部分，写在顶级域名左侧。

示例：www.example.com，example 是二级域名。

示例：国内 .cn 体系特殊：example.com.cn，.com 属于 .cn 下的二级域名，.cn 才是顶级域名。

三级域名（Subdomain）

三级域名（子域名 Subdomain）由域名持有者自己配置，放在二级域名左侧，用来拆分不同业务服务。

• www.example.com： www（最经典子域名，主站）；
• mail.example.com：邮件服务；
• blog.example.com：博客；
• shop.example.com：商城。

官方术语 vs 国内俗称

以 www.example.com.cn 为例：

备注：ICANN、域名服务商后台文档，统一使用：顶级域名 TLD、二级域名 SLD、子域名 Subdomain，不使用「一级域名」这种说法。

按业务用途划分域名后缀

• 商业：.com、.biz、.company、.shop、.store；
• 非营利组织：.org、.ngo、.foundation；
• 技术网络：.net、.tech、.io、.ai、.app；
• 信息资讯：.info；
• 个人：.me、.name；
• 特定行业：.law、.medical、.edu、.gov、.mil；
• 地理：全部 ccTLD 国家域名，城市域名 .london、.nyc。