Web前端开发技术与优化研究

胡锋 吴多智

（琼台师范学院信息科学技术学院 海南省海口市 571100）

在我国网络发展初期，Web 相关研究主要的方向在于网页制作方面，也就是将语言升级成为一些具有静态功能的具体方式。语言在Web 当中能够被用户使用，因此Web 也就成为了网络的发展窗口，这让用户养成了浏览网络界面的良好习惯。而未来网络技术的发展，将Web 也推向了一个全新的发展方向，用户对于网络界面的浏览有了更多的需求，并且方向也各不相同。而早期使用的Web前端开发防渗方式对于当下发展来说已经呈现出了一些不足，因此需要进行优化。

1 Web前端开发技术体系

在我国Web 前端开发技术发展的过程中，有三种比较常用的技术，分别是HTML、CSS、Java，这三种分别代表了一种不同的开发语言，这三种语言在编写代码的过程中无论是质量还是程式都有着不同的需求和差别，但是在实际工作的过程中，由于拥有着不同的开发要求，因此可以将三者进行联合使用[1]。这三者之间有着一定的差别和联系，下文将主要针对于这三者在软件开发过程中的常见技术应用问题进行分析。

1.1 HTML

HYML 属于XHTML/HTML5 的统称，但是这三者之间存在着一定的区别。首先介绍HTML，这种语言属于一种较为标准的标记语言，并不属于编程语言的一种，功能在于能够让网页浏览器正常工作[2]。浏览器将会对这种语言进行翻译，让用户能够在网页上阅读相关内容。其次介绍的是XHTML，这一语言是将HTML 进行更新，将W3C 作为了最新的标准，在Web 发展的过程中，这一语言方式一样需要急性重视。最后介绍的是HTML5 语言，这一语言是HTML 进行更新之后的新一代标准语言，在Web 中需要被重视，主要原因是具有当下最新的发展需求[3]。

未来现代Web 前端语言发展的过程中，主要的应用语言就是HTML5 语言，这能够更加清晰的展示出开发结构，与传统HTML语言相比，具有更大的适用性，并且内容和展示部分出现了分割，从而让网页结构实现了更加简洁的发展和落实。除此之外，现代移动设备的普及要求HTML 语言进行发展，从而适应移动设备Web的开发，而HTML 无法达成，因此就需要使用HTML5 来进行处理。在多方对比的之后可以发现HTML5 具有更大的优点，更加适合Web 操作系统之类的RIA 应用前端开发。也就是说，这三种编程语言之间的关系在于，XHTML 拥有HTML 和HTML5 之间的穿插性和通用性，并且HTML5 具有更大的优势[4]。

1.2 CSS

所谓的CSS 是指通过HTML、XML 中某个应用或者子集来展示出的文件样式计算机语言，具体来说属于层叠样式表。在Web前端开发的过程中，CSS 起到了非常重要的作用，能够控制网页样式、并且将网页的内容进行分割。使用CSS 进行Web 前端开发，能够更好的提升浏览器运行速度、降低维护难度[5]。在原理上来讲，CSS 能够更好的简化传统页面格式代码，让代码出现层叠，但是这样做之后将会导致代码外部样式表保存在浏览器缓存当中。这导致Web 下载显示速度下降，上传代码数量较少，而这进一步的展示出了网页浏览速度的提升。未来CSS 使用的过程中，使用难度较低，并且修改也较为简单，能够将样式定义保存在这一属性当中，用户能够非常轻松的对样式表进行修改和管理。

1.3 Java

Java 属于一种直译式脚本语言，拥有多种发展形态，其中包括动态类型、弱类型、基于原型，翻译这一语言的翻译器取自浏览器引擎，因此也被称为Java 引擎。作为开发语言的一种，Java在开发的过程中能够于初期应用在Web 的开发升级当中，在传统HTML 的基础上来提升动态功能。而在这一条件下，Java 能够非常广泛的应用于现代Web 前端开发的过程中，比如说当下比较流行的Ajax 就是在Java 上实现的[6]。

1.4 DOM

在Web 前端开发的过程中，DOM 技术发挥着前所未有的重要作用，能够为语言无关及Web 端提供标准的API，将XML 文档中的抽象节点构成的树状数据结构进行分析，这能够更好的提升页面交互性，实现对页面其他标准组件的访问，实现异构访问。主要的设计对象是OMG，对文档对象和表示对象进行了定义与分析[7]。

1.5 AJAX

这一技术主要是根据DOM 作为动态显示和相应的交互，能够解决服务器数据与页面数据之间的问题，从而创建出动态网页，实现后台与服务器之间的数据交互量较低。因此，为了更好的减少信息量，需要将网络速度更快、更稳定的进行更新。

2 Web前端开发优化

未来发展的过程中Web 前端开发过程中优化的方向非常复杂，本文主要针对于六方面进行研究，其中包括有HTML、CSS、Java、HTTP、DNS、底部script[8]。

2.1 HTML、CSS、Java优化

这三种作为Web 开发过程中使用的主要技术语言，在优化的过程中也可以称之为首要的目标，对于不同的三种技术语言来说，优化内容和优化方式也各不相同。

2.1.1 HTML 优化

在开发的过程中，如果选择了HTML 作为主要的组织语言，需要站在五个角度上来实现现代目的。也就是首先需要实现HTML的含义，将代码进行简化与清晰。其次则是需要尽量减少DOM节点，从而提高页面渲染速度。再次则是需要减少页面重绘，防止出现页面缩放问题。随后则是为了避免出现空属性、不闭合标签的现象，需要防止措施出现解析。最后则是需要针对于Web 的页头和页尾来进行处理，防治JS[9]。

2.1.2 CSS 优化

首先针对于CSS 需要站在四个角度上来进行优化，尽量达到相应的简化目标。首先需要在开发的过程中需要简化流程，尽量减少CSSExpressions、CSSE-Fulter 的使用。再次则是需要尽量使用CSS 缩写，删除一些重复的代码，减少总体代码数量。随后则是需要减少CSS 符层级的使用，尽量使用CLASS、ID，而这主要的方式在于能够删除YAG。

2.1.3 Java 优化

由于Java 的动态特征，需要在前端开发的过程中使用多功能的表现方式，因此Java 的优化面积较大，具体来说主要有五项。首先需要尽量较低全局变量次数，其次则是需要减少重绘、回流次数。再次则是需要尽量需要减少针对目标。最后则是需要尽量不适用with、eval、function，如果存在重复的JS 需要提前删除[10]。

2.2 减少HTTP的错误

在网页浏览的过程中，HTTP 错误属于较为常见的问题，但是如果这一问题重复使用，那么就会导致用户的浏览体验下降。在优化的过程中，需要降低HTTP 错误概率。而发生错误的原因进行分析之后发现，一般用户输入关键词搜索的过程中，Web 无法找到需要的文件，并且在长时间的搜索下，容易出现页面崩溃的现象。想要消除这一问题，首先需要加强Web 服务器与页面之间的联系，从而提升服务器对于页面的收缩请求速度，这在一定的程度上能够避免发生HTTP 错误。

2.3 DNS查询优化

所谓的DNS 查询是指用户在使用网络的过程中进行查询，属于最常见的一项功能。在功能运行的影响下，DNS 的查询消耗将对于网页的响应速度产生影响，但是这种影响一般只出现在毫秒级别。伴随着用户使用时间的加强，网页响应速度也就随之下降，在严重情况下还会导致网页内部的内容无法显示，相应的也会对网页造成影响，因此需要对DNS 查询功能进行优化与加强。而站在方法的角度上来说可以发现，DNS 查询过程中出现了延时的影响在于根本原因出现了缓存增多，因此Web 前端开发设计的过程中首先需要控制网页的重复查询DNS 的查询次数。同时网页还需要具备有缓存自动清理功能，从而实现优化的目的。

2.4 减少HTTP请求

HTTP 请求具备有多种多样的表现形式，比如说在使用协议、使用资源请求、资源识别符号等等方面，这些请求往往有着多种多样的存在形式，但是一般都会同时存在。这种存在宴会导致网页在运行过程中流程逐渐加长，因此也就会影响运行速率。原因在于每一个HTTP 请求出现之后，都会导致内部出现大量的数据。在运作的过程中，每一项数据的存在都会导致大量的网络资源被侵占，主要的原因就是网络资源存在着一定的有限性。一旦在运行的过程中网络数据量大于浏览器的网络资源，就会导致浏览器出现卡顿或者崩溃，因此在优化的过程中，首先需要减少HTTP 的请求，从而进行更加方便的前端开发。具体来说，本文主要的建议是能够使用合并文件、CSSSprotes 以及内联图像等等方式，将文件进行压缩，从而更好的打包HTTP 请求。在表层运行的过程中，需要注意能够减少HTTP 请求，内层请求则是需要将之成为另一队列，在本质上不会导致请求数量的降低。

2.5 文件夹大小控制

在Web 数据传输的过程中，文件夹属于最为常见的一种数据打包形式，一旦浏览器的内部文件越多，就会导致文件夹的自身体积越大，这属于正常逻辑，但是在现代数据传输条件的影响下，用户使用文件夹进行传播的过程中，往往会由于文件夹过大，而导致传输速度和文件加载速度下降。除此之外，在传输的过程中，往往还会对网页相应速度、交互性能产生一定的影响，在情况严重时，还会导致网页出现崩溃。因此在前端开发的过程中，首先需要控制好文件夹的大小。在方法方面，本文首先建议的方式就是压缩文件夹，现代压缩技术十分先进，能够将极大的文件夹压缩成为极小的压缩包。同时在压缩的过程中，还能够大大减少文件夹的大小，控制文件夹内部的多余标签，使用CSS 文件、代码处理等等方式来实现目的。

2.6 底部script

在本质上来讲，script 能够被定义为一种脚本，主要的方向就是批量处理文件，并且还能够保护文本，属于功能的延伸。在正常情况下，未来script 还能够对网页中的请求进行处理，实现逻辑方面的分支。但是在逻辑分支的过程中，往往会出现一定的询问流程，这些和分支一样，都会导致网页性能受到影响。在早期Web 开发的过程中，开发人员往往不会刻意的将script 放置在底部，这将会导致脚本对于网页下载页面进行阻拦，长此以往将会导致无法响应，因此需要对这方面的开放方式进行优化。而未来发展的过程中，将script 防止在底部，能够更好的解决这一问题，提升页面的组件下载速度，较少页面加载时间，提升网站的前端性能。

3 结束语

本文主要针对于Web 前端开发技术进行了研究和优化，通过研究之后发现，当下的Web 前端开发技术语言主要有三种，分别是HTML、CSS、Java，这三者存在着一定的差异，但是在开发的过程中各有各的好处。根据当下现代的Web 前端开发方式来说，依旧存在着一定的不足，因此本文主要针对于各种问题提出了策略，主要对于各种策略的问题进行了分析，对于策略的应用方法也进行了落实，这能够更好的提升开发质量。