京东-广告数据-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:46:50 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 考察核心集中在前端性能优化（如无限加载卡顿、页面渲染延迟）、CSS布局与兼容性（如Flexbox自适应、跨浏览器适配）及Vue框架原理（如响应式限制、虚拟DOM优劣）。需重点准备懒加载/虚拟滚动优化、兼容性Hack技巧、异步执行顺序分析及需求拆分设计能力。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 现在我们有一个 618 活动页的需求，需要你来做，你会如何拆分需求，如何设计？

题目要点

需求分析与设计能力

参考答案

首先与产品、设计、运营等多部门沟通，明确活动页的核心功能、促销规则、页面风格等基本需求。例如，确定活动主题（如限时秒杀、满减优惠等）、预计流量、商品展示形式等。
根据功能模块拆分需求，可将活动页分为头部导航区（包含活动标题、时间、入口等信息）、商品展示区（如秒杀商品列表、热门推荐商品列表等）、促销信息区（展示活动规则、优惠券领取等）、底部信息区（如活动说明、客服入口等）。
在设计上，根据品牌风格和活动主题确定整体视觉风格，包括配色方案（如节日氛围的红色、金色等）、字体选择、图片风格等。针对商品展示区，考虑采用网格布局或瀑布流布局，以合理展示商品信息，包括商品图片、名称、价格、优惠信息等。对于交互设计，需考虑页面的滚动加载、商品点击跳转、优惠券领取等交互效果，确保用户体验流畅。

2. 商品列表中一行有五个商品卡片，最后一个自适应剩余空间，怎么实现。

题目要点

CSS 布局能力

参考答案

可以使用 CSS 的 Flexbox 布局来实现。首先将商品列表的容器设置为 flex 布局，即 display: flex。然后对前四个商品卡片设置固定宽度，例如 width: 100px，最后一个商品卡片设置 flex: 1，这样它就会占据所在行剩余的空间，实现自适应效果。同时，为了防止一行中商品卡片因内容过多而超出父容器宽度，可对每个商品卡片设置 overflow: hidden，确保其内容在自身区域内显示，并且可以添加 white - space: nowrap 和 text - overflow: ellipsis 来处理溢出的文字内容。

3. CSS 样式开发中你都遇到过哪些兼容性问题，如何解决的。

题目要点

CSS 问题解决能力及兼容性知识

参考答案

在不同浏览器中遇到过盒模型问题，例如 IE 浏览器的怪异盒模型与其他浏览器的标准盒模型不同，导致元素尺寸计算不一致。解决方法是使用 box - sizing: border - box，并结合 CSS 重置样式表统一各浏览器的盒模型表现。 2. 浮动布局在某些低版本浏览器中可能出现父元素高度塌陷或子元素排列不整齐的问题。可以通过为父元素添加 clearfix 清除浮动，即设置父元素 overflow: hidden 或使用伪元素 :after 添加清除浮动的样式来解决。 3. CSS3 动画在部分浏览器中可能不支持，或者动画效果不一致。例如，IE 浏览器对 CSS3 动画的支持较弱。解决方法是使用渐进增强的方式，在支持 CSS3 动画的浏览器中展示动画效果，对于不支持的浏览器提供简单的过渡效果或静态样式，并利用Modernizr 等工具进行特性检测，根据检测结果加载相应的样式和脚本。 4. 字体渲染在不同操作系统和浏览器中可能存在差异，影响页面的美观和一致性。可以通过设置字体的 font - family 为系统安全字体组合，并使用相对单位（如 em、rem）设置字体大小，以提高字体的兼容性和可读性。

4. 你刚刚说的上滑无限加载有没有性能问题，你怎么解决？

题目要点

前端性能优化知识

京东-广告数据-校招 on Last Stand

京东-广告数据-校招 · 第 1 轮 · 一面

1. 现在我们有一个 618 活动页的需求，需要你来做，你会如何拆分需求，如何设计？

题目要点

2. 商品列表中一行有五个商品卡片，最后一个自适应剩余空间，怎么实现。

题目要点

3. CSS 样式开发中你都遇到过哪些兼容性问题，如何解决的。

题目要点

4. 你刚刚说的上滑无限加载有没有性能问题，你怎么解决？

题目要点