华为官网电脑专区的官网页面结构比很多人想象的要简单。打开 developer.huawei.com 下的电脑b代电脑产品页，第一屏就是专区一张全幅 KV 图，MateBook X Pro 或者 MateBook D 系列轮播，官网右侧或下方压着两个按钮——“了解更多”和“立即购买”。电脑b代这两个按钮的专区跳转逻辑不一样，前者走站内详情页，官网后者直接跳到 vmall 商城。电脑b代我第一次拆这个页面的专区时候注意到，按钮的官网 href 里带了 utm_source 参数，用来区分从官网导过去的电脑b代流量。

导航栏用了 sticky 定位，专区往下滚动的官网时候会固定在顶部。这个导航不是电脑b代纯 CSS 实现的，华为在前端挂了一个 scroll 事件监听，专区滚动超过 80px 就给 header 加一个 class，改变背景色和阴影。为什么要用 JS 而不用 position: sticky？我看了下他们的兼容方案，大概率是为了照顾旧版 Edge 和部分国产浏览器。导航里的二级菜单是 hover 触发的，鼠标移上去展开一个面板，里面按产品线分列——MateBook、MateStation、MatePad 平板二合一，每列下面还有子分类。这个面板的 DOM 结构是嵌套的 ul/li，CSS 用 transform: translateY 做展开动画，不是用 height 过渡，性能更好。

产品卡片区域值得单独说。华为没有用传统的栅格布局，而是 flexbox 加百分比宽度。每个卡片包含产品图、名称、一句话卖点和价格区间。图片用了 loading="lazy" 属性，但有意思的是首屏那几张图没有加，说明他们做了手动控制——首屏图预加载，下面的懒加载。卡片 hover 的时候有一个轻微的 translateY(-4px) 位移和阴影加深，过渡时间 0.3 秒，ease-out 曲线。这个交互细节在华为官网的 CSS 文件里能直接搜到，类名大概是 .product-card:hover。

详情页的代码结构更复杂一些。以 MateBook 14 的页面为例，顶部是一个 sticky 的锚点导航，点击可以跳到“外观”“屏幕”“性能”“续航”等模块。这个锚点导航的实现方式是用 scroll-behavior: smooth 配合 scroll-margin-top，避免跳转后标题被固定导航遮住。每个模块内部大量使用 picture 标签做响应式图片，source 里区分了 webp 和 jpg 格式，媒体查询断点设在 768px 和 1200px。华为的图片 CDN 域名是 img.com 结尾的，URL 里带了 ?x-image-process=image/resize,w_800 这样的参数，说明他们用的是自己的图片处理服务，不是第三方。

购买模块嵌了一个 iframe，加载的是 vmall 的选配组件。这个做法有利有弊——好处是官网不用维护库存和价格逻辑，坏处是 iframe 的加载速度受 vmall 服务器影响。我实测过，在移动网络下这个 iframe 的首屏渲染时间大概在 1.2 到 1.8 秒之间。华为的工程师应该也意识到了这个问题，所以在 iframe 外面加了一个骨架屏，用 CSS 动画做脉冲效果，等 iframe 的 onload 触发后再隐藏。

整站用的是华为自家的 HMS 前端框架，不是 React 也不是 Vue。从源码里能看到 hms- 前缀的自定义元素，比如 hms-carousel、hms-tabs。这个框架的文档没有公开，但从代码行为来看，它做了组件级别的按需加载——只有页面用到的组件才会加载对应的 JS 文件。华为官网电脑专区的 JS 总体积控制在 300KB 以内（gzip 后），对于一个产品展示站来说算合理。

移动端的适配用了 viewport 加 rem 方案，根字号通过 JS 动态计算，document.documentElement.style.fontSize = window.innerWidth / 10 + 'px'。这套方案在华为自家浏览器上表现稳定，但在某些第三方浏览器里会出现字体闪烁，原因是 JS 执行时机晚于首次渲染。华为的解决办法是在 head 里内联了一段脚本，提前设置根字号，避免闪烁。这个细节说明他们确实在真机上做过大量测试。