史爱武：Web前端开发的岗位职责( 二 ) 来源于微信公众号：计算机大

Web前端是运行在PC端、移动端等浏览器上展现给用户浏览的网页。很直观地，从用户角度来看， Web前端开发工程师要开发出美观易用的用户界面。从浏览器角度来看，他们开发的前端用户界面要能兼容尽可能多的主流浏览器，包括IE、Chrome、Firefox、Safari、Opera、UC、QQ浏览器等PC或移动端浏览器。从显示设备来看， Web前端开发工程师还要考虑页面性能等问题，特别是在手机等移动设备和移动网络环境下的页面卡顿、资源消耗等性能问题。
所以， Web前端开发工程师的主要工作职责包括：一是开发体验良好的用户界面；二是提升Web页面的浏览器兼容性和系统性能。

文章图片
开发体验良好的用户界面
Web前端用户界面的体验至少包括两部分，一是美观，也就是呈现给用户的界面美观，能让人产生视觉舒适感；二是易用，也就是用户交互的流程与规范简单、易于理解，甚至是“傻瓜式”操作使用。
要开发出体验良好的用户界面， Web前端工程师一般要与UI/UE界面设计师合作，界面设计师完成软件的界面设计——用户界面、人机交互、操作逻辑的整体设计。界面设计师一般要完成两方面设计工作，一是静态的视觉设计，也叫“美工”工作。实际上他们承担的不是单纯意义上美术工人的工作，而是软件产品的用户界面“外观”设计。二是动态的交互设计，主要是设计软件产品的操作流程、操作规范、功能结构及组织方式等。
然后， Web前端开发工程师把静态的视觉设计和动态的交互行为设计(如交互模型、交互规范等)实现成为Web页面。 Web前端开发的流程包括：根据UI/UE设计人员设计好的效果图，利用Photoshop进行切图，切出代码中要使用的图片，比如Logo图片、按钮、提示标志，等等；使用HTML、CSS、JavaScript等技术、库和框架实现效果图的Web页面，同时需要和后端人员交流所需要调用的后端程序接口API或数据库；将最终完成的前端页面交给后端人员集成，基于后端的相关数据来测试前端界面是否正常。
分别地， Web前端开发工程师要和UI/UE设计师和后端人员交流和合作。他们要用HTML/CSS/JavaScript编程语言来实现设计师的视觉设计和交互设计，主要利用HMTL与CSS构建页面（HTML将元素进行定义， CSS对展示的元素进行定位），用JavaScript完善交互以及用户体验，包括弹出层、页签切换、图片滚动、AJAX异步请求等。 Web前端开发工程师与后端人员的合作工作主要是数据交互的程序接口API和数据表的内容，也就是利用JavaScript调用后端提供的交互接口API或者直接用SQL语句访问后端的数据库。
提升Web页面的浏览器兼容性和系统性能
浏览器种类多，而不同浏览器的内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也就导致了Web页面的浏览器兼容性问题。 Web页面需要在主流浏览器（如IE、Chrome、Firefox、Opera、Safari ，国内的360、QQ等浏览器基本是基于Chrome内核的）上正常运行，就需要处理好浏览器的兼容。
浏览器兼容性问题又被称为网页或网站兼容性问题。不同浏览器内核及所支持的HTML/CSS/JavaScript等前端语言标准不同，不同的浏览器对同一段代码有不同的解析，造成页面显示效果不一致。所以， Web前端开发人员经常会碰到并必须要解决这些浏览器的兼容性问题，既要涉及不同种类的浏览器的兼容问题，也要考虑同一种类浏览器的不同版本的兼容问题。
按Web前端三种开发语言来分类，浏览器的兼容问题一般分为HTML兼容、CSS兼容和JavaScript兼容。 HTML相关兼容问题一般比较容易处理，无非是高版本的HTML文件用了一些低版本浏览器无法识别的新标签、新元素等，导致低版本浏览器无法解析，特别是下一代的HTML标准HTML5增加了许多新的特性。 CSS兼容性问题就需要开发特定于浏览器的CSS代码语句来解决，无论哪种浏览器，它能解析对应的CSS代码确保无缝的用户体验。在JavaScript中，各个浏览器基本语法差距不大，其兼容问题主要出现在各个浏览器的实现上，尤其对事件的支持（如事件的绑定方法函数、事件的捕获方式、事件处理的属性传入等）有很大不同。尽管各种浏览器支持的JavaScript的差异还是不少的，但是具体实现过程中Web前端开发工程师对JavaScript的兼容性问题却不是很头疼，主要因为开发过程中一般都会使用开源的成熟的类库或自己团队积累多年形成的类库，这里面的JavaScript浏览器兼容性问题基本都解决了。