概述

Web前端开发是从网页制作演变而来的，涵盖的知识面非常广，基本的开发技术包括Xhtml、CSS3、DOM、JavaScript、Ajax等。一个优秀的Web前端开发工程师不仅需要掌握这些技术，还需要有一定的后台知识、对网站构架有一定了解，还要掌握一定的SEO网站优化技术。

前端开发工程师的主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化，把网站的界面更好地呈现给用户。

另外，一名合格的前端开发工程师，应该具有一定的审美能力和基础的美工操作能力，能很好地与交互及视觉协作。

发展现状

前端开发虽然起步时间晚，但是发展势头迅猛，XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，在各种新技术、新标准的推动下，各大互联网公司也开始重视Web产品的前端重构与开发，包括中国内地知名互联网网站的各种规模的IT企业都对自己的网站进行了重构，使用了HTML5中的新特性。

Web前端整体技术的发展和前端工程师个人的能力是相辅相成的。目前，前端工程师很多是“半道出家”，一部分是从页面UI开发转行为Web前端开发的，一部分则是由后端工程师转行而来，所以前端工程师普遍自学成才，并没有受过足够的专业训练，也缺乏实际的项目经验。Web前端在技术方面也存在着大量的挑战，大量旧的网站需要重构来提高网站用户体验和性能等。这些网站的前端代码普遍存在的问题有：代码组织混乱，CSS代码和JavaScript代码混合在HTML代码中；代码的格式问题突出，不够整洁；页面布局随意，HTML代码不符合标准；网站整体性能差，还没有意识到要去应用诸如缓存、动态加载、脚本压缩、图片压缩等提高性能的技术。^[1]

Web前端开发的现状可以概括为：前端技术发展迅速，但起步较晚，基础薄弱；前端工程师热情高涨，但缺乏足够技能培训，对代码规范重视不足，对一些基础原理的理解不够深刻。

重要性

网站重构的本质是构建一个前端灵活的类MVC框架，即HTML作为信息模型，CSS控制样式(View)，JavaScript负责调度数据和实现某种展现逻辑(Controller)。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。

DHTML可以让用户的操作更吸引眼球；Ajax可以实现无刷新的数据交换，让用户的操作更流畅。对于普通用户来说，一个网站是否专业、功能是否强大，服务器端架构技术并没有太明显的区别。但是，前端的用户体验却给了用户直观的印象。

网站重构作用：

1)根据W3C标准进行重构后，可以让前端的代码组织更有序，显著改善网站的性能，还能提高可维护性，对搜索引擎也更友好。

(2)重构后网站能带来更好的用户体验，用XHTML+CSS重新布局后的页面，文件更小，下载速度更快。

流程

Web前端开发的大致流程如下：

1)根据设计好的效果图(一般是一些psd文件)开始利用Photoshop进行切图，切出需要的图片。

2)使用HTML、CSS、JS等技术开始实现效果图的页面，同时需要和后台人员交流为后台数据留下借口和数据填充的区域等。^[2]

3)将最终前端完成的页面交给后台，由后台人员填充后台数据。如下案例：

（1)效果图页面如图1所示。

(2)HTML代码：

<div id="goodsList">
<divclass="goodsItem">
<div class="goodsItemWrap">
<div class="goodsImg">
<a href="#"><imgsrc="img/goods/1.jpg"/></a>
</div>
<p class="goodsPrice">
<em><b>￥</b>6</em><span class="average">
6 元/个</span>
</p>
<p class="goodsTitle">
<a href="#">Zespri 佳沛新西兰阳光金</a>
</p>
<p class="goodsStatus">
<span>月成交<em>6000</em>笔</span>
<span class="norightborder">月评价<em>
</div>
</div>
</divclass="goodsItem">…
</div>
</div>

(3)CSS代码：

#goodsList{
width:1210px;
height:auto;
margin:20px auto 0px;
overflow:hidden;
}
#goodsList.goodsItem{
width:220px;
height:330px;
margin:0px 22px 22px 0px;
/* background:pink; */
overflow: hidden;
float: left;
/* position:relative; */
/* z-index: 1; */
}
#goodsList .goodsItem .goodsItemWrap{
/* position: absolute; */
width:220px;
height:315px;
background-color: #fff;
margin:0px;
padding: 4px;
border: 1px solid #f5f5f5;
border-radius:3px;
} /* .
goodsItem:hover .
goodsItemWrap{
height:auto;
margin:-3px;
border:4px solid #bc0000;
border-radius: 0;
} */
.goodsImg{
/* position:relative;
display: block;
table-layout: fixed; */
height:210px;
width:210px;
padding:0;
margin:0;
margin-bottom:5px;
} .
goodsImg a, .
goodsImgimg{
/* display:table-cell; */
max-height: 210px;
max-width: 100%;
/* text-align: center;
vertical-align: middle; */
} .
goodsPrice{
font-family: arial,verdana,sans-serif! important;
color:#c00;
font-size: 14px;
height:30px;
line-height: 30px;
margin:0 0 5px;
/* letter-spacing: normal; */
/* overflow:inhert! important; */
white-space: nowrap;
} .
goodsPriceem{
font-style:normal ;
font-weight: 400;
font-size: 20px;
} .
goodsPriceemb{
margin-right: 2px;
font-weight: 700;
font-size: 14px;
/* vertical-align: middle; */
} .
goodsPrice .
average{
/* display:inline-block; */
white-space: nowrap;
padding:0 5px;
color: #999;
} .
goodsTitle{
color:#666;
height:30px;
line-height: 30px;
margin-bottom: 3px;
overflow:hidden;
} .
goodsTitlea{
color:333;
} .
goodsTitle a:hover{
color:#c00;
} .
goodsStatus{
height:32px;
border:0;
border-top:1px solid #eee;
margin-bottom: 0;
color:#999;
overflow:hidden;
} .
goodsStatus span{
display:inline-block;
float:left;
border-right: 1px solid #eee;
width:45%;
padding:10px 1px;
margin-right: 6px;
line-height: 12px;
font-size: 12px;
text-align: left;
} .
goodsStatusem{
color:#b57c5b;
font-size: 12px;
font-weight: 700;
}
span.norightborder{
border-right: 0px;

(4)与后台开发人员交接，将前端完成的页面交给后台。

设计节点研究

从历史沿用分析来看，Web发展经历了HTML技术、css2．0站点构建和维护，并最终形成了CSS+DIV为主要技术的页面重构技术。且以java script的成熟语言和相关应用产品的及其制作网站、SNS、网页游戏、博客、微薄等的相继涌现为特征，并租金形成了网站制作设计的前段开发领航者。^[3]

目前的开发研究中，以用户体验”的为中心的前端开发中，设计、可用性、前端开发、UED团队的的技能型要求中，得到了相关程度的提高。偏重软件开发技术中，以通JavaScript、Ajax等Web开发技术：HTML/XHTML、CSS等网页制作技术；(C/C++／PHP/Java等1算法、数据结构以及后台开发；W3C标准及其数据分离、Web语义化等理解的开发设计，在应用领域实践中获得了极大程度的提高。^[4]

web前端开发的技术条件，对各种页面布局，面向对象编程，JS模块化编程，设计模式，前端MVC的基础掌握；网站性能优化设计条件SEO及其HTTP请求次数、cssSprites图片整合技术等；且还需要学会uI设计，前端工程师uI设计尤其对设计出理想状态下的设计作品，具有直接的促进作用：后台编程语言作为协同前段设计的重要沟通平面，页面制作和后台的契合及其代码的掌握，对满足公司前段开发岗位支持及其语言基础要求，具有切实有效的数据交换价值。Web前端开发技术应用构成框架中，以AngularJS、JQuew、BootstrapWeb前端模块化开发的价值及Web前端的性能优化方案和uI的艺术设计，采用案例分析、功能模块设计、技术实现等综合实现。

技术与优化

关于Web前端开发技术

从实践经验可以知道，对于Web前端开发技术的优化影响最大的是HTML、JavaScript、CSS。这三种都属于网页的关键性语言，他们各自拥有独特之处，也各自占据着职能，在执行标准上面也存在很多的区别。但是了解Web前端开发的都会知道,这三者之间存在很多的联系，属于相互合作相互促进的关系。所以在Web前端开发技术优化中不能忽视了这三者的重要性。网络环境常见的是B/S结构，它具有他自己的特点。^[5]

从网络环境的性质出发进行分析，可以知道，当前浏览器客户端的展开分析方式能够契合现代社会技术发展的特点，使得一切都可以顺利进行。由于现代网络发展的速度非常快，而且具有很明显的复杂性,导致了网页出现了很多的问题。针对这一系列的问题,应当如何提高浏览用户的体验感成为了Web前端开发技术与优化的关键目标。通常浏览用户都需要从网址开始进行输入，他们会发出请求，这一个请求的对象是URL。当这一系列的内容发生了之后，服务器就会开始利用自身的功能针对域名进行分析，最终所得出来的就是生活中大家都能够理解的IP地址，计算机这时才会根据IP地址去访问这一个地址上面的东西和内容。浏览器在这一系列的活动当中所体现出的是对数据的整理，并将其通过一定的程序展示在页面上，资源的展示才会合理，我们通常见到的网页内容都是经过了浏览器的排版处理了的。具体形式如下图1所示：

往往基于网站制作的Web前端开发技术都包括了很多信息和数据，他们的链接建立和数据库的建立都要求准确而有效。比如Web服务器它其实主要的作用是针对文件内容以及URL的参数进行资源调用。如此一来便可以获得组织数据并生成HTML页面的有效性。在很多时候，服务器可以完成HTTP的请求,而且服务器还具有传输文件的功能，而浏览器其实所起到的作用是接收文件。浏览器针对已经接收的文件要进行分析，并以此向服务器发送请求，目的是获得链接资源文件。

针对HTTP请求的优化

信息要想发生传递，并呈现在具体的浏览用户眼前，它需要网页的存在,这是网页的存在价值，用户通过网页而获得自己想要的信息和数据。互联网的发展速度非常快，而且实时更新，信息的获取时间以及过程都需要在最佳值之内,只有这样才会吸引更多的用户，也才会满足用户对快速浏览信息提出的具体要求。信息本身的价值不会因为网页而体现出来，网页它仅仅是起着一种为用户提供信息的作用。但是当换一个角度看待这个问题的时候，我们可以发现获取信息的角度看待信息，会让信息展现出不一样的一面，会对社会行为产生影响。^[6]

因此针对HTTP请求的优化属于Web前端开发技术优化的一种。要针对请求的内容完成筛选，请求一般都需要是必要，这样才会真正从根本上提高Web前端开发技术的整体水平。这里举例说明完整的HTTP请求，它所包含的内容非常的丰富，比如常见的数据发送，简历服务器，还有建立浏览器链接等等。一般当环境不同的时候，HTTP的请求所占用的时间会有区别，当每一个请求之间的时间相互叠加之后，时间成本就会增加，这对于网络资源的浪费非常大。所以当讲到Web前端开发技术中HTTP请求优化主要讲的就是针对时间使用方面的优化，而重点一般都会放在请求数量的控制上面。时间的优化可以利用合并文件来实现。

以这种方式来控制时间，可以让请求在第二次就完成，而图片则可以采用不同链接映射不同区域的手段，这种方式下的Web前端开发技术优化效果会更佳。当然在这一环节中还需要技术人员注意的就是针对内联图像的处理和优化，为了能够真正达到优化HTTP请求的效果，要重视每一个细节，内联图像的处理和优化就是要确保文本以及图像能够同时下载，这样才会给浏览用户最佳的体验感，也才会因此获得浏览用户的好评，本身图像和文本的同时下载也是衡量一个两站基本质量好与坏的标准。

针对文件规模的优化

文件规模具有复杂性，而针对文件规模进行优化又会存在很多的困难，因为它的内容相对琐碎，不好建立系统的优化方案。通常来讲优化文件规模的时候需要从CSS、JavaScript文件着手，然而这也仅仅是文件规模优化的部分内容。其他的还包括了相应的代码的优化，从具体的文件来讲，他们所包含的信息非常的多，而且对于用户的浏览体验具有直接的关系，即不得不针对这些文件规模进行优化。这里所需要提出来的一个重点就是针对文件规模进行优化的时候，需要结合HTML标签进行，即它也是文件规模优化的一个重点，针对它所作的优化包括了标签的剔除，这样做的目的是有效避免内联式的出现，影响整个浏览器的运行。

另外在实践中还应当注重CSS代码的优化，它是一项重要的工作，优化要结合Web前端开发技术，在此基础之上进行，以达到客观性和系统，正确应对客户的浏览习惯和需求。在这一优化内容中HTML标签的合理剔除强调的是合理性，因此在Web前端开发技术优化的过程中不能出现矫枉过正的情况，要充分考虑到具体的情况，将HTML标签剔除控制在合理的范围之内，只有这样才会提髙技术的有效性。

针对内容的优化

基于网站制作的Web前端开发技术与优化不得不重视内容的优化，这一部分的内容关系着网页的运行效果。在实际操作当中，考虑到内容优化的特殊性，需要充分考虑到各个方面的情况。而这里仅仅就两个角度进行分析，来针对内容进行优化的方式提出意见。优化内容的时候要将注意力放在样式表上面，当样式表置于顶部的时候，那么通常置于底部的就是script。另外一个角度则是针对CSS的，由于CSS具有覆盖叠成的特殊性，所以优化的时候要考虑到它的这一特点进行操作。我们可以知道一般浏览器在加载完成各种信息和数据之后，它会针对网页的内容进行渲染,以提髙用户的浏览体验感。

所以基于这样的特点，针对内容优化的时候，即针对Web前端开发技术优化的时候要着手CSS加载进行优化。前面所提到的将script进行优化，那么会使其置于底部,在这样的条件之下，为了让页面下载的效果更佳，要确保脚本不会对页面形成消极性的影响。如此便可以避免组建下载速度太慢，以及页面延长加载时间过长等问题的出现。总之针对内容进行优化的时候要充分考虑到细节对于整体的影响和作用。

针对DNS的查询次数的优化

导致网页时间成本増加的另外一个原因就是DNS，因此要针对它进行优化，而具体来讲就是针对DNS的査询次数进行优化。通常我们所见到的DNS每一次解析都需要花费二十毫秒到一百二十毫秒的时间。在这样的一个前提条件之下，会出现一个问题就是，当解析请求太过频繁，网页会反应不过来，而且时间成本也在不断地叠加，最终导致的后果就是信息传输的速度以及呈现的速度不断地降低，甚至会出现缓慢的情况。另外从DNS的査询请求的性质我们可以知道，它其实还是属于浏览器的基础内容中的一种。也就是说当査询请求完成之前，这一个域名中所有内容都会始终保持原状，不会发生下载。

因此在Web前端开发技术优化当中，重视DNS的査询请求优化对于提高整体的水平具有积极意义。另外值得探讨的一个问题就是重定向的问题，因为重定向它的性质决定了它也会令时间成本增加，但是由于它受到了各种因素的影响，所以优化的时候更加要重视细节。比如可以在其中添加“/”，使得它的时间成本降低一些。