`

web前端工程师入门须知

阅读更多

本文是写给那些想要入门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下的加载细节:

image_thumb2

在做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组织,并制定了一些规范,虽然浏览器产商都正在努力改进并接近其规范,但现实网络环境中各种内核、各种版本的浏览器都有一席之地。解决浏览器兼容性靠经验积累,可喜的事这方面资料网上有很多。http://www.w3help.org/zh-cn/这是个很好的参考网站。

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

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

7 良好的沟通能力

优秀的前端工程师需要具备良好的沟通能力,因为你的工作与很多人的工作息息相关,比如项目经理、设计师、最终用户、开发工程师,前端工程师位于这几类人的交汇点上,这些角色的要求你都得照顾好,平衡这四类人的需求,拿出一个比较合适的方案。由此可见沟通能力对前端工程师要求更高。大家可以看看下面这篇博文:http://www.cnblogs.com/trance/archive/2011/08/31/2160617.html

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

1. W3C学习网站(http://www.w3school.com.cn/),上面的资料很全,很实用,是最好的入门资料。

2. 《javascript权威指南》

3. 《javascript+DOM编程艺术》

4. 《javascript高级程序设计》

 

 

 

 

 

.

分享到:
评论

相关推荐

    web前端工程师入门须知 推荐

    web前端工程师在现代互联网产品开发中扮演着至关重要的角色。他们不仅是将设计图转化为网页的“桥梁”,更是优化用户体验和网站性能的关键。一个合格的web前端工程师,需要熟练掌握HTML、CSS和JavaScript这三大基础...

    Web前端工程师修炼之道

    WEB前端工程师修炼之道清晰完整版 前端 web 完整版 清晰版

    大巧不工Web前端设计修炼之道.pdf

    《大巧不工:Web前端设计修炼之道》适合于经验还不够丰富的前端工作者(前端设计师、前端开发工程师、前端架构师和用户体验设计师),希望它能帮助大家从复杂、繁琐、无序的前端设计、开发和维护工作中解放出来,以...

    Web前端入门:从零开始做网站.txt打包整理.zip

    "Web前端入门:从零开始做网站.txt打包整理.zip" 这个标题揭示了我们即将探讨的主题是关于Web前端开发的基础知识,特别适合初学者。"从零开始做网站"表明这份资料将涵盖从无到有创建一个网站的全过程,包括基本概念...

    资料-Web前端入门教程资料下载地址.txt

    |- web前端培训班_web前端开发优质教程_前端工程师培训-黑马程序员.png |- HTML入门及基础02资料.zip |- HTML5入门及基础01资料.zip |- CSS3入门及提高 08资料.zip |- CSS3入门及提高 07资料.zip |- CSS3入门及提高 ...

    京东2018秋招Web前端工程师笔试题及答案.pdf

    京东2018秋招Web前端工程师笔试题及答案.pdf 本资源摘要信息涵盖了Web前端工程师笔试题及答案,涉及到多个方面的知识点,包括Ajax技术、IFrame、CSS盒模型、浏览器端存储技术、JavaScript判断对象类型、排序算法、...

    Web前端工程师技能列表[借鉴].pdf

    Web 前端工程师技能列表 本文档旨在列举 Web 前端工程师所需掌握的技能列表,以确保团队成员的基础能力达到一定的标准。根据实际项目经验,一个完备的前端产品开发团队,必须拥有以下的人才配备: 必备技能 1. ...

    WEB前端设计修炼之道.pdf

    在当前互联网时代,Web前端设计已经成为了构建良好用户体验的重要环节,它涉及到了前端开发工程师、前端设计师、前端架构师和用户体验设计师等多个新兴职业。随着用户对应用体验要求的日益提高,前端设计领域面临的...

    Web前端开发技术实战视频教程 初级入门+高级实战++专家课程+面试指导

    ### Web前端开发技术实战视频教程知识点总结 #### 一、Web前端开发概述 - **定义与重要性**:Web前端开发是指通过HTML、CSS、JavaScript等技术实现网站或应用程序的用户界面部分,确保用户能够直观地操作并获取所...

    大学生Web前端静态网页设计期末大作业(高分必看).zip

    大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页...

    中级web前端开发工程师的主要职责.docx

    中级 web 前端开发工程师的主要职责 中级 web 前端开发工程师是指在 web 前端开发领域中拥有三年以上工作经验,具备深入理解前端开发技术和框架的开发人员。他们需要与产品和设计团队紧密配合,能够有效沟通产品...

    《web 前端工程师》课程介绍.pdf

    ### Web前端工程师课程知识点解析 #### 一、课程背景与市场需求 随着互联网+时代的到来,互联网行业变得日益复杂,这不仅催生了许多新兴的职业,也推动了原有职业的转型升级。其中,“Web前端工程师”成为了备受...

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...

    【49】2017年最新web前端工程师小白零基础入门到大神全套教程下载 .txt

    根据提供的文件信息,我们可以归纳出一系列与Web前端工程师学习路径相关的知识点。这些知识点不仅涵盖了从零基础入门到高级阶段所需掌握的技术和概念,同时也反映了2017年时的Web前端技术栈及其发展趋势。 ### Web...

    Web前端工程师简历+3年经验

    前端开发简历模板-web前端开发工程师-3年 本资源摘要信息来自一份前端开发简历模板,旨在为web前端开发工程师提供一个专业的简历模板。下面将对简历中的标题、描述、标签和部分内容进行详细的知识点解读。 一、...

    初级WEB前端工程师视频教程.zip

    在本套初级WEB前端工程师视频教程中,您将系统学习并掌握成为一名合格的前端开发工程师所需的基础知识和技能。这是一条通往Web开发世界的入门之路,涵盖了从理论基础到实践应用的广泛内容,旨在帮助您建立坚实的前端...

    Delphi+Web前端开发教程基于TMS+WEB+Core框架.pdf

    **TMS WEB Core入门与配置** 要开始使用TMS WEB Core,首先需要了解基本的Web开发知识,然后配置Delphi或Lazarus环境。教程中详细介绍了如何设置TMS WEB Core,包括项目设置和自动化版本管理,确保开发者能快速上手...

    web前端初级.pdf

    Web前端是用户与网站或APP交互的第一界面,对于用户体验至关重要。本次串讲教案初级内容涵盖Web前端开发的多个基础知识点,接下来将按照教案内容逐一阐述。 首先,在Web页面制作基础这一部分,首先介绍了HTML的基本...

    Web前端开发职业技能等级标准.pdf

    1+X”Web前端人才标准 Web前端开发职业技能分为初、中、高三个等级,其中高级证书持有者具有复杂网页设计开发能力和网站架构设计规划能力;中级证书持有者具有动态网页设计开发能力;初级证书持有者具有静态网页...

    web前端工程师JavaScript基础入门路径学习专题课程

    第一阶段: JavaScript基础语法 第1课 JavaScript语法 本课程讲解JavaScript的语法、数据类型、基本算数和逻辑运算操作 第2课 JavaScript流程控制语句 掌握JavaScript中条件分支语句和循环语句的使用,用简洁的代码...

Global site tag (gtag.js) - Google Analytics