成都网站制作:网站优化中如何提高网络性能?

2023-03-05    分类: 网站制作

成都网站制作:网站优化中如何提高网络性能?

为何提高网络效果?
Web性能黄金指南:只有10?o 20%的最终用户响应时间用于下载html文档,剩下的90%花费在下载页面组件上。
根据着名的“2-5-8”原则,网络性能对用户体验有重要影响:
当用户在2秒内得到响应时,系统会感觉非常快。当用户在2-5秒内收到响应时,系统将感受到响应速度。
当用户在5-8秒内得到响应时,系统会感觉非常慢,但这是可以接受的。
当用户在8秒后没有得到响应时,即使系统挂了,系统也感觉很糟糕;要么打开竞争对手的网站,要么重新发起第二个请求。
一切都需要研究,通过科学研究,我们可以找到事物发展的规律。我要感谢雅虎工程师总结了14项前端优化规则,以便我们能够站在巨人的肩膀上。 “高性能网站建设”一书中的14个优化原则总结如下:
减少HTTP请求
页面内部优化
启用缓存
减少下载量
优化网络连接
为什么减少HTTP请求可以提高Web性能?
要回答这个问题,我们需要了解当浏览器向服务器发送http请求以了解如何获取数据时会发生什么:
打开一个链接(tcp / ip三次握手过程) - 发送请求 - 等待(网络延迟和服务器处理时间) - 下载数据
我们来看看每个阶段在百度主页上http请求所花费的时间。上面的不同颜色代表下图中的不同阶段。
可以看出,除了图片之外,大多数http请求事件都花费在建立连接和等待阶段上。
http协议建立在TIC / IP协议之上。在TCP / IP协议中,TCP协议提供可靠的连接服务,并使用三次握手建立连接。
简单来说,三次握手是一个身份验证过程:
(第一次握手:主机A发送一个syn = 1的位代码,随机生成一个seq number = 1234567的数据包到服务器,主机B由SYN = 1知道,A请求建立连接;)
(第二次握手:收到请求后,主机B应确认在线信息并向A发送确认。
Number =(主机A的seq + 1),syn = 1,ack = 1,随机生成一个seq = 7654321的数据包)
(第三次握手:主机A接收到它后,检查确认号是否正确,即第一次发送的序号+ 1,以及位码ack是否为1.如果正确,则为Host A将再次发送ack。
Number =(主机B的seq + 1),ack = 1,在主机B收到seq值并且ack = 1之后,连接成功建立。 )
言归正传,这个过程也需要时间。在百度主页上找到一个极端的例子:
等待时间通常大于内容下载的时间。这也是一个极端的例子:
由此我们可以得出结论,http请求的绝大部分时间都花在建立连接和等待时间上。优化是减少http请求。
如何提高网络性能?
1,减少HTTP请求
通常有两种缩小图像的方法:css sprites,内嵌图像和IconFont。
CSS Sprites:将多个图像合并为一个图像,使用css的background-position属性将html元素的背景图像放入sprite中
图中所需的位置。使用这种技术的另一个优点是它减少了下载量,并且合并的图片小于分离的图片,因为它减少了图片本身的开销(颜色表,格式信息等)。 Css在实际项目中
精灵是一种身体活动,因为在开发过程中需要保持这种大局(增加和减少图片)。张新旭的文章描述了如何管理精灵图像作为参考(这里)。如果你需要提供大量的图像为背景,链接,页面上的导航栏,CSS
Sprites绝对是一个很好的解决方案(干净的标签,更少的图像,更短的响应时间)。
内联图像:通过使用数据:URL模式,您可以在页面中包含图像,而无需任何其他请求。成都网站制作缺点是IE8以下的浏览器不支持这种方法,IE8的数据量有限,只能支持23kb以内的数据。对于较小的图像,您可以直接内嵌到网页中,但将大图像内嵌到页面中会导致页面变大。使用css是明智的,使用内嵌图像作为背景,并将其放在外部样式表中,这意味着数据可以缓存在样式表中。使用外部样式表添加了一个http请求,但浏览器可以缓存该样式以获得额外收益。另一点需要注意:base64是有损压缩。
IconFont:Icon字体,这是近年来用字体替换图片的一种新流行技术。它可以适应任何分辨率而不会出现图像模糊,并且它比图像具有更小的容量和更大的灵活性(图标可以设置为图标大小,颜色,透明度,悬停状态,反转等)。IE8以上的浏览器支持这项技术。在使用IconFont之前,首先需要确定您选择的字体库是否收费。有关详细信息,请参阅此文章:Icon Fontization
减少脚本和样式表请求的主要原则是合并。在实际开发中,我们遵循模块化原则将代码分散到许多小文件中。根据软件开发的原理,这是完全正确的,但对于在线页面,每个文件都会生成一个http请求,严重影响性能。和css
像精灵一样,将这些小文件组合到一个文件中可以减少http请求的数量并减少最终用户的响应时间。在合并过程中我们还需要使用工具来简化(删除不必要的字符以减少文件大小以减少下载时间)和混淆(除了删除不必要的字符外,它还会重写源代码,如函数和变量名使用短标题名称)Javascript代码。对于使用AMD或CMD进行模块化开发的学生,依赖于它的其他模块通常在合并过程中打包到文件中,模板html通常作为字符串内联到Javascript文件中。目前最常用的前端构建工具是glup,这里有一个初步的应用文章:前端
| gulp包require.js模块依赖
2,页面内部优化
关心性能的工程师希望页面尽快显示在用户面前。对于页面上包含大量内容的页面,我们希望可以逐步加载内容以为用户提供视觉反馈。在底部放置样式表会导致浏览器阻成都网站制作止逐步呈现内容。为避免在页面更改时重新绘制页面元素,浏览器会阻止页面呈现,直到解析样式表为止(有关详细信息,请参阅我的博客)。因此,如果将样式表放在顶部并且不减少资源的加载时间,则会缩短页面的呈现时间。小米主页犯了这样一个错误:
将样式表放在底部会阻止页面的逐步呈现,并且将脚本文件放在页面顶部也会阻止页面的逐步呈现。 script元素将阻止后续内容的解析,因为脚本可用于使用document.write更改页面。解决方案是将脚本标记放在页面底部。这将允许逐步呈现内容,以及增加下载中的并行度。如果我们确定我们不需要document.write,我们可以将asyn属性添加到脚本标记(dee添加到Ie)以改进并行下载。
CSS表达式是IE支持动态更改css属性的一种方式。

我们不需要太了解。她写道如下。一旦在产品中找到了表达式关键字,就必须完全消除它。

使用外部脚本和样式,我认为有经验的工程师也会这样做。
删除重复的脚本:这主要是为了避免在页面中多次添加相同的Javascript代码。如果在我们的开发中存在AMD和CMD等依赖管理方法,则不会发生这种情况。
3,启用缓存
关于缓存的使用这里有两种情况:expires / If-Modified-Since,Cache-Control / Etag;前者是HTTP1.0中的缓存方案,后者是HTTP1.1中的缓存方案,如果http报头在同一个中出现,则后者具有更高的优先级。
If-modified-since的方式通常被称为条件Get。文件的副本保存在浏览器缓存中,但您需要询问服务器是否有此副本。 If-Modified-Since是浏览器向服务器发送最后修改时间,服务器比较Last-Modified头; if If-Modified-Since

分享标题:成都网站制作:网站优化中如何提高网络性能?
URL地址:https://www.cdcxhl.com/news38/241838.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

搜索引擎优化