如何系统学习Web前端开发技术？_惠州前端培训学校

如何系统学习Web前端开发技术？下面惠州北大青鸟老师给大家分享一下，希望对大家有帮助。

一、语言基础

JavaScript：

§ 作用域链、闭包、运行时上下文、this

§ 原型链、继承

§ NodeJS基础和常用API

CSS：

§ 选择器

§ 浏览器兼容性及常见的hack处理

§ CSS布局的方式和原理(盒子模型、BFC、IFC等等)

§ CSS 3，如animation、gradient、等等

HTML：

§ 语义化标签

二、进阶

JavaScript：

§ 异步控制(Promise、ES6 generator、Async)

§ 模块化的开发方式(AMD、CMD、KMD等等)

§ JavaScript解释器的一些相关知识

§ 异步IO实现

§ 垃圾回收

§ 事件队列

§ 常用框架使用及其原理

a. jQuery：基于选择器的框架，但个人认为不能叫框架，应该算工具库，因为不具备模块加载机制，其中源码很适合阅读钻研

b. AngularJS/Avalon等MVVM框架：着重理解MVVM模式本身的理念和双向绑定的实现，如何解耦

c. underscore：优秀的工具库，方便的理解常用工具代码片段的实现

d. polymer/React：组件化开发，面向未来，理解组件化开发的原理

e. CSS和HTML：主要是CSS3的特性和HTML5的特性，以及浏览器处理的流程和绘制原理

f. DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程

g. 解析HTML、CSS、JavaScript时造成的阻塞

HTML5相关

§ SVG及矢量图原理

§ Canvas开发及动画原理(帧动画)

§ Video和Audio

§ flex box布局方式

§ icon fonts的使用

常用NodeJs的package：

§ koa

§ express

§ underscore

§ async

§ gulp

§ grunt

§ connect

§ request

一些理念：

§ 响应式Web

§ 优雅降级、渐进增强

§ don`t make me think

§ 网页可用性、可访问性、其中的意义

§ SEO搜索引擎优化，了解搜索引擎的原理

§ SPA的好处和问题

性能优化：

§ 减少请求数量(sprite、combo)

§ 善用缓存(application cache、http缓存、CDN、localstorage、sessionstorage，备忘录模式)

§ 减少选择器消耗(从右到左)，减少DOM操作(DOM和JavaScript解释器的分离)

§ CSS的回流与重绘

三、项目

版本管理：(首推Git，用过Git都不会想用SVN了)

§ Git：本地版本管理的机制

§ SVN：远程中心的版本管理机制

自动化构建：主要就是less、模板、coffee等的预处理以及对代码压缩和合并

Gulp：基于流构建，速度快、模块质量好

Grunt：独立任务构建，速度慢，配置蛋疼，灵活性高

预处理和模板引擎

§ less：语法简单，但功能有限

§ jade、ejs、velocity等模板引擎，各有各的长处

§ coffee：python工程师最爱，我没用过

环境搭建：主要是将线上代码映射到本地，并在本地启动一个demo服务器，至于模拟数据的mock，见仁见智了

本地代理：ihosts

自动化测试：在业务较为稳定的情况下，可以通过自动化测试来减少测试的事件，但需求较多的时候，维护测试用例的成本会很高，可能用自动化测试会起到反效果

jasmine

mocha

生态系统

npm

bower

spm

搭建一个属于自己的博客

git pages

hexo

jekyll

Web Componets：面向未来的组件化开发方式

HTML模板

Shadow DOM

Custom Elements

HTML Import

移动端Native开发：这也是需要了解的，以后Web前端工程师会经常地和Webview打交道，也要了解native开发。

当然，以上分享的技能能够帮助你成为一个合格的Web前端工程师。不管学习什么内容，基础是很重要的，学习Web前端技术也是一样的，技术知识打牢，多看多问多敲代码。相信坚持就可以学会这门技术，也可以去全面系统学习一下。

想学前端的同学们，可以来惠州北大青鸟新方舟校区详细了解。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟