奇思妙物社招一面

原创已于 2025-08-11 16:11:04 修改 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2025-08-11 11:58:50 首次发布

面试题专栏收录该内容

10 篇文章

订阅专栏

一.国际化怎么做阿拉伯语，从右往左怎么实现？

1.1.一、阿拉伯语国际化的核心需求
阿拉伯语是一种从右到左书写的语言，其国际化不仅涉及文案翻译，还必须适配**界面布局从右到左(RTL)**的展示方式。
1.2.二、国际化文案支持(语言翻译)
阿拉伯语的文案支持和基他语言国际化流程一致:
1.使用 vue-i18n，react-i18next 或其他i18n工具:
2.编写对应的语言包:
1.3.三、实现 RTL(Right-To-Left)布局的关键技术
1.3.1.方法-:使用 dir=“rt1”
在根元素设置 RTL:

<html dir="rtl" lang="ar">

或动态控制:

document.documentElement.setAttribute('dir','rtl');

此方式将影响所有继承CSS的元素行为，例如text-align、floatflex 方向等。
1.3.2.方法二:CSS 级控制(更灵活)
1.使用 :dir(rtl)选择器:

:dir(rtl).input {
text-align:right;
}

2.动态添加 class 控制方向:

document.body.classList.add('rtl');// 切换时设置

 body.rtl {
 direction:rtl;
 }

3.使用 CSS Logical 属性(推荐)
避免硬编码 left/right使用逻辑属性:

margin-inline-start:12px;/*替代 margin-left */
padding-inline-end:8px;/*替代 padding-right*/
text-align: start;/*自动适配左/右对齐 */

1.3.3.方法三:UI框架内置 RTL 支持
·Element Plus、Ant Design Vue、Bootstrap 等框架都支持 RTL 模式配置方式通常如下:

app.use(ElementPlus,{locale:arLang,direction:'rtl'});

·Ant Design(React)中通过ConfigProvider 设置:

<ConfigProvider direction="rtl">...</ConfigProvider>

二. vue-router（前端路由）有两种模式，hash模式和history模式

1.hash 就是指 url 后面的 # 号以及后面的字符，history没有带#，外观上比hash 模式好看些
2.原理的区别（原理）
3. hash 能兼容到IE8， history 只能兼容到 IE10；
4.由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

原理：
1.hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则

2.history原理：利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

history模式URL就要和后端进行一致，所以要改为history也需要后端的配合，否则会报错。
所以hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！。history的好处是可以进行修改历史记录，并且不会立刻像后端发起请求。不过如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。

三、CDN的回源原理和操作

CDN（Content Delivery Network，内容分发网络）的回源原理是指，当CDN节点（边缘服务器）无法命中缓存或缓存过期时，它会向源站请求数据的过程。回源的方式、触发条件和优化策略对于CDN的性能和稳定性至关重要。以下是回源的主要原理和关键点：

1. CDN回源的触发条件
CDN回源通常在以下情况下发生：

缓存未命中：用户请求的资源在CDN节点上不存在（如首次请求）。
缓存过期：资源已经过期且未配置强制缓存策略（如HTTP头 Cache-Control 设定的 max-age 过期）。
主动刷新缓存：CDN管理者或源站推送更新，触发CDN清除缓存并重新拉取资源。
特殊规则配置：如某些URL或文件类型被配置为不缓存，所有请求都必须回源。
2. CDN回源的流程
用户请求CDN
用户访问CDN提供的加速域名，CDN解析最近的边缘服务器提供服务。
CDN检查缓存
若缓存未命中或过期，CDN会发起回源请求。
回源服务器选择
CDN可能配置多个源站（主源、备源），回源时可按负载均衡、健康检查等策略选择最优源站。
CDN向源站请求数据
CDN向源站发起 HTTP 或 HTTPS 请求，可能会附加 If-Modified-Since 或 If-None-Match 头以支持增量回源。
CDN源站返回数据
若资源未更新，返回 304 Not Modified，CDN继续使用旧缓存；否则返回 200 OK 并传输最新内容。
CDN缓存数据并返回用户
CDN存储新数据（按缓存策略），并将响应内容返回用户，提高后续请求的命中率。
3. 回源优化策略
为了降低回源压力、减少延迟，CDN通常采用以下优化策略：

（1）回源方式优化
动态回源：对于动态内容（如API数据），CDN可按需请求并短暂缓存。
智能回源：结合AI预测流量需求，减少回源峰值。
分片回源：对于大文件，CDN可按区块请求，避免单次请求过大。
（2）回源负载均衡
主备源站：CDN可配置多个源站，主源站故障时自动切换到备源站。
多机房回源：CDN可选择最近的源站机房，提高回源速度。
请求合并（Collapse Forwarding）：多个用户请求同一资源时，CDN合并成一次回源，减少重复流量。
（3）缓存控制
合理的缓存策略：源站可通过 Cache-Control 头控制CDN缓存行为，减少回源。
ETag / Last-Modified 协商缓存：让CDN仅在资源更新时回源，减少不必要的数据传输。
4. 回源协议和安全
回源协议：CDN支持 HTTP/HTTPS，部分CDN支持 QUIC/HTTP3 回源，减少TCP握手开销。
回源鉴权：CDN可以使用Token、签名等方式鉴权，防止非法回源请求。
加密传输：回源可启用 HTTPS+TLS 确保数据安全。
总结
CDN的回源是CDN工作机制的重要组成部分，合理的回源策略可以大幅降低回源压力、提升性能。常见优化方法包括智能回源、缓存优化、负载均衡和安全策略等，具体实现通常依赖于CDN服务商提供的功能

四、你们团队做了哪些方面的技术沉淀?是否有具体输出?

在我们团队内部，我们非常重视技术沉淀，因为项目越多、团队越大，经验复用和协作效率就越依赖于文档、组件、工具这些「沉淀下来的资产]。以下是我们团队在多个维度上的具体技术沉淀与输出内容:

1. 文档沉淀
项目结构说明文档(包含技术栈、模块职责、启动流程等
组件使用手册(自研组件、三方组件使用方式)
接口联调说明(mock 方案、接口定义规范、常用字段解析)
发布流程指引(dev/test/pro 流程 + CI/CD 操作文档)
2. 编码规范
团队统-的 ESLint/Prettier 规则
Git 提交规范(Commitlint+changelog 自动生成)
代码评审 checklist(PR 提交前自查项)
3. 组件库沉淀
我们团队自研了一套业务组件库，沉淀了多个复用率高的组件:

表格组件(支持分页、列设置、拖拽排序)
(可配置字段 +审核流逻辑)审核表单
统一弹窗(支持多种展现形式 +生命周期控制)
自定义指令(如权限指令、点击防抖指令)

技术亮点:
使用pnpm+Monorepo管理多个包，统一版本与依赖
接入Changeset做版本变更记录
支持打包为 ESM +UMD 格式，供主系统和低代码平台复用
4、工具函数 & 脚手架
·封装常用工具库(如时间处理、枚举管理、权限判断)
·自研 create-app 脚手架:可初始化前端项目版，一键生成项目骨架
.自动注册模块/路由/组件脚本，提升多人协作效率
·通用日志采集模块:页面访问埋点+错误上报统一处理
5、低代码/可视化平台封装经验总结
内部整理了「物料组件开发规范」文档
输出了「动态表单 schema 配置规则」和「拖拽容器适配规范
组件库对接了平台的运行时引擎，实现开发与平台双模式兼容
6、最佳实践/技术选型方案输出
我们为以下问题输出了系统性沉淀内容: