这里是文章模块栏目内容页

前端工程师需要掌握哪些知识

随着近年来互联网的发展和普及,web前端工程师需求量越来越大,那么计划学习web前端开发技术的人也越来越多,但是很大一部分学习者非常关心前端工程师需要掌握的核心技能知识,方便后面学习时提前预习,下面小编就为大家介绍一下web前端开发工程师需要掌握的技能知识。

QQ截图20200802154218

前端工程师需要掌握哪些知识呢?

web前端开发工程师一般分为三种级别,一般分为初级工程师、中zhi级工程dao师、高级工程师。

1、初级前端工程师:

能熟练使用html、css、js,主要工作还是搭建静态页面。进阶知识的话就是响应式这一块了,一套代码能适配pc+手机是初级前端工程师的进阶。

2、中级前端工程师:

作为一名中级前端工程师的话,除了上面的以外,还需要会使用一些框架之类的东西,像bootstrap、jquery之类的。进阶的知识应该是ajax这一块了,当然ajax并不是很难,了解怎么与后台交互式学习ajax的关键点。

3、高级前端工程师:

想成为高级前端工程师,首先要学习的就是前端工程化,进阶框架angular、vue、react ,和jquery有着很大区别,vue是数据控制页面渲染及状态,而jquery是DOM节点控制渲染,vue渲染页面更容易更优雅。vue能够把前端项目彻底工程化,有配置文件、可以安装第三方模块、配合webpack打包、可以实现模块化开发等等,当然简单是它最大的优势。进阶就是要学习es6 7 语法、vuex、Element_ui (开发pc端框架)、vux(开发手机端框架)、Mint UI(开发手机端框架)、Nodejs(后端语言,js语法)。

以上就是小编分享的前端工程师需要学习的知识点,当然只是一个大的方面去说的,有兴趣愿意学习的,可以寻找相关的书籍学习一下,希望能帮助到你。

前端工程师需要掌握哪些知识

资料拓展阅读,web前端工程师学习知识点大纲和学习方法:

一、基础

1、H5标签;

1.1、H5引进的一些新的标签,需要注意article、header、footer、aside、nav以及HTML的标题结构;

1.2、理解浏览器解析HTML的过程,理解DOM的树形结构,及相应API;

1.3、理解HTML标签在各个浏览器上的默认样式(代理样式),理解CSS中的重置样式表的概念;

1.4、理解Canvas、SVG、video等功能性标签;

1.5、理解form、iframe标签,理解文件提交过程。

2、CSS知识

2.1、学习基础知识,包括大部分常用属性、选择器的用法,了解大多数标签基本概念,学习浏览器兼容性问题,知道兼容性的主要问题及解决方法;

2.2、深入理解盒子模型,区分块级元素、行内元素,一些重要的属性: display、float、position,

必须要会区分盒子、行内盒子的概念;

还可以学一些简单的预编译语言:sass、less;

2.3、学习常用框架,可以使用bootstrap构建项目;

2.4、学习框架的代码组织方式,包括:12格栅系统、组件化、组件的风格化等;

2.5、学习CSS 3的新功能,特别是动画效果、选择器;

2.6、学习一些CSS对象化思想,学习编写简洁性、高复用性、高健壮性的CSS;

2.7、可以看看扁平化设计,还有简洁性;

2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念。

学习方法:

多看别人的代码,优秀的设计网站,要学会使用grunt、gulp压缩CSS,display + position + float 可以组合出很复杂的效果,多练习盒子模型,尝试在不用float,且position不为absolute的情况下实现等高、等宽等布局。

3、深入学习javascript

3.1、重新学习JS语法,注意:表达式、语句、类型,主要倾向于“原生”JS哦,不要使用框架;

3.2、深入理解JS的“一级函数”、对象、类的概念,学会使用函数来构造类、闭包,学会用面向对象的方式组织代码;

3.3、深入理解JS的作用域、作用域链、this对象,理解函数的各种调用方法(call、apply、bind等)。

3.4、理解对象、数组的概念

理解对象的“[]”调用,理解对象是一种“特殊数组”,理解for语句的用法,深入理解JS中原始值、包装对象的概念(重要)。

3.5、学习一些常用框架的使用方法,包括:JQUERY、underscore、EXTJS,更高级的:backbone、

angularjs、ejs、jade比较多个框架的使用方法,总结常见用法,提高学习速度学习模块化开发(使用

require.js、sea.js等);

3.6、适当看一些著名框架的源码,比如jQuery重要的是学习框架中代码的组织形式,即设计模式;

3.7、了解JS解释、运行过程,理解JS的单线程概念,深入理解JS事件、异步、阻塞概念。

3.8、理解浏览器组成部件,理解V8的概念、学习V8的解释-运行过程、在V8基础上,学会如何提高JS性能

、学会使用chrome的profile进行内存泄露分析。

学习方法:

提高对自己的要求、多看优秀框架的源码,特别是框架的架构模式、设计模式、多学设计模式,学习原生JS、DOM、BOM、Ajax。

4、跨终端

理解混合APP的概念、理解网页在各类终端上的表现、理解网页与原生app的区同,重在约束、理解单页网站,特别要规避页面的内存泄露问题、入门nodejs,对其有个基础概念。

5、工具 

学会使用grunt进行JS、CSS、HTML 压缩,特别是模块化js开发时候的压缩,会用PS进行切图、保存icon

入手sublime、webstorm,学会使用chrome调试面板,特别是:console、network、profile、element。

二、进阶:

1、性能;

1.1、理解资源加载的过程,包括:TCP握手连接、HTTP请求报文、HTTP回复报文;

1.2、理解资源加载的性能约束,包括:TCP连接限制、TCP慢启动;

1.3、理解CSS文件、JS文件压缩,理解不同文件放在页面不同位置后对性能的影响;

1.4、理解CDN加速;

1.5、学会使用HTTP头控制资源缓存,理解cache-control、expire、max-age、ETag对缓存的影响;

1.6、深入理解浏览器的render过程。

2、http及TCP协议族

2.1、学习http协议,理解http请求-响应模式;

2.2、理解http是应用层协议,它是构建在TCP/IP协议上的;

2.3、理解http报文(请求-响应报文);

2.4、理解http代理、缓存、网关等概念,指定如何控制缓存;

2.5、理解http协议内容,包括:状态码、http头、长连接(http1.1);

2.6、学习http服务器的工作模型,对静态文件、CGI、DHTML的处理流程有个大致概念。