Web前端开发技术及其优化研究

黄伟

摘要：目前，我国网络技术突飞猛进，Web前端开发技术已经十分成熟，但因为现代网络传输数据量增大、恶意攻击频繁等问题，用户在使用网页时的安全性、体验感不断下降，说明当前Web前端开发技术需要得到优化。在这一基ze_h，本文首先分析了现代Web前端开发技术体系，对其中各技术语言的应用性能进行了阐述，其次针对现代Web前端开发的问题，提出了相关的优化建议。

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

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2019）30-0257-02

早期我国对于Web前端开发的认知主要在于“网页制作”，即通过语言变成制作一些静态功能，将其放置于Web当中供用户使用，因此Web作为用户使用网络的基本窗口，其静态的变化培养了当时网络用户浏览网页的习惯。但随着技术发展，我国现已步入了Web2.0时代，在这一基础上网络用户的网页浏览需求变得多元化，早期Web前端开发防渗方式并不满足当下要求，说明其有优化的必要。

1Web前端开发技术体系

我国Web前端开发技术中最常用的技术有三，即HTML、CSS、JavaScript，三者分别代表了一种开发语言，在代码质量要求、程式等方面有较大差别，但在实际开发工作当中，因为不同开发要求，也可以将三者联合使用，说明它们相互之间也存在联系。下文将对HTML、CSS、JavaScript在开发工作中的常见技术应用进行分析。

（1）HTML

HTML是XHTML/HTML5的统称，但三者之间也存在差异，其中HTML（文本标记语言）是一种网页创建当中的标准标记语言，其并不属于编程语言，主要功能在于支撑网页浏览器运作，且由浏览器对该语言进行翻译，以供用户进行阅读;XHTMU可扩展标识语言）源自W3C的最新的HTML标准，是Web功能变成语言，在Web开发当中起到实现功能构件的作用;HTML5f超文本标记语言）是HTML基础上的新一代标准标记语言，在Web当中同样值得重视。应用上现代Web前端开发，主要采用HT-ML5语言，此举可以使开发结构更加清晰，较于传统HTML语言在当前用户需求基础上更具适用性，可以将内容与展示相互分割，使得网页结构更加简洁，有利于管理工作。此外，在现代移动设备普及条件下，HTML并不能实现移动设备Web开发，而HTML5可以避免这一点，更适合如Web操作系统一类的RIA应用的前端开发。对比之下说明HTML5更具优势，同时XHTML通用于HTML、HTML5之间，这一点并没有改变，利用XHTML进行开发，可以使Web兼容各类浏览器要求，例如pc端浏览器、手机端浏览器、PAD。

（2）CSS

CSS（层叠样式表）是一种可以展示HTML、XML中某个应用或者子集的文件样式计算机语言，在Web前端开发当中起到了至关重要的作用，主要具有控制网页样式、允许网页内容与对应样式信息分割的功能。利用CSS进行前端开发，可以使浏览器的运作速度、维护难度得到优化，原理上CSS可以有效简化传统网页格式代码，使得代码被层叠，但代码的外部样式表依旧被保存在浏览器缓存当中，这一表现使得Web下载显示速度得到优化、上传代码的数量减少，说明网页浏览速度增强，同时在协议特点上，CSS具有易于使用和修改的特点，即接组合HT-ML元素当中的style属性，CSS可以将样式定义保存在该属性当中，或者将其归于header部分，这些表现均可以直接被HTML页面引用，使得用户可以对此進行逐项修改，易于管理嘲。

（3）JavaScript

JavaScript是一种直译式脚本语言，具有多种形态，例如动态类型、弱类型、基于原型，该语言的翻译器设计取自浏览器的引擎，因此也被称为JavaScript引擎。作为开发语言的一种，Ja-vaScfipt在开发初期就应用于Wen前端开发升级当中，其可以在传统HTML静态网页基础上实现动态功能，在这一条件下Ja-vaScript依旧广泛应用于现代Web前端开发当中，例如当前流行的Ajax就是在JavaScript基础上实现的。

2Web前端开发优化

关于Web前端开发优化的方向有很多，本文主要列举了六大方向，即HTML、CSS、JavaScript优化;减少HTTP的错误;DNS查询优化;减少HTTP请求;文件夹大小控制;底部script。

2.1HTML、CSS、JavaScript优化

HTML、CSS、JavaScript作为Web开发的主要技术语言，在优化中自然是首当其冲的目标，各技术语言的优化内容见下文。

（1）HTML优化

在开发过程当中，如果将HTML作为主要组织语言，结合现代要求就要从五个角度上实现目的，即实现HTML的语义化，可简化、清晰代码;减少DOM节点，可提高页面渲染速度;减少页面重绘，以防页面缩放问题;避免空属性、标签不闭合的现象，以防措施解析;针对Web页头、页尾要放置jS。

（2）CSS优化

针对CSS要从四个角度上来实现优化目的，即为了简化开发流程，在开发过程当中要尽可能减少CSSExpressions、CSSE-Fulter的使用;尽可能使用CSS缩写，同时删除重复代码、减少总体代码量;要减少CSS符层级的使用;如果开发中使用了CLASS、ID，则要将YAG标签删除。

（3）JavaScript优化

因为JavaScript的动态性特征，使其在前端开发当中具有多功能表现，所以优化面积较大，具体方向有五项：要尽可能降低全局变量次数;尽可能减少重绘、回流次数;尽可能减少针对目标、作用域链的查找次数;尽可能不使用with、eval、function，尤其是eval、function最好不使用;如果存在重复的JS要删除。

2.2减少HTTP的错误

HTTP的错误现象是网页浏览当中常见的问题，但此类问题如果反复出现，就会导致用户浏览体验下降，因此在优化当中，要尽可能地降低HTTP的错误概率。在错误原因上，一般当用户输入关键词进行搜索时，Web无法从搜索页面中找到对应的文件，随之在长时间搜索下就会出现页面崩溃等错误表现，而要消除这一问题，主要需加强Web服务器与页面之间的联系，提升服务器对页面搜索请求的相应速度，由此可以在一定程度上避免HTTP错误。

2.3 DNS查询优化

DNS查询是用户进行网络浏览时最常使用到的功能，在功能运作条件下，DNS的查询耗时会对网页响应时间造成一定影响，但一般情况下只会出现毫秒级别的延时，而随着用户长期使用，使得浏览器内保存的缓存增多，会导致DNS查询时间变慢，相应网页响应速度也会下降，严重时还会导致网页内部分显示无法被正常加载，因此有必要对DNS查询进行优化。在方法上，因为DNS查询延时影响的根本原因在于缓存增多，所以在Web前端开发过程当中，建议先控制网页重复DNS查询的次数，同时设计缓存自动清理功能，由此实现优化目的。

2.4减少HTTP请求

HTTP请求具有多种表现形式，例如使用协议、对资源的请求、资源识别符号等，这些请求往往同时存在，会导致网页运作流程延长，连带运作速度下降，原因在于每当一个HTTP请求产生，其内部都存在大量数据，在运作过程当中每项数据都必然侵占一定的网络资源，介于网络资源的有限性，当数据量大于瀏览器的网络资源，就会导致卡顿、崩溃等问题，因此在优化目标下，应当通过减少HTTP请求的方式来进行前端开发工作。具体方法上，本文建议采用合并文件、CSSSprites以及内联图像等方法，这些方法可以有效压缩、打包HTTP请求，表层上减少HTTP请求，内层请求则被分化为另一队列，本质上并不会造成请求数量减少。

2.5文件夹大小控制

文件夹是Web数据传输中常见的数据打包形式，其内部文件数据越多，就代表自身“体积”越大，这一点符合正常逻辑，但在现代海量数据传输条件下，用户在使用文件夹进行数据传输时，常常会遇到文件夹过大的现象，严重影响了传输速度、文件加载速度，同时对网页响应速度、交互性能也有影响，严重时也会导致网页崩溃，因此在前端开发工作中应当对文件夹大小进行合理控制。在方法上，本文建议采用文件夹压缩方法来实现，即现代压缩包技术十分成熟，可以将大量文件夹封装于一个“包裹”当中，大大减小了文件夹的大小，同时还可以对文件夹内多余的标签进行删除，采用CSS文件、代码处理方法来实现优化目的。

2.6底部script

在本质上，script可以被定义为一种同时具有批量处理文件、纯文本保护功能的脚本程序，是一种功能上的延伸，在正常条件下script可以对网页中的请求进行分析实现逻辑分支，但在逻辑分支过程当中，会产生很多“询问”流程，同时分支过多也会影响网页性能，因此在早期Web开发过程当中，因为开发人员通常不会刻意将script放置于底部，所以导致script脚本经常对网页下载页面加载进行阻碍，长时间无法得到响应，说明有必要对这种script开发方式进行优化。而将script放置于底部，可以很好地化解这一问题，有效提升页面组件下载速度、减少页面加载时间，提高网站前端性能。

3结束语

本文主要对Web前端开发技术及其优化进行了研究工作，通过研究了解到当前Web前端开发技术主要包括HTML、CSS、JavaScript，三者之间存在一定差异，但在开发过程当中也可以联合应用;就现代Web前端开发方式来看，其还存在很多不足点，因此提出了六项优化策略，主要对各项策略对应的问题、影响以及策略应用方法进行了分析，通过各项策略的应用可以有效提高开发质量。