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

news/2024/5/9 16:01:10/文章来源:https://blog.csdn.net/weixin_30820151/article/details/98226733

一、服务器侧优化

  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_725174.aspx

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

相关文章

css学习网站

css学习网站 CSSPlay cssplay是一个CSS demo网站&#xff0c;里面很多demo&#xff0c;这些文章有教如果放置图片&#xff0c;有些是说CSS技巧。 1. CSS Help Pile CSS Help Pile重点关于CSS资源&#xff0c;技巧与手法。该网站授予良好的网页组及优秀的资源&#xff0c;适用…

开源 免费 java CMS - FreeCMS1.9 移动APP生成网站列表数据

项目地址&#xff1a;http://www.freeteam.cn/ 生成网站列表数据 提取同意移动APP訪问的网站列表,生成json数据到/mobile/index.html页面。 从左側管理菜单点击生成网站列表数据进入。点击确定就可以。转载于:https://www.cnblogs.com/blfbuaa/p/6714679.html

使用ServletContextListener和HttpSessionListener两种监听器实现记录当前网站在线人数...

web.xml中配置&#xff1a; <listener> <listener-class>com.mcm.listener.ServletContextListenerImpl</listener-class> </listener> <listener> <listener-class>com.mcm.listener.HttpSessionListenerImpl</listener-cla…

PC网站微信扫码支付,Native支付,“当前商户号暂不支持关联该类型的appid“,“签名错误,请检查后再试““springBoot 微信支付“

springBoot 微信支付 PC网站微信扫码支付-Native支付一、采坑大合集1.当前商户号暂不支持关联该类型的appid2.签名错误&#xff0c;请检查后再试二、springboot集成微信支付Demo&#xff08;老版本XML&#xff09;1.官方SDK下载&#xff1a;[https://pay.weixin.qq.com/wiki/do…

前端和算法实现:给网站上加上自己的水印(简单+复杂)

watermark插件的github地址&#xff1a;https://github.com/saucxs/watermark 有详细的使用步骤&#xff0c;可以参考&#xff0c;不会用请留言&#xff0c;感觉可以&#xff0c;请给个星星。 sau交流学习社区&#xff08;首发&#xff09;&#xff1a;https://www.mwcxs.top/p…

大型网站的架构设计与演进

大型网站之大&#xff0c;在于访问量和数据量同时都规模巨大&#xff0c;缺一不可。 1. 架构设计 大型网站中&#xff0c;最核心的功能是计算和存储。 存储&#xff1a;DataBase&#xff0c;计算&#xff1a;Application server&#xff0c;应用服务器完成业务功能和逻辑。如果…

网站莫名跳转,从百度谈什么是网站劫持?

今年2月份的时候&#xff0c;网上爆出了神马搜索劫持百度搜索流量事件&#xff0c;网友使用百度搜索进入的搜索结果页出来的却是神马搜索的结果页。 百度搜索流量事件是网站劫持的其中一种表现。网站劫持还会导致以下问题&#xff1a; 用户输入正常网址跳转到其它地址&#xff…

软工作业4:用户体验分析:以 “师路南通网站” 为例

一、目标&#xff1a;针对师路南通 &#xff0c;开展UX分析。 PS&#xff1a;对比另外2个学习网站&#xff1a;1. UMU学习平台 &#xff1b;2. 学生安全教育平台 基于实例分析&#xff0c;体会用户体验设计的 7 条准则。二、过程 &#xff08;一&#xff09;满意的地方 1.界面符…

使用阿里云域名 服务器 Tomcat7 阿里云免费证书 Http转Https以及Https表单提交问题 搭建网站全过程及其踩的坑

一天的时间才搭完累死了! 我在这里主要记录一下,每个修改的意义.如果只是修改而不知道修改的意义我觉得下次还是不会! 云服务器本地使用Http协议访问Tomcat不用输入端口号 这里我已经在阿里云上购买了服务器及域名,并且域名已经备案. 1.登录阿里云服务器. 2.在服务器中下载…

用Teleport Ultra下载网站全部页面 爬虫

测试case&#xff0c;就是把Commons-FileUpload 的API下载来 上网查的时候我才发现这是一个由很多页面组成的网站&#xff0c;下载起来很麻烦。怎么办呢&#xff1f;呵呵&#xff0c;一定是有办法的。Teleport Ultra这个工具就能帮我们搞定&#xff01;这是一个汉化绿版的迅雷下…

网站收集

1.http://msdn.itellyou.cn/ MSDN很多工具可以下载 将地址拷贝到迅雷下载即可 2.https://visualstudiogallery.msdn.microsoft.com/a1166718-a2d9-4a48-a5fd-504ff4ad1b65 isual Studio示例代码浏览器 免费Visual Studio示例代码浏览器为开发人员提供了一个在Visual Studio 20…

大型网站的标准

大型网站的标准 问题&#xff1a;什么样的网站才能算的上大型网站&#xff1f; 答&#xff1a; 用户访问量&#xff08;优酷&#xff0c;百度&#xff09;流量大&#xff08;优酷&#xff1a;流媒体服务器搭建&#xff0c;主要技术点在于带宽&#xff09;海量数据的检索问题&am…

python爬取内容乱码_Python爬取网站返回的内容为乱码解决方法

1、爬取某网站内容时&#xff0c;返回的结果为乱码&#xff0c;如图&#xff1a;2、写在前面的解释Requests会基于HTTP头部响应的编码做出有根据的推测&#xff0c;当访问r.text时&#xff0c;Requests会使用其推测的文本编码。查看网页返回的字符集类型&#xff1a;r.apparent…

关于php留言本网站的搭建

1.检查php&#xff0c;http服务是否安装 [rootlocalhost ~]# rpm -qa | grep http httpd-tools-2.4.6-40.el7.centos.x86_64 httpd-2.4.6-40.el7.centos.x86_64[rootlocalhost ~]# [rootlocalhost ~]# rpm -qa | grep http-bash: [rootlocalhost: 未找到命令 2.检查到没有安…

axure web组件下载_04网站设计关于axure原型预览文件访问慢的原因

01背景最近发现原来的原型预览访问速度超级慢&#xff0c;这一切貌似是最近调整了下Axure原型中的几个元件&#xff0c;上传之后&#xff0c;原本访问超级快的文件&#xff0c;变的超级超级慢。02原因分析过程1、首先直接从服务器角度找原因。自认为服务器可能是宽带不够&#…

css3网站代码 html5_HTML5和css3(一)

一、什么是 HTML5HTML5 的概念与定义是一个新版本的 HTML 语言&#xff0c;定义了新的标签、特性和属性拥有一个强大的技术集&#xff0c;这些技术集是指&#xff1a;HTML5 、CSS3 、javascript, 这也是广义上的 HTML5定义&#xff1a;HTML5 定义了 HTML 标准的最新版本&#x…

mysql投票网站_PHP+Mysql实现网站顶和踩投票功能实例

PHPMysql实现网站顶和踩投票功能实例&#xff0c;通过记录用户IP&#xff0c;判断用户的投票行为是否有效&#xff0c;该实例也可以扩展到投票系统中。首先我们在页面上放置“顶”和“踩”的按钮&#xff0c;即#dig_up和#dig_down&#xff0c;按钮上分别记录了投票的票数以及所…

openresty 交给php,openresty搭建网站防火墙

实现一个简单的防火墙,例如:当我提交一个 select * from 疑似 sql注入的参数时,则会直接被拦截下载waf配置:wget https://github.com/loveshell/ngx_lua_waf/archive/v0.7.2.tar.gz解压文件并将./config.lua,./init.lua,./waf.lua,./wafconf/*文件移动到你的项目目录例如在上篇…

学习MVC之租房网站(六)-用户登录和权限控制

在上一篇<学习MVC之租房网站&#xff08;五&#xff09;-权限、角色、用户管理>完成了权限、角色、用户的增删改查&#xff0c;现在将基于前面完成的内容&#xff0c;进行后台用户登录和权限控制功能的开发。 一、用户登录 用户登录涉及到密码的MD5校验、验证码、Session…

普通网站用双路cpu服务器,双路服务器怎么设置CPU

双路服务器怎么设置CPU 内容精选换一换云游戏场景&#xff0c;需要配置专业显卡。具体的场景典型配置如下&#xff1a;问题现象用户配置完成应用发布资源后&#xff0c;通过云堡垒机首次访问应用发布资源&#xff0c;不能正常访问。可能原因原因一&#xff1a;应用程序启动路径…