重学前端5 - 应用

应用

---

43 | 性能：前端的性能到底对业务数据有多大的影响？

性能体系的建立可以分成以下几部分：

• 现状评估和建立指标；
• 技术方案；
• 执行；
• 结果评估和监控。

现状评估和建立指标

作为一个工程师，指标又要考虑两个因素。一方面，对用户来说，什么样的性能指标能更好地评估它的体验？另一方面，对公司来说，什么样的指标会影响业务价值呢？

性能问题可以分成很多方面，最重要的几个点是：

• 页面加载性能；
• 动画与操作性能；
• 内存、电量消耗。

注意，这里我们仅仅是对“性能”两个字的分析和解读，在对大量的用户数据分析后，我们发现，其实这三部分中，“页面加载性能”跟用户的流失率有非常强的关联性，而用户流失率，正是公司业务非常看重的指标。

于是，基于以上分析，我们设计了一个新的指标——秒开率，即一秒之内打开的用户占用户总量的百分比。

我们在浏览器的原理课程中，已经讲解了浏览器大致的工作过程，但是，我们必须理解几件事：

• 从域名到 IP 地址，需要用 DNS 协议查询；
• HTTP 协议是用 TCP 传输的，所以会有 TCP 建立连接过程；
• 如果使用 HTTPS，还有有 HTTPS 交换证书；
• 每个网页还有图片等请求。

这里仅仅列出了性能优化的一部分技术方案，是我认为比较重要的部分，可以看到，这里涉及的并不仅仅是前端技术，有服务端、客户端、设计师团队，所以要想做好性能优化，绝对不能把自己限制在局部的视角，必须是整个业务一起考虑，才能有良好的收效。

执行

根据公司的实际情况，工程实施可能有不同的程度，我把工程水平从低到高分成三个阶段：

• 纯管理；
• 制度化；
• 自动化。

结果评估和监控

要想做线上监控，分两个部分：

• 数据采集；
• 数据展现。

总结

总体思想：性能应该是基于业务和实际用户体验需求的一种工程实施，不是纯粹的技术游戏。

接下来我们分成四个步骤介绍了性能工程体系，首先介绍了现状评估和建立指标，建立指标应当从业务的角度考虑，接下来讲了技术方案设计，技术方案应当从整体角度，基于 Profiling 的结果分析来设计。

之后我们讲了实施，我们讲了工程实施的三个层次：纯管理、制度化、工程化，最后，我们讲了结果评估和线上监控，线上监控需要从数据采集和数据展现两个部分分别实现。

---

44 | 工具链：什么样的工具链才能提升团队效率？

我们仍然从目标、方案设计、执行和结果四个方面来讲解，工具体系的目标除了单个工具解决具体问题之外，还要注意一致性和配合问题，因此我们需要工具链。

工具链一般会涵盖研发阶段的各个主要操作。工具体系的执行比较简单，很容易就可以做到完全的自动化。工具体系的监控同样非常重要，工具的监控除了帮助我们改进工具体系，对研发体系的其它部分也有帮助。

---

45 | 持续集成：几十个前端一起工作，如何保证工作质量？

持续集成这个概念最早来自桌面客户端软件开发，应用到前端领域，会有一定的变化。这里我提出了一个预览环境 + 规则校验的前端持续集成体系。

预览环境需要申请机器和域名、部署和建立发布机制，规则校验有三种方法：结构扫描、数据采集和代码扫描。

持续集成的实施需要重点关注校验规则部分，要建立一个民主讨论、定期更新的校验规则。持续集成机制的建立就是其结果本身，此外，系统中产生的数据也可以有一定管理价值。

---

46 | 搭建系统：大量的低价值需求应该如何应对？

搭建系统是为了应对大量简单页面的生产需求而设计的一种工具型产品，它的目标非常明确，就是快速生产大量的页面。

方案上，它重点和难点在于几个产品实体的设计，数据部分重点在于编辑器和跟服务端 API 的对接，模板部分则主要是版本化和数据的格式定义，模块除了模板的重点，还有拖拽系统，最终产生的页面主要的难点是跟生产环境的对接。

搭建系统的实施主要是把产品在做出来，一般来讲推广是非常自然的事情，最后，搭建系统产生的数据监控关键的指标是用户访问数和生产页面数。

---

47 | 前端架构：前端架构有哪些核心问题？

今天我从宏观的角度介绍了前端架构相关的知识，我重点介绍了“组件化”、“适配性”、“单页应用”三个前端架构需要解决的核心问题，组件化在社区有很多现成的方案，我们需要做的主要工作是框架选型。适配性需要用到 CSS 的几种特性：vw 单位、viewport 规则和 media 规则，单页应用重点是逻辑页面解耦、独立开发和发布和保持前进后退历史。