欢迎光临
我们一直在努力

网站性能优化提升的28个小技巧

由于网站性能优化题涉及的东西非常多,那么您可以将本文作为参考。

网站性能优化提升的28个小技巧

1、尽量减少HTTP请求次数

合并压缩js和css以及图片sprite

2、延迟内容的加载

图片懒加载

数据懒加载(使用点击查看更多或者分页)

功能懒加载(曝光或者点击后加载html模块、js功能模块)

3、使用离线缓存

把常用的变动又少的js、css、图片存储到cos,第二次访问的时候直接走本地缓存。在移动端使用广泛。

4、CSS、JS放置在正确位置

把css放在head中,保证页面看到的时候样式是对的。

把js放到body里最后位置,防止加载js阻塞页面。

5、静态资源压缩

图片、CSS、JS在进行压缩处理。

6、静态资源使用多个域名

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

7、静态资源使用cdn存储

用户与你网站服务器的延迟会影响时间的长短。 可以把静态资源放到内容分发网络(Content Delivery Network,CDN)中加快访问速度。

8、预加载

在某个功能还没展现时,在空闲时间预加载相关图片或者js代码

9、DOM操作优化

使用JavaScript访问DOM元素比较慢,因此为了获得更多的页面,应该做到:

缓存已经访问过的有关元素

线下更新完节点之后再将它们添加到文档树中

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

10、优化算法

在js处理中优化查找、排序算法。尽量少使用嵌套循环。

11、减少DNS查找次数

减少DNS查找次数可以节省响应时间,但是减少并行下载却会增加响应时间。把这些页面中 的内容分割成至少两部分但不超过四部分。这样就可以减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。

12、根据域名划分页面内容

把页面内容划分成多个部分可以最大限度地实现平行下载。由于DNS查找带来的影响,要确保使用的域名数量在2个到4个之间。

网站性能优化提升的28个小技巧

13、可缓存的AJAX

在一些情况下ajax可使用缓存减少网络开销。

让我们来看一个例子:

一个Web2.0的Email客户端会使用Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过Email web应用程序后没有对地址薄作任何的修改,而且Ajax响应通过Expire或者Cacke-Control头来实现缓存,那么就可以直接从上一次的缓存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现,

例如,&t=11900241612等。如果地址薄在上次下载后没有被编辑过,时间戳就不变,则从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄,时间戳就会用来确定新的URL和缓存响应并不匹配,浏览器就会重要请求更新地址薄。 即使你的Ajxa响应是动态生成的,哪怕它只适用于一个用户,那么它也应该被缓存起来。这样做可以使你的Web2.0应用程序更加快捷。

14、使iframe的数量最小

ifrmae元素可以在父文档中插入一个新的HTML文档。

优点: 解决加载缓慢的第三方内容。

缺点: 即时内容为空,加载也需要时间; 会阻止页面加载;。

15、不要出现404页面错误

HTTP请求时间是很大的,因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的,它只会降低用户体验,不会有一点好处。 有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当 作JavaScript代码来执行。

16、为文件头指定Expires或Cache-Control

这条守则包括两方面的内容: 对于静态内容:设置文件头过期时间Expires的值为“Never expire”(永不过期) 对于动态内容:使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求 网页内容设计现在越来越丰富,这就意味着页面中要包含更多的脚本、样式表、图片和Flash。第一次访问你页面的用户就意味着进行多次的HTTP请求,但 是通过使用Expires文件头就可以使这样内容具有缓存性。它减少了接下来的页面访问中不必要的HTTP请求。Expires文件头一般用于图像文件, 建议在所有的内容都使用他,包括脚本、样式表和Flash等。

浏览器(和代理)使用缓存来减少HTTP请求的大小和次数以加快页面访问速度。Web服务器在HTTP响应中使用Expires文件头来告诉客户端内容需要缓存多长时间。下面这个例子是一个较长时间的Expires文件头,它告诉浏览器这个响应直到2023年6月6日才过期。 Expires: Thu, 6Apr 2023 20:00:00 GMT 如果你使用的是Apache环境,可以使用ExpiresDefault来设定相对当前日期的过期时间。

17、Gzip压缩文件内容

开启Gzip压缩,可以减少50%以上的传输。

当用户请求一个页面时,无论如何都会花费200到500毫秒用于组织HTML文件。在这期间,浏览器会一直空闲等待数据返回。在PHP中,你可以使用 flush()方法,它允许你把已经编译的好的部分HTML响应文件先发送给客户端,这时客户端就会可以下载文件中的内容(脚本等)而后台同时处理剩余的 HTML页面。

18、简单请求使用GET方式

当使用XMLHttpRequest时,浏览器中的POST方法先首先发送文件头,然后才发送数据。因此使用GET最为合适,因为它只需发送一个TCP包(除非你有很多ck)。IE中URL的最大长度为2K,因此如果你要发送一个超过2K的数据时就不可以GET了。

19、避免使用CSS表达式(Expression)

CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色: background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ); 如上所示,expression中使用了JavaScript表达式。

CSS属性根据JavaScript表达式的计算结果来设置。

expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。

表达式的问题它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态改变,使用事件句柄来代替CSS表达式是非常好的方法。

20、使用外部JavaScript和CSS

21、用link代替@import

上文的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。 在IE中,页面底部@import和使用

作用是一样的,建议不要使用它。

22、避免使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并冻结浏览器。在每一个元素(不只是图片)都会运算一次,增加了内存消耗,它的问题是多方面的。 完全避免使用AlphaImageLoader的最好方法就是使用PNG格式来替代。

23、剔除重复脚本

在同一个页面中重复引用JavaScript文件会影响页面的性能。有两种因素导致被重复引用的现象发生:团队规模和脚本数量。如果存在这种情况,重复脚本会引起不必要的HTTP请求和 无用的JavaScript运算,这降低了网站性能。而在Firefox却不会。在Internet Explorer中,如果一个脚本被引用两次而且它又不可缓存,它就会在页面加载过程中产生两次HTTP请求。如果脚本可以缓存,当用户重载页面时也会有额外的HTTP请求。 除增加额外的HTTP请求外,多次运算脚本也会浪费时间。在Internet Explorer和Firefox中不管脚本能不能缓存,它们都存在重复运算JavaScript的问题。 避免偶尔发生的两次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。在HTML页面中使用script 标签引用脚本的最常见方法就是: 在PHP中可以通过创建名为insertScript的方法来替代:

24、减小Cookie体积

HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行传输的。因此保持coockie尽可能的小以减少用户的响应时间。

25、对于静态资源使用无coockie域名

26、不要在HTML中缩放图像

不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要: 那么你的图片(4q5.t.jpg)就应该是120×120像素而不是把一个600×600像素的图片缩小使用。

27、favicon.ico要小而且可缓存

28、跳转的正确使用

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《网站性能优化提升的28个小技巧》
文章链接:https://www.xpn.cc/6108/fy.html
分享到: 更多 (0)

热门推荐

评论 抢沙发

登录

忘记密码 ?