前端工程师在当今社会的价值.doc

高职高专论文 前端工程师在当今社会的价值 高建计算机信息管理66252013662527姚小兵姓 名 所学专业 所在班级 学 号 指导教师 提交日期 2016年5月27 山西林业职业技术学院信息工程系毕业设计任务书 专 业：计算机信息管理班 级： 6625 姓 名： 高 建 毕业设计题目： 前端工程师在当今社会的价值 指导教师姓名： 姚小兵 负责人签字： 2016年 5 月 27日内容和要求（指导教师填写）： 指导教师（签字）： 年 月 日山西林业职业技术学院学生毕业论文（设计）质量评价方案评价单元评价要素评价内容选题质量选题目的符合高职教育培养目标，体现专业特点要求，达到综合训练目的理论意义或实际价值符合学科的理论发展，有一定的科学意义；符合社会发展的需要，解决实际问题有一定的实际价值选题得当题目有科学性，难度适中，规模相当能力水平实践能力实习、实践到位、认真，有一定的实践操作能力，体现实践特点查问文献资料能力独立查阅相关文献资料，归纳总结有关科学成果综合运用知识能力运用所学专业知识分析论述实际问题，对掌握资料进行分析、整理、运用，概念清楚，论证有说服力，能解决一定实际问题研究方案设计水平整体思路清晰，结构合理，研究、设计方案完整有序方法和手段熟练运用本学科常规科学研究（设计）方法，适当运用相关手段并结合实际经验成果质量文题相符论文（设计）完整地回答了题目所设定的有关问题写作和设计水平论文论点鲜明，观点正确，论据充分，论证有力，语言流畅，书写工整，图纸完备、整洁、正确写作规范论文（设计）中的用语、格式、图表、数据、各种资料运用符合标准。工作量论文（设计）一般10000字以上成果或价值理论（设计）上有新意，对实际工作有意义答辩提纲完整的轮廓，准备认真讲解思路清晰，论点正确，条理清楚，论述充分回答问题有理有据，概念清楚，对主要问题回答正确、深入成绩评定（百分制）文字部分一般占总分的80%，依据前二项评价单元评定答辩部分一般占总分的20%，依据最后一项评价单元评定山西林业职业技术学院毕业设计评审表（指导教师填）课题名称前端工程师在当今社会的价值姓名高建学号2013662527指导教师姚小兵序号评审项目具体指标分值1课题完成量课题完成达到教学基本要求，难易程度、工作量大小合适。202调查论证根据课题任务，能独立查阅文献资料和从事其他调研。有收集、综合和正确利用各种信息的能力。153设计、计算、论证、推导综合分析科学，方案设计合理，推导正确，计算准确，论据可靠，论证充分；结构合理、工艺可行；图样绘制与技术要求符合国家标准及要求454设计说明书条理清楚、文理通顺、用语符合技术规范，图表清楚、书写格式规范化155创新有重大改进或独特见解；有一定应用价值。5总分评语：指导教师： 日期： 年 月 日山西林业职业技术学院毕业论文（设计）答辩评审表课题名称前端工程师在当今社会的价值 姓名高建学号2013662527指导教师姚小兵序号评审项目具体指标分值3报告内容思路清新；语言表达准确，概念清楚，论点正确；实验方法科学，分析归纳合理；结论有应用价值。402报告过程准备工作充分，时间符合要求。103创新对前人工作有改进或突破，或有独特见解。104答辩回答问题有理论依据，基本概念清楚。主要问题回答准确，深入。40评语：评审委员会代表： 年 月 日毕业论文（设计）评价答辩评分：指导教师评分：综合评定成绩（指导教师评分占40%，答辩评分占60%）答辩委员会负责人： 年 月 日摘 要21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且深入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。在最近几年中，前端工程师的出现，使得网站体现出更美好的界面，越来越好看的网站出现在我们的生活中，前端工程师也成为现在工作行业一个抢手的职业，只要你有过硬的技术，你就会找到一份不错的工作。现在的社会上对于前端工程师这个职业那是相当的缺乏，前端是近几年才出来的的一个有关于IT方面的职业，社会上的公司都要有关于前端这样的职员，而学校却没有关于前端的课程，说以现在社会上那是供不应求，现在每天各个求职网站都有公司在招聘前端工程师这个职位的。所以让我们现在来说说“前端工程师”在现在社会的价值。关键词：前端工程师；互联网。目 录前言 （1） 1.前端工程师的内涵（2）1.1前端工程师的简介 （2）1.2前端工程师的具体事项（3） 1.2.1前端工程师的优缺（3） 1.2.2前端工程师的要素（3） 1.2.3前端工程师的职能（4） 1.2.4前端工程师的作用（4） 1.2.5前端工程师的前景（5）2.前端工程师需掌握的技能（5）2.1最基本的技能（5） 2.1.1 HTML（6） 2.1.2 CSS（8）3.前端工程师在SEO工作中的重要性（15） 3.1.1良好的用户体验（15） 3.1.2站点代码整齐有序，高效（15） 3.1.3提升站点访问速录 （16） 3.1.4站点改版平稳过度 （16）4现在前端的招聘事实（17） 参考文献（21） 致 谢 （22）IX 前言计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大，尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，由于以上的优势，各类网站如雨后春笋般的出现。网页界面作为网站信息传达的载体，网页给人最直观的感受就是它的页面框架与构造，网页设计中的构图也足以影响到整个网站给人的感受。就网页其构图而言，其视觉表现力具有影响受众审美情感的作用。现在社会上“前端工程师”这个职业是很抢手的一个职业。所以咱们就谈谈前端公程师这个职业对于现在社会的价值。第一章 前端工程师的内涵1.1前端工程师的简介： 简介：2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷 而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。为什么它们会对自己的网站进行重构呢?有两个方面的原因：第一，根据W3C标准进行重构后，可以让前端的代码组织更有序，显著改善网站的性能，还能提高可维护性，对搜索引擎也更友好;第二，重构后的网站能带来更好的用户体验，用XHTML+CSS重新布局后的页面，文件更小，下载速度更快。网站重构的目的仅仅是为了让网页更符合Web标准吗?不是!重构的本质是构建一个前端灵活的MVC框架，即HTML作为信息模型(Model)，CSS控制样式(View)，JavaScript负责调度数据和实现某种展现逻辑(Controller)。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。DHTML可以让用户的操作更炫，更吸引眼球;Ajax可以实现无刷新的数据交换，让用户的操作更流畅。对于普通用户来说，一个网站是否专业、功能是否强大，服务器端是用J2EE+Oracle的强大组合，还是用ASP+Access的简单组合，并没有太明显的区别。但是，前端的用户体验却给了用户直观的印象。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。1.2 前端工程师的具体事项1.2.1前端工程师的优缺点：优点：现在我国web前端开发人员缺口大，一般前后端开发人员比例是1:1左右，但我国是1:3左右，可想而知web前端工程师比较吃香。缺点：就是一个字：累(以下是我回答其他人问题的答案，其实干哪一行都累!)以前会PS和DW就可以制作网页了，现在只掌握这些已远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在把网页制作都叫做web前端发开。建议必须掌握如下技术：1 掌握基本web前端开发技术：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug2 必须掌握网站性能优化、SEO和服务器端开发技术的基础知识3 必须学会运用各种web前端开发与测试工具进行辅助开发4 除了掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等5 未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术1.2.2前端工程师的要素： Web前端开发技术包括三个要素：HTML、CSS和JavaScript，但随着RIA的流行和普及，Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才算够用呢?对于很多初级前端开发工程师来说，这个问题是非常令人迷惑的。前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等;各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力;浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。1.2.3前端工程师的职能：什么是前端工程师?有人这样来表述：我们是工程师中的设计师，是设计师中的工程师。上班不干别的，就是玩，弄点效果，攒两页面，搞点创新。我们就是前端攻城狮(工程师)。当然这个表述有点轻巧、调侃的味道，工作绝对不是玩那么简单的，有时候会为一些效果的实现或优化，弄得加班加点一起开发，但其实有两一句表述是非常中肯的，那就是：我们是工程师中的设计师，是设计师中的工程师。这句话将前端工程师的角色的定位说得很准确。1.2.4前端工程师的作用： 前端工程师，在网站开发的初期，以工程师的身份来指导网页的设计，前端工程师明白程序输出的方法，指导设计师在设计的过程中避免一些不能输出的数据排版，指出哪一些阴影、透明、圆角不能大范围的使用等等;在进行页面重构的过程中，又将以一个设计师的身份将设计页面转化为静态页面，需要用代码对设计页面进行最初的还原，实现好相应的前台效果，排列好相应让后台开发的工程师输出数据的地方，以适应后台数据的输出并保持页面的不变形、不走位，在有数据输出正常的情况下，配合程序去修改样式，以尽量达到和设计的效果基本一致。所以在这个页面设计和到程序的实现过程中，需要前端工程师起到一个桥梁的作用。前端开发是一项很特殊的工作，前端工程师的工作说得轻松，看似轻巧，但做起来绝对不是那么的简单。在开发过程中涵盖的东西非常宽广，既要从技术的角度来思考界面的实现，规避技术的死角，又要从用户的角度来思考，怎样才能更好地接受技术呈现的枯燥的数据，更好的呈现信息。简单地说，它的主要职能就将网站的数据和用户的接受更好地结合在一起，为用户呈现一个友好的数据界面。1.2.5前端工程师的前景：前端工程师是是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。互联网的发展速度迅猛，网页由Web 1.0到Web 2.0，再到新生的HTML5、CSS3，到现在手机、3G网络等新科技的兴起，网页也由最原先的图文为主，到现在各种各样的基于前端技术实现的应用、交互和富媒体的呈现，更多的信息、更丰富的内容、更友好的体验，已经成为网站前端开发的要求，网站的前端开发发生了翻天可覆地的变化。网站的开发对前端的需要越来越重要，高质量的前端开发工程师将会是后五年内一个非常热门的职业，发展的前景非常可观。计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大，尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，由于以上的优势，各类网站如雨后春笋般的出现网页界面作为网站信息传达的载体，网页给人最直观的感受就是它的页面框架与构造，网页设计中的构图也足以影响到整个网站给人的感受。就网页其构图而言，其视觉表现力具有很好的冲击力，吸引人们的眼球。.第二章 前端工程师需掌握的技能2.1前端工程师的基本技能： 作为一个前端工程师，需要掌握的技能还真的不少。最基本的三个技能：HTML、CSS、JavaScript这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。2.11 HTML：指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，现在已经发展到4.01版了，得力于W3C建立的标准和规范，现在已普遍升级到了 XHTML，XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。另外，W3C 与 WHATWG 合作创建一个新版本的 HTML，就是HTML5。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，为HTML世界注入更多惊喜，尽管HTML5 仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5 支持，显示出来的生机和活力已是那样的激奋人心，特别是前端的工作中，那些针对浏览器兼容的问题将能得到很好的解决，更多的效果和应用也能更方便的实现。前端工程师，也必然要与时俱进，紧跟业界时代发展的前沿，不然永远只停留在旧的技术上，只会被无情的淘汰。其实HTML的元素也就不过几十个，常用的元素更少，所以掌握起来的话应该不困难。但就是这些看似简单的元素，很多新手在刚开始的时候就不注意规范，养成一些不好的习惯。1、不要忽略一些细节img必备和可选的参数都有写了上了，但是必备参数里的一个值alt没写(其实一些大型的专业门户网站其实也是有存在一些小问题的，只要我们细心一点就能发现)。虽然这样alt不写，在页面中也不会有任何的问题，因为这个alt属性也只是在图像丢失、禁用或加载不到的情况下才显示，但是如果一些其他特定的设备访问或一些其他条件下图片不显示的情况下，那这里就是一块大红XX和一大块白块，多影响用户体验。虽然只是一个小小的alt属性，但是有时候是细节决定决定成败，用与不用，表面上看不出有什么问题，但是在某些特定的条件产生的作用是无法估计的，也就是从这些小小的细节就可以看出一个前端工程师的水平如何。一些前端的新同学甚至什么也不填，放一张无任意命名意义的图上去就算了事，养成这样的习惯是非常不好的。2、规范语义使用标签很多同学说是学习div+css，其实这个说法是存在误区的，甚至是错误的。一个规范标准的页面是合理地使用标签，使其更加语义化，如果只是靠一堆堆的div通过层层的嵌套来布局完成的话，那么，除了div和a标签这两个标签外，所有的HTML元素都没有存在的必要了。例如这个导航可以用一个无序列表ul来就可以完成了，这样简洁明了，不需要这么多div和巨量的样式来进行控制，最重要的是语义化也比较清晰了。网页布局就像是一篇文章那样，有标题、有段落、有加强、有突出，HTML提供了这么多的元素给我们使用，就是要求我们要按照其语义来使用，该用标题的时候用标题(h)，该用段落的时候用段落(p)，该重点强调的时候用强调的强调(em、strong),而不是都不管三七二十一，千篇一律的先用div 来包裹再来进行控制。我们使用了这些相应语义的HTML元素，同样可以使用css来进行控制的，可以达到任何我们想要的布局效果的。css的魅力就在于此。研究表明， 语义化的标签，越少的嵌套，对浏览器的解析就越快，显示的速度就越快，当然对不同用户群的用户体验也就越好!特别是对于一些特殊群体和阅读设备，如盲人，使用的是阅读HTML的机器，对于一块块的div，就不知道哪里是标题哪里是正文了，只能阅读到的是这里有一整块的内容。如果使用的是语义化的标签就不一样了，即使看不到屏幕，但也知道哪里是标题哪里是标题下相应的正文。所以，我们有css这个这么神奇的东西帮助我们网页布局的时候，语义化的使用HTML 标签，用最少的嵌套和代码实现同样的效果，就是我们前端工程师所追求的。再次回到前面div+css布局的一些误区，什么是div?它的英文名是division，意思是分开、分割、分块的意思。也就是说div在网页中是用来进行分块布局或是在没有更适合的HTML元素的情况下用来配合分块布局的，如果胡乱的滥用div，那么就会犯上div控了。刚入门不久的新同学最容易会犯这种思想的。2.12 CSS：CSS (Cascading Style Sheets)指的是层叠样式表，现在普遍在用的版本是css2.1 ，虽然已经发布了3.0的版本，且有一些个人的博客和站点已经使用HTML5+CSS3了，但受目前国内的主流浏览器IE6的影响，更多的人还是在使用 2.1的版本，在这个的基本上有选择性的使用少量的不影响兼容的css3某些功能，css3的普及还需时日。不管如何，css3的出现让我们眼前一亮，增加了很多新的属性，如圆角、阴影、渐变、动画、流媒体等等的效果，让页面实现的效果更加方便和容易。现在要和大家分享的并不是css3哪些激动人心的属性如何使用和实现，因为这些当我们学习到了一定阶段的时候都会去学习到css3这个将来必将成为王者的使用，现在与大家分享一些与版本无关的东西，让大家在学习的过程中少走一些弯路。1、 Reset关于重置也有太多的东西要说了，YUI、Eric Meyer等都有各自不同的方法，甚至有些人是不用重置的，不管怎样，只要遵循一个原则：适合自己的就好。所以不对这方面过多的强求，也不作过多的讨论。因为要讨论的话几大篇幅也讨论不完。当然我自己有一个自己用的reset的地方，究竟好与不好，大家有空的时候可以研究，最好能把研究的结果与我分享，我也很愿意听。这个是我的Reset的文件，大家可以点击下载(aqy106_lab.css)2、 样式书写要注意的事项看过Efficient, maintainable CSS的译文如何书写高效、可维护、组件化的CSS，里面讲到一些样式的书写要注意的事项。还是看一看这个同样是一个新同学写的样式，看上去很整齐，命名也很有次序，但是仔细一看，问题还是很多的，先不说命名，因为这个得用另外的一个篇幅去说了。如果作为一般的小站这样写，样式的也许只是多几个K的大小的问题，在性能上影响并不大，但在大型的网站中，几个K的大小就不容忽视了。基于前人的总结，个人认为高效的css书写应该要注意：1)、精简属性写法，提高可观赏性很多属性是有精简的写法的，如padding、margin、background等等，这些写法虽然可拆可合，但我们习惯了精简的写法后，会让css更加整洁、明了，看起来更加赏心悦目，感觉写css就是一个雕刻一件艺术作品。2)、使用多重选择器，提高可重用性多重选择器的写法相信很多人都会使用，但是多重选择器的使用与进行二次编辑或多次编辑的时候会有一个矛盾，多次的修改，有可能需要重新定义的样式不同，这时候又需要重新的将原先的选择器进行分享出来单独定义，这不能不说是一件痛苦的事情，所以在使用多重选择器的时候，最好能将固定的版块进行使用多重选择器，这样大大降低你日后维护、编辑的成本。当然，这是需要你的时间和经验才能积累起来的。3)、减少层级及继承的写法，一般不轻易用id相信很多人都会考虑到重用这一高效的写法，所以越少的层级、越少的继承就为重用这一方法的实现提供了可能。也许有人会说，那我可以采用上面的使用多重选择器来进行提高css的可重用性啊。其实这里面还有另外一个原因，就是更少的层级，渲染所使用的时间更少。css的渲染与JavaScript的方式完全不一样，JavaScript的筛选直接使用id，能够精准的定位到相应的dom，但是css的层级多的话反而会影响到性能，但具体没做相应的测试。此处也许不严谨，请大家赐教，哪位大侠有空来测试一下，给一些相应的数据会有更好的说服力。但基于重用的原则，个人还是建议用最直接、有效的简短的命名，也同样就是这样的一个原则，虽然id的唯一性解决了冲突了问题，但违反了重用性的原则的同时也加大了维护和的成本，如非必要，尽量不用id。4)、命名面向属性和面向对象结合其实命名这个方面有很长的一个篇幅可以说的，因命名的方法和各个人的习惯也不样，有人喜欢用驼峰式，有人喜欢下杠线，有人喜欢缩写，也有人喜欢全写，个人认为这个主观色彩太重了，不予作过多的展开，不管哪一种，都是没有问题的。和大家分享的是另外一个问题，是样式的命名是面向属性还是面向对象呢?相信这个也会困扰着一些同学。现在就和大家分享一些我的心得。在分享我的观点之前，先跟大家解释一下什么是面向属性、什么是面向对象。面向属性就是面向css的属性来进行命名，面向对象就是面向要重构的页面的模块这个对象来进行命名。4.1面向属性命名4.2面向对象命名关于这个问题，有人觉得面向属性好，因为可以最大限度的利用好css的重用性;也有人认为面向对象好，因为面向对象可以让后期的维护更方便直接。既然各自都有好处，那我们可不可以将两者结合起来呢?答案是肯定的，而我个人也是这样做的。对于一些固定的、常用的、重用性非常高的css，可以将其按面向属性来进行命名，前面前的面向属性命名的这个图这样，也可以说是一个小小的框架或是作为一个底层来方便自己的开发，放到哪里都是可以使用，具体可以见我整理的自已用的面向属性的css(点击下载aqy106_lib.css)。另外对于于具体的版块就应该使用面向对象，针对版块的对象来进行命名，这样也让后期维护或接手的人来编辑也不会困难。163采用的也是采用面向属性和面向对象结合的方法来进行命名的。作为一名前端开发的工程师，应该要有一利节流的思想，把css的书写当作一门艺术来学习、来追求。书写出一个高效、可维护的样式往往是通向大师之路的必走之路。样式不仅仅是写给自己看的，更要给团队开发或后来接手的人看的，如果能做到简洁、高效、重用性、可读性强，相信，你离大师的级别也不远了。3、 CSS Sprite(图片精灵、背景定位技术)现在的网页，各种各样的媒体、图标、背景都是多得眼花缭乱的，特别是背景图片、图标是我们网页中使用最多的，按照以前的使用的话，插入一个个的小图标或图片用来控制来进行修饰，这些不和内容相关的图标图片也一并混排在内容中了，且页面中一大堆无关的图标图片，还不方便管理。并且还有一个很大的弊病，一个图片在页面中是一个http的请求，页面中存在n个的这样的小图标的话，对服务器的请求也就有N个，也许对于一些小站来说没什么影响，但对于一个大型网站来说的话，这个数字可就不得了，这时的服务器并发请求就会多上N乘以用户的个数，这样无疑加重了服务器的负担。而解决这个问题的最好办法就是CSS Sprite。将所有的图片整合到一张大图上，通过css来进行定位。首先能将内容和修饰的元素进行了分离;其次能减少页面请求的个数，那么减轻了服务器的负担;再次，能够提高页面加载的速度，加快页面载入速度，提升用户体验。另外，将图标图片作为背景来进行加载，都是在文档的主要内容进行加载完毕，再加载样式时才进行请求的(细心的大家也许也发现，网络不好的时候，页面加载进来的是乱七八糟的，待一会样式加载进来后，页面马上正常了，其实这个就体现到了文档加载的先后顺序，如果不相信的话，可以用小bug或相应的工具查看一下是不是这样的加载顺序)。当然，事物都是具有两面性的，将小图标小图片整合到一张图片上，虽说有百利，但仍有一害的，就是当需要更换图标或调整的时候，必须要在这张图片进行处理和定位，需要在FireWork等这些图像处理软件中定位好坐标再去写相应的CSS，会增加一定的工作量，如果身边没有这些工具，处理起来还是会有些麻烦的。但总的来说，图片整合，利大于弊，我们为何不用呢?1、 兼容性2、 以Trident为内核的IE、以Gecko为内核的FireFox、以Presto为内核的Opera、以Webkit为内核的google chrome和Safari等四大内核的浏览器四分天下。兼容性的问题相信是很多前端工程师肯定会遇到且最头痛的一个问题，且不说目前市面在有这么多的浏览器，就仅仅单一的IE系列家族的问题也够多的了，特别是IE6，虽然微软宣布了IE6的死亡和下台，但国内的机器仍以IE6为主流，IE6在国内的法消亡还需时日，作为前端开发没法规避的情况下，暂时也只能折衷的进行兼容。不过虽然繁多复杂，但我们可以化繁为简，重点问题重点处理，基本上IE6的问题解决了，也就解决最大的问题了。当然，这个IE6的问题太多了，需要用另外的篇幅去进行说明了，这里就不再跟大家再作深入的研究了，给大家提个醒，让我们一些新同学在成长过程中能够有目的地去学习、发现和处理问题就OK了。3、 图片的优化虽然现在的富媒体越来越多了，网页展现的数据从单一的图文向音频、视频、动画等类型扩展，但受限于网络传送带宽、速率等影响，图片仍以最高的可压缩比、传送速度快、展现效果好等优点作为一个主角在网页呈现和展示方面活跃着。目前网页主流的格式现在常用的也就不外乎几种：png、gif、jpg，其他一些在网页中不常用的格式暂不在本次的讨论之列。3.1图片格式知多少相信png、jpg、gif这些格式大家都能大概的了解和清楚一些使用，这里就不再细说，这里说一些使用中注意的事项或是大家不够深入了解的东西。png：png有多个不同的位数的格式：png8、png24、png32。前端的新同学们常常遇到的就是png在IE6中不透明，其实IE6是支持PNG透明的，不过只支持png8的透明而已，具体可以看我的页面中图标，就是用了png8的透明，但是png8下不支持半透明，所以顶部的这个有背景色的时候用了png32配合JS处理了一下透明效果，不然有白白的边在 IE6里太难看了。png8和gif都支持全透明和256色，所以在正常情况下两者是可以互换的，两者输出的大小也差不多，甚至png8比gif更有优势，但png8不能像gif那样做成动画。而png24和png32也有一些不同。png24在png8的基础上增加了颜色的支持数，但是没有透明信息，png32在png24的基础上增加了透明的信息。Firework和Photoshop虽然同为Adobe公司的产品，但是输出的时候也是有些不太一致的。Firework能够正常的输出各种规格的png，但Photoshop不支持8位png+alpha透明的格式，而且Photoshop中也没有32位png选项，其中的png24+ 透明实际上就是 png32(不信你可以尝试用Photoshop输出一个png24+透明的png再到Firework中