Web前端开发技术以及优化方向分析

兆 晶,杨晓宇

(石家庄理工职业学院,河北 石家庄 050000)

0 引言

随着网络的发展和信息技术的革新进步,社会已逐渐从传统型社会向互联网社会转型,人们的大部分行为活动都可以通过各种网站和移动应用来实现,日常的购物、缴费、学习、出行、生产管理、交易等都被赋予了不同以往的操作行为,并且通过互联网产生了全新的交互方式。Web前端开发为互联网社会的进步提供了基础性保障,它是网页开发中不可或缺的重要模块,其核心技术和未来优化方向是当今网络应用的研究重点,

1 Web前端开发的核心技术

1.1 B/S网站开发模式

B/S是Browser(浏览器)/Server(服务器)结构的简称,是当前网站项目开发中最常见的模式,也是目前网站应用系统的主要发展方向[1]。B/S结构是对传统C/S结构的优化和改进。C/S结构是指Client(客户机)/Server(服务器)结构[1]。在C/S结构中,由服务器来负责网站数据信息的存储和维护,客户机需要通过局域网连接到服务器,并负责用户的交互行为。C/S结构由于其组成特点存在兼容性差、维护管理难度大、只能面向固定用户群体等限制性缺点,近年来已逐步被B/S结构取代。B/S结构本质上是一种三层结构的C/S模式,通过运行安装在客户端的浏览器向服务器发出访问要求,在服务器端完成主要的逻辑处理后,再返回前端浏览器进行少量事物处理就可以以Web页面的形式展示出来。它是建立在广域网范围内的结构模式,用户只需要通过互联网和浏览器软件就可以访问数据平台,打破了C/S结构下的访问环境限制,并且为用户提供了较为统一的操作界面和交互形式。

1.2 HTML语言组成的页面

HTML是一种超文本标记语言,由一系列的标签组成,最终的呈现形式是在浏览器中看到的页面,即通常所说的网页。通过HTML语言可以在网页中添加文字、表格、图片、视频、音频和超链接等元素内容,它定义了网页的布局结构和最终呈现形式。在前端开发中,如果将前端项目比作是一栋大厦,那HTML就好比是这栋大厦的主体结构,是浏览器用户可以直接接触到的文件。HTML最初由Tim Berners-Lee发明制定,经过多年的更新迭代,目前主要使用的是HTML5版本,相较于历史版本HTML5新增了canvas(绘画)、video(视频)、audio(音频)等标签元素,更好地支持了浏览器的本地离线存储功能,并且增加了全新的表单控件,比如表单类型中的date,time,email,url,number,search等。HTML页面还在服务器端和浏览器端担负着传输HTTP请求的重要任务。HTTP的全称是超文本传输协议,负责向服务器请求资源链接,浏览器在收到对应的脚本文件时再进行解析执行,从而形成了浏览器网页中数据的动态获取和更新[2]。

1.3 CSS样式表

CSS指的是层叠样式表,主要作用是定义HTML元素的表现样式,可以指定元素的背景颜色、内容所占位置、边框形式、阴影情况等相关的样式和布局描述[2]。目前,CSS技术已经升级到CSS3版本,也是现下主流的开发版本,新增了一些特殊效果比如元素的圆角效果、渐变效果和透明效果等;利用弹性盒模型简化实现了网页的弹性布局,使网页的响应式开发更加轻松;新增了过渡属性和动画属性,使CSS可以实现一些简单的动画效果和复杂样式的交互;CSS3中的媒体查询可以根据不同设备的分辨率自主定义不同的样式布局,使得同一网站可以适应不同尺寸设备的使用。

1.4 JavaScript语言及其衍生

JavaScript是一种解释型的脚本,该语言最初的使用目的是处理表单的输入验证。随着互联网技术的发展流行,JavaScript语言逐渐拥有了可以处理复杂业务和运算的能力,成为网站前端开发中必需的手段和技术。如今的JavaScript核心内容主要包括ECMAScript,DOM和BOM,其中ECMAScript是JavaScript语言的语法标准和核心内容。JavaScript具备读取HTML页面元素的能力,可以将文本动态地嵌入到HTML页面中,不仅实现了表单数据提交前在浏览器端进行验证操作的功能,还可以控制浏览器cookies的写入和修改。在实际开发中可以通过直接方式或引用方式将JavaScript语言加入到网页中。近年来,随着Web前端的发展进步,Web开发者搭建开发了多个JavaScript的库和框架,例如早年流行的jQuery库是一个基于JavaScript的封装库,通过封装原生JavaScript语法大大简化了前端开发的编程模式,其主要实现思路是通过操作DOM来实现业务逻辑。近几年,开发者比较喜欢Angular,Vue和React框架。此类框架都是通过操作虚拟DOM以及数据驱动的理念来实现的[3]。JavaScript的库和框架给前端开发者提供了新的编程模式,使得前端项目开发更加简洁、高效。

2 Web前端开发的优化方向

2.1 页面元素结构的语义化

首先,语义化是指HTML页面内容结构语义化,结构的语义化可以帮助用户理解页面层次,即使在失去CSS样式的情况下也可以清楚判断出页面的整体结构和大致内容布局。其次,语义化还代表着需要开发者选择使用语义化的标签。标签的语义化可以帮助网站的搜索引擎优化,也更有利于在团队开发过程中的维护。最新的HTML5技术标准规范中新增了大量的语义标签,例如header,footer,main,nav,article等标签,使用此类标签可以清楚地区分页面的头部、底部、主要内容、超链接区域、引用部分等布局结构,方便其他特殊设备的解析和识别,使得页面代码可读性更强、标签使用更加规范。

2.2 MVVM开发模式

MVVM是指Model-View-ViewModel(模型-视图-视图模型),在本质上是基于MVC框架的升级和改进。此种开发模式的设计主旨是将网页中的View(视图)逻辑和业务逻辑各自分离出来,然后通过将数据与视图绑定的方式由业务逻辑来驱动更新视图逻辑[3]。MVVM的开发模式可以将页面UI与逻辑处理有效解耦,增加逻辑代码和视图代码的重复利用率;将页面视图的开发和业务逻辑开发抽离独立出来,细化网页开发者的工作内容,比如可以明确页面的设计由专业设计人员完成,而逻辑层的处理交由其他开发者进行;在测试环节也可以针对ViewModel(视图模型)层面来编写,改善解决以往界面测试中遇到的难点。

2.3 提高网页的综合性能

2.3.1 减少网页的HTTP请求数量

HTTP请求可以获取、传递浏览器与服务器之间的信息和数据,是影响页面渲染速度的关键因素,对于HTTP请求的优化是加快网页打开速度、提高网页响应效率的根本途径。一个完整的HTTP请求需要经过如下步骤:(1)浏览器根据网页的域名解析出IP地址;(2)浏览器和服务器建立TCP的3次握手;(3)浏览器给服务器发送HTTP请求;(4)服务器相应HTTP请求;(5)浏览器收到返回的数据信息,并在浏览器端的页面进行处理,最后渲染出用户所看到的界面[4]。在网页中通常包含大量的HTTP请求,每一个HTTP请求都需要花费浏览器的请求时间以及服务器的响应时间,因此减少HTTP的请求数量是最简单、最直接的性能优化方式,例如可以采用CSS技术中的Image Maps(图像地图)技术把原本多个图片资源HTTP请求放到一个HTTP请求上,大大降低了页面HTTP请求的数量,提高了网页的渲染速度[4]。

2.3.2 压缩资源文件的大小

网页加载的速度与其关联的资源大小有着密切的关系,在同等网络条件情况下大型文件会比小型文件占用更多的加载时间,为了提高网页的运行速度和反应能力,开发者在项目中要丢弃一些不必要的资源文件,及时清理过期、无效的资源链接;在代码编写时要尽量降低代码的重复性,对代码进行整合引用;在调用一些外部资源库时可以选择压缩版本或者引入局部功能来减少文件的加载时间,比如说在使用Element-UI的库时可以局部引入组件,只在项目中加载用到的组件可以大大减少第三方库的带宽占用。

3 结语

Web前端开发技术目前以HTML,CSS,JavaScript三者为主要组成,通过这3种技术对页面的结构布局、样式表现和业务逻辑进行编程开发,并采用B/S结构来适应当下的网络环境特点。在之后的Web前端开发趋势上,应更加关注HTML页面的语义化结构,采用更加可靠、便捷的MVVM前端开发模式,从多方面改进提升网页的运行性能,从而不断推进前端技术的发展和优化。