网站前端性能优化总结【转】

news/2024/5/10 15:08:20/文章来源:https://blog.csdn.net/weixin_30703911/article/details/97399163

一、服务器侧优化

  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;如果客户端存在该文件并且该文件在规定期限内没有被修改(InodeMTimeSize,则服务端只返回一个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/

转载于:https://www.cnblogs.com/NNUF/archive/2012/06/29/2569642.html

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

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

相关文章

网站性能工具Yslow的使用方法

Yslow是雅虎开发的基于网页性能分析浏览器插件&#xff0c;从年初我使用了YSlow后&#xff0c;改变了博客模板大量冗余代码&#xff0c;不仅提升了网页的打开速度&#xff0c;这款插件还帮助我分析了不少其他网站的代码&#xff0c;之前我还特意写了提高网站速度的秘籍&#xf…

10款方便的在线文件格式转换工具网站。

1.online-convert online-convert是一个十分优秀的在线格式转换应用&#xff0c;支持格式覆盖文档、图片、音频、视频、电子书、Flash以及一些 不常见的格式。使用非常简单&#xff0c;你只需根据在你想转换成的格式的分类&#xff08;如文档的在document converter&#xff09…

获得alexa网站下面美国排名前二十的网址

为什么80%的码农都做不了架构师&#xff1f;>>> #!/usr/bin/python #encoding:utf8 #author:cosmeimport re import urllibdef getTop25ReginalSties():GETTOP25 re.compile(r^\<a\shref\\"/siteinfo/(?P<gettop>\S)\"\>\S\</a\>.*)…

最新70佳单页网站设计案例欣赏(中篇)

单页网站是指只有一个页面的网站&#xff0c;这种形式的网站曾经非常流行&#xff0c;现在依然有很多人喜欢。不过&#xff0c;并不是每个网站都适合做成单页&#xff0c;一般都是内容比较少而且将来内容也不怎么增加的情况才适合这样做。如果你打算做一个这样的网站&#xff0…

(转载)让网站变灰的CSS代码(支持IE、FIREFOX和CHROME)

2019独角兽企业重金招聘Python工程师标准>>> <p style"margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">原文&#xff1a;<a href"http://www.uisdc.com/gray-css-code"…

从两个服务器访问相同网站

目标: 从两台服务器访问同一个网站. 模型: 服务器A , 服务器B 上运行apache 安装php 服务器C 上保存网页文件, 及运行Mysql数据库 大致流程: 服务器C 建立网页存放目录和Mysql数据目录 启用 nfs 服务 并共享网页存放…

从杨致远辞去雅虎说起,那些衰落的网站巨头给我们的启示

盘点一下近些年衰落的互联网巨头 雅虎---无可置疑排名第一位&#xff0c;昔日的互联网霸主99年市值超过1200亿美金&#xff0c;记得小时候看过一个动画片&#xff0c;里面经常有个大猩猩叫“yahoo”哈哈&#xff0c;从哪个时候雅虎成为我第一知道的互联网品牌&#xff0c;但是今…

我的.Net电子商务网站第一步 - UI

决定要做一个电子商务网站&#xff0c;一直以来都觉得自己美工很烂&#xff0c;那先从美工入手吧&#xff01; 折腾了2天之后&#xff0c;有了最初的效果&#xff0c;在线demo请点击&#xff1a;http://byyee.com/software/shoppingmall/ 网站用的是国外空间&#xff0c;如果访…

自主服务器详细发布网站教程,能上网即可以做网站服务

很多人只知道固定公网IP发布网站&#xff0c;动态IP时甚至无公网IP时&#xff0c;如何发布网站呢&#xff1f;根据不同的网络环境分析不同的发布网站方式。一&#xff0c;固定公网IP时。通过dnspod或nat123域名解析&#xff0c;将域名解析到网站主机IP即可。二&#xff0c;动态…

IIS发布asp.net网站出现的错误

1、 【转】配置错误 不能在此路径中使用此配置节 配置错误 不能在此路径中使用此配置节(转)2011年12月29日 11:22 配 置错误 不能在此路径中使用此配置节。如果在父级别上锁定了该节&#xff0c;便会出现这种情况。锁定是默认设置的 (overrideModeDefault"Deny")&…

joomla的几个不错的网站

http://www.joomlagate.com/download/free-joomla-templates Joomla之门 ::下载 RSS Joomla! 免费模板 RSS 各种免费 Joomla! 模板 Free Joomla Templates. 不仅有前台模板&#xff0c;还包括后台模板&#xff1b;不仅有网站模板&#xff0c;还包括论坛模板、留言本模板等。 …

微软网站打不开_终于等到你,微软正式发布 Windows Terminal 预览版

前一段时间&#xff0c;一直在知乎、技术社区收到技术小伙伴们的终极拷问&#xff1a;微软Build 大会上提到的「6月中旬」要上Windows store 的 Windows Terminal 到底啥时候可以用到呀&#xff1f;有一次&#xff0c;我跑去我给 Windows Terminal 提的某个 issue 里问 Windows…

优秀设计:12个带给你灵感的创意单页网站作品

单页网站作为一个流行趋势已有一段时间了&#xff0c;但他们的受欢迎程度似乎并没有任何减少。这种页面设计方法并不适用于每个项目&#xff0c;但有时它是合适的&#xff0c;是有意义的。例如&#xff0c;当没有很多内容&#xff0c;而且你知道的内容在未来不会增长很多&#…

各大网站rss订阅源地址_网站优化技术第二篇(如何让某度快速收录新站)

如何让某度快速收录新站&#xff1f;根据某度现在的算法&#xff0c;给出以下总结&#xff0c;对某度快速收录很有帮助。seo优化经验总结如下1.网站域名一定要和网站主题相符&#xff0c;利于百度对网站的信誉评价。前期有能利用301转向pr值大于4以上的站点最好&#xff01;2.网…

发布ASP.NET网站到IIS

1. 在Web项目中点击发布网站&#xff0c;如图1所示 图1 2. 选择要发布的路径——>“确定”&#xff0c;如果项目显示发布成功就可以了。如图2所示 图2 3. 打开控制面板中的IIS信息服务管理器&#xff0c;按如图3所示操作 图3 4. 点击“下一…

百度seo排名规则_SEO界的潜规则(百度死不承认的SEO秘密)

说起潜规则&#xff0c;相信大家都不会陌生&#xff0c;因为人们知道如今各个行业都是有潜规则的&#xff0c;即使做SEO也不例外&#xff0c;下面筑梦导师大家分享一下seo优化的六大潜规则&#xff1a;1.标题部分是搜索引擎优化的重要组成部分&#xff0c;这个地方应该是优化的…

网站部署后无法访问sqlserver_实践|零基础创建一个网站的通用步骤是?

设为星标才不会错过哦 你好呀&#xff0c;我是然怡我的专业是计算机科学与技术该篇文章是对自己的实战小结及分享望有用写因 一方面是对自己做的这个项目进行总结回顾&#xff0c;另一方面或是个人兴趣&#xff0c;或是参加比赛&#xff0c;都可以给基础薄弱甚至没有基础但是…

网站前端性能优化总结【转】

一、服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头 某些经常使用到、并且不会经常做改动的图片&#xff08;banner、logo等等&#xff09;、静态文件&#xff08;登录首页、说明文档等&#xff09;可以设置较长的有效期 &#xff08;expiration date&#xff09;&…

提高 网站 百度权重

2019独角兽企业重金招聘Python工程师标准>>> 很多的企业都存在这样的困惑&#xff1a;一个网站做了很久&#xff0c;不仅只在百度等搜索引擎检索到很少的网页&#xff0c;而且网站的PR值和百度权重很低或者几乎没有。存在这样的问题&#xff0c;究其原因在于没有重视…

最全的静态网站生成器(开源项目)

原文地址&#xff1a; http://www.iteye.com/magazines/133-Static-Site-Generators#595将动态网页静态化&#xff0c;可以有效减轻服务器端的压力&#xff0c;并且静态网页的访问速度要快于动态网页。此外&#xff0c;使用静态网页还有利于搜索引擎的收录&#xff0c;从而提高…