东方财富一面
东方财富一面
- 是否做过后端，用过哪些后端语言（我：做过一些，主用 Node.js（Express/Koa），也用过 Python 的 Flask，Java 的 Spring Boot 接触过但不深。数据库方面 MySQL 和 MongoDB 都用过，不过我的主方向还是前端，后端主要是配合项目开发。）
- nodejs、TypeScript、React 是否了解（我：都比较熟。React 一直在用，函数组件和 Hooks 是日常，Next.js 也用过。TypeScript 最近的项目都有引入，泛型、工具类型这些都常用。Node.js 除了写接口，还在项目里做过 SSR 和中间件封装。）
- 前后端区别（我：运行环境不同，前端跑在浏览器，后端在服务器。关注点不同，前端侧重交互、渲染、响应式、性能；后端侧重业务逻辑、数据安全、高并发。技术上，前端主攻 HTML/CSS/JavaScript，后端语言选择更多。另外，前端需要适配多端，后端更看重服务稳定和扩展性。协议上，前后端通过 HTTP 这种无状态协议通信，状态一般交给前端或中间件维护。）
- 常见的图片格式及区别（我：JPEG 有损压缩，适合照片，不支持透明；PNG 无损压缩，支持透明通道，适合 UI 切图；GIF 支持简单动画但只有 256 色；SVG 是矢量图，放大不失真，能直接操作 DOM；WebP 同时支持有损、无损和透明，体积小，兼容性需注意；AVIF 压缩率更高，但解码性能在一些设备上还有问题。）
- svg 和 canvas 区别（我：SVG 是保留模式，基于 XML 描述图形，每个图形都是 DOM 节点，方便绑定事件和 CSS 控制，适合交互不多但需保真缩放的场景。Canvas 是即时模式，通过 JS 在画布上绘制像素，依赖分辨率，图形是位图，无法直接给图形元素绑事件，但性能高，适合大量图形、动画和游戏场景。）
- echarts 是用什么实现的（我：ECharts 4.0 之后支持 Canvas 和 SVG 两种渲染方式。默认用 Canvas，因为大数据量下性能更好；移动端或需要精细交互时可以用 SVG 模式，能够直接用 CSS 控制样式，核心是渲染引擎可以按需切换。）
- 我看你用过 tailwindcss，有什么差别吗和一般的 css，有什么缺点（我：Tailwind 是原子化 CSS，用预定义的类组合样式，不用自己起 class 名，设计系统的约束性强，配合构建工具还能摇树优化。缺点是 HTML 模板会变长，类名冗长，需要记很多缩写，样式和结构耦合在标签里，后期修改可能比传统 CSS 文件更琐碎。另外从原子化方案迁移出去的成本也较高。）
- jpg 和 png 和 gif 区别是什么（我：JPEG 有损压缩，不支持透明，适合颜色丰富的照片；PNG 无损压缩，支持完全透明和半透明，适合 Logo 和需要保留细节的图形；GIF 最大特点是无损但只支持 256 色和简单帧动画，透明只有全透明没有半透明，所以动图容易失真且文件大。）
- jpg 有什么优点（我：压缩率高，在可接受的画质下能把图片体积压得很小，非常适合网页和照片分享。兼容性非常好，所有浏览器都支持，解码速度快。对无需透明且色彩复杂的图片，JPEG 是默认选择。）
- 介绍网络缓存（我：主要分强缓存和协商缓存。强缓存通过 Cache-Control 或 Expires 头，未过期时浏览器直接用自己的缓存，不发请求；协商缓存需要发请求到服务器，用 Last-Modified/If-Modified-Since 或 ETag/If-None-Match 让服务器判断资源是否变化，304 就沿用本地缓存，200 则返回新内容。实际项目里常给静态资源设长时间强缓存，文件名加 hash 来实现更新。）
- 图片懒加载（我：现代方案用 IntersectionObserver 监听 img 元素进入视口，再将 data-src 赋值到 src 触发加载。传统方案是监听 scroll 事件，用 getBoundingClientRect 计算位置。现在也可以直接用原生 loading="lazy" 属性，注意兼容性。另外要注意占位图、防抖和提前量设置，避免白屏。）
- this 指向（我：this 的指向由函数调用方式决定。普通函数谁调用指向谁，全局调用非严格模式是 window，严格模式是 undefined；对象方法指向该对象；构造函数指向新实例；箭头函数没有自己的 this，从外层作用域继承；call、apply、bind 可以显式绑定。实际项目里常用箭头函数来固定回调的上下文。）
- https 如何保证安全性（我：核心是 SSL/TLS。握手阶段用非对称加密交换会话密钥，同时完成证书验证确保服务器身份；之后通信全用对称加密，效率高且防窃听；传输数据还带消息认证码防篡改。简单说就是身份验证、数据加密、完整性校验三层保护。）
- PC 端和移动端区别（我：屏幕尺寸和布局：PC 端多固定或弹性布局，移动端需要响应式、viewport 适配，常用 rem、vw/vh。交互上，PC 依赖鼠标键盘，有 hover 和精准点击；移动端依赖触摸、手势，需处理 300ms 延迟或使用 touch 事件，还要处理软键盘弹出等问题。）
- 访问量大时的性能优化（我：从几个维度。网络：使用 CDN、压缩资源、开启 gzip/brotli、合并请求、使用 HTTP/2。资源加载：图片使用 WebP 格式、懒加载，代码按需加载、三方库做 tree shaking。渲染：避免重排重绘、使用虚拟列表、骨架屏、防抖节流。缓存：合理设置强缓存和协商缓存，利用 Service Worker 做离线缓存。服务端可以进行 SSR 或 SSG，减少白屏时间。）
- 手撕驼峰命名（我：就是写一个转换函数，把 background-color 这样的短横线命名转成 backgroundColor。用正则匹配 - 后的字母转大写就行。）
- 数组去重的几种方法（我：传统的方法有利用 Set 去重最简单；也可用双层循环、indexOf 或 includes 去重；或者配合 filter 加 indexOf 判等；还可以利用 Map 键唯一或对象键值对去重。Set 是最常用的，一行 [...new Set(arr)] 就能搞定。）
- 刚刚提到了验证码登录，那么如果在一个分布式系统中，http 请求是无状态的，在某个服务器上是登陆过的，那么如果下次请求在另一台服务器中执行了或者之前登陆过的服务器内存清空了宕机了，怎么避免重复登录呢（我：如果用的是传统 session 机制，可以把 session 集中存储到 Redis 或数据库中，这样所有服务器共享状态，不会因为机器切换或宕机导致登录丢失。如果用的是 JWT，token 本身就是分布式的，服务端无需存状态，只要验证签名和有效期就行，天然支持多实例。实际场景中为了安全，可能还会配合 Redis 维护一个 token 黑名单或者实现双 token 机制来兼顾安全和体验。）
- XML, JSON 的区别？（我：JSON 更轻量，数据体积小，解析快，键值对结构与 JavaScript 原生兼容，字段是双引号包裹的字符串；XML 标记语言，格式冗长，门槛高，但支持命名空间和更复杂的文档结构。数据交换场景 JSON 几乎已经取代 XML，但有些老系统或配置文件还在用 XML。）
- AJAX 是同步还是异步的？（我：名字里的“A”就是异步的意思。虽然可以通过设置 xhr.open 的第三个参数为 false 改成同步请求，但会阻塞 UI 线程，几乎不推荐用。实际项目里 AJAX 都是异步行为，配合回调、Promise 或 async/await 来处理结果。）
- AJAX 的实现（我：基础实现是用 XMLHttpRequest，创建对象、调用 open、设置请求头、监听 onreadystatechange 然后 send。现在更常用的是 fetch，基于 Promise，调用更简洁，需要手动处理错误和超时。打包环境里一般直接用 axios 这类库，做了更完善的封装。）
反问：
- 想了解一下东方财富前端团队目前主要的技术栈，是用 React 还是 Vue？有没有在使用 TypeScript 和 Next.js？
- 如果我加入的话，大概会负责哪条业务线的产品？
查看16道真题和解析