域名回收网站制作:网站优化中如何提高网络***能?
为何提高网络效果?
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
<= Last-Modified浏览器读取本地副本。此时,响应状态为304 Not Modified,并且未发送响应正文。
Expries:虽然使用条件GET和域名回收网站制作304响应可以节省时间,但浏览器和服务器仍然需要发送确认请求。通过显式设置副本的到期时间可以避免条件GET。当浏览器在响应头中找到过期时,它会将过期时间与文件一起保存到缓存中。从缓存中读取,直到它过期。 expires标头使用特定时间来指定缓存的到期***期,并且他要求浏览器与服务器时间完全相同。一旦过期,服务器端配置需要重置为到期时间。
Cache-Control:引入了HTTP 1.1而不是Expires,后者使用max-age指令指定复制缓存的时间。该指令以秒为单位定义更新窗口。请求组件后的秒数小于当前设置。对于固定值,始终使用副本。避免了http请求。与Expries相比,Cache-Control指令提供了更细粒度的控制。有关详细信息,请参阅大同学的文章:通过浏览器查看HTTP缓存。
4,减少下载量
减少下载的***有效方法是打开gzip压缩,这是GNU开发的一种免费形式。压缩组件通过减小http响应的大小来加速响应。 HTTP 1.1使用Accept-Encoding标识支持的压缩。如果服务器看到此标识符,它将使用其中一个请求标头压缩响应。并通过Content-Encoding通知Web客户端。许多网站压缩html文件,几乎任何文本,包括xml和json都可以压缩,但不应压缩图像和pdf。根据经验,通常可以压缩大于1 kb或2 kb的文件。压缩通常会减少70响应的数据量?压缩成本是服务器需要花费额外的CPU来压缩,而客户端需要解压缩。所以你需要在cpu的消耗和数据块的大小之间进行选择。
5,优化网络连接
优化网络连接有三个主要规则:使用CDN加速,减少DNS查找和避免重定向。
CDN:CDN是地理上分布的Web服务器的集合,用于更有效地发布内容。通常基于网络距离来选择服务于特定用户的web服务器。
这缩短了资源的传输响应时间,有效地提高了Web***能。
DNS用于映射主机名和IP地址。通常,单个分辨率需要20到120毫秒。浏览器将首先根据页面的主机名执行域名解析。在ISP返回结果之前,页面不会加载任何内容,因此减少DNS查找可以有效地减少等待时间。为了获得更高的***能,DNS解析通常缓存在多个级别,例如由ISP或LAN维护的缓存。
服务器,本地计算机操作系统的缓存(例如Windows上的DNS客户端)
服务),浏览器。 IE的默认DNS缓存时间为30分钟,Firefox的默认缓冲时间为1分钟。
我们可以做的是***小化页面的主机名,但权衡浏览器的***大并发下载和DNS查找。根据雅虎的研究,***好在2-4内控制主机名。
重定向:将URL重新路由到另一个URL。重定向功能由两个HTTP状态代码301和302完成,例如:
HTTP / 1.1 301永久移动
地点:
内容类型:text / html
浏览器会自动将请求重定向到Location指定的URL。重定向的主要问题是减少用户体验。
雅虎的14项优化规则长期以来发挥了重要作用。随着技术的发展,仅这十四项原则就无法满足前端***能优化。