性能问题面试题.md

后端一次性返回10w条数据，前端如何渲染

问题思考：

1. 设计不合理，网络请求会很慢；应该采用分页等策略
2. JS 可以 处理 10 万条数据，并没有问题
3. 首先一次性渲染 10 万条数据到 DOM 会非常卡顿

解决办法

1. 使用node.js中间层，获取并拆分10 万条数据；但是成本高

2. 虚拟列表:只渲染可视区域DOM，其他隐藏区域不显示，只用div撑起高度，随着浏览器滚动，创建和销毁 DOM，解决 DOM 卡顿的问题。

实现麻烦，快速滚动时，需要频繁的创建和销毁 dom。借用第三方库vue-virtual-scroll-list或者react-virtualized

3. 使用createDocumentFragment和requestAnimationFrame

让浏览器分词进行了渲染，但是没有根本上解决问题，因为 DOM 树过大，页面性能也能很差。

一个页面有 100 个接口请求如何优化

问题思考：

1. 非常不合理，不应该出现这种情况
2. 100 个接口是什么时机请求的？在什么条件下进行触发的
3. 这个 100 个请求都是关于什么的？是静态资源的请求还是数据请求？
4. 按需加载，根据用户操作和页面滚动进行请求
5. 后端进行接口合并
6. 前端搭建中间层进行接口合并和转发
7. 交互密集的使用socket长连接，避免反复进行网络请求
8. 将数据进行预加载和本地缓存

为什么移动端H5 点击右 300 毫米延迟

这是一个历史问题，原来为了手机上双击放大看web端网页，因此有 300 毫米延迟来判断双击事件。现在只要<meta content="width=device-width">就可以没有延迟了