开发眼中的一些前端交互优化_前端关于页面交互的优化

系统真的快于用户感觉很快，是两码事；交互优化是更多的根据用户的实际感受来优化。

1. 交互优化 – 点击事件

如下场景：延时，卡顿；

**根本原因：**默认点击有300ms延迟：有很多pc网页没有做移动端分辨率兼容，需要放大缩小来浏览，则简单暴力用双击300ms以内来决定放大缩小。所以单击的时候会有延迟

移动web优化之tap事件替代click

移动web优化之添加点击状态

2. 交互优化 – 滚动的交互优化

基本概念：全局滚动与局部滚动

在ios系统中，全局滚动是默认支持的，局部滚动：默认没有滚动条，而且滚动起来比较干涩；

如何让局部滚动具有全局滚动这么流畅的效果呢？

子节点可以继承这个属性；

那么在Android上呢？

出界的情况

在滚动的时候，滚到边界之后，继续滚动，会有黑边出来；

如何解决出界的问题呢？

在iOS中，可以使用ScrollFix组件来结局，其核心的代码如下；

对于局部滚动，页面上有一些固定的导航区域，这时候可以禁止他的touchmove默认事件；

在全局滚动，怎么样才能阻止出界呢？

在android中呢？使用局部滚动，有时候是的滚动条会断裂；

比如一些比较常见的布局，如何实现全局滚动呢？举个例子：

通过上下的设置padding值，这样就可以使用全局滚动了；

总结一下

3. 交互优化 – 键盘定制

比如我们再有一些键盘输入时，系统怎么知道我们是要数字还是英文，中文呢？如下图所示

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

n/img_convert/b871b45fb2e6d5442144c863cbcff965.png)