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

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

为何提高网络效果？
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地址：/news38/241838.html

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

广告

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