71.前端-业务场景9

16. 用户体验优化

参考答案：

• 页面整体颜值和结构如何给用户好的印象？

用户第一眼看颜色，切记不是颜色越多越好看，而是要注意整体色调应该一致；不同页面相同功能操作方式应统一；图标使用统一，还有就是一个页面不能放太多的信息和模块太过密集，这样用户会反感，并且关键信息用户也发现不了。

• 对于checkbox选择多，全选按钮真的够用吗？

当需要选多条数据时,用户一般比较反感一条一条的选,当然全选功能能有所缓解,其实你可以再加一点亮点在里面,如双击选同类型或者其他什么属性的,这个具体可以看用户的侧重点,再具体去优化。

• 一个维护数据的页面，增、删、改数据后应该怎做？

这个大部分人应该都知道在操作过后默认加一个再查询的事件；当然这个你必须同项目经理或者用户讨论，毕竟这样做不是用户主观意愿去刷新页面的。

• 需要频繁操作，而且要多步骤的优化？

比喻你需要看一条数据的详情正常操作可能是选一条数据，再点击详情按钮；其实这样的操作我们可以进行快捷按键操作，例如我们可以双击这条数据，然后立刻勾选此数据（并清除本条外的其他勾选），并展示详情，这对用户就是亮点哦。

• 数据多而且复杂时，怎样才能让用户用起来欢乐？

对于数据多而复杂时，多条件组合输入查询是必须要的，当页面不能牺牲太多地方放多条件查询时，我们可以将少用的那些条件合并进行下拉选择你需要使用的条件；还有就是当填了好几个输入框时，想重新填写条件时，我们应该有一个clear按钮来清掉所有查询输入框的值；最后用户可能会有按其中一个字段进行排序的需求，可以通过点击title去实现。

• 查询失败时，你是怎么向用户发通知的？

在查询数据时，如果没有任何反应，情况会有很多种，为了增加辨识度，我们应该在get查询时采用异步方式，当数据没有完全渲染之前，用一张gif图片loading显示在页面，让用户知道正在查询；当查询数据为空的，返回数据可能在msg中告诉了你，可能也没有，我建议在前端判断，当数据数组长度为0时，告诉用户没有查询到数据。

• 部分页面不同用户需要注重的字段不同？

我遇到过此类问题，由于共用字段多，不能兼顾显示多者关注的字段，所以我选择了让用户自己做决定显示什么字段；我让用户自己选择显示什么字段，怎么排序，宽度多少等都让用户解决，此处注意，最好在用户编辑的时候，让他看到及时的效果。

• 当用户提出提出的优化需要牺牲性能时，怎么处理？

如果用户针对一些极少出现情况而需要牺牲性能来优化时，可以自行斟酌拒绝，因为这样没有考虑到其他大多数使用情况，这就是浪费；如果是常用的功能应该去实现，这个要具体问题具体对待。

• 当有很多输入框需要用户输入时，我们能做什么？

我们针对有固定关联的一些字段可以实现自动填写或者自动生成一部分，尽量让用户少动手，因为用户就是‘懒’，你能让用户可以懒起来用你的产品，那么 你就赢了。

• 当用户新增数据有特殊需要时，例如：批量、同类型新增？

批量新增时，可以通过前台上传文件，让后台去处理；当需要在前台批量新增时，我们应该先了解到批量肯定是要流水的，怎么流水就要看用户需求了，大部分肯定是让关键字段批量生成流水号，然后按要求数量进行新增，这里关键字段肯定后缀需要数字结尾，然后在输入框后面留一个小输入框来输入批量的数量；
如果是同类型新增，我们可以使用勾选一个同类型，进行复制新增，然后让用户自行在复制的数据上进行部分修改，免去了大部分相同的输入。

• 在一些子任务新增时，相同的字段都填一样的，怎么让用户欢乐操作？

当有一个大任务下，要新增多个小任务时，而且是一行一条的这种最明显，第一种比喻操作日期都是今天，我可以只填写第一个，然后在当前输入框一个回车或者双击，让下面相同的字段都写入相同的字段内容；如果从上至下都不同时，用户数据如果在excel中时，可以通过复制->粘贴->回车,直接将多条数据规整的填入多个输入框。

17. 数据展示优化

参考答案：

优化方案：

1. 减少 HTTP 请求

2. 使用 HTTP2：解析速度快、多路复用、首部压缩、优先级高、可以对不同的流的流量进行精确控制、服务器可以对一个客户端请求发送多个响应

3. 使用服务端渲染：首屏渲染快，SEO 好

4. 静态资源使用 CDN：在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间

5. 将 CSS 放在文件头部，JavaScript 文件放在底部：所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就空白了。所以 JS 文件要放在底部，等 HTML 解析完了再加载 JS 文件

6. 使用字体图标 iconfont 代替图片图标：不会失真，生成的文件特别小。

7. 善用缓存，不重复加载相同的资源：为了避免用户每次访问网站都得请求文件，我们可以通过添加 Expires 或 max-age 来控制这一行为。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。而 max-age 是一个相对时间，建议使用 max-age 代替 Expires 。

8. 压缩文件：压缩文件可以减少文件下载时间

9. 图片优化：

   1. 图片延迟加载
   2. 响应式图片
   3. 调整图片大小
   4. 降低图片质量
   5. 尽可能利用 CSS3 效果代替图片
   6. 使用 webp 格式的图片

10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码

11. 减少重绘重排

18.静态代码扫描，如何设计

参考答案：

静态代码扫描存在的价值

1. 研发过程，发现BUG越晚，修复的成本越大
2. 缺陷引入的大部分是在编码阶段，但发现的更多是在单元测试、集成测试、功能测试阶段
3. 统计证明，在整个软件开发生命周期中，30% 至 70% 的代码逻辑设计和编码缺陷是可以通过静态代码分析来发现和修复的

以上三点证明了，静态代码扫描在整个安全开发的流程中起着十分关键的作用，且实施这件事情的时间点需要尽量前移，因为扫描的节点左移能够大幅度的降低开发以及修复的成本，能够帮助开发人减轻开发和修复的负担，许多公司在推行静态代码扫描工具的时候会遇到大幅度的阻力，这方面阻力主要来自于开发人员，由于工具能力的有限性，会产生大量的误报，这就导致了开发人员很可能在做BUG确认的工作时花费了大量的无用时间。因此选择一款合适的静态代码分析工具变得尤为重要，合适的工具能够真正达到降低开发成本的效果。

静态代码分析理论基础和主要技术

静态代码分析原理分为两种：分析源代码编译后的中间文件（如Java的字节码）；分析源文件。主要分析技术如下：

• 缺陷模式匹配
  事先从代码分析经验中收集足够多的共性缺陷模式，将待分析代码与已有的共性缺陷模式进行匹配，从而完成软件安全分析。优点：简单方便；缺点：需要内置足够多的缺陷模式，容易产生误报。
• 类型推断/类型推断
  类型推断技术是指通过对代码中运算对象类型进行推理，从而保证代码中每条语句都针对正确的类型执行。
• 模型检查
  建立于有限状态自动机的概念基础上。将每条语句产生的影响抽象为有限状态自动机的一个状态，再通过分析有限状态机达到分析代码目的。
  校验程序并发等时序特性。
• 数据流分析
  从程序代码中收集程序语义信息，抽象成控制流图，可以通过控制流图，不必真实的运行程序，可以分析发现程序运行时的行为。