闲话前端基础(以下所有仅代表个人观点,有意见就是你对)

开始之前我想提一提《阳明心学》,但需先声明一点的是, 我提,并非为了PUA,像某些领导经常给下面人提王阳明,说他的知行合一,强调行的部分。 而我想说的是,《阳明心学》之所以被朱熹,康有为,鲁迅,稻盛和夫等一众巨擘推崇,不是因其“行”,在心学中,王阳明强调“知”的部分,而非“行”的部分,因为在他看来,如果没有领会“知”的宗旨,即便说知和行是一回事,那又何惧于事呢?不过是说些无用的话罢了,这正是他在教育门徒时所说。那什么是“知”呢?王阳明在龙场悟道后,其实有讲。

“圣人之道,吾心具足”。

也就是说人人皆可成圣,成圣不外乎立身、立德、立言,其宗旨是知行合一,但“行”是“知”的果,在王阳明看来,如果你知道了而不去行,那就是还不知道,或者知道的不深切,当你知道了个清楚,那就一定会去行。 那怎么才能“知”呢?其实就是王阳明所说“致良知” 我们都知道现代心理学有“真我”,“假我”,而当你能在内心来自”所有我“的声音中分辨哪个是“真我”,哪个是“假我”,也就具备了“致良知”的条件了。动脑筋的同学应该已经能猜到了,“真我”的声音往往是”良知“的声音,“致”则需要你“忠于它”,这听上去很难。但你试着分辨清楚之后,你会慢慢发现”知“的力量开始了。举个栗子“你什么时候梦醒的?没错!当你意识到自己在做梦的那一刻,你就醒了!” 由此可见,其实知行本就和一,它们是在一条因果线上的。

这里需要感谢B站UP主“一知君”的分享~👏👏👏

提这个是因为,学习也是一个知行合一的过程。只有当你意识到学习为什么?怎么样?怎么学?你才能 行动起来 ,这也是我这篇杂谈想谈的一个方向。

阅读下去你会收获:

  • 什么是前端基础?
  • 学好基础能给你带来什么?
  • 怎么学好基础?
  • 怎么划分前端工程师的等级?
  • 满满的焦虑(谨慎观看)

我会以大纲的形式先讲这几点,最后会拿面试举例。


⭐️前端基础是什么?

其实很多人都有这方面的疑惑,都在说前端基础,那到底什么是基础,我简单列举一些,大家找找感觉。

  • 网络通信基础?
  • 计算机科学、理论基础?
  • 高级编程语言基础?
  • JavaScript基础?
  • Css语言基础?
  • Html等超文本语言基础?
  • UI/UE工具基础?
  • APP平面设计师基础?
  • Js Runtime基础?
  • DOM Js接口基础?
  • BOM Js接口基础?
  • 计算机工程学基础?
  • 数据结构与算法基础?
  • 软件程序,系统设计架构基础?
  • 编码设计模式基础? ...

真是剪不断,理还乱... 有人说,你这些都是空谈,学术派,八股文,那好,我们再给各位上个图,来点实际的。

前端工程师应用技术

frontend

看了这张图,抨击学术派,八股文的该能够接受了吧?那么我想给你再看两张图

Javascript基础

javascript

计算机科学基础

computer-science

软件设计架构基础

software-design-architecture

没错你看到的这张图,是在上面那张 frontend 中出现了的其中一个关键部分而已😎~ 怎样?有被焦虑到吗?还觉得八股文无用吗?


⭐️学好基础能带来什么?

其实我个人很不想来谈及这个部分,因为它其实是因人而异的,并且非常主观的,但不可否认的是它有一定客观性 👉 比如有些人学好了前端基础:

  1. 涨薪100%
  2. 收获了同事的赞美
  3. 提升了技术自信
  4. 冲击到了大城市
  5. 去到了想去的公司
  6. 当上了想当的leader ...

可有些人没有这些收获,那么有时候可能你需要问你自己,你真的学好了吗?也不排除有些人即便这样也是四处碰壁,但是我们不得不承认的是学好基础的确会让你获得这些的几率大大增加。

如果生活的压力将你埋葬,但是你仍然可以自己选择是否努力把手伸出地面,而当有人想拉你一把的时候,至少能精准的找到你的手在哪里。


⭐️怎么学好基础?

这其实属于一个“行”的部分,在我看来,只要你真的分辨清楚“真我”,“假我”,并且“致良知”。也就是说你真的处理好了“知”的部分,也就不用我说明你改怎么学了。

但其实知识有方向,有范围,不过,上面已经有RoadMap了,并且有网站地址,可以自行取阅~

而学习方法上,我只有一个根据自身得出的建议:

  1. 时间规划上利用好零碎时间(“知”在这里扮演角色很重要,当你“真我”发生了,那就请你“致良知”
  2. 知识点积累上,针对每一个知识点要做到:重复学习保持疑问多方求证“行”该强调的是“行”的方法论!找到适合你自己的学习方法

⭐️怎么划分前端工程师的等级?

这个问题其实很有趣,的确没有一个明确的行业指导,到底是一个什么样的标准来划分,而普遍是一些公司内部的等级划分,那么我们又如何套用呢?当然是参考了,但是参考,不是直接套用,各家要求不一样,如果你只参考一家,势必会有所偏颇,但是我也不必纠结要给到你们所有的标准,那就给出一个我对自己的标准,和chatgpt的敷衍回答。

我的(并没有参考ChatGPT):

  • 初级: 具备基础代码能力,能解决开发中50%的bug,相应编程基础掌握70%,但不涉及深度和广度的知识探索积累,暂不具备工程师思维。
  • 中级: 具备熟练的代码能力,能解决开发中,测试中,生产上,70%的bug,相应编程基础掌握99%,有一定技术深度和广度的积累,具备初步的工程师思维。
  • 高级: 具备熟练且形成风格的代码能力,能解决技术领域内90%的bug,扎实的相应编程基础,有相当的技术深度和广度的积累,具备自我体系的工程师思维。
  • 资深及以上: 就开始涉及经过长期的生产验证而得出的技术方案积累,企业架构实践

ChatGPT3.5:

  • 初级前端工程师(Junior Front-End Engineer): 具备基本的前端开发知识和技能,能够开发简单的网页和应用程序。通常需要指导和协助更有经验的开发人员。
  • 中级前端工程师(Mid-Level Front-End Engineer): 具备较丰富的前端开发经验和技能,能够独立完成复杂的前端开发任务。能够设计和实现可扩展、可维护的前端架构,并熟悉流行的前端框架和工具。
  • 高级前端工程师(Senior Front-End Engineer): 具备深入的前端开发专业知识和广泛的工作经验。能够解决复杂的前端技术难题,并在项目中担任技术导向和领导角色。有能力指导和培养初级和中级工程师。
  • 技术主管/前端架构师(Technical Lead/Front-End Architect): 具备丰富的前端开发经验和卓越的技术能力。能够设计和领导构建大型、高可用性的前端系统。负责指导团队的技术方向、架构决策和技术规范等。

⭐️等级在面试中的体现

这也是各家不同,各人也不尽相同的主观讨论点~

面试中一般都是6个板块能力的评估:

  1. 技术知识和技能评估
  2. 经验和项目评估
  3. 编码能力和问题解决能力评估
  4. 前端架构和设计能力评估
  5. 协作和沟通能力评估
  6. 对新技术和行业趋势的了解

个别面试官可能偏重不一样,而都是考察这些方面的能力,那怎么区分初中高以及资深这些呢?其实可以一一对应等级划分来针对性提问,这里我们拿一个经典面试题来举个栗子: 📚从在浏览器搜索栏输入URL到页面展示过程中发生了些什么?

相信很多前端同学都不会陌生,你可能会说:

  • DNS查询
  • 建立TCP连接
  • 获取服务器HTML资源
  • 根据HTML内容构建DOM-tree,CSSOM-tree,生成Layout-tree
  • 浏览器根据Layout渲染UI
  • reflow/repaint ...等等,巴拉巴拉

而如果当面试官想要探知你的等级水平的时候(以下是我YY😎):

  • 针对初级 => 你能答出来大概过程就行
  • 针对中级 => 基于初级的标准你可能还需要答出来,或者会被追问:
    • DNS前浏览器是否会对你输入的url进行校验和normalize等操作?
    • TCP怎么握手?怎么挥手?
    • HTTP和HTTPS区别?TLS/SSL怎么握手?
    • js加载或执行,css加载或执行会对渲染有何影响?
    • reflow/repaint能对应到哪些js,html,css操作来讲讲么? ...
  • 针对高级 => 基于中级的标准你可能还需要答出来,或者会被追问:
    • 代入浏览器角色,什么线程或进程干的什么事?他们之间如何通信?为什么这样架构浏览器?安全吗?单进程的不好吗?
    • 浏览器怎么做normalize的操作?
    • 浏览器如何向服务器发起资源请求的?
    • 资源优先级怎么确定?浏览器有算法分辨吗?还是基于开发人员设定?又或是都有?
    • 如果要对下次打开做性能优化的话,有什么方案吗?
    • DNS查询过程是怎样的?怎么实现的?CDN和DNS查询他们是否相似?为什么呢?
    • 网站性能优化的话TCP和TLS/SSL上有文章可做吗?有什么利弊吗?
    • HTTP有几个版本?请求如何被浏览器缓存?哪些请求可以被缓存?什么是简单请求?什么是复杂请求?
    • 渲染这个环节,浏览器和GPU是如何合作的?什么是分层渲染?什么是位图/图块?
    • 浏览器在处理用户事件响应上有什么优化吗?哪个进程或线程在做?怎么做的? ...
  • 针对资深 => 同高级标准,但会更多的去追问你是怎么做的?有什么效果?对比业内其他方案有何优劣?你的思考?

😄怎么样?看完你焦虑吗?这不是我的本意,可这已然是当下的事实了...