关于云平台下Web前端的优化问题探讨

2021-12-31何贤芳

科学与信息化 2021年10期

何贤芳

重庆信息技术职业学院重庆 404000

伴随着这些Web应用平台的使用和使用，在平台的设计上相继出现了一些问题，其中最典型的是：代码过多，兼容性差，平台页面打开缓慢，用户提供相关信息等待时间过长(特别是在大访问量的情况下)，用户体验差，用户连接低。如何快速加载网站，提高网站对各种用户请求的响应速度，提高用户满意度和保存率，是不同应用平台开发建设所面临和要解决的问题。一般而言，Web前端具体包括以下几个方面：浏览器下载，图片下载，网站浏览等等；主要负责后台的功能实现。Web前端的设计是否成功，直接影响用户的使用体验，一般来说，优化Web前端的方法有两种：基于页面的优化，比如控制HTTP请求的数量，使用浏览器缓存，控制Cookie的传输，以及激活文件压缩。另外一些是基于代码的优化，比如 CSS优化，HTML结构优化，JavaScript优化等等。

1 优化HTTP请求数量

降低 HTTP请求的数量非常重要，为了提高音乐资源查询平台的访问性能，增加服务器与浏览器之间的通信带宽，需要恢复一个新的通信链路（通常，任何要求都包含相关的通信数据），以便占用有限的带宽。若查询量超过浏览器所支持的量，网站对用户查询的响应时间会大幅增加。与此同时，通过合并 CSS（合并浏览器所需的一些CSS文件）减少了 HTTP请求的数量，这样，浏览器只需要请求 HTTP就可以了，因为有许多工具可以合并或压缩CSS文件（如 Grant、 Web pack等），合并图片（浏览器必须把一些小图片合并成一张图片，这样可以有效地减少图片请求的数量，提高网站的加载速度），JS等等，值得注意的是，1.1版本之后，HTTP协议可以在 TCP/IP连接中发送多个HTTP连接请求，而不必按照查询顺序等待答案。但是，为了确保Web平台的性能，开发人员应该考虑如何在平台设计期间减少 HTTP请求的数量。

2 使用浏览器缓存

该平台包含了大量的静态资源文件，无须频繁更新，如CSS文件、JS文件、图像文件、PDF文件等，默认情况下都需要通过 HTTP请求读取。如平台开发人员将上述文件放入浏览器缓存，用户只需在第一次访问该页面时下载文件，再次访问该页面时直接从浏览器缓存中读取文件，这无疑会大大加快对平台的访问速度。事实上，可以通过配置诸如 Expires和Lastmodified属性等 HTTP头文件的某些属性来启用浏览器缓存。这些 Expires属于可用于指定浏览器缓存的有效时间（在这段时间内，浏览器不发布上述资源文件），如果开发人员能够及时掌握上述资源文件的变更时间，则通常可设置为一个星期，否则可设置为较长但不超过一年。需要说明的是：Expires属性对于服务器和客户机的时间是否同步的要求非常严格。不同步的话，很容易导致缓存提前失败。Certified属性用于确定最终修改的具体时间。在用户首次请求访问某一页时，服务器将在相应的返回头信息中包含上次修改的属性。在浏览器缓存被打开之后，可以使用专业工具进行验证（不同浏览器应具有不同工具）。拿 Firebox浏览器来说，用 Httpfox测试这个页面。经过测试发现：当第一次访问测试页面时，结果值为200；当再次访问测试页面时，结果值为304。这样就足够说明浏览器缓存已经成功启用了。

3 启用文件压缩

网络文件（包括 CSS、 JavaScript、 HTML等）可以在用户的服务器和浏览器上被压缩，极大地减少了网络文件的数量（压缩率可达到80%以上），节省了校园网的带宽，提高了用户的访问速度。当前，g-zip压缩广泛应用于服务器或用户浏览器上的 Web文件压缩。第一，是的在 UNIX系统中使用g-zip压缩。在压缩技术不断发展和更新的今天，压缩已成为网络中最流行的方式。注：g-zip压缩增加了 CPU负载。我们应该提前计划g-zip压缩，避免服务器和浏览器的工作压力[1]，如果服务器支持g-zip，就可以使用专业工具（不同浏览器有不同工具）查看，例如 Google Browser。借助于它的开发工具，你可以查看音乐资源和平台首页的标题信息。显示的内容代码非常专业，因为 Gzip显示的结束指示文件压缩已成功激活。

4 CSS性能优化

在开发搜索音乐资源的平台时，相应的CSS（层叠样式表）就变成了自己的Web文档。主要目标是提高用户浏览器的速度，下载页面（浏览器会先下载，然后加载和呈现所有内容）CSS.如果相应的CSS（class）（class样式表）放在Web文档的其他部分，比如 Web文档的底部，则可能导致一些主流浏览器停止按顺序呈现内容。另外，还优化了 CSS代码。该优化方法主要有以下几个方面：第一，删除一些不必要的字符（如空格、换行、注释、缩进等）；第二，尽量使用缩写；第三，合并相同的样式；第四，删除不用的样式。可以有效地减少CSS文件大小和站点加载的时间。

5 JavaScript性能优化

许多 JavaScript代码在开发音乐资源检索平台时，只是一种解释和执行语言，只能在单线程机制下运行，无法有效地保证用户浏览器的性能。原因在于在生成新变量时使用了 with语句。当 with ()语句必须被访问时， JavaScript引擎将搜索 with ()语句创建的新变量，这将不可避免地增加搜索时间；第三，不要使用 for in循环。如果使用for-in-loop，那么需要花费更多时间处理其他数据元素；第四，删除重复的脚本。反复执行脚本不仅会产生冗余的 HTTP请求，还会增加 JavaScript的计算量，这无疑会影响到平台性能。