网站前端性能优化总结

news/2024/5/9 18:32:54/文章来源:https://dengbin.blog.csdn.net/article/details/6829479
一、服务器侧优化

  1. 添加 Expires 或 Cache-Control 信息头 

  某些经常使用到、并且不会经常做改动的图片(banner、logo等等)、静态文件(登录首页、说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存,文档就可以从缓存(除已经过期)而不是从服务器读取。接着,客户端考察缓存中的副本,看看是否过期或者失效,以决定是否必须从服务器获得更新。

  各个容器都有针对的方案,,以 Apache 为例:

ExpiresActive On
ExpiresByType image/gif
"access plus 1 weeks"

  表示gif文件缓存一周,配置可以根据具体的业务进行调整,具体配置可以参考:http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_expires.html

  2. 压缩内容 

  对于绝大多数站点,这都是必要的一步,能有效减轻网络流量压力。

<ifmodule mod_deflate.c>
DeflateCompressionLevel
9
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php
AddOutputFilter DEFLATE html htm xml php css js
</ifmodule>

  表示zlib在压缩时可以最大程度的使用内存,压缩html、文本、xml和php这几种类型的文件,指定扩展名为html、htm、xml、php、css和js的文件启用压缩。

  具体配置可以参考:http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_deflate.html

  3. 设置 Etags 

  在使用etags之前,有必要复习一下 RFC2068 中规定的返回值 200 和 304 的含义:

200--OK
304--Not Modified

  客户端在请求一份文件的时候,服务端会检查客户端是否存在该文件,如果客户端不存在该文件,则下载该文件并返回200;如果客户端存在该文件并且该文件在规定期限内没有被修改(Inode,MTime和Size),则服务端只返回一个304,并不返回资源内容,客户端将会使用之前的缓存文件。而etags就是判断该文件是否被修改的记号,与服务器端的资源一一关联,所以etags对于CGI类型的页面缓存尤其有用。

  下图是优化前的首页:(注意,此时没有压缩首页图片,即使使用了缓存,仍需要5s左右的时间)

化前的某页面

  需要注意的是,使用etags会增加服务器端的负载,在实际应用中需要自行平衡。

  二、Cookie优化

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

  使cookie体积尽量小;

  在合适的子域名上设置bookie,以免影响其他子域名下的响应;

  设置合理的过期时间,去掉不必要的cookie。

  下面对比一下各个网站的cookie:

图中可以看出,6K的cookie显然是不必要的。

  2. 对于页面内容使用无coockie域名

  当浏览器在请求中同时请求一张静态的图片和发送coockie时,服务器对于这些coockie不会做任何地使用。因此它们只是因为某些负面因素而创建的网络传输。所以你应该确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。

  例如,域名是www.example.org,则可以考虑可以在static.example.org上存在静态内容。但是,如果不是在www.example.org上而是在顶级域名example.org设置了coockie,那么所有对于static.example.org的请求都包含coockie。在这种情况下,可以考虑重新购买一个新的域名来存在静态内容,并且要保持这个域名是无coockie的。例如,t.qq.com使用的是qpic.cn,weibo.com使用的是sinaimg.cn,xiaonei.com使用的是hdn.xnimg.cn等等。

  性能方面的考虑还有使用带有www的子域名并且在它上面设置coockie,因为忽略www会把cookie设置到*.example.com上去,使cookie带有一些不必要的信息。

  三、JAVA SCRIPT 和 CSS 优化

  1. 把 CSS 放到代码页上端 

  这么做可以避免浏览器在解释一次之后,使用css进行第二次解释,因为用户对css裸奔日效果根本就不感兴趣。

css裸奔节效果图(来源:网络)

  2. 避免 CSS 表达式 

  凡是只有IE能用的东西,都不是好东西。

  3. 从页面中剥离 JavaScript 与 CSS

  剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。

(css已经剥离,但js嵌入到html里面了,并且放在了html的上部,所以这货是正面+反面教材)

  4. 精简 JavaScript 与 CSS

  语法能简写话尽量简写。

(相同表现的类合并)

  5. 使用 <link> 而不是 @importChoose <link> over @import

  在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部,这与第一条相违背。

  6. 避免使用CSS Filter

  尽量使用png格式的图片来代替滤镜效果,因为开启滤镜会加大浏览器的开销。 

  7. JS尽量放到页面最下端

  当一个脚本在下载的时候,浏览器会卡住,无法响应其他请求。所以,可以将功能性的JS放到最后端去处理。

  8. 页面展现尽量交给CSS完成

  曾经见过一个JS+CSS写出来的下拉框,如图:

  实现原理是JS获取页面的每一个select元素和其对应的属性,然后用js重新画出新的样式效果:

  多出的这部分JS执行过程会降低客户端的性能,所以最终没有采用这个select样式。

  四、图片优化

  1. 优化图片 

  尽可能的使用 PNG 格式的图片,因为和GIF相比,PNG有更多的功能和更小的体积,而且未来PNG会加入动画效果:

  2. 使用 CSS Sprites 对图片优化 

  简单的说就是"利用 CSS background 相关元素进行背景图绝对定位",把多次HTTP 调用变为一次调用:

  这些表情在鼠标没有经过的时候,都是从一张图片上绝对定位出来的,只有在鼠标放到某一张表情上时,才会从服务器上下载gif图片,这样可以减少(N-1)次HTTP请求。

  使用 CSS Sprites 的不足之处是客户端将消耗更多内存,因为CSS Sprites 会打开多个图片的副本,目前的解决办法是按照使用频率不同,合并成几个级别的图片,分批次下载并在客户端展示。

  3. 不要在 HTML 中缩放图片 

  用 ImageMagic 命令(convert )就能将图片缩放成合适的尺寸,所以尽量不要交给浏览器去执行。

  4. 用更小的并且可缓存的 favicon.ico

  原因是没有favicon.ico,服务器会返回一个404,与可以长时间缓存的文件相比,大量的404会增加服务器的响应数量。

(服务器上因为缺少favicon.ico而产生的404错误)

  4. 压缩图片不一定是有损的 

  对已有图片进行压缩并不对影响用户体验,主要基于以下两点:

  1. 用户未必会感觉到色彩的损失;

  2. 压缩不一定会损坏图片的质量。

  无损压缩图片的原理可以参考下面的链接,本文不再赘述:http://en.wikipedia.org/wiki/Image_compression

  最初测试平台首页使用的是未压缩过的图片,下载速度明显受拖延,有时会达到将近十秒钟左右的下载时间,在经过无损压缩首页图片之后,提升效果效果很明显,基本控制在了一秒钟之内:

  下图是压缩前后的大小对比:

  该工具地址为:http://www.smushit.com/ ,强烈推荐使用。

  五、内容优化

  1. 减少 DNS 查找

  DNS lookup 是很耗费时间的步骤,网站上如果过多的使用了站外的 Widget ,DNS 查找带来的问题是不容忽视的。

  2. 尽量减少重定向

  并且注意一些不必要的重定向,比如对 Web 站点子目录的后面添加个 "/" ,就能有效避免一次重定向。对于服务器来说,请求http://example.com/fml 与请求 http://example.com/fml/  是有差异的。如果是 Apache 服务器,可以通过配置mod_rewrite解决这个问题。具体请参考:http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_rewrite.html

  3. 切分组件到多个域

  主要的目的是提高页面组件并行下载能力,但注意,也不要同时使用过多的域名,否则就会出现第一条DNS lookup过多的问题,一般情况下两个域名就可以了。

  4. 杜绝 http 404 错误

  对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪可以有效减少 404 错误,并提升用户体验。

  后记:

  这次总结给我带来的启发并不在于提升系统性能性能本身,提升性能只是一个很表面上的东西,网上的方法有很多,测试的方法也有很多,照着都做一遍,性能确实会有所提升,但是这种知其然而不知其所以然的性能提升是没有意义的,这便是本文的目的所在。

  参考:

  http://developer.yahoo.com/performance/

  http://code.google.com/speed/page-speed/docs/rules_intro.html

  http://book.douban.com/subject/4719162/

  http://book.douban.com/subject/3132277/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_782236.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型网站动态应用系统架构

动态应用&#xff0c;是相对于网站静态内容而言&#xff0c;是指以c/c、php、Java、perl、.net等服务器端语言开发的网络应用软件&#xff0c;比如论坛、网络相册、交友、BLOG等常见应用。动态应用系统通常与数据库系统、缓存系统、分布式存储系统等密不可分。大型动态应用系统…

设计易理解和操作的网站

当将易操作的理念融合到网站设计中时&#xff0c;网站设计的问题就变得更加复杂。当大多数人将使用全屏显示器访问计算机时&#xff0c;这些理念往往容易被大众忽视。除了需要考虑人们的身体条件如视力不好外&#xff0c;你也不得不注意到关于浏览器市场的不断变化。给你的用户…

大型网站后台架构的演变

随着用户访问量的不断增加&#xff0c;网站的后台也会不断变化以应对需求。本文主要从一个小型网站到大型网站的过度与变化来陈述。1.1 网站后台架构主要指由web server 、应用服务器、数据库、存储、监控等组成的网站后台系统。1.2 架构演变个人站点后台架构。如图2-1所示。 图…

一步步构建大型网站架构

之前我简单向大家介绍了各个知名大型网站的架构&#xff0c; MySpace的五个里程碑、 Flickr的架构、 YouTube的架构、 PlentyOfFish的架构、 WikiPedia的架构。这几个都很典型&#xff0c;我们可以从中获取很多有关网站架构方面的知识&#xff0c;看了之后你会发现你原来的想法…

网站架构之缓存应用

这篇来讲如何利用memcached实现一级缓存&#xff0c;以及如何让一级缓存组件支持在企业库&#xff0c;memcached或者其它第三方实施方案之间的切换。memcached本人并没有太多经验&#xff0c;如果文中有说的不对的地方&#xff0c;还希望批评指出&#xff0c;且文中关于memcach…

大型网站动态应用系统架构

动态应用&#xff0c;是相对于网站静态内容而言&#xff0c;是指以c/c、php、Java、perl、.net等服务器端语言开发的网络应用软件&#xff0c;比如论坛、网络相册、交友、BLOG等常见应用。动态应用系统通常与数据库系统、缓存系统、分布式存储系统等密不可分。大型动态应用系统…

揭秘全球最大网站Facebook背后应用的软件

2010年6月&#xff0c;Google公布全球Top 1000网站。Facebook独占鳌头。 以Facebook现在的经营规模&#xff0c;诸多传统服务器的技术均将崩溃或根本无法支撑。那么面对5亿的活跃用户&#xff0c;Facebook的工程师们又将如何让网站平稳运转呢&#xff1f;这篇文章将展示Faceboo…

可扩展、高可用、负载均衡网站架构设计方案

基本需求: 1、 高可用性&#xff1a;将停止服务时间降低到最低甚至是不间断服务 2、 可扩展性&#xff1a;随着访问的增加&#xff0c;系统具备良好的伸缩能力 3、 可视性&#xff1a;系统、服务的状态处于一个实时的监控之下 4、 高性能高可靠性&#xff1a;经过优化的体…

(推荐)高并发高流量网站架构详解

Web2.0的兴起&#xff0c;掀起了互联网新一轮的网络创业大潮。以用户为导 向的新网站建设概念&#xff0c;细分了网站功能和用户群&#xff0c;不仅成功的造就了一大批新生的网站&#xff0c;也极大的方便了上网的人们。但Web2.0以用户为导向的理念&#xff0c;使得新 生的网站…

调查发现女人比男人更喜欢使用社交网站(组图)

男人更喜欢语音/电话交流 女人比男人更喜欢使用社交网站北京时间 9 月 25 日上午消息&#xff0c;根据市场研究机构 Rebtel 发布的最新调查结果&#xff0c;女人更喜欢通过社交网站与家人、朋友及同事联系&#xff0c;而男人更喜欢用电话与家人、朋友及同事联系。Rebtel 在今年…

FileRide——与众不同的社交网站

FileRide是一个很别致的社交网站&#xff0c;总部位于斯德哥尔摩&#xff1a;该网站围绕你电脑上的文件&#xff0c;为你打造一个社交网络。比如说&#xff0c;可以让你知道在该网站上&#xff0c;哪个用户的电脑上有你喜欢的音乐和图片&#xff0c;你可以把它们加为好友。你还…

大中型网站网站(B/S开发中) cache应用(多图)

关于中大型开发b/s开发中的缓存(cache)&#xff0c;我的一些看法&#xff0c;有不正确的或者是有笔误的地方&#xff0c;请指正。thanks首先&#xff0c;应该了解基本的&#xff0c;对于缓存的知识&#xff1a;Q&#xff1a;如&#xff1a;静态缓存和动态缓存的区别&#xff1f…

20个仿Quora的免费问答网站程序

接触网站制作和运营将近9年了&#xff0c;还从没想过搭建问答社区&#xff0c;其实这倒是个还不赖的主意&#xff0c;不过被人抢先了&#xff0c;这是一个免费问答网站搭建平台的程序名单&#xff0c;通过这些程序&#xff0c;你可以搭建像Quora, StackOverflow, Yahoo Answers…

谈谈运行稳定性好效率高的千万级大型网站系统架构性分析

千万级的注册用户&#xff0c;千万级的帖子&#xff0c;nTB级的附件&#xff0c;还有巨大的日访问量&#xff0c;大型网站采用什么系统架构保证性能和稳定性&#xff1f; 首先讨论一下大型网站需要注意和考虑的问题。 数据库海量数据处理&#xff1a;负载量不大的情况下select、…

代码原理 webkit WebKit-利用百度siteapp开发网站App-(IOS和Android版本)

使用百度siteapp开发网站的App-(IOS和Android版本) 介绍 之前写了个把百度云作文网站文件服务器、一些园友的评论不错、不过我似乎把意思弄错了&#xff01; 我用的百度云的SVN环境&#xff01; 现在不少人都做web开发。不管你是什么语言编写的&#xff08;jsp&#xff0c;php…

Ruby On Rails 网站开发感悟

独自一人花费了将近三个月的时间来做一个音乐网站&#xff08;http://www.likenote.com &#xff09;, 这对任何一个有过几年Web开发经验的人来说都不是件什么太难的事。虽然我也做了 4 年J2EE开发&#xff0c;但还是头一次使用全新技术来制作一个网站&#xff0c;这其中的辛苦…

RHEL4- WEB服务(七)配置基于端口web虚拟网站

RHEL4- WEB服务&#xff08;七&#xff09;配置基于端口web虚拟网站前面讲述了《RHEL4- WEB服务&#xff08;五&#xff09;建立基于ip的多个虚拟web网站》和《RHEL4- WEB服务&#xff08;六&#xff09;建立基于主机名的多个虚拟web网站》&#xff0c;这一篇讲述一个比较特殊的…

高并发高流量网站架构

Web2.0的兴起&#xff0c;掀起了互联网新一轮的网络创业大潮。以用户为导向的新网站建设概念&#xff0c;细分了网站功能和用户群&#xff0c;不仅成功的造就了一大批新生的网站&#xff0c;也极大的方便了上网的人们。但Web2.0以用户为导向的理念&#xff0c;使得新生的网站有…

公司网站Silverlight版^_^

公司网站Silverlight版^_^ 网站地址&#xff1a;http://www.ichinagames.com/Silverlight/ 预览图&#xff1a; posted on 2010-01-16 13:47 nowpaper 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/nowpaper/archive/2010/01/16/1649131.html

pinterest视觉社交网站商业模式和崛起原因

Pinterest是一个号称"个人版猎酷工具"的美国视觉社交网站&#xff0c;网站创办于2011年&#xff0c;目前 网站用户增长速度赶上了五年前的Facebook&#xff0c;是继facebook、twitter、tumblr之后&#xff0c;又一个受世界瞩目的网站。 Pinterest名称由Pin&#xff0…