系统化web前端需要技能所占比(通过图表分析来看您是不是一个合格的前端)

简介: 系统化web前端需要技能所占比(通过图表分析来看您是不是一个合格的前端)

我想很多人在找工作的时候都会面临的一个问题是,我会的技能到底是不是公司需要的技能,我会的技能到底在公司可以用到多少,还有我的目前会的技术是不是目前比较流行的技术,我目前的技术还可以做些什么....其实这些迷惑我也经常问自己,所以我会经常看一些帖子,看看别人最近都是在忙什么技术,后来我想了一下,与其看别人在学的技术,还不如直接看每个公司现在都是需要一些什么样的技术人才,所以带着这个想法,我来到招聘网站,拉取了很多家的公司(50家左右,别的基本重复的公司)招聘web前端的时候要求的技能,做了一个简单的图表,希望可以通过这些图表来说明一些目前技术的更新与应用。

声明:以下所有的数据图表均是小生自己收集的信息做出的图表,未经允许,不得盗用!

PS:我能力时间有限,仅仅分析的是web前端工程师的要求,其他行业不予涉及。

web前端技能要求所占比

这个呢是我去看招聘网站对web前端要求的招聘信息的时候看到的部分出现的技能,这里图片空间有限,所有的技能要求是

H5 CSS3 JS Ajax nodejs BootStrap Reactjs Vue jQuery Html css PS angluarJs java Less Xml Xhtml jsp Python Json Svn
Git Dom Mui Miniui Easyui Sass Grunt Gulp hybird jqueryUI Http session Cookie PHP HightCharts eCharts d3js webpack
Canvas MongoDB Hbase Redis Django Play Backbone

您没有看错,确实是这些,我简单的分析一下,作为一个前端工程师,Html、css、js是必会的,这个是毋庸置疑的,从图中也是可以看出来的,所占比是很大的,我们分一下层次来说明,这样可以定位一下我们的位置。

初级web前端

html、css、js就够了,这些已经可以是一个初级的了。通过这个3D的扇形图也是可以看出来的,其实要求一个人是不是前端主要就是看您会不会基本的这三项。

中级web前端

框架,细心的可以看到上面的扇形图里面有好多的框架,包括下面全部技能介绍的时候也是一样的,这个框架是不是必须会用才可以呢?不是的,不用框架也是一样可以做出效果的,什么效果都是可以做出来的,但是为什么非要用呢?为了方便,为了好维护,为了代码的可复用性高,那么是不是所有的框架都要会呢?当然不是,我们还不是神人,重要的是我们没有那么多的时间全部学会,其实会一种就足够了,学习的思路是一样的,会了一种别的基本不会说一点不明白。

高级web前端

(不装逼了,我只是一个初级,怎么知道高级的什么样...)

这里有人会说,为什么作为一个前端还有公司要求一会PHP,java等后端语言呢?很简单,前端是做页面的,我们写好以后数据怎么渲染,要通过接口给的数据,我们访问接口返回来的数据供我们渲染,如果您不知道后端的一个大概流程,我只能说,你只是一个前端,一个基本的会画页面的前端,仅此而已。

学历要求所占比

看到这个图可能会有人喷我,说这里怎么没有研究生,没有博士,好吧,我承认是我的学历限制了我的思维,其实是这样的,我搜索的时候确实要求研究生的基本没有,更不用说博士了(地点:杭州),我特意看了以下工作经验,一般是2年左右的,才可以拿到自己比较理想的薪资水平,其实看到这个我还是很欣慰的,我自己是一个大专(我不觉得大专就很差,强行给自己带个牛逼的帽子),这个图说明了什么呢?说明了以下问题:

分析学历
前端对学历要求不高
前端本身不是很难
前端面向可学人群比较广

个人素质所占比

这个板块说实话我是觉得最有必要分析一个板块,为什么呢?因为我看到太多了技术很厉害的人不被公司认可,自己还不知道什么原因,今天分析以下(说的不好,不要骂,简单的骂几句就行了)

团队合作

这个是老生常谈,不管您是不是一个前端,不管什么职业,这个都是必须要会的,因为我永远相信的是一个人是干不出什么大事的,没有完美的人,但是有完美的团队。

沟通能力

这个就涉及到日常的交流了,UI设计师已经将基本的构想合计您说了,您在做的时候,中间出现了一些问题,您怎么和上级说,或者是生活中出现了问题,用什么方式来和同事上级说明,有的人同样一件事,不同的人说出来效果是不一样的,有时候您会怪他们都不理解你,其实是你不会和人沟通而已。

表达能力

这个在搞技术的时候很重要,因为您有一个好想法,好的建议,不知道怎么表达,不会说,最后还怪别人不明白您的意思,您觉得这个是什么问题,很明显,将您的表达能力不行,这个怎么练习呢?很简单,拿一件事(比较不好说明白的)试着告诉您的朋友,描述一遍,看看别人理解多少,哪里不理解,为什么不理解,什么原因造成的,这样练习是可以出效果的。

理解能力

我在做项目的时候就经常出现下面的情况,上级已经把事情交代好了,最后问到还有不明白的吗?总有人会说我没明白,这个时候他的心里只会想,上级说的不够清楚,但是您想一下,为什么别人就可以听明白,就您不明白呢?很明显,您的理解能力不行。这个直接影响的是执行业务的时候是不是可以完美的执行结束。

执行力

这个我觉得没有必要说了吧,在编程这个行业的执行力有很多方面,当然实现功能只是其中一个,怎么更好的实现,更少的代码实现,更规范的代码实现都是执行力的体现。

看3D扇形看烦了,来一张小清新:

不同应用场景技能要求所占比

最后我们说一下不同的领域对前端的大概要求

目前做前端无非就是手机端微信公众号和PC端页面

上图是这两个不同场景下技能的要求,我只是简单的分析以下个别的技能对于不同场景的需求,很明显的是Vue在做手机端的时候比较受欢迎,React在pc的时候比较受欢迎。

ok,看到这里相信您对自己的一个定位也基本差不都了,技术更新很快,只是希望自己不被时代落下,发此文档共勉。

相关文章
|
2月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
345 108
|
7天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
112 1
|
7天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
43 1
|
2月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
334 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
7天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
27 0
|
7天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
93 1
|
4月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
56 2
|
4月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
123 1
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
217 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
12月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
912 14