网站性能优化的10种方法

小编 2022-07-03

1)最小化HTTP请求的数量

Js合并

合并css

图片精灵

2)延迟加载内容

图片的延迟加载

惰性数据加载(点击查看更多)

惰性函数加载(曝光或点击后加载html模块和js函数模块)

3)使用离线缓存

在localstorage中存储常用的js、css和变化不大的图片,第二次访问时直接去本地缓存。在移动端应用广泛。

4)CSS和JS放在正确的位置。

把css放在头部,确保看到页面的时候样式是正确的。

把js放在正文的最后一个位置,防止加载js阻塞页面。

5)静态资源压缩

图片、CSS、JS发布前要压缩。

网站性能优化的10种方法的图片

6)静态资源使用多个域名。

对于图片,CSS,JS,可以使用几个域名,可以并发加载。

7)静态资源由cdn存储

用户与网站服务器的距离会影响响应时间。静态资源可以放入内容交付网络(CDN)以加速访问。

8)预压

一个功能还没展示出来的时候,在空闲时间预装相关图片或者js代码。

9)DOM操作优化

使用JavaScript访问DOM元素很慢,因此为了获得更多页面,您应该执行以下操作:

缓存已经访问过的相关元素。

离线更新节点后,将它们添加到文档树中

避免使用JavaScript修改页面布局。

10)优化算法

js处理中搜索排序算法的优化。尽可能少使用嵌套循环。

使用事件代理

有时候我们会觉得页面没有反应,因为DOM树元素附加了太多的事件句柄,一些事件语句被频繁触发。这就是为什么使用事件委托是一个好方法。如果一个div中有10个按钮,那么只需要将一个事件句柄附加到该div一次,而不是为每个按钮添加一个句柄。当一个事件冒泡时,您可以捕捉该事件并确定哪个事件是由哪个事件引起的。您也不必为了操作DOM树而等待onload事件发生。您需要做的就是等待您想要访问的元素出现在树结构中。您不必等待所有图像加载完毕。您可能希望在事件应用程序中使用DOMContentLoaded事件,而不是onAvailable方法。

减少DNS查找时间

减少主机名的数量也可以减少页面并行下载的数量。减少DNS查找次数可以节省响应时间,但是减少并行下载会增加响应时间。我的指导原则是将这些页面中的内容至少分成两部分,但不超过四部分。这个结果是在减少DNS查找的数量和保持高水平的并行下载之间的权衡。

根据域名划分页面内容

将页面内容分成几个部分,可以让你最大程度的实现并行下载。由于DNS查找的影响,您应该首先确保您使用的域名数量在2到4之间。比如,你可以把你使用的HTML内容和动态内容放在www.example.org上,把页面的各种组件(图片、脚本、CSS)分别存储在statics1.example.org和statics.example.org上。

跳跃的正确使用

在用户和HTML文档之间添加跳转会延迟页面中所有元素的显示,因为没有文件(图片、Flash等。)将在加载HTML文件之前下载。有一种跳转现象,经常被web开发者忽略,却经常浪费响应时间。当URL应该有斜杠(/)却被忽略时,会出现这种现象。例如,当我们想访问http://astrology.yahoo.com/astrology,时,我们实际上返回一个代码为301的跳转,它指向http://astrology.yahoo.com/astrology/(注意末尾的斜杠)。您可以使用Alias或mod_rewrite或Apache server中的DirectorySlash来避免它。

将新网站与旧网站连接是另一种经常使用跳转功能的情况。这种情况下,往往需要将网站的不同内容连接起来,然后根据用户的不同类型(如浏览器类型、用户账号类型)进行跳转。使用jump在两个网站之间切换非常简单,需要的代码量也不多。虽然使用这种方法可以降低开发人员的复杂性,但也降低了用户体验。另一种方法是,如果Alias和modrewrite和implementation都在同一台服务器上,则使用它们。如果因为域名不同而跳转,可以使用Alias或者modrewirte在web服务器上跳转。

可缓存AJAX

在某些情况下,ajax可以使用缓存来减少网络开销。

我们来看一个例子:一个Web2.0邮件客户端会使用Ajax自动下载用户通讯录。如果用户在上次使用Email web应用程序后没有对通讯录做任何更改,Ajax响应被Expire或Cacke-Control头缓存,那么可以直接从上次缓存中读取通讯录。您必须告诉浏览器是使用缓存中的地址簿还是发送新的请求。这可以通过向读取地址簿的Ajax URL添加包含最后编辑时间的时间戳来实现,例如&t=11900241612等。如果地址簿自上次下载以来没有被编辑过,时间戳将保持不变,因此它将从浏览器的缓存中加载,从而将HTTP请求过程减少一次。如果用户修改了地址簿,时间戳将用于确定新的URL与缓存的响应不匹配,浏览器将发出更新地址簿的重要请求。即使你的Ajxa响应是动态生成的,即使它只适用于一个用户,那么它也应该被缓存。这会让你的Web2.0应用更快。

减少DOM元素的数量

复杂的页面意味着需要下载更多的数据,也意味着JavaScript遍历DOM的效率更慢。比如添加事件句柄,500和5000个DOM元素中的循环效果肯定是不一样的。大量DOM元素的存在意味着页面中有一些部分可以在不删除内容的情况下进行简化,只需替换元素标签即可。你在页面布局中使用表格了吗?有没有仅仅为了布局而引入更多的元素?也许会有一个合适的或者语义上更合适的标签给你使用。YUI CSS实用工具可以给你的布局带来很大的帮助:grids.css可以帮助你实现整体布局,font.css和reset.css可以帮助你去掉浏览器的默认格式。它提供了重新检查页面中标签的机会,例如,只在它们有语义意义时使用它们,而不是因为它们有换行效果而使用它们。DOM元素的数量很容易计算,只需输入:document . getelementsbytagname(' * ')。Firebug控制台中的长度。那么多少DOM元素才算多呢?这可以与具有良好标记的类似页面相比较。比如雅虎!首页是一个有很多内容的页面,但是只用了700个元素(HTML标签)。

网站性能优化的10种方法的图片

尽量减少iframe的数量

ifrmae元素可以在父文档中插入新的HTML文档。在更有效地使用iframe之前,了解它的工作原理是很重要的。

优点:可以解决图标、广告等第三方内容加载缓慢的问题;安全沙箱;并行加载脚本;

缺点:即时内容为空,加载需要时间;将阻止页面加载;没有意义;

不要得到404错误。

HTTP请求消耗大量时间,完全没有必要用HTTP请求得到无用的响应(比如404没有找到页面)。只会降低用户体验,没有任何好处。有的网站把404错误响应页面改成“你找* * *”,提高了用户体验但也浪费了服务器资源(比如数据库等。).最坏的情况是,到外部JavaScript的链接有问题,并返回404代码。首先,这种加载会破坏并行加载;其次,浏览器将尝试在返回的404响应内容中找到可能有用的JavaScript代码。

为文件头指定过期或缓存控制。

这个规则包括两个方面:对于静态内容:将文件头的过期时间设置为“永不过期”(Never expire);对于动态内容:使用适当的缓存控制文件头来帮助浏览器进行条件请求。网页内容设计越来越丰富,这意味着页面应该包含更多的脚本、样式表、图片和Flash。第一次访问您的页面的用户意味着发出多个HTTP请求,但是可以使用Expires头来缓存这些内容。避免了后续页面访问中不必要的HTTP请求。Expires文件头通常用于图像文件,但它应该用于所有内容,包括脚本、样式表和Flash。浏览器(和代理)使用缓存来减少HTTP请求的大小和数量,以加速页面访问。Web服务器使用HTTP响应中的Expires文件头来告诉客户端内容需要缓存多长时间。下面的例子是一个很长时间的Expires文件的头,它告诉浏览器这个响应直到2010年4月15日才会过期。过期时间:2010年4月15日星期四20: 00: 00 GMT如果您使用Apache服务器,可以使用ExpiresDefault设置相对于当前日期的过期时间。下面的例子是使用expiresDefault设置请求时间10年后过期的文件头:Expires默认“Access Plus 10年”记住,如果使用Expires文件头,当页面内容改变时,内容的文件名必须改变。据雅虎报道!这几年我们经常使用这一步:在内容的文件名上加上版本号,比如yahoo_2.0.6.js使用Expires头只有在用户访问过你的网站之后才会起作用。当用户第一次访问你的网站时,减少HTTP请求数量是无效的,因为浏览器的缓存是空的。所以,这种方法对你网站性能的提升,取决于你的页面在他们的“预缓存”存在的情况下(这个“预缓存”已经包含了页面的所有内容)的点击频率。雅虎!建立了一套衡量方法,我们发现75~85%的所有页面浏览量都有“预缓存”。通过使用Expires文件头,增加了浏览器中缓存的内容量,内容可以在用户的下一次请求中重用,甚至不需要通过用户发送一个一字节的请求。

Gzip压缩文件内容

在服务器中打开Gzip可以减少50%以上的传输。

尽早刷新输出缓冲器

当用户请求一个页面时,无论如何都要花200到500毫秒在后台组织HTML文件。在此期间,浏览器将一直处于空闲状态,等待数据返回。在PHP中,您可以使用flush()方法,该方法允许您首先将编译好的HTML响应文件的一部分发送到浏览器。这时,浏览器可以下载文件的内容(脚本等。)并同时在后台处理剩余的HTML页面。这样的效果在后台比较麻烦或者前台比较闲的时候会更明显。

GET用于简单的请求。

雅虎!邮件团队发现,使用XMLHttpRequest时,浏览器中的POST方法是“两步走”的过程:先发送文件头,再发送数据。因此,使用GET是最合适的,因为它只需要发送一个TCP包(除非您有许多cookie)。IE URL的最大长度是2K,如果要发送2K以上的数据,就不能使用GET。一个有趣的区别是,POST实际上并不像GET那样发送数据。根据HTTP规范,GET意味着“获得”数据,所以当您只是获得数据时使用GET更有意义(语义上也是)。相反,在服务器端发送和保存数据时使用POST。

避免使用CSS表达式。

CSS表达式是动态设置CSS属性的一种强大(但危险)的方式。Internet Explorer从第5版开始就支持CSS表达式。在下面的示例中,您可以使用CSS expressions:background-color:expression((new date())每隔一小时切换一次背景色。gethours ()% 2?" # b8d 4 ff ":" # f08a 00 ");如上图,表达式中使用了JavaScript表达式。CSS属性是根据JavaScript表达式的求值结果设置的。expression方法在其他浏览器中不起作用,所以在跨浏览器设计中为Internet Explorer单独设置是有用的。

表达式的问题在于,它们的求值频率比我们想象的要高。不仅在页面显示和缩放时,在页面滚动甚至鼠标移动时,都会重新计算。向CSS表达式添加计数器可以跟踪表达式的求值频率。只需在页面中移动鼠标,就可以轻松计算10000次以上。

减少CSS表达式计算时间的一种方法是使用一次性表达式,在第一次运行时将结果赋给指定的样式属性,并用该属性替换CSS表达式。如果样式属性必须在页面周期中动态改变,使用事件句柄代替CSS表达式是一种可行的方法。如果你不得不使用CSS表达式,记住它们要被计算成千上万次,可能会影响你的页面性能。

使用外部JavaScript和CSS

许多性能规则都是关于如何处理外部文件的。然而,在采取这些措施之前,你可能会问一个更基本的问题:JavaScript和CSS应该放在外部文件中还是放在页面本身中?在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都可以在浏览器中生成缓存。HTML文档中内置的JavaScript和CSS将在每个请求中与HTML文档一起重新下载。虽然这减少了HTTP请求的数量,但是增加了HTML文档的大小。另一方面,如果外部文件中的JavaScript和CSS被浏览器缓存,则可以在不增加HTTP请求数量的情况下减小HTML文档的大小。关键是缓存外部JavaScript和CSS文件的频率与请求HTML文档的次数有关。虽然很难,但还是有一些指标可以衡量的。如果用户将在一个会话中浏览您网站中的多个页面,并且相同的脚本和样式表将在这些页面中重用,缓存外部文件将带来更大的好处。很多网站都没有建立这些指标的功能。对于这些网站来说,最好的坚决办法就是将JavaScript和CSS作为外部文件引用。内置代码的例外是网站的主页,比如雅虎!还有我的雅虎!。主页在一个会话中有更少的视图(可能只有一次),你可以发现内置的JavaScript和CSS会加快最终用户的响应时间。对于浏览量很大的首页,有一种技术可以平衡内置代码带来的HTTP请求的减少和使用外部文件缓存的好处。其中之一就是JavaScript和CSS内置在首页,但是外部文件是在页面下载后动态下载的。当在子页面中使用这些文件时,它们已经缓存在浏览器中。

使用链接而不是@import

之前的最佳实现提到CSS要放在最上面,方便有序的加载和渲染。在IE中,页面底部@导入并使用

效果是一样的,最好不要用。

避免过滤器

IE独有的属性AlphaImageLoader用于修复7.0以下版本中显示的PNG图像的半透明效果。这个过滤器的问题是,当浏览器加载图片时,它会停止内容的渲染,并冻结浏览器。每个元素(不仅仅是图片)都会计算一次,增加了内存成本,所以它的问题是多方面的。完全避免使用AlphaImageLoader的最好方法是使用PNG8格式,这种格式在IE中效果很好。如果真的需要使用AlphaImageLoader,请使用下划线_filter使其对IE7以上的用户无效。

拒绝重复的脚本

在同一个页面中重复引用JavaScript文件会影响页面的性能。你可能认为这种情况很少见。对美国前10大网站的调查显示,其中两个网站重复使用脚本。导致一个剧本被重复引用的怪现象,主要有两个因素:团队规模和剧本数量。如果是这样,重复的脚本会造成不必要的HTTP请求和无用的JavaScript操作,降低网站性能。在Internet Explorer中会产生不必要的HTTP请求,但在Firefox中不会。在Internet Explorer中,如果一个脚本被引用了两次并且是不可缓存的,它将在页面加载期间生成两个HTTP请求。脚本可以立即被缓存,当用户重新加载页面时,会生成额外的HTTP请求。除了增加额外的HTTP请求,多次运行脚本也会浪费时间。在Internet Explorer和Firefox中,无论脚本是否可缓存,都存在JavaScript重复操作的问题。避免偶尔两次引用同一个脚本的一种方法是使用脚本管理模块来引用模板中的脚本。在HTML页面中使用脚本标签引用脚本最常见的方式是:在PHP中,可以通过创建一个名为insertScript的方法来代替:

为了防止多次引用脚本,应该在该方法中使用其他机制来处理脚本,例如检查它们所属的目录,并将版本号添加到Expire文件头的脚本文件名中。

减少Cookie大小

HTTP coockie可以用于许多目的,例如授权验证和个性化身份。coockie中的相关信息通过HTTP文件头在web服务器和浏览器之间传递。所以让coockie尽可能小,以减少用户的响应时间是非常重要的。要了解更多信息,请查看Tenni Theurer和Patty Chi的文章“当饼干碎了”。这项研究主要包括:

去掉不必要的coockie,让coockie尽量小,减少对用户响应的影响。注意在自适应级别的域名上设置coockie,这样子域名就不会受到影响。设置一个合理的到期时间。提前到期时间和不要过早清除coockie都将改善用户的响应时间。

对静态资源不使用coockie域名。

当浏览器请求静态图片并在请求中同时发送coockies时,服务器不会使用这些coockies。所以,它们只是因为一些负面因素而产生的网络传播。您应该确保对静态内容的请求是没有coockie的请求。创建一个子域,并用它来存储所有静态内容。

如果你的域名是www.example.org,你可以在static.example.org有静态内容。但是,如果你不是在www.example.org而是在顶级域名example.org设置coockie,那么所有对static.example.org的请求都包括coockie。在这种情况下,你可以购买一个新的域名来存储静态内容,并保持这个域名没有coockie。雅虎!它使用ymig.com,YouTube使用ytimg.com,亚马逊使用images-anazon.com,等等。

不要缩放HTML中的图像

不要为了在HTML中设置长度和宽度而使用比实际需要更大的图片。如果你需要:那么你的图片(mycat.jpg)应该是100×100像素,而不是缩小500×500像素的图片。

ico很小,可以缓存

Favicon.ico是位于服务器根目录下的图像文件。它必须存在,因为即使你不在乎它是否有用,浏览器也会对它进行请求,所以最好不要返回404未找到响应。因为它在同一个服务器上,所以每次请求时都会发送一次。这个图像文件也会影响下载顺序。例如,在IE中,当您在onload中请求附加文件时,favicon会在加载这些附加内容之前下载它们。因此,为了减少favicon.ico带来的弊端,有必要:

文件尽量小,最好小于1k;在适当的时候(也就是说,当您不打算再次更改favicon.ico时,因为您不能在更改新文件时重命名它),为它设置Expires文件头。您可以安全地将Expires文件头设置为未来几个月。可以通过查看当前favicon的最后编辑时间来做出判断,ico Imagemagick可以帮助你创建一个小的favicon。

保持单个内容小于25K

这个限制主要是因为iPhone无法缓存大于25K的文件。注意这里指的是解压后的大小。由于简单的gizp压缩可能无法满足要求,因此精简文件非常重要。有关更多信息,请参见Wayne Shea和tenniteur撰写的文档“性能研究,第5部分:iphone可缓存性——坚持不懈”。


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。

分享:

扫一扫在手机阅读、分享本文