Contents
  1. 1. 前端是什么?
  2. 2. 前端工程
  3. 3. 前端工程师
  4. 4. 前端工程师方向

时光荏苒,接触前端快要两年半了,有一些对于前端的感悟,想要记录下来。

大部分前端工程师都是折翼的天使。为什么会有这个说法?没有任何专业直接培养前端人才,很大一部分的前端工程师都是通过放弃本专业就业而自学前端以及通过项目积累建立的识体系。

人才的紧缺,市场的需要,近两年也是不断冒出前端的培训机构,讲课人一般是几年前端工作经历的前端工程师,也会有一些各方面都比较厉害且体系正确。可是不乏一些有一定工作年限但几年却处处浅尝辄止的人,仅凭他们的工作经验而在新手面前以老人的姿态讲课带路,以及推广一套不规范的知识体系,这对新人最直观的害处是觉得前端简单,前端就是切页面的,用jQuery的就是前端。

这边必须提一下的博主公司(网易)的一个产品云课堂,里面的前端微专业在网易众多优秀的前端工程师的交流和积累下,已经有了一定的底蕴,推荐一下。除此以外,还有今年的百度前端课堂。百度公司虽然一贯没啥好评,不过技术上还是值得认可的,所以也推荐一下。

接下来进入正文。

前端是什么?

首先,想要接触一个东西,得去了解它是什么。

有一台计算机,那只是一台计算机;当有了两台的计算机,便可以通过网络建立联系。两者数据对接需要通过计算机网络的五层:物理层、数据链路层、传输层、网络层和应用层,自顶向下的数据传输。而在计算机程序体系中,抽象出TCP和UDP两种方式,负责给开发人员调用来操作最底层的硬件进行网络传输。

简单回顾下TCP网络传输的整个过程。首先,发送方需要发送数据报前必须先通过三次握手建立连接,发送方发送syn包,接收方接收到syn包必须确认,同时也向发送方发送syn等待发送方确认,发送方接收到对面传来的(syn+ack)时,发送ack包以确认,至此,三次握手完成并建立全双工连接。值得一提的是,双方有一个队列来维护对方传来的syn包。受计算机连接的网络的数据链接层的最大传输单元的限制,会有一个最大传输段(MSS),为保证可靠性,将数据分段形成报文段(segment)。在收到报文段时,会计算校验和有差错则丢弃。超过一定时间为收到确认信号时,启动超时重传,并使用滑动窗口来进行流量控制。

如上,通过TCP建立的全双工网络,人们可以互相建立联系,但是维持这一段网络需要花费高昂的硬件成本而且在某些时候是不必要的。于是,一些更面向服务的应用层协议被应用到了 1 - 多 的网络体系中,如 http 协议。服务端只需要维护一个进程并占用一个端口来统一对所有的请求方进行响应。

这个时候,如果按照 http 协议这个切面分,协议的响应方就是后端,协议的请求方则为前端。这是一个比较广义上的解释,也有狭义的:切图仔,做网页的。

前端工程

显然,但从一个 【前端是什么?】的论题上考虑,只能得出前端这个领域的范围是怎么样的。如果需要进一步地了解在前端,需要讲这个词细分,先讲一讲前端工程。
前端工程其实是软件工程的范畴,以实现系统的良好的性能,代码的高复用、高可扩展性与高可读性为目标。

  1. 前端能控制的性能优化有:
    • 浏览器渲染
      • 熟悉浏览器解析渲染过程,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流;
      • 浏览器在document下载结束会检测静态资源,新开线程下载(有并发上限),在带宽限制的条件下,无序并发会导致主资源速度下降,从而影响首屏渲染;
    • 协议与缓存
      • 熟悉 缓存特性,缓存可用时会使用缓存资源,这个时候可以避免请求体的传输,对性能有极大提高;
      • 减少Cookie携带;
    • 文件优化与 cdn
      • 合并样式,脚本;
      • 合并 icon;
      • 开启 GZIP;
      • 优化脚本使用的库;
      • 图片延迟加载;
      • 熟悉 cdn api,合理控制静态资源文件大小
        。。。
  2. 拦路虎
    公共脚本、公共样式文件的堆积,合理使用公共样式、公共脚本。可以定制自己团队的 UI,除了团队 UI 以外的东西全部不要放到公共的部分
    。。。

前端工程师

前端工程的搭建者,就是前端工程师,平时的工作大致分为两类,一类是写基础设施层,一类是写上层业务层。比较重要的一些能力有:

  • 前端基础 – html/css/js 语法,应用能力
  • 计算机基础 – 三门课衍生,数据结构 + 操作系统 + 计算机网络,关键是有这个意识
  • 软件工程思维 – 从程序设计基本原则出发,完成代码构建、高可复用架构设计的能力
  • 框架设计能力 / 业务逻辑思考能力 – 这块可以挑选自己感兴趣的 前端领域 / 行业,需要前面三者作为基础,是最终体现

前端工程师方向

  • Node.js 服务端开发 / 前端工具开发
  • 移动端开发 React Native 切入
  • 桌面应用开发
  • 组件化的前端开发,React / Vue + Redux (状态思维)
  • 图形学渲染,Css3/Canvas 2d/WebGl

总结一下, 前端不只是切图的 ^_^

Contents
  1. 1. 前端是什么?
  2. 2. 前端工程
  3. 3. 前端工程师
  4. 4. 前端工程师方向