2025年虾皮金融业务前端面经

121 阅读1分钟
1、关于JSBridge:

1、JSBridge怎么实现H5 与Native 之间通讯

2、关于性能优化:

主播答了一些常规的,但是不详细(很不ok),面试官更多的想知道:1、所说的性能优化有没有指标,是开发环境还是生产环境,2、怎么检测页面在生产环境的性能,3、具体计算怎么计算各个指标,可以用哪些api

3、monorepo

这个问了很多具体怎么应用,公用依赖与项目依赖版本不同怎么处理,项目打包是怎么处理等等

笔试题
cosnt app = document.getElementById('app')
app.style.width = (app.offsetWidth+1)+'px'
app.style.width = 10+'px'
app.style.width = (app.offsetWidth+1)+'px' 
app.style.width = 10+'px' 
app.style.width = (app.offsetWidth+1)+'px' 
会触发几次浏览器的渲染

这段代码中对 app 元素的 width 样式进行了多次修改,最终会触发 3 次浏览器渲染

原因分析:

浏览器的渲染机制存在 优化策略:当短时间内连续修改 DOM 样式时,浏览器会将多次样式修改放入一个 “队列” 中,等待队列结束后 合并为一次渲染,以减少重绘 / 重排的开销。

但存在例外情况:当修改样式后,立即读取 会触发重排的属性(如 offsetWidthclientWidthscrollTop 等)时,浏览器会 立即执行队列中的样式修改并触发渲染,以保证读取到最新的属性值

面试的时间不长额,更加注重底层原理相关知识,不说了去了解性能优化计算api 了