前端架构师需要具备的技能？对于如今的前端，虽然没有明确的前端架构师这个职务，但是相信不久的将来前端架构师这个职位肯定是会出现，并且这个时间不会很久，可能就是今年亦可能是两三年后。对于变化越来越快的前端，我们前端人员除了不断的努力学习新技能外，还需要对自己的代码风格形成一个规范。这也是所有架构师基本的能力。接下来我们来介绍一下都要具备哪些技能。

　　html：

　　客户端渲染

　　一般的流程是浏览器向网站发起请求，服务器接收到请求后立即返回静态的html部分，这部分的内容通常是与用户无关的静态数据内容，浏览器去解析静态的html文档，等待js脚本加载完成后，发起异步请求来获取动态数据，服务器接收到异步请求之后，查询数据库，并将动态的数据返回给浏览器，浏览器接收到动态数据以后，js通过编译，将数据变成html字符串，并渲染为可视化的UI。

　　劣势：首屏渲染速度慢，对seo不太友好。

　　优势：更好的支持离线场景和前后端分离方案的实施。并且随着vue，react，angular框架的普及，对于存在大量动态数据渲染的情况来说，客户端渲染优势明显。

　　抛开seo问题来说，客户端渲染在大多数场景下都是优于服务端渲染的场景的。尤其是在移动端的场景下。虚拟DOM可以保证动态渲染的良好性能。因为vue，react都是基于虚拟DOM的，而基于组件的前端路由管理，无论是从速度还是灵活性都优先于依赖于服务端路由驱动的MVC的模式。

　　服务端渲染

　　一般的流程是浏览器向网站发起请求，服务器接收到请求后，先查询数据库中的动态数据，然后将数据通过模板引擎编译为html字符串返回给浏览器，浏览器接收到html文件后，渲染为可视化的UI。

　　服务端渲染相对于客户端渲染的优势在于：

　　其支持seo并且首屏时间较短。

　　CSS:

　　样式预处理

　　less，流行的预处理方式之一

　　具备特殊语法规范，可编译为css的开发框架更为合适，弥补了css的逻辑处理和复用性方面的不足，引入了变量和混合模块集成等特性，同时支持编程和维护的嵌套语法，从细节上提升了css的开发和维护效率。

　　缺陷：

　　大而全——一旦选择预处理语言，就必须接受它的全部规范和功能;

　　难扩展——缺少插件生态;

　　样式后处理

　　postcss

　　postcss 一种对css编译的工具，类似babel对js的处理;

　　postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。

　　与 less sass 的区别

　　less sass 是预处理器，用来支持扩充css语法。

　　postcss 既不是 预处理器也不是 后处理器，其功能比较广泛，而且重要的一点是，postcss可以和less/sass结合使用

　　JS:

　　技术选型

　　底层技术栈——解决什么问题

　　实现层技术栈——出于学习曲线和生态等综合考量

　　复杂的cms系统，使用TS或者flow为js加入静态类型属于底层技术栈，解决底层问题，vue、angular属于实现层技术栈。

　　代码规范

　　eslint校正

　　一种逻辑可以多种方案实现，如何选择最优方案

　　比如js异步编程：是选择常规的回调函数还是promise，在promise基础上使用Generate 还是aysnc、await。

　　通过合理的封装实现，实现方案代码的正确和合理性是无法通过工具监测的，所以需要认为评审。

上一篇

前端和后端哪个前景好

下一篇

java开发idea入门