基于Web前端开发技术的应用研究

褚建萍

（德州职业技术学院 山东省德州市 253000）

互联网技术在高速发展的社会中，无论是应用范围还是水平均获得不同程度的提高，在日常工作生活中带来更多便利。现阶段，已经进入到Web2.0时代，通过积极推广与深度研发Web前端技术，大幅提高网页制作的效率和质量，而这项技术如何进一步优化改善网络生活，成为重要的技术研究课题。

1 Web前端开发技术概述

1.1 基本内涵

其主要指的是Web页面被建立的过程，也可指在APP前端页面创建的基础上向用户呈现一个过程，凭借例如JavaScript、CSS、HTML多种技术，建立页面框架并予以相应的问题处理方案，进而建立起交互性特征明显的页面，为界面和用户的交互创造条件[1]。当前，互联网技术已迈入发展的“快速路”，对比过去Web页面仅是移动设备或是PC浏览器中出现，当前网页能以丰富多元的模式出现，提供更优质的服务，而且不同的交互形式进一步强化了用户体验，而以上效果都是依靠应用前端技术达成的。总之，Web前端开发技术是以Web作为基础的一项前端制作技术，通过对其有效应用逐渐提高网页浏览效率，优化浏览体验，同时汲取本地原生的有关应用技术精华，在页面制作中广泛使用，也是当前页面开发人员的第一技术选择[2]。

1.2 基本特征

因为HTML编程语言属于这项技术的典型语言，为此技术所表现的各项基本特征，则能由此出发进行讨论分析：

1.2.1 编写简便

技术人员如果无法熟练应用JavaScript语言，便可通过HTML进行网页制作和实际，仅将一些Tags加载文本即可。

1.2.2 语法较弱

在编写HTML5时，能看到其没有相对紧凑的语法结构要求，但是浏览器中依旧具备相同的功能，不仅没有大小写的区分，还不需要严格管理控制标记的结束[3]。

1.3 核心技术简介

1.3.1 JavaScript语言

JavaScript语言属于解释型的脚本，最初使用目的在于处理表单中的输入验证。当前的JavaScript中心内容主要包括ECMAScript、BOM、DOM，其具有读取HTML页面元素的能力，将文本以动态的形式嵌入至HTML页面中，使表单数据在提交前便可在浏览器中进行验证操作，也具有控制浏览器Cookie写入、修改的功能。伴随Web前端技术的进步，技术人员搭建了多种JavaScript的库与框架，如以往流行的jQuery库便是基于JavaScript的封装库，以封装原生JavaScript语法的方式，简化了前端开发的编程。近些年的技术人员更偏爱Angular、Vue、React框架，以操作虚拟Dom和数据驱动的方式加以实现。

1.3.2 CSS样式表

CSS主要作用在于定义HTML元素的表现形式，可制定元素的背景颜色、边框形式、阴影、内容位置等的样式和布局描述。CSS技术在当前已经升级到了CSS3版本，新增了特殊效果，如元素渐变、透明、圆角等，以及利用弹性盒模型简化网页弹性布局，便于网页响应式开发工作等。而CSS3中的媒体查询还能以不同客户端的分辨率为中心，定义差异性的样式布局，让同一网页可自适应不同尺寸的设备。

1.3.3 HTML语言

该语言由一系列标签组成，最终呈现在浏览器中的页面。利用这一语言可在网页中添加文字、图片、音频、视频、表格、超链接等元素，定义了网页的布局和最终表现形式。目前主要使用的版本为HTML5，比前一个版本优化了浏览器本地离线存储功能，新增了表单控件，如url、search、number、date等。HTML页面也在服务器、浏览器端中承载着传输HTTP请求的任务，负责向浏览器请求资源链接，在浏览器收到脚本文件加以解析、执行时，便可完成浏览器网页中数据的动态获取和更新的任务。

2 Web前端技术的开发方向

2.1 优化开发

在信息技术发展过程中，对Web前端技术的改善使提高技术应用效果的重点。比如，使用SEO技术优化Web前端运行时间，可高效缩短Web前端的反应时间，也能缓解带宽资源占用较多的问题，便于用户以较快的速度进入网页中，使访问效率有所提升，也能使计算机的硬盘存储空间得到优化。在利用SEO技术开展系统开发工作之时，简化Web前端程序可对网页加载中的无关问题加以处理，使用户进入网页时间有所降低。但SEO技术优化Web前端开发仍然处于探索阶段，尚未大范围投用到人们的生产、生活中，还有更长的路要走。

2.2 兼容开发

Web前端兼容开发理念的提出，主要针对了当前部分浏览器兼容性不足的问题。在计算机实际应用之时，用户有时会同时使用多种不同类型、引擎的浏览器，如同时开启Google Chrome、Firefox、PaleMoon三个浏览器，可能会出现网页加载速度明显降低的现象。由于不同浏览器间Web前端的运行模式、网络速度上差异性较小，若想切实解决浏览器存在的兼容问题，便要开展对应的兼容开发工作。技术人员可采用CSS编程技术，对Web前端中的运行程序进行设定，从多个无关联的反应程序入手，缩小反应速度、带宽占用量等，彰显了技术开发的创新性和完整性。

2.3 多项开发

Web前端技术的多项开发，有利于提高Web前端的运行能效。比如在开发Web前端运行网络协议时，当技术人员输入完IP地址、DNS网址后，可达到减少IP地址确认时间的目的，对于提高Web前端开发水准具有现实意义。但多项开发的方向也存在一些问题，如用户对Web运行会带有怀疑的态度，降低了整体运行速度，若想规避此类风险的发生，技术人员便要提高Web的更新进程。

2.4 页面结构语义化

HTML页面结构的语义化有助于让用户明晰页面的层次，在失去CSS样式的条件下，仍能清楚判断页面的整体结构和基础性页面的内容布局。语义化也决定了技术人员要选择运用语义化的标签，可对网站的搜索引擎进行改进，便于网页开发中维护工作的有序进行。最新HTML5技术标准规范中增加了较多类型的语义标签如main、article、header、footer、nav等，利用这些标签可较为明确地区分网页中的主要内容、引用、头部、底部、超链接区域等布局结构，方便在其他设备中进行识别与解析，让页面的标签使用更为标准，提高了页面代码的可读性。

2.5 MVVM开发框架

MVVM即模型-视图-视图模型，本质上由MVC改进而来，其设计主旨是将网页中的视图逻辑、业务逻辑加以独立，再经由对数据和视图绑定的方式，使更新视图逻辑得到驱动。该框架能够解耦页面UI和逻辑处理，提升视图和逻辑代码的重复使用能效。将页面视图和业务逻辑进行单独开发，可细化技术人员的工作内容，比如将页面设计工作安排给专业设计人员完成，而逻辑问题的处理交给其他技术人员。在测试环节中，技术人员也可根据“视图模型”层面进行编写，能够用来解决传统界面测试中遇到的问题。

3 Web前端技术的相关应用

3.1 网站

有关制作网页，如果想为用户带来更理想的浏览体验，则应从前期工作、建设开发、后期工作三个阶段实现逐一优化，基于实际应用视角分析，这样技术在网站设计与制作中应用如下：

3.1.1 制作及完善网站的前期框架

基于网站形式划分主要为单页面、多页面网站。针对单页面形式而言，其以单一网址用作基础形成“一对一”网站，因为结构相对简单，所以仅涉及页面设计就能够浏览，通过HTML、CSS语言的合理搭配便会实现。至于多页面网站，其建立基础为单页面，通过单一网址与若干页面数据相对应的形式搭建网站结构，主要包含主、副两类页面。一般情况下，主页面为网站主体的业务模式和相关经营概况，通过“文字+配图”形式突出重点，设计主页面时力求精简，对比单页面网站存在一些相同点。对于多页面携带的附属网页，需将主页面作为基础并通过代码串联，其中要防止复杂内容、冗余代码对浏览速度造成的影响[4]。

3.1.2 制作导航

导航系统的建立基础为多页面网站，用户利用导航可获得相应的浏览指引，并且突显网络整体结构的重点内容与主要脉络。对此，设计并优化导航系统属于提高网页质量，浏览可行性的一大分支，一般导航菜单依据网站内容实现数据分类，一方面在分类时保证脉络清晰，另一方面要不断优化技术体系。当前，多数导航系统通过无序列表、样式表来设计，然后以超链接的形式附加元素，或是将jQuery、Menu用作第三方插件引用相关数据。

3.1.3 规划总体网站制作

确定网站主题应该突出重点，依据网站有关主体情况与附属机构规划，不仅要言简意赅还应做好字数控制，旨在让网站页面更加整洁。然后是科学编排与合理布局网站排版，按照内容体系各自的重要性再次规划与排版，要保证页面排版有条理且兼具秩序性，如果想通过排版的带来良好的浏览体验，则可通过JavaScript、jQuery库执行规划设计，一方面网站结构更具连贯性，另一方面帮助网站主体提高影响力[5]。

3.2 在线学习平台

3.2.1 前端应用网页

技术人员利用HTML5、Hybrid APP开发技术展开不同使用场景的响应设计，在确保学习资源整体呈现效果的基础上，让终端平台更具兼容性，由此为学生带来良好的平台使用体验。以制作平台前端应用网页为例，利用HTML5技术设计前端应用网页，增强用户和界面间、教师和学生间的交流互动性，搜集整合丰富的网页要素、多元的学习主题，从而创造理想的教学活动外部环境。构建前端网页在为网页设计提供便利的同时保证科学体现各项教学资源，还可以为实现后端及离线功能予以强有力的技术支持。技术人员利用jQuery Mobile等技术设置前端框架，让前端网页包含的应用元素获得有效、针对性设置。更重要的是，为后续修改网页应用元素创造便利条件[6]。

3.2.2 后端应用功能

不仅要科学设置前端应用网页，也要重视离线和后端功能的有效设置。技术人员在具体操作中进行代码编写，依托代码具备的交互作用帮助前端页面和后台数据之间的交互，在做到动态更新的同时建立完备的缓存机制，让平台拥有更强大的离线功能[7]。技术人员通过HTML缓存机制提高程序调用Web资源的速度，从而增强其获取及共享后端数据的能力。刨除构建缓存机制也能通过Web Storage功能，妥善保存缓存数据。

3.2.3 终端应用程序

关于设置终端应用程序，通过使用PhoneGap技术进行封装操作，从而丰富程序功能。例如Android平台，设置应用程序利用Eclipse建立文件夹，并在此基础上设立2个独立子文件夹/libs、/assets/www，再以PhoneGap压缩相关文件并存储。与此同时，将java程序启动进行文件夹的运行以及修改操作，从而形成apk文件[8]。

4 优化Web前端技术相关措施

4.1 提高HTTP请求控制的合理性

例如使用协议等均是体现HTTP请求的常见形式。如果请求适当减少会在一定程度上提升网页灵敏度，这是由于减少HTTP请求会缩减资源具体的占用空间。由于完成HTTP存在较大难度并属于作出系列反应的一个过程，HTTP请求的合理控制显得十分重要，比如通过文件合并来处理HTTP请求问题[9]。

4.2 提高DNS查询的合理性

如果执行DNS查询会导致网页运行速度下降，期间会经历较长的解析过程，大约消耗20-120毫，且在DNS查询任务完成之前，网站不会加载网址域名下的任何模块。基于逐渐增大的访问量，会进一步延长网页运行所需时间，导致用户体验感下降，网站的使用效果难以满足用户的需求。面对这样的现实情况，因为用户要求的信息无法及时加载，所以应对DNS查询次数严格控制，从而提升网页的加载速度和反应能力[10]。在加载网页之时，技术人员应规避较为繁琐的设计，其会对页面加载速度产生不良影响，还容易发生用户审美疲劳的现象。决定了技术人员应更多关注网页的实用性，让网页的设计简洁明了、主体功能清晰明确，使网页在符合用户审美需求的条件下，也能确保网页的加载效率。

4.3 对文件夹大小科学控制

实际上文件夹和加载速度之间为正比关系。即文件夹越大会使加载速度愈发缓慢，与此同时，加载速度的快慢直接影响网页使用的体验感受。具体表现如下：较多文件数量、较大文件内等情况会降低其实际运行速度，网页可能由于不堪重负而致使系统崩溃。基于此，技术人员应予以高度重视并采取有效的解决方法，以压缩文件的手段提升网页整体运行水平，还可以通过处理代码及CSS文件的方式，防止系统发生崩溃[11]。

4.4 降低HTTP错误出现概率

如果HTTP错误出现，则会发生页面崩溃的问题，用户无法顺利访问网页。通过对这种现象出现的原因分析，在网页中无法找出查询内容的情况下，很容易引发网页问题，或是由于过长的处理时间而产生网页问题，为此应提高网页处理效率，避免出现类似的问题[12]。降低HTTP错误的思路在于减少无用响应，比如在网页访问中会常见404错误、拒绝访问错误等，这些错误发生的主要原因在于网站未能找到用户提出需求的文件ID。在具体操作中，用户的HTTP请求耗时较长，在长时间的等待中会出现无用的响应页面，而用户需求的内容则没有被及时找出，使得用户的体验感有所降低。科学设置Web服务器与页面间的连接，对页面链接进行测试，以及跟踪Web服务器的错误日志等，均可达成减少HTTP错误发生几率的目标。

4.5 规避重定向风险

网页的重定向会消耗较多的时间，增加了用户在网页使用时的等待实践。网页重定向中还会发生各种类型的问题，当重定向次数增加一次后，也会相应地增加一次对Web的请求。为规避这一风险，技术人员可在Web站点子目录后增加root目录“/”，可减少网页发生重定向操作的频率。

4.6 完善HTML页面

在技术人员对Web前端页面进行开发的过程中，若想保证同一网页在不同客户端的显示，便要让网页同设备的屏幕大小具有较高契合性，使用户的体验度也能得到同步提升。在部分网站解决此类问题时，通常会结合移动端设备设置不同版本的网页，但这种做法会造成技术人员维护网页工作量的增多，也会加大开发难度。在前端页面设计中想要对HTML页面加以完善，技术人员可考虑借助HTML5技术的力量，达到自适应设计的目的，用以解决同一网页在不同客户端屏幕中的适应性问题。在具体操作上，技术人员的首要任务是在HTML文档中的标签属性中输入指令和设置其宽度，维持与设备屏幕宽度的一致，再设置“用户禁止操作网页”项目。之后要对Web前端网页宽度、字体字号等进行调整，应结合相对参数的百分比进行设置，字号设置上可利用相对值rem，能够辅助调整字号比例。技术人员或可使用媒体查询的方法执行CSS样式，让查询可结合实际客户端类型加以执行。由此可见，HTML5技术在Web前端开发中应用效果良好，与以往的同类型技术相比，该技术可为开发工作提供便捷，也提高了网页设计的适应性和稳定性。

4.7 改进页面设计工作

在技术人员开展页面设计工作之时，应保证页面布局的科学性，内容表达和布局明晰、文字图片清楚，也是提高页面加载速度的一项可行之计。因此，在基于Web前端开发进行网页设计时，应更加体现出网页主旨明确、大方得体的特点，对于文件数量、大小，以及图片的规格等加以改进。比如，在对CSS和JavaScript文件数量和大小改进时，技术人员可选择外联式模式，考虑到页面设计中包含多种内容的可能性，此时页面设计中便会需要更多的CSS或JavaScript文件，也会让页面设计的复杂性更高。要求技术人员对于CSS或JavaScript的应用事先进行规划，多使用缩写模式以防占用更多空间。以这种规划的方式可降低CSS或JavaScript的使用量，显著降低了HTTP的请求数量。技术人员还应当减少重复代码的使用，比如在网页背景图进行设计改进时，可对与背景图进行静态设置，若网页中对于内容中有图片需求，可事先对其进行优化处理后再予以上传。较多的网页中对于背景图片数量有较多要求，容易增加服务器的运行压力，无形中增加了HTTP的请求数量。技术人员在CSS定义背景时可将有关背景加以联合，对图片质量进行控制，使其尺寸大小最为适宜。图片占用空间小可提高网页的加载速度，也便于用户快速下载，对于服务器带宽发挥良性作用也大有裨益。

5 结语

网络信息技术的进步发展，致使用户提出更多的技术服务需求。有关这一技术的使用及创新，会尽可能满足多样化的用户使用需求。基于此，有关技术人员在灵活运用技术的同时，应有效解决目前存在的技术问题，例如以对无用响应、HTTP请求量等方面的优化控制，进一步强化网页交互能力、提升加载效率，从而为网页运行提供保障，也由于提供可靠方便的技术服务，助力我国互联网产业的良好发展。