Web前端工程师初级阶段需要掌握的内容

今天小编给大家整理出来了Web前端工程师初级阶段需要掌握的内容，很全面，希望大家好好阅读，看看自己掌握的知识点和文章里面写的还相差多少。下面来和小编一起看一看吧！

一、什么是初级Web前端工程师

按照我的想法，我把前端工程师分为了入门、初级、中级、高级这四个级别，

入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的)，了解基本的html、css和javascript语法(这些语方面的东西网上随便搜一下就有很多很多，基本的语法是整个技术体系最重要的东西了，领先的

Web技术教程)，可以根据设计师的设计图在不考虑兼容性的情况下把页面做出来，了解过一些框架的使用(例如烂大街但是依然牛逼的jQuery、zepto、

bootstrap等等)。

在经历过入门的阶段，已经了解了前端要做什么，并且把基本的语法学习过了可以独立做一些简单的页面了，那么就要继续学习达到初级前端工程师的水平，对于初级的前端工程师需要了解的就特别多了，需要对整个前端有一个清晰的认识，并且熟练使用各种技术，我感觉在校的学生达到初级水平就可以通过bat的校招笔试

面试了。

初级前端工程师：首先要知道的就是如何处理各种浏览器的兼容处理(比如说在IE浏览器中的createElement有什么不同等等内容)，现在基本上每个公司在招聘的时候都会要求熟练html5,

css3,javascript，这个熟练的意思就是信手拈来。

在下面会说初级前端工程师应该具体的学习哪些知识，然后就是要了解各种css的预处理器和后处理器，还有会使用常见前端的MV框架(angularjs,

backbone，reactjs等等)并知道这些框架的原理，另外就是要熟练使用nodejs，要会使用基于node的各种前端构建工具

(grunt，gulp等等)，熟练使用github或gitlab，对模块化、组件化、工程化、语义化有一个比较深入的了解，最后要知道如何开发移动端

的页面，如何去优化一个页面的性能。

二、初级Web前端工程师的技术体系

(一)HTML部分

首先是要掌握一些常用标签的使用和他们的各个属性，这些常用的标签我总结了一下有以下这些：

html：页面的根元素。head：页面的头部标签，是所有头部元素的容器。body：页面的主体标签，页面展现的内容就放置在这里面。title：页面的标题。meta：位于文档的头部，提供页面的元信息，包括关键字、描述等等。link：定义文档与外部资源的关系，最常用的用途就是引入样式表。script：脚本标签，可以把js脚本代码放置在这个标签内，也可以使用这个标签的src属性引入一个外部标签。style：样式标签，可以把css代码写在这个标签中。a：超链接，href属性代表要链接到的地方，target属性代表打开方式。img：图像标签，src属性表示的位置。form：表单元素，它内部的input、select、textarea等标签都是比较重要的。div：定义文档中的分区或节，可以使用div来进行页面的布局等 *** 作。另外还有ul、li、p、button、iframe、p、table等标签也很常用，nav、section、article、header、aside、footer等语义化标签也需要了解一下。

除了要了解上面这一些标签之外，还需要对一些新的HTML5的API有一定的了解：

·audio、video标签。

·Canvas：定义图形，比如图表和其他图像。

·input标签的accept属性，email、phone、url等类型。

·getElementByClassName根据class名来获取一个元素结点。

·Multiplefileselection多文件选择属性。

·html的import、template

·process标签，WebGL等内容。

还有一些要知道的知识点：

1

doctype的作用。2unicode、utf8等编码的原理和区别。3如何进行页面性能优化。4png、jpg、Webp、gif等格式的不同的优势。5HTML行内元素与块级元素的区别。6移动Web端开发常用head标签。7Web语义化。8浏览器中的缓存原理

(二)CSS部分

关于css这一块，我的看法就是网上下载一个chm格式的css的参考手册，然后根据手册里面写的一个个的都敲一下。

css大体分为下面这几块知识点：

①定位布局

1position属性的7个值(static|relative|absolute|fixed|center|page|

sticky)分别有什么作用和不同

2实现品字形布局或者是三栏布局(左右宽度固定，中间适应屏幕)。

3浮动与清除浮动的方法，flex布局，grid布局。

②盒子模型

1margin、padding、border这三个属性。

2伸缩盒相关内容。

3Multi-columnLayoutModule多列布局模型。

③文本字体

1强制换行与不换行，清除空白。

2文本对齐、大小(如何设置chrome小于12px的字体)、缩进、转换。

3单位(em、rem、px等)，颜色(rgb、rgba，hls)。

④变换、过渡和动画

1transform的各种取值的作用与兼容性。

2transition过渡的动画类型，贝塞尔曲线的原理。

3animation动画的各种设置，@keyframes规则。

4浏览器的重绘与重排。

⑤选择器

1选择器的分类，权值和优先级。

2有哪些属性可以被继承，哪些属性没法继承。

3伪类和伪元素分别是什么，有什么作用。

上面这些都是基础的东西，除了这些基础的内容之外需要了解Less、Sass、stylus等css预处理器，这将会大幅度提升你的css开发效率，也需要了解一下Autoprefixer、PostCSS等css后处理器。

(三)JavaScript部分

在这里就不说js的基础知识了，我把js按照语法的层次和使用的层次分为了两大块。

按照语法的层次来说：

首先是javascript的面向对象方面的内容：在javascript中实现封装、继承和多态。

①封装：在js中可以通过闭包、作用域和作用域链来实现封装，ES6的const、let的作用。②

继承：基于原型链的继承、基于构造函数的继承、组合式继承、寄生式继承等，外加ES6的class关键字，prototype和__proto__。③

多态：在javascript中多态是使用arguments来实现的，关于arguments会引申出来很多内容：1arguments的caller、callee等方法的作用。2方法的apply和call的作用和不同。3使用Arrayprototypeslicecall来把一个数组对象转化为数组。4array的各种方法，如shift、splice、push、filter、map、reduce、forEach等等。

然后是Js的设计模式，比如说那三种工厂模式啊，建造者模式啊等等。

最后是在不同情况下的this分别都代表什么。

按照使用的层次来说：

首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的locationhash、postMessageAPI、Websocket、服务器代理等等。

然后是tcp协议、udt协议以及>

阶段1前端核心基础

HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和

BOM编程、jQuery框架

阶段2HTML5 + CSS3 + 移动端核心

HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练

阶段3移动端

移动端核心、移动端适配、移动端特效

阶段4服务器端

服务器端开发、数据库 *** 作、前后端交互核心、微信公众号开发

阶段5JavaScript高级

JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、

JavaScript函数式编程JavaScript设计模式

阶段6前端必备

性能优化、版本控制工具、模块化、项目构建工具

阶段7高级框架

React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析

阶段8小程序

原生小程序入门、原生小程序API使用、小程序框架Mpvue

前端学习路线图

这个学习路线图你按照顺序学习就可以了，希望对你有帮助。

点透事件是一种常见的前端开发问题，指的是当一个标签被点击时，它下面的元素也会接收到点击事件的情况。这种现象在移动端上比较常见，因为移动设备的触控屏幕响应速度较慢，可能会导致用户快速点击元素时发生点透事件。

解决点透问题的方法有很多种，其中比较常见的方法包括：

1 使用 touchend 替换 click 事件：在移动端中，用户触摸屏幕结束时才会触发touchend事件，使用touchend来替换click事件可以避免出现点透问题。

2 延迟处理点击事件：在触发点击事件之前，先将点击事件延迟一段时间（如300ms）进行处理，如果在这段时间内出现了滑动等 *** 作，就取消点击事件的处理。

3 禁用元素的指针事件：使用pointer-events属性来禁用元素的指针事件，这样点击事件就不会向下传递给被覆盖的元素。

4 使用CSS overflow属性：使用CSS overflow属性将父级元素的溢出部分裁剪掉，这样就可以避免子元素接收到点击事件。

总之，解决点透事件需要我们根据具体情况选择合适的方法，以确保用户体验的良好。

据统计 目前全世界 %的网站使用它 也就是说 个网站里面 有 个使用jQuery 如果只考察使用工具库的网站 这个比例就会上升到惊人的 %

虽然jQuery如此受欢迎 但是它臃肿的体积也让人头痛不已 jQuery 的原始大小为 KB 优化后为 KB 如果是支持IE 的jQuery 原始大小为 KB 优化后为 KB

这样的体积 即使是宽带环境 完全加载也需要 秒或更长 更不要说移动设备了 这意味着 如果你使用了jQuery 用户至少延迟 秒 才能看到网 页效果 考虑到本质上 jQuery只是一个 *** 作DOM的工具 我们不仅要问 如果只是为了几个网页特效 是否有必要动用这么大的库？

年 jQuery诞生的时候 主要用于消除不同浏览器的差异（主要是IE ） 为开发者提供一个简洁的统一接口 相比当时 如今的情况已经发生了很大的变化 IE的市场份额不断下降 以ECMAScript为基础的JavaScript标准语法 正得到越来越广泛的支持 开发者直接使用JavScript标准语法 就能同时在各大浏览器运行 不再需要通过jQuery获取兼容性

下面就探讨如何用JavaScript标准语法 取代jQuery的一些主要功能 做到jQuery free

一 选取DOM元素

jQuery的核心是通过各种选择器 选中DOM元素 可以用querySelectorAll方法模拟这个功能

var $ = document querySelectorAll bind(document);

这里需要注意的是 querySelectorAll方法返回的是NodeList对象 它很像数组（有数字索引和length属性） 但不是数组 不能使用pop push等数组特有方法 如果有需要 可以考虑将Nodelist对象转为数组

myList = Array prototype slice call(myNodeList);

二 DOM *** 作

DOM本身就具有很丰富的 *** 作方法 可以取代jQuery提供的 *** 作方法

尾部追加DOM元素

// jQuery写法 $(parent) append($(child));

// DOM写法 parent appendChild(child)

头部插入DOM元素

// jQuery写法 $(parent) prepend($(child));

// DOM写法 parent insertBefore(child parent childNodes[ ])

删除DOM元素

// jQuery写法 $(child) remove()

// DOM写法 child parentNode removeChild(child)

三 事件的监听

jQuery的on方法 完全可以用addEventListener模拟

Element prototype on = Element prototype addEventListener;

为了使用方便 可以在NodeList对象上也部署这个方法

NodeList prototype on = function (event fn) { [][ forEach ] call(this function (el) { el on(event fn); }); return this; };

四 事件的触发

jQuery的trigger方法则需要单独部署 相对复杂一些

Element prototype trigger = function (type data) { var event = document createEvent( HTMLEvents ); event initEvent(type true true); event data = data || {}; event eventName = type; event target = this; this dispatchEvent(event); return this; };

在NodeList对象上也部署这个方法

NodeList prototype trigger = function (event) { [][ forEach ] call(this function (el) { el[ trigger ](event); }); return this; };

五 document ready

目前的最佳实践 是将JavaScript脚本文件都放在页面底部加载 这样的话 其实document ready方法（jQuery简写为$(function)）已经不必要了 因为等到运行的时候 DOM对象已经生成了

六 attr方法

jQuery使用attr方法 读写网页元素的属性

$("#picture") attr("src" "//url/to/image");

DOM元素允许直接读取属性值 写法要简洁许多

$("#picture") src = "//url/to/image";

需要注意 input元素的this value返回的是输入框中的值 链接元素的this href返回的是绝对URL 如果需要用到这两个网页 元素的属性准确值 可以用this getAttribute( value )和this getAttibute( href )

七 addClass方法

jQuery的addClass方法 用于为DOM元素添加一个class

$( body ) addClass( hasJS );

DOM元素本身有一个可读写的className属性 可以用来 *** 作class

document body className = hasJS ;

// or

document body className += hasJS ;

HTML 还提供一个classList对象 功能更强大（IE 不支持）

document body classList add( hasJS );

document body classList remove( hasJS );

document body classList toggle( hasJS );

document body classList contains( hasJS );

八 CSS

jQuery的css方法 用来设置网页元素的样式

$(node) css( "color" "red" );

DOM元素有一个style属性 可以直接 *** 作

element style color = "red";;

// or

element style cssText += color:red ;

九 数据储存

jQuery对象可以储存数据

$("body") data("foo" );

HTML 有一个dataset对象 也有类似的功能（IE 不支持） 不过只能保存字符串

element dataset user = JSON stringify(user);

element dataset score = score;

十 Ajax

jQuery的Ajax方法 用于异步 *** 作

$ ajax({ type: "POST" url: "some php" data: { name: "John" location: "Boston" } }) done(function( msg ) { alert( "Data Saved: " + msg ); });

我们可以定义一个request函数 模拟Ajax方法

function request(type url opts callback) {

var xhr = new XML>

1 设置元素浮动后，该元素的 display 值是多少( A )

    Ablock B 不变 C inline D inline-block

2 以下不是 canvas 的⽅方法是( D )

    AgetContext() B fill() C stroke() Dcontroller

3 不是 input 在 html5 新的类型的是( B )

    Adatetime B file C color D range

4 对权重排序正确的是( C )

a)  list box p

b)  #list box div span

c)  list span

d)  #list #box

e)  p:last-child

f)  style

Af>d>b>a>c>e

C f>d>b>a>c=e

B f>d>b>a>e>c

D f>b>d>a>c=e

5对 document load 和 document ready 描述正确的是( B )

    A$(document)ready()是当页⾯所有资源全部加载完成后，执

    ⾏⼀个函数

    B如果图⽚资源较多加载时间较长，onload 后等待执⾏的函数

    需要等待较长时间，所以⼀些效果可能受到影响

    Conload 是当 DOM ⽂档树加载完成后执⾏⼀个函数

    D⼀般来说 load 会比$(document)ready()较快执⾏

6["1", "2", "3"]map(parseInt) 答案是多少( A )

    A[1, NaN, NaN]            B [1, 2, NaN]

    C[NaN, NaN, NaN]      D [1, NaN]

7以下对 Ajax 描述不正确的是( A )

    AreadyState 属性请求的状态，当值为 3 时是正在加载

    B使用 XML 和 XSLT 进⾏行数据交换及相关 *** 作

    C总共有 8 种 callback

    Dabort()⽅法，停⽌当前请求

8var temp=null，alert(typeof temp)d出的结果是( B )

    ANull     B Object     C Undefined     D String

1 对XML>

方法：

第一：理清Web前端的知识结构。要想高效学习Web前端知识，首先应该搞清楚Web前端都包括哪些技术结构。Web前端开发虽然技术难度并不高，但是技术细节却比较多，内容也比较杂。Web前端的基础包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是学习的重点，也是难点。另外，vue等框架也是需要熟练掌握的。

第二：紧跟技术发展趋势。目前Web前端的技术发展趋势有三个，其一是前端开发数据化;其二是前端开发高效化;其三是前端开发全栈化。前端开发数据化主要是大数据发展的影响，在大数据的推动下，Web前端逐渐涉及到了大量的数据展示任务。前端开发高效化主要体现在Web前端正在进行独立部署，前端与后端的沟通主要通过资源接口的方式来进行。前端开发全栈化也是一个比较明显的趋势，比如Nodejs的应用。

第三：注重动手实践能力的培养。学习前端开发一定要注重动手实践能力的培养，因为前端开发的细节比较多，所以只有多 *** 作才能逐渐熟悉。

前端开发目前被称为“大前端”，整个前端开发也被赋予了更多的含义，包括Web前端开发、移动端开发、大数据呈现端开发以及部分后端开发任务等等。所以，想要在前端行业中走的更远，一定要注重知识结构的丰富性。

与其他编程语言相比，前端是公认的入行门槛较低的一门语言，但依然有很多人在学习之前会问零基础学习web前端难不难，要多久才能学会。学习的难易和时间当然是取决于学习的方式。

前端入门简单，但是深入学习之后，还是有一定学习难度的。如果你是零基础自学web前端的话，那么所花费的时间与精力是不可估计的。 如果系统学习5个月的时间可以帮助你快速成长为合格的web前端工程师。

路线：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、>

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vuejs开发WebApp项目、应用Reactjs开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：Nodejs全栈开发(1周)

内容包括：(WebApp后端系统开发、一、Nodejs基础与Nodejs核心模块；二、Express；三、noSQL数据库)

至于视频教程，我这里有很多前端的全套教程，如果你需要的话，可以加一下我的学习交流裙裙，找我要就行了！

以上就是关于Web前端工程师初级阶段需要掌握的内容全部的内容，包括:Web前端工程师初级阶段需要掌握的内容、自学前端，谁有前端学习路线图吗、可以用来处理点透事件的是等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！