关于Web前端开发技术的优化发展研究

关于Web前端开发技术的优化发展研究

王先斌

中国联通南京软件研究院  210019

摘要：现有社会逐渐趋向于信息化发展，Web前端技术被更加广泛的应用在各领域生产经营建设环节。通过使用web技术手段能够有效缩短页面加载时间，从根本上提升网页反应速率，为用户提供更好的上网体验。web前端技术手段还能够有效降低页面请求数，节约服务器资源，控制服务器请求时占用的宽带数量。本文就针对以上背景，首先提出 Web前端开发技术发展趋势，阐述web前端开发关键手段，制定优化web前端技术的具体措施，以期为相关工作人员提供理论性帮助。

关键词： Web前端开发技术；优化；发展

前言：就目前来看，现代信息新技术层出不穷、网络用户量持续增长，Web前端开发事业发展速度进一步加快。现阶段Web前端开发体系将更加完善。通过研究Web前端开发关键技术手段，能够不断优化Web前端开发功能，增强信息传输速率，从根本上提升大众工作效率，避免出现信息资源不匹配问题。

1、Web前端开发技术发展背景

现阶段科技技术发展速度不断加快， Web前端开发技术被广泛应用在网页制作环节，成为网页制作重要方式。当下网页制作效率不断加快，网页也从原有的静态内容逐步朝向动态化转变[1]。最早Web前端开发技术仅被应用在网页制作过程中，可以借助语言制作静态功能，并将该功能放置在用户中使用。Web是用户使用网络时的基本窗口，用户在熟悉静态功能后，也可培养出浏览网页的习惯。

我国现已进入web2.0时代，在此时期网络用户网页浏览需求更加多元，早期开发方式已然无法满足用户需求，从根本上提升用户体验感，增加网页的客流量。

2、Web前端开发关键技术

2.1 DOM技术

在Web前端开发过程中，DOM技术主要应用于动作显示以及交互。不仅如此，通过使用 DOM技术手段还能够为Web端提供标准的API，将信息文档转变为由节点构成的树形数据结构，从根本上提升网页的交互水平，明确访问页面的其他标准组件，实现异构访问目标。在使用 DOM技术过程中，将OMG作为设计对象，表示与修改文件之间的对象关系。

2.2 AJAX技术

在Web前端开发技术应用过程中，Web技术主要用于服务器数据解析以及网页数据获取，建立动态网页，减少后台与服务器之间的数据交互量，实现网页一步更新目标。因此在使用AJAX过程中也需要减少信息需求量，确实保障网络速度，确保网络运行更为稳定。

2.3 CSS技术

在Web前端开发技术应用过程中，可以使用叠层样式表的方式对前端开发设施进行优化[2]。叠层样式表主要使用HTML与XML文件样式，为网页提供各类不同的字体与字号样式服务。在Web前端开发过程中也能够更为精准的控制网页排版对象，从根本上提升字号显示效果。不仅如此，在使用Web前端开发技术过程中也可以使用CSS代码，更为灵活的开展网页布局调整修改以及重构工作，从根本上提升网页开发效率，切实保障网页开发速度。

3、Web前端技术优化对策

3.1优化HTML网页

Web前端技术开发过程中，HTML网页能够反映出浏览器特征，维持及保障网页的基本性能，并在此基础上为用户提供更好的视觉体验感。在优化HTML网页过程中还需要多维度的考虑各类问题，从根本上保障网页内容的完整性以及统一性。要求页面设计及内容合理且富有吸引力，避免内容过于单一导致用户流失。

3.2缩减文件大小

在使用Web前端开发技术过程中，互联网加载速度会受到相关技术以及硬件设施等因素影响[3]。信息文件大小与互联网加载速度成正比关系。因此在网页开发过程中如果不更换宽带，加快网速只能够通过缩减文件大小的方式实现，具体操作过程中，技术人员可以对原有文件中的代码进行合理的删减以及整合处理。但在删减与整合过程中也应当切实保障核心工程，避免核心工程受到意外破坏，网件因不正确操作而出现损坏问题。

现有压缩文件大小的方式也包括压缩代码以及使用CSS文件的方法。具体压缩过程中应当结合网页功能以及网页运行实际情况删除过于冗余的代码，实现缩线文件目标。

3.3缩减HTTP请求

在网页前端开发技术应用过程中，缩减HTTP请求主要包括诸多环节，例如使用DNS寻址、发送各方数据、建立浏览器以及服务器传输数据，有效控制服务区响应时间。在网页运行过程中，导致HTTP请求的原因较多，例如技术人员缺乏经验，在网页设计过程中增加了较为繁琐冗杂的操作而获得更加良好的视觉效果[4]。由于技术人员没有足够的技术及能力简化网页设计步骤，网页运行期间会承受更大的荷载及压力，经常会在使用过程中弹出垃圾窗口以及广告，导致网页加载通道被挤占，网页加载速度缓慢也会导致用户体验效果受到不利影响。因此在网页设计过程中，还需要做好程序人员培训工作，进一步强化培训人员专业技能。在培训人员工作开展过程中也可以参与到实训活动中，积累更多的实践经验，尽量在设计环节精简步骤，确保后续制作出的网页能够更加简单流畅，可以操作更为便捷。

3.4缩短DNS查询时间

通过分析现阶段网页运行实际情况，DNS查询时间较长，部分网页在实际运行过程中还会出现长时间加载，无法顺利进入网页等情况。部分用户在等待了较长时间后会选择放弃进入网页，一定程度影响着网络运营商的经济效益，会使得用户时间被严重浪费。因此在现阶段Web前端开发技术应用过程中，需要尽快解决Web前端开发过程中的DNS查询时间较长问题，有效缩短DNS查询时间，确保用户能够获得更好的上网体验。

3.5优化网页设计

网站网页设计水平也可直接影响到客流量，因此在现有Web前端开发技术优化过程中还需要做好网页设计工作。良好的网页设计工作能够更好抓住客户研究，吸引客户点击量以及浏览量。但就目前来看，大部分网站网页设计质量预期目标存在较大差异，由于设计人员缺乏创新力，在设计过程中只考虑视觉效果，降低了用户体验感。在现阶段网页设计过程中仅需要满足网页观赏效果，还需要提升网页的实用性。在设计人员设计环节需要满足用户心理需求，加入更多吸引人的元素。提升网站整体的实用性，将客户始终放置在主体地位。基于客户角度进行网页设计，确保客户能够在网页中快速找到所需内容，获得更好的网页使用体验。

4、建立多用户系统下的Web前端框架

在计算机及信息技术发展速度不断加快的情况下，Web应用程序能够对信息进行有效管理[5]。现有网络用户数量增加、用户需求进一步增多，对Web前端的要求也日渐提升，使用传统Web前端开发模式难以满足现有应用环境的复杂性，发出的系统也难以维护。

通过建立Web前端开发技术手段，借助Web前端框架也能够设计出样式美观、功能齐全、兼容性良好的Web前端页面。

4.1Web前端MVVM设计模式

MVVM设计模式就是模型-视图模型-视图模式，可否将各类单一的设计模式整合在一起，采用双向绑定手段显示出抽象数据。

该模式在使用过程中可以更好的将设计内容呈现在界面上，与用户输入设备进行交互，内部包含 UI逻辑，例如丰富动画效果，或者某元素样式。设计过程中涉及到属性、命令、方法、事件以及属性逻辑，负责各模块之间的通信。通过建立起数据模型，做好数据构造、数据驱动工作，为每个基础实体的属性以及每个属性提供验证逻辑。

使用MVVM模式也能够将视图与模型相互分离，视图的更新可独立于模型存在，可以使设计环节的各项任务划分更加清晰，确保网页设计以及业务逻辑开发相互独立。同一视图模型上可以存放多个视图逻辑，最大程度简化了Web前端框架设计流程。

4.2异步编程

异步编程可以借助AJAX技术手段，在无需要加载整个网页的情况下只更新部分网页功能[6]。借助浏览器及后台服务器的少量数据交换，实现网页的异步更新。传统编程方式主要使用B/S交互手段，用户触发一个事件，系统请求传送给服务器，从服务器中获取一个完整的网页再发送给浏览器呈现。此环节会受到网络状况的影响，如果网速一般，用户可能花费较长的时间在一个空白页上等待反馈结果。在请求数据较少的情况下，服务器也会发送一个完整的网页给服务器，一定程度浪费了服务器性能。

AJAX流程

借助AJAX技术，开发人员可以使用该对象异步发送一个请求到服务器。服务器对客户端的请求进行处理，并将结果再次发送给客户端。客户端使用XMLH对象接收服务器端响应，将动态修改的DOM结果展示给用户，使网页进行局部刷新，发送及接收信息能够得到有效控制，从根本上提升了信息传输效率。

未将前后端分离，前端开发人员以及后台开发人员，需要订立大量的数据接口。前端开发人员在后台开发人员没有完成业务逻辑相关工作的情况下，可以借助数据开启交互逻辑代码编写工作，等待后台准备好数据，并使用AJAX获取，实现对前后端开发人员的并行开发。

异步编程其实就是将一个任务分成两段，先执行第1点任务后转到执行其他任务，等全部做好准备再执行第2段任务。通过使用Java语言完成异步编程工作，就是将任务第2段写进一个函数里，等待重新执行该任务时调取此函数即可。

借助调回函数方式处理异步编程工作，在出现多个回调函数嵌套的情况下会出现问题。代码在嵌套过程中会横向扩张，无法实现高效管理。由于多个异步操作形成了强耦合，因此上层回调函数与下层回调函数都可能在一处修改的情况下发生变化。为有效解决该问题，可以将回调函数的嵌套改为链式调用，连续读取多个文件内容。

在实际研究过程中可以将前端及后端的前后分离，存在大量的AJAX请求。框架会完成一个promise模块，利用promise方式处理异步回调，使代码更容易读取与维护。

4.3多用户管理系统Web前端框架需求

为确保Web前端技术手段趋向于多用户管理方向发展，还需要明确多用户管理系统特征。多用户管理系统主要就是系统涉及到的用户种类较多，在角色相同的情况下，不同人登录后系统呈现出的页面也不同。系统会为用户提供个性化服务与特色化展示，帮助用户进行专项数据管理，

基于用户以及角色对网页的深度制定，不同用户呈现出的内容存在较大差异。在差异性越大的情况下前端工作量也就越大

[7]。用户在操作期间会与后台数据交互，因此对数据存储及读取水平提出了更高要求。页面展示风格应当更加注重简洁与和谐，不必制作一些特殊视觉效果。

4.4多用户管理系统Web前端技术结构

首先使用UI框架，前端开发人员创作一个网页基础，根据设计图完成页面开发工作。框架中应当为开发人员提供页面结构、页面元素、常用插件以及组件。用户可以直接用框架中定义好的样式快速创建网页。框架整体会贯彻响应设计思想，确保创建出的网页可以在各尺寸的设备上均能够运行良好。响应布局依赖于栅格系统，借助流式布局的方式实现响应目标。

信息管理系统内部也采用了两栏或者三栏布局结构。在使用两栏布局方式过程中，页面的左边一栏可作为页面的二级导向右边作为页面主体部分。

页面中的基础元素包括按钮、表单与表格等元素。按钮是最常用的交互工具，也是页面中有更多元素；表单对主要应用在信息管理系统中，主要包括数据修改、表单提交方式。表单的提交、输入框、下拉框、多选框、单选框等元素风格需要保持统一，为用户提供大小与颜色上的选择。

在页面过程中还包括其他常用组件，此些组件共同组成了页面的基本功能。框架开发者为确保此些组件能够充分发挥出应有作用，在页面开发时可以直接插入框架预设好的类名。常用组件主要包括页面组件、下拉列表、导航栏组件、提示信息、浮动广告以及回到顶部等功能。

网页模仿框架如下图所示，前端开发者与后端开发者需要完成一个网页的开发。前端开发者借助UI框架中的各元素完成组件与插件的网页制作，而后根据具体业务获取数据，后台开发人员进行更好的协作。在事件绑定完成后进行页面交互，设计过程中不会依赖后台环境。

总结：总而言之，Web前端开发技术更需要满足多元化物联网业务要求，将各类业务技术充分融合在一起，达到最佳用户体验。通过分析Web前端开发技术发展规律，发现当前使用频段、技术指标以及发展方向的确立已经进入关键时期，为充分发挥出Web前端开发技术作用，还需要加Web前端开发关键技术的研究力度，切实提高通信系统频谱效率、能耗效率管控水平，重新整合Web前端开发体系，使Web前端开发各层结构配置更为灵活，为推动我国Web前端开发事业快速发展奠定坚实技术基础。

参考文献：

[1]陈芳.针对网站设计与制作的Web前端开发技术及技术优化[J].电子世界,2020(23):196-197.

[2]刘小艮.Web前端开发技术及其优化策略[J].信息通信,2020(10):164-165.

[3]曹艳琴.基于网站制作的Web前端开发技术与优化策略[J].电脑知识与技术,2020,16(23):59-60+67.

[4]张晓龙.Web前端开发技术的优化发展[J].电脑知识与技术,2020,16(11):78-79.DOI:10.14004/j.cnki.ckt.2020.1381.

[5]许跃颖.网站制作Web前端开发技术与优化措施[J].电子技术与软件工程,2020(07):31-32.

[6]朱红斌.关于WEB前端开发技术的课程教学模式的创新研究[J].科技风,2018(33):81.

[7]陈红梅.基于Web前端开发技术的儿童教育网站设计与实现[J].智能计算机与应用,2017,7(06):142-144+147.