动态网页前端开发技术以及优化策略研究

姜立

(辽宁轨道交通职业学院,辽宁沈阳 110023)

1 引言

互联网信息技术的发展,是人类文明史的创新,缩短了人与人之间的距离,通过手机APP实现实时的聊天通话,比如微信、MSN等。在互联网技术日益成熟的过程中,网络成为了人类生活生产不可缺少的部分,实现了在户不出门,尽知天下事。移动支付、网购成为了中国新四大发明,方便了人们的生活,提高了人们的生活品质。互联网行业在发展的同时,需要网络提供信息资源,建立并遵守信息安全机制,保证维护安全绿色的网络环境。Web前端开发技术主要用于网页信息的开发、设置网页形态等。它对互联网用户的信息传输和服务体验都具有不可替代的作用,也是促进信息价值的体现和互联网商业化进行的基础。Web前端开发技术应该得到加强,优化技术不断创新,从而促进信息网络的可持续发展。

2 Web前端开发技术的综述

2.1 Web前端开发技术体系

Web前端开发技术主要由HTML、CSS、JavaScript、DOM以及AJAX五部分组成。这五部分分别具有属于自己的特征,承担着不同的任务要求,尤其是代码质量方面存在一定的差异性,且五者之间又存在一定的联系。HTML是常用制作的方式,研究且调整超文本结构,进行图案修正,渲染网页的动静态效果,也同时便于管理网站,提升用户的应用体验。CSS是一种标记性语言,更倾向于控制网页的外观,将内容和格式隔离,便于维护和更新网页,加快网页的浏览速度。JavaScript可以进行实时的表达,减小服务器端的压力,提高了用户使用效率,降低排斥效应。DOM发挥着特别重要的作用,是一种与浏览器等相关的接口组件,增强网页之间的联系。AJAX可实现异步通信,减少请求信息量,提高网络运行的稳定性。

2.2 Web前端开发技术模块功能

Web前端开发技术拥有的模块具有改善开发功能、多向开发功能、兼容开发功能。改善开发功能包括降低了反应时间,提高网页的运行稳定性,节省内存容量,提高了浏览网页的速度等功能。多向开发功能包括缩短运行的反应时间,加快了网页的更新速度,提高运行的效率,网络协议、IP和DNS得到了优化效果。兼容开发功能首先解决了系统与浏览器的兼容问题,实现了技术的修正,改善了系统程序运行的稳定效果,优化执行程序的反应过程,更加便捷的完成系统的指令,弥补了Web前端技术的不足。

2.3 Web前端开发技术体系的工作分析

B/S结构是现阶段常采用的结构,符合当前的网络环境技术特点。用户利用网页输入查询地址时,请求URL执行,DNS服务器开始工作,分析当前的网址域名并获取相应的IP地址信息,实现用户可以直接对地址内容浏览,与此同时,浏览器发送HTTP请求指令,服务器接受HTTP请求,目标文件得到确定,也将以网址的形式传送过来,例如ASP、PHP或者JSP文件等,而Web服务器在此进行中负责依据相应页面文件的具体内容以及URL相关参数,调用数据资源,生成HTML对应的数据并传递给浏览器,然后对HTML数据进行分析,最终将资源文件整理之后展现到网页上。

3 Web前端开发技术的优化

虽然Web前端开发技术可以在顺利传递相应的网络信息,但是随着消费者需求要求的提高,已不能满足消费者的标准,此时就需要对Web前端开发技术进行优化,提高网页的加载速度,增强网页浏览的兼容性和安全性,改善自身存在的不足,从以下几点做起。

3.1 减少HTTP的请求数

减少HTTP的请求数是优化Web技术最重要最有效的方式之一。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。由于浏览器进行并发请求的请求数是有上限的,当请求数增多时,浏览器需要分批进行,会增加用户的等待时间。其主要的途径有从设计实现层面简化页面,保证运行时所占的内存减小;合理设置HTTP缓存,提高浏览器的缓存量和缓存时间。比如,很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个较长的过期时间,使变化不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证,尽可能地让资源能够在缓存中待得更;资源合并与压缩,可以是节省空间资源;Inline Images使用数据,采用URL scheme的方式将图片嵌入到页面或CSS中,建议不考虑资源管理时使用;CSS Sprites和Lazy Load Images也可以减少HTTP请求。

3.2 将外部脚本置底

在浏览器加载资源的过程中,将脚本放置于靠前位置,会影响加载速度从而影响用户的体验。比如,在脚本加载完成之前,它后面 的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。因此,将外部脚本置地,会提高浏览器加载项的速度。

3.3 异步执行Inline脚本

Inline脚本在执行的时候一样会阻塞并发请求,当脚本在页面渲染之前执行时,由于浏览器处理页面的方式是单线程,页面渲染的工作会被推迟,影响程序加载的速度,因此将Inline脚本异步执行。

3.4 降低DNS的查询时间

DNS解析是造成时间等待的重要因素之一,过度频繁的请求解析,必然会导致传输信息的时间加长,并且在解析的过程中无法下载任何资源,从而用户体验效果会降低。适当的控制DNS的解析次数也会提高加载的速度。

3.5 正确加载JavaScript

随着JavaScript框架的流行,越来越多的站点也使用起了框架。但不是每个页面都需要加载脚本,下载了不需要的脚本既浪费时间又浪费资源。在设置JavaScript框架时,只需要加载核心模块,其他脚本需要使用时加载即可。

4 结语

网络技术已经打破了人们传统的思想观念,与学习生活工作产生了密切的联系,成为人类生活中不可缺少的部分。在国家教育部门的大力支持下,促使高校重视Web前端技术技能课程的发展,在教学中贯彻H-C-J模式,培养出适应于社会市场需求的高质量人才。Web前端技术在网络发展的进程中发挥了不可替代的作用,在不断地应用此技术的过程中,应积极创新发展,优化Web前端技术,改善其不足之处,提高网页设计的加载速度,提高网络资源的利用率,达到良好用户体验的效果,促使我国互联网产业创新发展,实现网络强国的重要目标。

[1]王靖.Web前端开发技术及优化策略[J].产业与科技论坛,2017,16(16):44-45.

[2]周康.Web前端开发技术以及优化方向探究[J].电脑迷,2017,(11).