前端架构
是一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效、可持续的工作流。
架构师的工作职责
- 体系设计 设计所有开发人员都要遵守的系统规范，描绘代码和系统的最终形态，系统设计规范出台后，代码的质量标准就有了，检验机制也可以实现。
- 工作流 结构设计以后就是指定开发工作流，工作流规定了代码提价到线上所经过的步骤，涉及到版本控制，任务调度工具，css文件处理，文档工具等
- 监督跟进 没有任何设计在一开始就是完美的，也没有任何计划可以一步到位
前端架构师不仅要写更多代码，更要会用多种编程语言，还要使用大量的工具。代码量并未减少，只是代码的读者发生了改变。前端开发人员面向终端用户写代码，而前端架构师面向的则是团队里的开发人员。
关键的决策需要在项目启动之前就要制定下来
如果等到开发阶段的后期再考虑，不是已经用不上了，就是一开始错误的决定已经造成了无法挽回的损失。 一旦做出这些决策，我们的任务就是去辅助视觉设计、平台开发、底层结构，使之能最大程度地满足需求。 如果没有前端架构师的提前介入，项目就有可能陷入两难境地：或是将视觉设计、平台或底层结构推翻重做，或是让前端开发人员自己去克服困难。
架构的目的
1. 项目可扩展性
2. 项目可持续性
先有鸡还是先有蛋
如果你没有做过架构，老板会要求你提供这种架构的成功案例，如果你总是被要求证明这种工作流程是有效的，你又如何开始。仔细找资料，小心论证。
架构设计思路
- 模块化内容 原子设计方法论，尽可能多的复用小的组件，而不是弄出来几十个，上百个不同的内容块
- 全面测试 大量代码的合并到主干可能出现的问题，导致几个月前的代码运行出问题。
- 流式处理
- 详细的文档
架构的核心
- 代码
- 流程 就是工作流
- 测试
- 文档
性能
-
页面大小
-
HTTP请求次数
-
计时度量 首字节时间 开始渲染时间 文档完成时间
-
混合度量标准 如下 • 是否存在阻塞渲染的 JavaScript 或者 CSS • 重定向至登陆页 • 图片优化 • 文件压缩 • 服务器响应时间 • 服务器端压缩 • 浏览器端缓存 • 点击目标的大小 • 窗口可见区域的配置 • 清晰的字体大小
