作为前端，一比一还原设计稿，交互的页面，就ok了嘛？不，这只是基础。
技术层出不穷
当日复一日的去写重复的页面，布局的时候，慢慢的发觉原来繁琐、复用的通用代码可以提取出来。比如： HTML 可以使用 pug、jade 等模版引擎进行开发；CSS 中的颜色、字体、尺寸等可以定义变量，进而产生了 sass、less 等，当大家用惯了这个后，发现CSS 还可以有新的玩法，Windi CSS、TailWind CSS 原子化出来了；JavaScript 的日期转换、数值单位处理、数组对象处理等也有对应的库： moment、lodash等。简单的静态页面开发的时候的 jQuery、LayUI 等框架也很繁琐的时候，三大框架 Vue、React、Angular 来了。当使用vue 的时候，公共的方法库： vueuse、如何让列表提升新能：vue-virtual-scroller。当团队中多个人开发同一套代码，如何保证代码统一的写作规范： eslint、prettier，如何保证代码的提交规范：commitlint 等，查看修改记录：sourcetree。监控前端代码错误：sentry。 埋点日志等工具一个个相继而来...
当技术越来越多，迭代也越来越快，追求最新技术的我们陷在其中，无法自拔的时候。是否还有力气，或者是否可以停下来，好好思考。作为前端的我们，还可以做些什么？
用户体验知多少？
- 白屏现象 :empty 骨架屏 loaidng 加载中
- 无网络有缓存、无网络没缓存 navigator.onLine
- 点击有返反馈，点击时激活 :active{ pointer-events:none }
- 语义化标签 a img form input select button summary、details
- 单行、多行溢出
-
加载闪现： 当页面快速切换，接口快速返回的时候，会有loading 闪现的问题：promise.all promise.race 对接口处理，当300毫秒内接口有返回，则不显示加载中，当三百毫秒内无接口返回则显示加载中。可以做更多的事： 加载中超过三秒的时候，切换提示：还在加载中，请稍等。 （promise 合理使用）
-
即时感知体验： 本地存储用户当前页滚动的距离 （也可以解决当前页面请求的时候，高度丢失的问题）
-
数据渲染的时候页面抖动： （搜索关键字）数据变化不大的时候，本地缓存，下次进入页面的时候后台默默更新数据
-
边界条件：
- 没有网络
- 没有网络有缓存： keep-alive
- 没有网络没有缓存的时候 1. 新页面提示 （列表页面、首页等不记录状态的页面） 2. toast 提示 （当有商品选择时，付费的时候无网的情况下toast ，当有网点击的时候无需再次选择商品和价格等直接提交）
- 没数据
- 脚本出错
- 闪退
- 网络慢（白屏）
-
性能优化
-
无障碍访问（适老化） css 样式： 不要设置
outline:none（电脑点击 TA B箭时，会有聚焦）
