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

2020-11-25邢翀

电子技术与软件工程 2020年14期

邢翀

（长春金融高等专科学校信息技术学院吉林省长春市 130000）

信息化时代，人类社会出现数字化特征，人们对于网络信息技术也更为依赖，多元化的媒体结构使得网页也更为生动丰富，网页的作用也更为繁琐。Web 前端开发技术是科技信息的产物，在很早之前是静态的网页，主要是承载单一的文字和图片，然而在当前这个信息化的时代，网络用户对于网页数据交互的使用频率在不断增加，社会各界对于Web 前端技术也有了新的要求，早期的Web 前端开发方式已经不在适应当前社会的发展，这就必须要对Web 前端技术进行优化，提高页面运行效率，提升用户体验。

1 Web前端技术概述

Web 前端涉及到HTML、CSS、URL、HTTP 等，这些元素组成了Web 前端系统，并且这些元素按照相应的技术标准，各司其职，共同协作，维护网页的正常运转。比如用户在地址栏输入相关的网址，经过DNS 进行域名解析，获取相应的IP 地址，再来调用文件目标，形成html 页面，执行http 请求，并将信息进行整理排版发送到终端设备。

Web 前端开发的过程中会应用到一些工具，主要是HTML（Hyper Text Markup Language）超文本标记语言，这是一种标示性的语言，其中含有多个标签，主要是统一网络文档格式，此命令可以说明文字、图形、动画、声音、表格、链接等，与传统的flash 语言有相似之处，但是却比flash 更为便捷，目前在一定程度上可以取代flash。CSS 是层叠样式表，主要目的是用来控制网页样式，展示html 应用集的文件样式，是Web 前端开发中必不可少的一部分。CSS 可以更好的修饰网站外观，比如页面的透明度与网页阴影效果等，用以切割网页内容与对应样式，简化了网页代码，使得CSS 被重复利用，在一定程度上提高了浏览器的运行速度，而且CSS 易于使用和修改，方便后期维护优化。JavaScript 是脚本语言，具备多种形态，是基于浏览器引擎的一种语言，在html 间嵌入Web 页面内基于对象、事件驱动的解释性编程语言。JavaScript是一种开发语言，自开发初期就应用在Web 前端开发中，其主要目的是为静态的页面添加动态功能，可以有效避免兼容问题，另外JavaScript 具备实时、交互、动态的语言表达，可以不依赖Web 服务器，与用户进行良好的信息交互。除此之外，Web 前端开发技术还包括Ajax、DOM 等技术，Ajax 可以向服务器传输、读写数据，DOM（文档对象模型）将XML 文档进行节点抽象继承树形数据结构。

2 Web前端技术应用现状

Web 前端开发技术起步较晚，比如百度在2011 年推出百度新页面，运行时长依旧很长，是后端运行时长的数倍，因此在Web技术发展之初，弊端非常明显，后期Google，Yahoo 等公司推出多种前端优化方案，比如Speed tracer、High Performance Web Sites、优化http 请求等，这些优化手段在一定程度上提高了浏览器的运行速度，但是没有针对浏览器进行限制优化，优化效果不佳，制约了Web 前端开发技术的发展。

Web 前端开发技术优化的主要难点在两处，浏览器的二连接限制与B/S 结构限制。通常来说Http 协议明确规定客户端与服务器的并发数，约束并发连接数，即在同一时刻，单一的客户端、服务器的持久连接数是一定的，主要目的是为了避免服务器拥塞，这就导致用户在浏览中会触发多个异步JavaScript 请求，阻止服务器响应请求，从而使得后续的Http 请求被堵塞，影响网页响应速度。B/S 结构限制，主要是用户在浏览器中输入相应的URL，进行IP地址解析，再由Http 请求发送命令到服务器，服务器接收到浏览器所发送的请求，开始解析Html 文档，并对终端进行响应的过程，其中浏览器与服务器的通信过程就是B/S 结构优化的难点。

3 Web前端优化策略

Web 网页的主要价值在于传递信息，并满足用户的相应需求，对于网络用户来说，网页的加载速度是访问网页的关键。如果网页加载速度慢，就会直接影响用户体验，用户等待时间过长，就会直接关闭网站，用户无法高效利用网络信息，网站也会损失大量的访问量。因此在开发工作中，要优化改善网络性能，提高工作效率。对于Web 前端开发优化的方向有很多，本文就着重介绍几个主要的方向，下面就对其进行一一分析。

3.1 优化HTML、CSS、JavaScript开发语言

HTML、CSS、JavaScript 是Web 开发的主要开发语言，在对Web 进行优化的时候，自然要先优化这几种技术语言。对于HTML语言的优化，就要清楚了解HTML 的原理。HTML 作为主要的组织语言，来保证HTML 代码清晰、简化，保证HTML 的语义化特性，尽可能的减少空属性问题，减少文档对象模型节点，从而来提高页面的渲染速度与运行速度。优化CSS 的角度比较多，主要是避免代码重复，从而来减少总体代码量，尽量避免使用CSS 符层级，从而来简化开发流程，在开发的时候，要把CSS 放在顶部，这是由于CSS 特性决定的，众所周知，CSS 具有层叠特性，后面的CSS 可以完全覆盖前面的CSS，在加上浏览器的工作原理是先完全加载信息，然后在进行内容渲染，因此把CSS 放在顶部，可以更好的实现Web 优化。优化JavaScript 是前端开发的重点，JavaScript在前端开发具有多元化的动态特性，使用可优化面也较大，在优化的过程中，要减少全局变量的使用次数，避免重绘与回流，尽量不使用function、with、eval；的使用，删除重复的JS，在开发的过程中，要将JavaScript 放在底部，可以防止因脚本阻塞而导致的页面加载时间过长的问题。这里需要注意的是，网页设计也会影响网站运行效率，因此在进行设计的时候除了要符合人类审美习惯外，还要考虑页面运转的流畅性，必要时对页面进行分流，降低加载总量。

3.2 减少HTTP请求

HTTP 请求的表现形式多样，请求方式也比较多元化，而且这些请求会同时产生，消耗过多的运行时间，导致网页运行时长延缓，降低网页数据传输速度，想要优化Web 前端开发技术，自然要减少不必要的HTTP 请求。每一个HTTP 请求产生的时候，内部数据都会占用大量的网络资源，这是由于HTTP 请求的特性决定的，完整的HTTP 请求包含DNS 寻址、发送双方的数据、建立浏览器和服务器间的连接并传输数据、等待服务器响应等环节，这就意味着HTTP 携带的大量数据会出现在每个过程中，这些数据会占用大量的网络资源，然而网络资源是有限的，这就使得网络出现卡顿、崩溃的现象，从而增加了用户等待时长。因此适当的减少HTTP 请求，可以在一定程度上提高网页运行速度，主要方法是将多个CSS或者JavaScript 合并为一个，压缩打包HTTP 请求，从表层上减少HTTP 请求；利用内联图像的方法来优化图片地图，采用绝对定位背景图的方式来提高网页的载入速度。

3.3 优化文件规模，控制文件夹大小

网页加载速度与文件规模息息相关，文件越大，加载速度越慢，直接影响网页的响应速度，严重会导致页面卡顿、崩溃等情况的产生。因此文件越大，宽带资源占用越多，这就需要加强网页文件的规模控制，压缩JavaScript 和CSS 文件，删除多余的HTML 标签，有效避免内联样式的出现，从本质上降低文件大小。文件夹是Web数据传输打包形式，内部文件数据越多，文件夹就越大，在使用文件夹进行数据传输的时候，会直接影响传输速度与加载速度，从而延迟了网页响应速度，降低网页的及时交互特性。这就需要在进行Web 前端开发过程中，合理控制文件夹大小，现代文件夹压缩技术也很成熟，在进行传输的时候，可以采用文件夹压缩技术来封装文件夹，减小文件夹的体制，另外要删除文件夹多余的数据信息，保证用户的流畅体验，避免页面长时间留白。

3.4 优化DNS查询

DNS 查询是用户浏览网络信息最常见的功能之一，DNS 的每次解析至少需要20ms，过多的DNS 查询会加大时间开销，直接影响到网页的响应时长。一般来说，单纯的DNS 查询出现的延时是看不出来的，但是随着用户使用时间增加，浏览器缓存过多，DNS查询时间会延迟，或者DNS 解析过于频繁，都会降低信息传输质量，导致网页内容无法全部显示，而且在DNS 查询结束前，页面中的任何内容都不能加载，这就需要对DNS 查询进行优化。主要是避免加载重复的页面，增加自动清理缓存的功能，提高网页加载速度，从而来优化DNS 查找。

3.5 优化Web前端浏览器二连接

Web 前端浏览器二连接优化主要包含两个模块，其中在请求调度解决方案模块中，将文档下载完成时间与文档渲染运行时长作为衡量网页性能指标，浏览器可以根据HTTP 请求数量，自主合理的调整HTTP 请求顺序，从而来降低总体HTTP 请求响应等待时间。在SACC 算法设计模块中，结合用户的实际需求，遵循最小优化策略原则，精确计算视频、文本、图片消耗时间与网页渲染速度，进行综合调度优化。在综合调度解读，工作人员可以根据调度模型，设置度量顺序，设置总等待时间比重，从而来优化HTTP 请求发送顺序。

3.6 优化Web前端B/S结构

Web 前端B/S 结构直接影响着Web 前端性能，这就需要优化Web 前端结构，从而来提高网站响应速度。优化B/S 结构，主要是优化延迟加载，比如在页面刚开始加载的时候，减少HTTP 请求，根据实际情况，延迟加载图片、组件等非关键信息。比如WEB 页面在加载图片的时候只加载首屏，后面的图片可以根据用户实际情况来进行加载，降低非必需HTTP 请求数量，在对非必要组件进行加载的时候，只需要更改组件预加载机制，利用浏览器空闲时间来进行加载，从而来提高页面加载效率。另外还可以优化服务端，主要是优化HTTP 请求资源传输路径，采用多域名策略，优化域名，合理划分Web 前端页面内容，促进页面下载平衡。还可以在服务器中设置头部信息缓存模式，最大程度的避免资源重复加载，尽可能减少网络资源的占用，降低网页加载时间。最后还可以利用Ajax特殊的服务器传输异步性，提高Web 前端网页性能，保证网页响应的及时性。

3.7 杜绝无用响应，避免重定向

无用响应是用户访问网站的常见问题之一，比如403，404 错误等，HTTP 请求又非常消耗时间与带宽，而这些消耗会换回一个无响应页面，这对于用户体验来说是非常不利的。因此在进行Web前端开发过程中加上Error 日志追踪，从而减少错误的产生。除此之外，网页重定向也是影响网页等待时间的主要因素之一，网页的重定向会耗费网页运行时间，其中重定向发生一次，Web 请求就会增加一次，因此在进行Web 前端开发过程汇总，需要在子目录后加“/”，有效减少重定向的次数。