基于网站制作的Web前端开发技术与优化
来源:用户上传
作者:
摘要：Web是全球广域网的简称，它是一种全球性的、动态交互分布式图形信息系统。Web前端开发技术主要是以网页制作为基础发展而来。本文简要探讨网站制作的Web前端开发技术和相关优化措施，希望予以相关人员以借鉴意义。
关键词：网站制作;web前段开发;技术优化
中图分类号：TP393.09 文献标识码：A 文章编号：1007-9416（2020）01-0058-01
在早期阶段网站的设计主要以静态界面为主，主要作用是为用户提供简单的信息及图片浏览功能，在后来一段时间内技术逐渐发展使得数据交互能力不断提升，网页所必须的跳转次数降低。在技术不断更新的信息化时代，Web前端开发技术需要不断的推陈出新，从而应对日益增加的需求。网站制作所涉及的内容十分广泛，不只限于简单的图像处理以及文字布局等问题，还需要在数据库建设方面不断深化。由于相关技术的不断更替，目前阶段网站制作的形式逐渐呈现多样化的发展趋势，在Web前端技术的发展历程中，出现了很多桌面软件的Web，在网页内容上逐渐出现了更多的信息表现形式，例如：视频，flash动画等，这些多样化的信息表现形式提升了用户的信息浏览观感。由于现代网络技术的不断发展，越来越多的人投入到前端工作中来，因此Web前端开发技术也会不断的发展和革新。
1 Web前端开发技术
Web前端开发通常创建Web页面并展示给用户进行浏览的过程，主要通过：HTML、CSS、JavaScript等技术来实现互联网产品的用户界面交互。这三种语言中HTML是网页的核心，它是万维网浏览器的一种基础语言，可以实现计算机之间的信息交流，是网页文档的基础结构语言。CSS主要涉及到网页外观制作，熟练的掌握CSS可以使得网页在外观上更加吸引人。JavaScript则是用于Web应用开发，可以为用户提供更加顺畅的浏览效果。
由于Web技术不断成熟，B/S软件体系结构诞生了，并且随着技术的不断发展使得B/S结构的功能逐渐趋于完整，这种结构可以对信息进行分布式处理，从而减少资源损耗，提升整体系统性能。用户要进行信息浏览需要输入网页地址，之后向服务器发出访问请求，之后服务器会分析域名，并寻找IP地址，从将计算机引导到预定网页页面中。在客户端发送HTTP到服务器中，接受请求服务器会对文件内容进行确认。确认后的文件通常表现为确定的网络地址。在此阶段中，Web服务器主要调取文件内的内容和URL参数，并依据数据显示出HTML页面。当文件生成完毕后，服务器会完成HTTP请求，此时浏览器就可以接收到HTML文件信息，并进行文件内容分析，之后要求服务器传输相关资源文件，当服务器对请求作出响应之后，会通过网络将所需的资源文件传输到浏览器之中。当浏览器接收到资源文件后，浏览器要对接收到的数据进行相关整理，并将数据显示在主页面上，并依据设定的排版结构进行排版。在这一阶段中，浏览器会依据HTML文件的内容进行执行工作。
2 基于网页设计Web前端开发技术的优化
要实现Web前端开发的优化并不是一件十分容易的事，因为优化原则中提出的要求会与工程原理出现相悖的情况，例如：将css放在头部与js放在尾部这两条原则，主管不能要求工程在写样式和脚本引用时频繁的修改相同页面，这会导致团队的效率严重降低，因此性能优化工作就需要周期性的进行。Web前段开发技术的优化可以从以下几个方面进行。
2.1 减少HTTP请求数量
要提升用户体验就需要在前端优化上做文章，银钱前端的问题可能会消耗掉整体时间的绝大部分。性能黄金法则表明只有10%—20%的最终用户响应时间花在接受请求的HTML文档中，而绝大部分时间都用在了HTML文档引用的组件进行的HTTP请求上。所以要想提升响应速度就必须要减少组件数量，从而降低HTTP请求数量。通常的解决方法之一是利用CSS Sprite将网页中比较小的图片进行整合，从而得到一张图片文件，并利用CSS的background—image属性插入图片，之后利用background-position属性对图片中所需要的部分进行精确定位，从而减少服务器的请求次数。
2.2 cookie优化
由于HTTP请求都会在硬盘上产生跟这个域名有关的cookie信息，当cookie信息越来越多时，会出现请求头逐渐增大的问题，并拖慢相应时间。进行cookie优化可以从以下几个方面来进行：（1）去除没有必要的cookie，如果网页不需要cookie就可以完全禁止。（2）将cookie降至最小，由于cookie在访问域名内的资源时会以HTTP请求发送到服务器中，因此减小cookie可以减小HTTP请求报文的大小，从而提升整体响应速度。（3）要设定一个过期时间，给cookie添加一个过期时间，cookie信息会在硬盘上进行储存，如果浏览器退出cookie仍然会存留在硬盘上，因此当再次进行访问时cookie就会在访问对应域名是发送给服务器。（4）以不同的domain降低cookie的使用，在访问某些资源时，例如：js、css以及图片时，多数的cookie是多余的，所以可以運用不同的domain来储存静态资源，从而在访问资源时避免发送多余的cookie数据，从而加快响应速度。
2.3 CDN内容分发网络
浏览器是根据域来缓存内容资源的，只要域不一样，即使是用一个资源，仍然需要重复下载，并使用同样的方式缓存起来，这就需要占用网络带宽以及本地缓存空间。要将CDN用于前端性能优化可以通过下列方法进行：第一，将静态资源缓存到距离用户很近的相同网络运营商CDN节点上，不同位置的用户在访问同一个域名时得到不同的CDN节点的IP地址，通过智能DNS服务获取最近的运营商CDN节点IP地址后，不同用户会向最近的运营商发送CDN节点请求，CDN节点会判断自己的内容缓存是否有效，当一个区域内某个用户预先加载资源后，就会在CDN中建立缓存，从而方便后续用户直接读取。
2.4 DNS解析优化
DNS查询的过程需要20毫秒左右，当进行DNS查询时，浏览器处于等待状态，如果DNS查询请求较多，网页的整体性能会受到很大的影响，所以需要进行DNS缓存。另外还可以减少DNS查询的次数，由于DNS查询也会消耗时间，因此如果网页内容来着不同的域，则客户端第一次解析这些域的时候就会消耗一定的时间，但是由于DNS的查询结果会在本地系统及浏览区中存在一段时间，因此DNS查询通常只在首次访问时会对速度产生影响，减少DNS查询次数需要减少不同域的请求数量，例如尽量将外部域的对象下载到本地服务器上。
3 结语
前端优化是一个系统性的工程，需要从多方面进行并行工作，前端优化工作关系到用户浏览的质量，因此在网站制作的过程中必要要周期性的进行前段优化，以保证用户浏览体验。
参考文献
[1] 陈捷.基于网站制作的Web前端开发技术与优化[J].现代信息科技，2019，3（08）：111-112.
转载注明来源:https://www.xzbu.com/8/view-15176287.htm
