Web 前端开发技术及其优化策略

2020-01-08何莉

通信电源技术 2020年6期

关键词：等待时间浏览器网页

何莉

（长江职业学院，湖北武汉 430074）

0 引言

Web 前端开发技术源自于网页制作，得益于网页制作水平的不断发展，网页已由传统静态内容显示转变为动态显示，即对Web 前端开发技术提出更新换代的现实需求。

1 Web 前端开发技术体系简析

1.1 HTML/XHTML

HTML5 是HTML（超文本标记语言）的全新版本之一，其优势在于给予网页更有利的现实意义及运行架构[1]。可进一步使得网页架构更为简明可视化，提高管理效率。尤其是移动设备上，HTML5 在用户体验中发挥着及其重要的作用，进一步的满足用户的使用需求。XHTML 作为一种可以扩展的超文本标记语言，其表达方式虽然和HTML 是相同的，但是却有着语法更加严谨、精确的优势，在促进标签、字符越来越规范的同时，也增强了跨平台的能力。

1.2 CSS

CSS（层叠样式表）属于可同步展示HTML、XML中单个应用或者子集的文件样式计算机语言，其重点作用主要发挥于Web 前端开发[2]。主要功能包括控制网页样式、允许网页内容与对应样式信息分割等。借助于CSS 开展前端开发，进一步优化浏览器的运作速度、维护难度。在运作原理层面来说，CSS 可再度简化传统网页格式代码，可使代码被层叠，然而代码的外部样式表仍旧保存于浏览器缓存中。这一表达方式，可直接提升Web 下载显示速度、减少上传代码的数量，即可表明说网页浏览速度得以增强。同时，分析协议特点而言，CSS 的一大显著特点在于使用及修改的便捷性较高，即接组合HT-ML 元素中的style 属性，CSS可将该样式定义保存于这一属性中，又或是将其归类于header 模块，上述表现均可被HTML 页面直接引用，用户可对此展开逐级逐项修改，便于管理。

1.3 JavaScript

JavaScript 语言的前身是Netscape 公司发布的Livescrip，其属于基于对象及事件驱动且多相安全性足够的客服端脚本语言，本质上符合传统高级计算机语言的基本特点。但因其学习及实际编写而言更为简便、高效等，现阶段已广泛应用于互联网开发[3]。JavaScript 的显著特点在于，可直接嵌入HTML 页面，可以直接应答用户的需求，让网页与用户之间的交互更加的便捷快速，不仅不需要以Web 服务器作入路也不依赖于操作系统，普通浏览器应当支持即可，因而还具备强大的跨平台特性，多个平台下均可正常运行。

2 Web 前端开发技术优化策略

2.1 减少HTTP 请求量

对于一个完整HTTP 请求，其包括了多个环节，从DNS 寻址、数据的发送，到浏览器于服务器之间的连接和数据的传输以及等待。要保证请求的正常进行，每一个请求都必须要有对应的数据，都需要占用独一的宽带资源，上述请求几乎同步运行，即可直接延长网页运作流程，降低连带运作速度下降，增加用户等待时间。分析其原因在于一旦产生单个HTTP 请求，其内部即会迅速响应多级运行产生的大量数据，运行过程中每项数据均一定会占据一定量的网络资源。加之，囿于网络资源可自由利用的有限性，一旦运行数据量大于浏览器的网络资源，即会引起卡顿、崩溃等问题[4]。因而在该优化目标之下，应最大程度减少HTTP 请求来优化前端开发工作。经综合类比分析，需做到如下3 点：将多个的CSS 文件或JavaScript 文件合并在一起，让其同时运行；进一步的完善和优化图片架构，可以在一个图像上进行多区域划分，并且输入不同映射的连接；实现图片和文本一起下载，通过借助于CSS background 开展背景图绝对定位。以上操作，可有效压缩、打包HTTP 请求，一级表层面上减少HTTP 请求，内层请求则直接分化为独一的队列，且并不会减少请求数量，从而直接提升网页载入速度，从而提高用户操作体验。

2.2 适当缩减文件大小

若文件过大，很大程度上可增加加载储存，导致加载迟缓，进而放缓网页的响应速度及互动反应，同时可引起网页卡顿、崩溃、无响应等情况，因而必须加强控制网页文件的合理化干预。可先行压缩JavaScript，而后剔除多余的HTML 标签，同时优化CSS 文件及代码，以此提升文件加载速度，只将一级运行页面呈现于用户，可有效提升操作流畅性，规避传统技术条件下产生的页面留白时间过长、反应过慢等问题。例如，资源合并压缩指令，CSS，JS 压缩：；；；

2.3 减少DNS 查询

DNS 查找有一个普遍的缺陷，也是我国网站的一个常见问题，那就是耗费时间比较长。一般一次DNS的解析所消耗的时间为20～120 ms，如果DNS 查找的请求量增加或者比较频繁时，所耗费的时间也就增加，还会降低信息的传输质量，一直到查找结束之前，浏览器都不能下载。目前，我国大部分的站点，都是使用Widget，容易导致DNS 查找量过多[5]。为了提高用户体验，减少用户等待时间，就需要减少DNS 查找，以此来提高网页的加载速度；同时也需要加强对DNS查找的优化，提高运行效率。

2.4 抑制及减少无用响应

使用者在访问网站时，一般会出现无效相响应，为其造成困扰，如出现404 错误、拒绝访问等，产生这一错误的原因就是未能找到文件。HTTP 请求耗费时间过长，而该等待时间过程中主要呈现无效响应界面，从而影响用户体验。面对这一问题，可以对页面的连接开展多层测试，对服务器Error 日志的持续性进行跟踪，以此来规避错误的发生，但是在日常操作中，该类错误可因其定位难度较大而易被技术人员忽视。

2.5 底部放置script

本质而言，script 应属于一种具有可同时批量处理文件及纯文本保护功能的脚本程序，是功能化的拓展。通常，seript 可直接对网页中请求开展分析且实现逻辑分化处理，然而逻辑分支过程中可并发产生大量询问环节，同时分支量较大可直接降低网页性能，因而早期Web 开发过程中。由于技术人员并不会针对性的将script 放置于底部，因而导致sceript 脚本大多情况下网页下载产生阻碍，长时间内均未得到有效响应[6]。即可提示对此类script 开发方式予以优化十分必要，而将script 主要放置于底部即可有效解决该问题，可直接提升页面组件的下载速度，缩短减页面加载时间，进一步增强网站前端性能。