随着互联网的发展速度迅猛, web 前端工程师越来越火热, 想学习 Web 前端开发吗 ? 若想成为 Web 前端工程师需要掌握哪些知识? 今天小编总结了成为 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 的区同, 重在约束
理解单页网站, 特别要规避页面的内存泄露问题
入门 Node.JS, 对其有个基础概念
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 的处理流程有个大致概念
3, 安全性
XSS,SQL 注入
学 Web 前端的内容很多, 很多新手在自学过程中遇到问题没有人指导就很容易迷失, 时间久了就会失去信心, 心灰意冷容易放弃. 因此, 如果大家对于学习 Web 前端有任何问题 (学习方法, 学习效率, 如何就业) 可以加我的 Web 前端开发裙: 前三位 484, 中间三位 757, 最后是 760, 会有老师分享干货学习视频, 帮助大家分析解答问题, 欢迎大家加入, 更有项目实战弥补新人经验的不足, 以免就业难. 让你成为一名优秀的程序员!
来源: http://www.jianshu.com/p/3aca4068aa0a