Web前端开发技术以及优化方向分析

陈 鲱

（大庆油田信息技术公司北京分公司，北京 100043）

在当前信息环境之下，互联网对于整个社会生产生活的影响都已经到了不容忽视的地步，甚至于在某些特殊环境之下，相关活动的展开完全会对网络产生依赖。而作为网页呈现的主要依赖技术，Web前端开发担负着网络环境中信息展现的重要职责，并且其工作状况，直接关系到互联网用户对于信息传输以及获取服务的体验，进一步影响到整个信息环境的价值实现乃至于社会环境中诸多经济行动的展开。因此Web前段技术的优化，对于切实提升互联网的使用体验，有着毋庸置疑的积极意义。

1 Web前端技术体系以及工作分析

Web前端技术体系中，HTML、CSS、JavaScript成为三个支撑性质的关键因素，三种语言分别承担不同职能，并且执行和遵守不同标准，同时又保持着密切的合作关系。

而想要面向Web前端技术的实现展开良好的优化，首先需要切实对其工作过程中的每一个细节有所了解，在此基础之上，才能获取良好效果。

当前的网络环境中广泛采用B/S结构，因此从客户端的浏览器展开相应的分析，无疑符合当前的网络环境技术特征。在浏览器对服务器展开页面请求的时候，首先由用户在浏览器端输入网址，来实现对于url的请求，而后通过DNS服务器对域名进行解析，获取到该域名所对应的页面ip地址，该地址可以让计算机直接实现访问。在此基础之上，位于客户端的浏览器会面向对应的服务器发送HTTP请求，而服务器端在接收到相应的HTTP请求的时候，依据浏览器对应的url请求来确定对应的目标文件。该目标文件通常以一个页面网络地址的形式存在，诸如ASP、PHP或者JSP文件等。而Web服务器则在这个过程中负责依据相应页面文件的具体内容以及url相关参数，来通过数据库或者相关文件实现对于资源的调用，并且最终实现对于数据的组织和HTML页面的生成。

在生成了HTML文件之后，服务器执行来自于客户端浏览器的HTTP请求，将生成的HTML文件发送给浏览器，而浏览器则负责接收来自于服务器的HTML文件。随后，浏览器会针对HTML文件展开解析，并且进一步面向服务器请求其中的链接资源文件，诸如JavaScript、CSS、多媒体资源、内嵌网页等。服务器会接到浏览器对于资源文件的HTTP请求，并且将对应的资源文件通过网络发送给客户端浏览器。浏览器在接到这些资源文件之后，进行整理并且依据规则呈现到页面环境中，同时承担对相应资源的展现方式实现重新排版的职能。在这个过程中，浏览器会自上而下执行HTML文档，当遇到相应的页面脚本的时候，会对脚本进行分析，并解释执行相应的脚本代码。当执行脚本时，将阻塞之后的链接文件的加载。

2 Web前端技术优化工作重点分析

对于页面的存在而言，其核心价值在于传递相应的信息并且通过信息的呈现满足信息消费者的相应需求，在互联网的整体环境之下，如果这个信息获取和呈现的过程时间过长或者展开形式不佳，必然会影响到用户的信息消费过程体验。从信息提供的角度看，是没有实现信息本身的价值，而从信息获取的角度看，这种状态则有可能影响到信息对称环境的产生，严重的情况下甚至会影响到正常的社会行为。

基于这样的考虑，有必要针对Web前端技术展开对应的优化，切实提升页面对于信息呈现的综合体验，实现信息自身价值。总结而言，有如下几个主要的优化方面，可以作为当前的优化工作重点对待。

2.1 HTTP请求优化

针对HTTP请求展开优化，减少不必要的请求，是切实提升整个Web前段技术体系的首要职责与工作重点。一个完整的HTTP请求包括多个方面，诸如DNS寻址、建立浏览器与服务器之间的连接、双方数据的发送、浏览器等到服务器展开数据的传输等多个环节。而这些环境中的每一个，都必然会占用一定的时间，将多个细节时间进行累加，必然会形成用户端的时间成本，同时也会消费掉整个数据通路商的带宽资源。因此想要从时间上实现优化，实现用户体验的提升，HTTP请求数量的控制必不可少。常规的做法包括将多个CSS文件或JavaScript文件合并成一个，确保其能够在一次请求下加以实现；在图片地图的优化方面，则应当考虑在一个图像上划分不同区域映射不同的链接；而对于内联图像，则应当注意保持图像与文本一同实现下载和显示。

2.2 优化文件规模

对于这一方面而言，其工作相对较为琐碎，主要工作内容包括针对JavaScript和CSS文件以及对应的代码展开优化。优化工作重点主要有针对不必要的html标签进行剔除优化，以及避免内联式样式存在，此外，对于CSS代码优化同样也是这一方面工作的重点内容。

2.3 内容优化

对于这一方面的工作主要可以考虑从两个角度出发，即将样式表放在顶部同时将script放在底部。CSS本身具有覆盖层叠的特征，因此浏览器通常会考虑在完全加载完成之后再展开渲染工作，因此如果想要实现Web优化，则可以考虑从CSS本身的加载着手实现。而对于将script放在底部这一做法，则主要是防止script脚本的执行阻塞页面的下载，从而造成页面组件下载速度不足，页面加载时间过长等问题的发生。

2.4 减少DNS查询次数

DNS是另一个造成等待的因素，通常一次DNS解析20-120毫秒时间，如果频繁发出DNS解析请求，必然会导致信息传输体验的降低。更为重要的在于，DNS的查询本身是浏览器进一步工作的基础，在完成查询之前，浏览器不会下载该域名之下的任何相关内容，因此控制DNS查询请求的次数，对于Web前端优化工作而言至关重要。

2.5 避免重定向

这同样是造成等待时间过长的因素之一，其形成原因相对复杂，从根本上看，每一次重定向都会增加一次Web请求。对于这一方面，可以考虑在Web 站点子目录的后面添加“/”，实现有效避免一次重定向的目标。

3 结论

Web前端开发技术的优化水平，直接关系到用户体验，因此必须予以重视。针对这一问题，只有在实际工作中不断深入学习相关领域经验和技术，并且多展开对于页面展开状态的观察，有的放矢展开优化，才能取得良好效果。

[1]曹刘阳.编写高质量代码：Web前端开发修炼之道[M].北京：机械工业出版社，2010.

[2]邓小善，龙艳军.高访问量网站性能监测与优化的设计与实现[J].现代计算机：专业版，2009（2）.

[3]李强，杨岿，吴天吉.基于Asp_net的网站开发前端技术优化研究[J].软件导刊，2013，12（5）.