Web前端开发技术与研究

李帮诚

摘要：互联网技术早已渗透我们生活中，随着社会信息化的不断推进，Web2.0时代也悄悄到来。Web前端承担着用户与服务器信息交互的重任，网页也绝不仅仅只停留在静态图片和文字的堆叠阶段，媒体信息爆炸式增长以及人们对用户体验的更高要求也促使Web技术不断发展。阐述了主流的Web前端开发模式和技术语言，并提出优化开发效率的技术手段。

关键词：Web前端；开发模式；技术语言；优化方法

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）29-0047-03

互联网已深入我们生活方方面面，人们对互联网需求也产生了新的变化。当今以计算机数据传输和处理技术为基础的信息化社会已被公众所认可，生活中充斥着各种各样的信息。互联网对社会生产活动的推动作用不言而喻，许多关系经济命脉的重要行业和关乎人民生命安全的关键活动对互联网的依赖更是强烈。

Web前端是指以浏览器为解析工具，为用户呈现信息的交互媒介的页面。Web开发具体涉及整个页面图片、文字、广告以及flash的编辑设计，其主要设计模块有Web页面的结构、外观视觉表现及信息的交互实现等。作为互联网信息的主要载体以及用户与服务器交互媒介，网页的用户体验与运行稳定性直接影响到用户对该站点资源的信息获取，进而关系到整个数据环境价值的实现乃至一项新技术的传播开展，Web前端开发的重要性早已被人们所认可，许多高效的开发技术也应运而生。目前Web前端开发技术呈多样化发展，其技术革新日新月异，不同的技术手段有着不同的适用场合。Web2.0时代下用户对网页动态信息和高度人机交互的需求愈发强烈，探讨Web前端开发技术尤为必要。

1前端核心技术分析

Web2.0技术背景下的开发交互性已经有了很大的增强，HTML、CSS和JavaScript作为Web前端开发中的支柱型设计语言分别具有各自的特点以及代码的质量标准，其优点和重要性毋庸置疑。三者在开发中虽然承担着不同的任务，各自的运行标准和设计方法也不一样，但却是相互交织内嵌，合作完成整个Web项目的开发。除了这三种核心技术语言外，延伸出的诸如JQuery、Bootstrap、Ajax之类的技术框架和插件工具在Web前端开发中应用也十分广泛。此外，Web前端开也有不同的模式，当今主流为B/S架构模式。截至目前，搜狐、新浪等门户网站以及许多视频站点的Web前端架构均涉及了上述技术。下面将分别对目前广泛使用到的Web前端开发技术做阐述。

1.1前端B/S开发模式

B/S（Browser/Server）是一种建立在广域网的基础上三层架构，即浏览器/服务器结构。Browser是指客户端，此模式下不需要在每台Pc上安装定制的App，便于产品推广和用户使用。B/S架构对系统要求很低，不需要安装指定的操作系统，只需要有Web浏览器即可。

B/S架构中，客户端负责显示及信息交互，数据和事务处理的压力留给了后端服务器，因此这样就避免了庞大的客户端程序，减少了PC机CPU以及操作系统的压力。B/S模式以广域网为基础，不需要专一的网络环境，一般只需操作系统和浏览器便可运行。由于应用的普适性，Bs模式对安全机制相对较弱，其面向的用户群体是不可知的。B/S程序由构件组成，构件的更换方便，利于系统的无缝升级，能够把后期维护的预算减到最小，且B/S模式建立在浏览器上，用户交流更为灵活，使用者从网上自己下载安装就可以实现产品升级，方便快捷，对于开发人员来说可以减轻后台处理逻辑的负担，对于使用者来说，网页的浏览速度和交互能力得到显著改善，相应的用户体验也大大提高。目前B/S技术正朝着更加成熟的方向发展。

1.2Web开发技术

1.2.1XHTML

XHTML是在HTML语言基础上延伸发展而来。HTML（Hypeflext Markup Language，超级文本标记语言）是标准通用标记语言分支下的一个应用，同时也是一种网页开发的规范标准，它通过对标签符号的使用来实现对网页各个元素的编辑展示。Web2.0背景下出现的XHTML在原有HTML语言的基础上引进了许多新的结构元素，这些新的元素利于跨平台、跨分辨率设计，且版本控制简单，与旧版HTML相比在终端上拥有许多优势。由于HTML语言规则较为松散，技术开发者具有很高的自由度，这对于代码编写人来说是很大的便利，相对的，机器解析难度也大，尤其在许多诸如智能手机等移动设备上，因此便出现了语法要求较为严格的XHTML。

XHTML是在XML基础上发展而来的可扩展超文本标记语言，具备了HTML和XML双重功能，同时也是一个过渡性的技术。此外XHML是一种增强型的可扩展的HTML，拥有更为强大的灵活性与可扩展性。与HMTL相比XHTML具有如下优势：

1）降低了浏览器兼容性要求。根据XHTML规则编写的页面均不需要测试调整就可直接用于各种类型的浏览器解析，降低了浏览器兼容性要求。

2）XHTML具有更好的跨平台交互性，具有和其他基于XML的开发语言交互的能力，一定程度扩展了其应用范围。

作为HTML语言的加强版，XHTML有许多特点，比如它对语法和逻辑要求更为严格（例如在XHTML文件中规定标签必须采用小写字母等等）。此外，与HTML相比，XHTML语言提高了浏览器的解析能力，具有更高的普适性。HTML代码量相对较多且规范性较差，在解析能力上对浏览器要求也高，所以在某些应用网络设备上不能运行HTML编写的应用，而XHT-ML很好地解決了这个问题。

近年来，随着Web开发版本的不断更新XHTML的应用也越来越广泛，它在Web开发领域所表现出的强大优势也慢慢得到重视，实现了网页标准化开发技术的一次飞跃。随着前端开发技术的进步，XHTML也朝着协议更为标准化、跨浏览器兼容性更好和更为稳定的方向发展。

1.2.2CSS

CSS（Cascading Style Sheets，级联样式表）是一种用来表现HTML或XML等文件样式的计算机语言，它能够用于增强网页样式控制，并且CSS允许将网页的样式信息与内容信息分离。相对于基于传统HTML技术的网页设计方法，CSS技术可以精确控制HTML标签对象在网页中的位置、排版和样式等元素。CSS代码的编写规范有严格的要求，基层开发人员虽然能很快把握技术要领，但若要深入学习CSS并且进一步了解跨浏览器兼容和进行交互设计时，CSS便会体现出其博大精深的特点。CSS是当今网页设计领域最优秀、应用最广泛的样式设计语言。CSS的语法较为灵活，对于很多属性，均拥有简化的代码编写方法，并且代码的可读性较高。内嵌CSS技术的Web开发能更好地帮助开发人员实现内容和页面分离，特别是以CSS+DIV为特色的布局技术已经在各大门户网站得到应用，这将大大提高站点后期维护效率。

目前最新版本CSS3更是添加了许多强大的属性，例如polyfiH的提出弥合了功能较弱的浏览器与功能较强的浏览器之间的差异，canvas绘制2D图形，逐像素进行渲染，可以通过多种方法使用canvas元素绘制路径、矩形、圆形、字符以及添加图像。它通常依托JavaScript实现，为弱功能的浏览器提供一定程度的对XHTML和CSS3的API和属性的支持。渐变背景也是CSS3中的新特性，还有诸如用来加载字体样式的Font-face、对文字更深层次的渲染text-decoration等等。这些最新的属性在当今web前端开发中已经被广泛运用，其强大的功能也在人机交互领域被展现出来。

1.2.3JavaScript

随着JavaScript技术的出现，Web前端开发便进入了高速发展时期。JavaScript是由网景公司提出，基于浏览器的web开发应用最广泛的脚本语言，具有事件响应和面向对象的特点。通常会用于为HTML网页添加动态功能，例如响应用户的各种操作、flash动画切换等等。

JavaScript能够实现复杂的前端逻辑和混合应用开发，是唯一能在所有主流平台被原生支持的编程语言，故广泛被技术人员青睐。JavaScript采用的是对象事件触发机制，为元素设置监听事件，当监听到某个元素的某个事件触发时便会调用相应的事件处理函数来执行处理事件，处理完成后将结果返回函数调用元素。随着web前端开发技术的不断进步，JavaScnpt在其他领域也开始发挥作用，例如在非浏览器端和服务器端编程，Ja-vaScript也慢慢焕发了新的生命力。

1.2.4JQuery

JQuery由John Resig于2006年创建，是一个的轻量级Ja-vaScfipt库。JQuery框架的引进会使开发效率大大提高，开发人员可以很便捷的实现文档对象操作、DOM元素选择、动画效果制作等等其他操作。目前应用广泛的JavaScript框架有许多，例如Prototype、Dojo、ExtJS等，但JQuery框架的使用率是最高的。

JQuery借鉴了HTML和CSS结构中的很多优点，能够方便地实现动画效果，并且可以为网站提供AJAX交互。它使用了对称性和一致性设计原则，语法简介明了且拥有很好的平台兼容性，可以简化JavaScript的各种操作以及解决各种浏览器之间的兼容性问题。JQuery在互联网尤其是web开发中得到了广泛的应用。

2Web应用的优化方法

高效为用户提供所需信息并且快速实现用户与后端服务器数据传递是一个优秀Web页面的价值所在，同时也是前端开发人员所追求的目标。若用户获取信息的等待时间过长，或者网页运行不稳定甚至出现崩溃，这样轻则影响用户体验，造成用户对该站点不良的印象，重则会导致重要数据丢失，给人们带来重大财产损失。作为一名Web前端开发人员，除了要实现网页的基本功能，优化Web前端也是十分重要的，下面将常见的Web优化方法做逐一阐述。

2.1合理设置HTTP请求次数

在进行web开发时，开发人员往往会更加倾向于使用很多图片，以达到使页面更加华丽的目的，然而在实际运行时整个页面的加载速度会被过多的跳转环节将拖慢。所以，对于不同内容的网页应该在保证其脚本功能的基础上，使页面尽可能简洁大方，避免使用过多的图片，减少页面上不必要的跳操作，来减少HTTP的请求速度，使整个网页能更快速运行。

2.2合理分配文件大小

文件大小会影响到网页加载速度和宽带资源的占用，编写简洁的代码以减小相应文件大小，对于加快网页运行速度，释放有用资源十分重要。

2.3优化DNS查询方法

DNS查询的每一次解析会耗费一定时间，并且在DNS查询过程中相关站点将被占用。过于繁琐的DNS查询十分影响网页加载速度，用户体验也会下降，因此，合理设置DNS的查询时间，减少资源占用，来满足用户体验效果。

3总结

Web前端开发技术发展迅速，技术手段也日新月异，这要求我们时刻保持敏锐的技术嗅觉。精通Web前端开发不仅仅是熟练使用各种技术语言和开发模式，更重要的是能够掌握這些技术的适用范围、整体构架和功能分类等，合理利用这些技术，用最科学的方法去解决实际项目开发中的各个问题。Web前端开发技术的优化既可以加快网页加载速度，提高用户体验和站点工作效率，又能够解除不必要的资源占用，保证资源利用效率和使用价值，这也是一名前端开发技术人员必须要考虑的问题。