前端架构分析

前端架构分析

前端的价值到底在哪里

• 实现界面交互
• 提升用户体验

总结就是能写交互页面，写的交互页面用户用的爽

前端的进阶

前端不局限于前端【当然优先前端技术需要如何进阶】

性能优化

​ 推荐阅读掘金文章**《移动web性能优化从入门到进阶》**

• 首先是如何发现问题。
• 发现问题之后，是如何分析其中原因
• 找到原因之后，采用的解决办法。
• 解决之后，是否真实的对用户体验有所提升。

对框架的理解

流行框架的API调用是最基本的要求，理解框架原理，理解思想可以让你在前端的路上走的更远，以vue为例

• Vue中的双向绑定，只是简单的Object.defineProperty()么？
• vue3的proxy方式和vue2的方式区别在哪？
• Vue的数据依赖是如何实现的？
• Vue的computed和watch到底有何本质区别？
• keep-alive的实现原理？

深入Node.js

此处node不是单独指后端逻辑的开发。目前前端工程化体系中，扮演重要角色的webpack，parcel，vue-cli等等，或者是现在让JavaScript能够开发PC桌面程序的Electron等都是需要掌握的一部分

• 与浏览器端的JavaScript不同，Node.js后端是直面服务器的，如何定位和分析内存泄漏问题
• 尝试写一些webpack插件。

Canvas与WebGL

首先WebGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。使用WebGL相关的3D处理技术和算法，并不需要掌握复杂的算法或者数学知识，只需要学会three.js就可以完成前端3D的一些业务需求

• 实现一个刮刮卡或者涂鸦墙的业务需求
• 图片上传时进行压缩和裁剪。
• 在实现帧动画方面，使用CSS3和Canvas的选择。

可以就以上场景来对WebGL 以及canvas 进行一个深入学习了解

架构

以上只是进阶架构的基础掌握，掌握前端技术的同时，你还要学了解前端技术之外的技能。跳出前端这个思维，才能看到的更多。

跨界

页面的秒开是衡量一个前端优化的重要指标，我们以这个优化点来总结一下从哪些方面跨：

• 提升速度，从服务端渲染着手，可以利用Node.js往后端跨。
• 提升移动web的H5页面的启动耗时，从webview着手，利用iOS和Android技能往客户端跨

用户交互操作体验，也是衡量前端优化的重要指标，我们以这个优化点来总结一下从哪些方面跨：

• 提升用户交互体验，尝试将web页面客户端化，基于React Native Flutter uniapp也可以往客户端跨。
• 提升页面动画效果，编写高性能的前端动画，也可以往UI动效设计跨。

工具和平台化建设

工具平台主要就是围绕我们的研发流程中的每一步关键节点去建设

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2AEFeEC-1646892503434)(C:\Users\野王新之助\AppData\Roaming\Typora\typora-user-images\image-20220310140423923.png)]

流程和规范化

对流程的制定和规范，是非常重要的。不要小瞧规范的威力，可以极大的提升开发效率，真正优秀的规范不会让使用者感到约束，而是能帮助他们快速定位问题，提升效率。

• 结构的规范：对项目的代码结构，不管前后端，合理的分层和组件化是非常必要的。
• 编码的规范：这里主要就是代码codereview了，定期的进行codeview的同时，最好可以使用一些自动化工具
• 流程的规范：项目的评审，研发，测试，发布这些阶段都需要有流程来约束，这些需要结合自身团队的实际情况来制定。
• 规范的落地：对于规范来说最关键的是执行落地，在制定完规范的同时，要不时的回顾是否切实的落地，这个应该是团队里每个成员坚持的基本准则。

安全意识

• 低级的的代码安全问题，要坚决说不，例如前端里面的xss，csrf这些问题。
• 对大型运营类活动需求，要有容灾意识和备份，例如在准备了一套方案的同时，要有可选的备用方案。
• 尝试使用工具化来解决和预防安全问题，例如BAT这种大型企业，在运维和代码层面，都有一层保障机制，如腾讯的门神系统等。