当前位置：首页 > news >正文

【KO】前端面试题三

news 2025/8/26 21:27:44

以下是这些前端开发项目场景题的解答：

71. 小程序为什么会有两个线程【腾讯一面】

小程序架构设计为**逻辑层（JS 线程）和视图层（渲染线程）**分离的双线程模式，原因如下：

安全性考量：限制 JS 直接操作 DOM，避免因开发者不当操作（如频繁修改 DOM 引发性能问题、XSS 风险）影响渲染层，保障小程序运行稳定、安全，符合小程序沙箱隔离的设计理念。
渲染性能优化：视图层专注 UI 渲染，逻辑层处理业务逻辑，双线程并行可减少相互阻塞。比如 JS 执行耗时任务时，视图层仍能保持页面渲染流畅，提升用户体验。
适配多端环境：兼容不同平台（如微信、支付宝）的渲染差异，通过双线程架构，小程序框架可统一逻辑层代码，适配各平台的渲染层实现，降低开发和维护成本。

72. web 应用中如何对静态资源加载失败的场景做降级处理

可从资源加载监听和备用方案两方面处理：

监听加载失败：通过 <img> onerror 事件（图片）、link/script 的 onerror 事件（CSS/JS ），捕获加载失败行为。例如：
```
<img src="main.png" onerror="this.src='fallback.png'">
```
备用资源策略：
- 图片：加载失败时替换为默认占位图（如统一 fallback 图片）。
- CSS/JS：关键资源加载失败，可尝试从备用 CDN 重新请求，或降级为简化样式/功能（如 JS 失败则隐藏交互组件，仅展示静态内容）。
页面降级提示：若大量静态资源失败（如 CDN 故障），通过全局错误监听（window.addEventListener('error' ），展示友好降级页面（如“当前网络不稳定，请稍后重试” ）。

73. html 中前缀为 data-开头的元素属性是什么？

data-* 是 自定义数据属性（Custom Data Attributes ），用于在 HTML 元素上存储自定义业务数据，特点：

语法：以 data- 为前缀，后跟任意名称（如 data-userid data-status ），命名需符合 HTML 命名规范（小写、连字符分隔）。
作用：
- 存储与元素相关的额外信息（如商品 ID、状态标记），供 JS 读取操作（通过 element.dataset 访问，dataset.userid 对应 data-userid ）。
- 实现数据与 UI 分离，避免滥用 class/id 存储业务数据，让代码更清晰。

示例：

<div data-userid="123" data-status="active">...</div>
<script>const div = document.querySelector('div');console.log(div.dataset.userid); // "123"console.log(div.dataset.status); // "active"
</script>

74. 移动端如何实现上拉加载，下拉刷新？【字节一面】

通过 监听滚动事件 + 阈值判断 实现，常用方案：

下拉刷新：
- 监听 touchstart touchmove touchend 事件，计算手指滑动距离。
- 当滑动距离超过阈值（如 50px ）且页面处于顶部，触发刷新逻辑（如调用接口重新获取数据）。
- 框架方案：Vue 可用 better-scroll 、React 可用 react-refresh-control ，或直接使用小程序/APP 原生下拉组件。
上拉加载：
- 监听滚动事件（onscroll ），计算当前滚动高度与页面总高度、视口高度的关系。
- 当 滚动高度 + 视口高度 >= 页面总高度 - 阈值（如 50px ），触发加载下一页数据。
- 优化：使用节流（throttle ）减少滚动事件触发频率，避免性能问题。

示例（简易逻辑）：

let startY = 0;
document.addEventListener('touchstart', (e) => {startY = e.touches[0].pageY;
});
document.addEventListener('touchmove', (e) => {const moveY = e.touches[0].pageY;if (moveY - startY > 50 && isTop) {// 触发下拉刷新}
});
window