本文是写给那些想要入门web前端工程的初学者，高手请路过，也欢迎高手们拍砖。

先说下web前端工程师的价值，目前web产品交互越来越复杂，用户使用体验和网站前端性能优化这些都得靠web前端工程师去做web前端工程师是设计加开发的综合体，web前端工程师是在开发人员中最直接面向产品，面向用户的设计人员，一个开发团队的成果是要靠web前端工程师去展现，因为用户不会去关心后台的处理有多么强大 ；在设计人员中web前端工程师是直接面向开发人员的设计人员，向开发人员以一种计算机语言的方式传递其设计理念，web前端工程师在整个团队中是很关键的。

在我眼中一名合格的web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一个或两个还不行，你必须对这三门语言都很熟悉。也不是说必须对这三门语言都非常精通，但你至少要能够运用它们完成大多数任务，而无需地频繁地寻求别人的帮助。

下面说下我眼中web前端工程师要掌握的基础知识和技能：

1 网页的基本结构（HTML + CSS）

HTML是一种标记语言，而不是编程语言，最基本是标签是<html>和<body>，CSS是用来定义如何显示HTML元素的。对HTML+CSS很容易入门，但很多人不够深入，举几个例子：<meta> 标签是作什么用的？margin-left与left有什么区别，应该在什么情况下使用？再出个DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度。如果这些问题你目前还不知道，对那个布局问题几分钟内不能解决，说明你对HTML+CSS还不够深入。

2 浏览器是怎么展现网页的

不同内核的浏览器对网页的渲染是不一样的，目前浏览器都有客户端调试工具，下图展现一个google首页在IE9下的加载细节：

在做web性能优化时，对浏览器渲染及细节要进一步了解。说个比较有用的知识点：目前浏览器并行加载的上限是6，老版本的浏览器会有所不同。

3 网页的生命周期

不同的web框架下，页面的生命周期会有所不同，大体还是一样：客户端发送GET请求，服务器返回相应页面，客户端完成操作及数据，然后POST给服务器。一定要对数据的传递(前台与后台,页面之间)的细节了然于心。

4 DHTML DOM BOM  Javascript AJAX

这是Web前端开发的重中之中，大多数时候我们都在和他们打交道。说几个注意点：javascript是单线程编程，所谓的javascript异步编程只不过是计划在未来的某个时间上执行相应事件而已；详细了解DOM事件机制；客户端存储（HTML5中增加了localStorage和sessionStorage）；javascript不像服务器端语言那样严谨，调试不是很方便，所以一开始要养成严谨的javascript编辑习惯；javascript很强大很灵活，不要幻想短时间内熟练（更别说精通）它，并写些框架、类库，初始阶段还是先用熟练已成熟的框架（比如jquery）当入门；一定要熟练使用客户端调试工具。

6 服务器端语言开发经验，PS切图技术

Web前端开发介于设计与开发中间，所以两端的东西都得懂点。编辑语言是相通的，之前编写过服务器语言，对学习javascript是十分有益的，从图片转成静态HTML页面，少不了PS切图技术。

5 浏览器的兼容性

由于历史原因 ，浏览器的兼容性一直都折磨web前端工程师的地方，虽然有W3组织，并制定了一些规范，虽然浏览器产商都正在努力改进并接近其规范，但现实网络环境中各种内核、各种版本的浏览器都有一席之地。解决浏览器兼容性靠经验积累，可喜的事这方面资料网上有很多。

6 快速学习能力和主动学习意愿

web前端的发展很快，从事这一行业一定要有快速学习能力和主动学习意愿，这样才能适应web产品的要求。在web前端领域没有绝对的是与非,解决一个问题的方法有很多，但我们要找到一个更合适的方法，找到一个更合适的方法需要经验作积累，总之web前端入门容易，想熟练很难，需要更多的主动学习意愿。

7 良好的沟通能力

优秀的前端工程师需要具备良好的沟通能力，因为你的工作与很多人的工作息息相关，比如项目经理、设计师、最终用户、开发工程师，前端工程师位于这几类人的交汇点上，这些角色的要求你都得照顾好，平衡这四类人的需求，拿出一个比较合适的方案。由此可见沟通能力对前端工程师要求更高。

最后提供一些好的学习资料：

1. 《javascript权威指南》

2. 《javascript+DOM编程艺术》

3. 《javascript高级程序设计》

学习前端的同学们

欢迎加入前端学习交流QQ群：461593224

web前端工程师入门须知的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. Web前端工程师成长之路——知识汇总

    一.何为Web前端工程师?          前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...

  3. 谈谈Web前端工程师的定位

    原文地址:http://www.360doc.com/content/10/0708/17/1277406_37692580.shtml 2010-07-08  锋子chans   阅 1116  转 ...

  4. Web前端工程师成长之路

    一.何为Web前端工程师?        前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...

  5. Web前端小白入门指迷

    前注:这篇文章首发于我自己创办的服务于校园的技术分享 [西邮 Upper -- 004]Web前端小白入门指迷,写得很用心也就发在这里. 大前端之旅 大前端有很多种,Shell 前端,客户端前端,Ap ...

  6. 如何成为一名优秀的web前端工程师（前端攻城师）？

    程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种:第一种一直在问:如何学习前端?第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀. ...

  7. 如何成为一名优秀的web前端工程师（转给自己，共勉）

    来源:王子墨的博客 程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到 ...

  8. 学习web前端怎样入门？初学者赶紧看过来！

    web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...

  9. 能自学成为WEB前端工程师吗？

    自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式,web前端开发学习也是一样,但是自学web前端也是让大家充满疑问的一种学习方 自学是大家学习一门it技术的时候,都会首先考虑的一种学习方式 ...

随机推荐

  1. HDU2594 Simpsons’ Hidden Talents —— KMP next数组

    题目链接:https://vjudge.net/problem/HDU-2594 Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Oth ...

  2. YTU 2427: C语言习题 整数排序

    2427: C语言习题 整数排序 时间限制: 1 Sec  内存限制: 128 MB 提交: 391  解决: 282 题目描述 用指向指针的指针的方法对n个整数排序并输出.要求将排序单独写成一个函数 ...

  3. 小米2在Eclipse 调试，要注意下列步骤。（转）

    小米2在Eclipse 调试,要注意下列步骤.1.连接线,打开设置:USB线连接小米2,在设置-->开发者选项->USB 调是打开.如果这一步,就业在Eclipse中真机调试,下面的步骤不 ...

  4. 屏幕适配-使用autoLayout

    当遇见xib中无法删除的控件时. 将这个错误的控件拖离本xib(第一个元素.xib文件是有许多元素组成的集合),确保这个xib是正确的.重新创建一个xib文件,将这个正确的xib元素整个复制过去. 在 ...

  5. Identifier expected after this token

    Cursor cursor = db.query(true, "user", new String[]{"id","mode"}, &quo ...

  6. liunx操作系统安装<一>

    一:磁盘分区类型(1)主分区(最多四个主分区,比如window系统的C盘,D盘)(2)扩展分区,逻辑分区(为了能让磁盘多分出几个区域而存在)(3)交换分区(虚拟内存,当物理内存不足时候,作为应急存在)

  7. 【POJ 1151】 Altlantis

    [题目链接] 点击打开链接 [算法] 线段树扫描线 推荐一篇比较容易理解的线段树扫描线的文章 : https://blog.csdn.net/u013480600/article/details/22 ...

  8. codevs 等差数列

    1006 等差数列  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 给定n(1<=n<=100) ...

  9. 关于return

    return ;  相当于执行完跳转url后停止,return无返回值仅作停止作用,是指停止当前方法,是方法的终点 return null ;  代表引用类型的空值

  10. linux-3.0内核移植到fl2440开发板（以s3c2410为模板）

    1.新建kernel文件夹,用于存放内核文件 [weishusheng@localhost ~]$ mkdir kernel 2.进入kernel,上传压并解压压缩文件 [weishusheng@lo ...