一、前端优化
网站性能优化是一个很综合的话题,涉及到服务器的配置和网站前后端程序等各个方面,我只是从实际经历出发,分享一下自己所尝试过的网站性能优化方法。之所以在标题上挂一个web2.0,是因为本文更偏重于中小网站的性能优化,我所使用的系统也是典型web2.0的LAMP架构。
首先讲讲前端的优化,用户访问网页的等待时间,有80%是发生在浏览器前端,特别是页面和页面中各种元素(图片、CSS、Javascript、 flash…)的下载之上。因此在很多情况下,相对于把大量的时间花在艰苦而繁杂的程序改进上,前端的优化往往能起到事半功倍的作用。雅虎最近将内部使用的性能测试工具yslow向第三方公开,并发布了著名的网站性能优化的十三条规则,建议你下载并安装yslow,并作为测评网站优化效果的工具。下面我挑其中特别有价值的具体说明一下优化的方法:
对于第一次访问您网站,尚未在浏览器cache中缓存您网站内容的用户,我们可以做的事情包括:
1)减少一个页面访问所产生的http连接次数
对于第一次访问你网站的用户,页面所产生的http连接次数是影响性能的一个关键瓶颈。
对策:
- 尽量简洁的页面设计,最大程度减少图片的使用,通过放弃一些不必要的页面特效来减少javascript的使用。
- 使用一些优化技巧,比如利用图片的背景位移减少图片的个数;image map技术;使用Inline images将css图片捆绑到网页中。
- 尽量合并js和css文件,减少独立文件个数。
2) 使用gzip压缩网页内容
使用gzip来压缩网页中的静态内容,能够显著减少用户访问网页时的等待时间(据说可达到60%)。主流的web服务器都支持或提供gzip压缩,如果使用apache服务器,只需要在配置文件中开启 mod_gzip(apache1.x)或mod_deflate(apache2.x)即可。凡是静态的页面,使用gzip压缩都能够显著提高服务器效率并减少带宽支出,注意图片内容本身已经是压缩格式了,务必不要再进行压缩。
3)将CSS放在页面顶端,JS文件放在页面底端
CSS的引用要放在html的头部header中,JS文件引用尽量放在页面底端标签的后面,主要的思路是让核心的页面内容尽早显示出来。不过要注意,一些大量使用js的页面,可能有一些js文件放在底端会引起一些难以预料的问题,根据实际情况适当运用即可。
4)使JS文件内容最小化
具体来说就是使用一些javascript压缩工具对js脚本进行压缩,去除其中的空白字符、注释,最小化变量名等。在使用gzip压缩的基础上,对js内容的压缩能够将性能再提高5%。
5)尽量减少外部脚本的使用,减少DNS查询时间
不要在网页中引用太多的外部脚本,首先,一次dns的解析过程会消耗20-120毫秒的时间;其次,如果在页面中引用太多的外部文件(如各种广告、联盟等代码),可能会因为外部文件的响应速度而将你的网站拖得很慢。如果不得不用,那么就尽量将这些脚本放在页脚吧。不过有一点需要提及,就是浏览器一般只能并行处理同一域名下的两个请求,而对于不同子的域名则不受此限制,因此适当将本站静态内容(css,js)放在其他的子域名下(如 static.xxx.com)会有利于提高浏览器并行下载网页内容的能力。
对于您网站的经常性访问用户,主要的优化思路就是最大限度利用用户浏览器的cache来减少服务器的开销。
1)在header中添加过期时间(Expires Header)
在header中给静态内容添加一个较长的过期时间,这样可以使用户今后访问只读取缓存中的文件,而不会与服务器产生任何的交互。不过这样做也存在一些问题,当图片、CSS和js文件更新时,用户如果不刷新浏览器,就无法获得此更新。这样,我们在对图片、css和js文件修改时,必须要进行重命名,才能保证用户访问到最新的内容。这可能会给开发造成不小的麻烦,因为这些文件可能被站点中的许多文件所引用。flickr提出的解决办法是通过url rewrite使不同版本号的URL事实上指向同一个文件,这是一个聪明的办法,因为url级别的操作效率是很高的,可以给开发过程提供不少便利。
要理解为什么这样做,必须要了解浏览器访问url时的工作机制:
a. 第一次访问url时,用户从服务器段获取页面内容,并把相关的文件(images,css,js…)放在高速缓存中,也会把文件头中的expired time,last modified, ETags等相关信息也一同保留下来。
b. 用户重复访问url时,浏览器首先看高速缓存中是否有本站同名的文件,如果有,则检查文件的过期时间;如果尚未过期,则直接从缓存中读取文件,不再访问服务器。
c. 如果缓存中文件的过期时间不存在或已超出,则浏览器会访问服务器获取文件的头信息,检查last modifed和ETags等信息,如果发现本地缓存中的文件在上次访问后没被修改,则使用本地缓存中的文件;如果修改过,则从服务器上获取最新版本。
我的经验,如果可能,尽量遵循此原则给静态文件添加过期时间,这样可以大幅度减少用户对服务器资源的重复访问。
2)将css和js文件放在独立外部文件中引用
将css和js文件放在独立文件中,这样它们会被单独缓存起来,在访问其他页面时可以从浏览器的高速缓存中直接读取。一些网站的首页可能是例外的,这些首页的自身浏览可能并不大,但却是用户访问网站的第一印象以及导向到其他页面的起点,也可能这些页面本身使用了大量的ajax局部刷新及技术,这时可以将 css和js文件直接写在页面中。
3)去掉重复的脚本
在IE中,包含重复的js脚本会导致浏览器的缓存不被使用,仔细检查一下你的程序,去掉重复引用的脚本应该不是一件很难的事情。
4)避免重定向的发生
除了在header中人为的重定向之外,网页重定向常在不经意间发生,被重定向的内容将不会使用浏览器的缓存。比如用户在访问www.onestopweb.cn,服务器会通过301转向到www.onestopweb.cn/,在后面加了一个“/”。如果服务器的配置不好,这也会给服务器带来额外的负担。通过配置apache的 alias或使用mod_rewrite模块等方法,可以避免不必要的重定向。
还有一些,比如使用CDN分发机制、避免CSS表达式等、避免使用ETags等,因为不太常用,这里就不再赘述了。
做完了上述的优化,可以试着用yslow测试一下网页的性能评分,一般都可以达到70分以上了。
当然,除了浏览器前端和静态内容的优化之外,还有针对程序脚本、服务器、数据库、负载的优化,这些更深层次的优化方法对技术有更高的要求。本文的后半部分将重点探讨后端的优化。
二、后端优化
上次写完web2.0网站前端优化篇之后,一直想写写后端优化的方法,今天终于有时间将思路整理了出来。
前端优化可以避免我们造成无谓的服务器和带宽资源浪费,但随着网站访问量的增加,仅靠前端优化已经不能解决所有问题了,后端软件处理并行请求的能力、程序运 行的效率、硬件性能以及系统的可扩展性,将成为影响网站性能和稳定的关键瓶颈所在。优化系统和程序的性能可以从以下的方面来入手:
1)apache、mysql等软件的配置的优化
尽管apache和mysql等软件在安装后使用的默认设置足以使你的网站运行起来,但是通过调整mysql和apache的一些系统参数,还是可以追求更高的效率和稳定性。这个领域中有很多专业的文章和论坛(比如: http://www.mysqlperformanceblog.com/),要想掌握也需要进行深入的研究和实践,这里就不重点讨论了。
2)应用程序环境加速
这里仅以我最常应用的php开发环境为例,有一些工具软件可以通过优化PHP运行环境来达到提速的目的,其基本原理大致是将PHP代码预编译并缓存起来,而不需要改变任何代码,所以比较简单,可以将php的运行效率提升50%以上。比较常用的免费php加速工具有:APC( http: //pecl.php.net/package-info.php?package=APC)、Turck MMCache( http://turck-mmcache.sourceforge.net)、php accelebrator(www.php-accelerator.co.uk),还有收费的Zend Performance Suite
3)将静态内容和动态内容分开处理
apache是一个功能完善但比较庞大的web server,它的资源占用基本上和同时运行的进程数呈正比,对服务器内存的消耗比较大,处理并行任务的效率也一般。在一些情况下,我们可以用比较轻量级的web server来host静态的图片、样式表和javascript文件,这样可以大大提升静态文件的处理速度,还可以减少对内存占用。我使用的web server是来自俄罗斯的nginx,其他选择方案还包括lighttpd和thttpd等。
4)基于反向代理的前端访问负载均衡
当一台前端服务器不足以应付用户访问时,通过前端机实现web访问的负载均衡是最快速可行的方案。通过apache的mod_proxy可以实现基于反向代理的负载均衡,这里推荐使用nginx做代理服务器,处理速度较apache更快一些。
5)应用缓存技术提高数据库效能,文件缓存和分布式缓存
数据库访问处理并发访问的能力是很多网站应用的关键瓶颈,在想到使用主从结构和多farm的方式构建服务器集群之前,首先应该确保充分使用了数据库查询的缓存。一些数据库类型(如mysql的innoDB)自身内置对缓存的支持,此外,还可以利用程序方法将常用的查询通过文件或内存缓存起来。比如通过 php中的ob_start和文件读写函数可以很方便的实现文件形式的缓存,而如果你拥有多台服务器,可以通过memcache技术通过分布式共享内存来对数据库查询进行缓存,不仅效率高而且扩展性好,memcache技术在livejournal和Craigslist.org等知名网站应用中都得到了检验。
6)服务器运行状态的检测,找到影响性能的瓶颈所在
系统优化没有一劳永逸的方法,需要通过检测服务器的运行状态来及时发现影响性能的瓶颈,以及可能存在的潜在问题,因为网站的性能,永远取决于木桶中的短板。可以编写一些脚本来检测web服务的运行,也有一些开源的软件也提供了很好的功能
7)良好的扩展架构是稳定和性能的基础
一些技巧和窍门可以帮你度过眼前的难关,但要想使网站具备应付大规模访问的能力,则需要从系统架构上进行彻底的规划,好在很多前人无私的把他们架构
网站的经验分享给我们,使我们可以少走甚多弯路。我最近读到的两篇有启发的文章:
- 从LiveJournal后台发展看大规模网站性能优化方法
- Myspace的六次重构
最后不得不提到程序编码和数据库结构对性能的影响,一系列糟糕的循环语句,一个不合理的查询语句、一张设计不佳的数据表或索引表,都足以会使应用程序运行的速度成倍的降低。培养全局思考的能力,养成良好的编程习惯,并对数据库运行机制有所了解,是提高编程质量的基础。
- 浏览: 687801 次
文章分类
- 全部博客 (988)
- 境-AmUI (3)
- 境-Boots (6)
- 境-CentOS (5)
- 境-DEDE (82)
- 境-H5 (52)
- 境-HTML (25)
- 境-JS (225)
- 境-JSP (2)
- 境-MySql (24)
- 境-PHP (139)
- 境-PHP2 (10)
- 境-PHPTP (23)
- 境-VUE (1)
- 境-站长 (82)
- 阅-AmUI (43)
- 阅-Boots (26)
- 阅-H5 (40)
- 阅-H52 (35)
- 阅-JQ (33)
- 阅-JQ2 (11)
- 阅-JQ3 (43)
- 阅-PHP (20)
- 阅-PHP2 (6)
- 阅-VUE (0)
- 择-HBuilder (6)
- 择-Office (1)
- 择-PS (19)
- 择-SText (2)
- 择-艺术 (10)
- 择-整理 (14)
最新评论
-
onestopweb:
cs6641468 写道onestopweb 写道cs6641 ...
JS Cookies的设置 读取 删除 -
cs6641468:
onestopweb 写道cs6641468 写道在HttpO ...
JS Cookies的设置 读取 删除 -
onestopweb:
cs6641468 写道在HttpOnly cookie标配的 ...
JS Cookies的设置 读取 删除 -
cs6641468:
在HttpOnly cookie标配的今天,知道js能操作co ...
JS Cookies的设置 读取 删除 -
InJavaWeTrust:
...
H5 仿阿里自适应页面
发表评论
-
Win7 如何给C盘增加空间
2018-10-29 14:53 1373在C盘的右边有未分配的空间或者格式化D盘,把它删除卷设置为未 ... -
Win2008 出现身份验证错误,要求的函数不受支持
2018-10-25 15:32 1481这是本地Windows更新补丁所引起的 1、运行 -> ... -
BAT 批处理拷贝整个文件夹到别的文件夹下
2018-10-19 10:30 5955如何做一个批处理文件,将文件夹里的文件及文件夹复制到另一个文 ... -
Win2008 仅允许指定的IP访问
2018-10-19 10:25 1712在“IIS管理器” -> 选中指定站点的“IP域名和域 ... -
站长 添加右键Notepad的打开方式
2018-03-31 21:11 1480左下角点击“开始”->运行->regedit, ... -
Win2008 修改服务器密码
2017-11-05 15:07 667双击打开“服务器管理器” -> 选择“配置” -&g ... -
站长 IIS7设置503错误
2017-11-05 14:43 1259打开IIS7管理器,选中“应用程序池” -> 选择对 ... -
站长 IIS7设置自定义的404页面
2017-11-02 15:54 720打开IIS管理器 -> 指定选中的站点 -> ... -
站长 更新DNS缓存命令
2017-11-01 13:57 7731.CMD命令更新DNS缓存 ipconfig /fl ... -
站长 修改Win7的MAC地址
2017-10-16 10:47 604打开“控制面板” -> “设备管理器” 打开“设 ... -
站长 爬虫协议robots
2017-09-13 16:50 479Robots协议(也称为爬虫协议、机器人协议等)全称是“网络 ... -
站长 CGI和FastCGI和ISAPI区别
2017-04-20 10:01 575一 CGI原理及其性能1) C ... -
概念 高内聚低耦合
2017-03-31 12:48 523高内聚低耦合,是软件工程中的概念,是判断设计好坏的标准,主 ... -
站长 IIS7 的 web.config 配置
2017-03-14 11:55 1296web.config <?xml version= ... -
Firefox 删除已记住的账号密码
2017-02-07 11:24 656打开火狐浏览器 -> 点击“三”打开下拉菜单 -&g ... -
WIN7 搜索文件内容
2017-02-06 16:22 1026打开文件夹 -> 打开左侧的"组织" ... -
站长 DNS预解析提升页面速度
2016-12-17 14:39 504在网页体验中我们常会遇到这种情况,即在调用百度联盟、谷歌联盟 ... -
站长 图片的懒加载和预加载
2016-12-16 11:01 537javascript图片预加载搜索和延时加载的区别主要体现在 ... -
站长 DNS和CDN的解释与关系
2016-12-15 09:17 1391DNS(Domain Name System, ... -
apache 配置不同的端口访问不同的站点
2016-11-15 17:43 801找到“D:\apache\conf”的“httpd.con ...
相关推荐
针对web前端性能低下的问题,王成、李少元、郑黎晓、缑锦、曾梅琴、刘慧敏等学者系统地提出了一套旨在提高网页加载速度、呈现速度和用户体验的完整Web前端性能优化解决方案。该方案涵盖了服务器端优化、HTML优化、...
Web前端性能优化数据 性能优化Web前端性能优化数据 性能优化Web前端性能优化数据 性能优化Web前端性能优化数据 性能优化
### Web网站性能测试工具知识点详解 #### 一、性能测试的重要性及目的 在当今高度数字化的时代,Web网站作为企业和组织对外展示的重要窗口之一,其性能好坏直接影响到用户体验、品牌形象甚至是企业的经济收益。...
Web前端性能优化全攻略
Web前端性能优化是提升网页用户体验和确保网站成功的关键因素之一。性能优化涉及多个方面,包括但不限于代码优化、资源加载策略、服务器配置等。本篇内容将深入探讨Web前端性能优化的思路与学习方法,结合WebQQ、QQ...
根据提供的文件内容,我们可以从中提取有关web性能优化(服务器优化)的知识点。文件内容虽然有部分OCR扫描错误和不连贯,但我们可以识别出关键概念和组件,并将它们串联成一篇详尽的web服务器优化知识介绍。 首先...
《高性能网站建设进阶指南》是一本专为WEB开发者设计的性能优化手册,旨在帮助开发者们构建更快、更稳定、更高效的网站。这本书深入探讨了JavaWeb和Java在网站开发中的应用,结合实际案例,提供了丰富的优化策略和...
让你页面速度飞起来,Web前端性能优化。 让你页面速度飞起来,Web前端性能优化。百度云盘视频资料,下载直接看
2: Web表现层性能优化概述 3:分阶段讲述Web表现层的优化思路和具体的优化手段 (1)连接网络并发送请求部分 (2)网络来回传输内容部分 (3)服务器处理请求部分 (4)浏览器渲染绘制部分 4:优化实践,对Front...
对于不断发展的Web应用,性能优化如同逆水行舟,不进则退。一般可以从前端和后端的优化来改善Web站点性能。本文侧重通过对前端性能的分析,为Web站点前端性能优化提供了理论依据和一般的优化策略,并讲述了一些用于B/S...
在现代Web开发中,前端性能优化是至关重要的,它直接影响用户体验和网站的转化率。本文档将探讨如何提升WEB前端的性能,通过遵循一系列规则和使用专业的工具来达到最佳效果。我们将详细介绍YSLOW工具,这是一个非常...
Web性能优化:Web性能优化基础理论.docx
让你页面速度飞起来 Web前端性能优化 让你页面速度飞起来 Web前端性能优化
Web 前端性能优化的研究与应用 摘要:随着计算机技术和网络通讯技术的高速发展,Web 应用已经成为人们的一种必不可少的工具,充斥着人们生活的方方面面。然而,随着 Web 站点数量的激增和用户规模的日益庞大,其...
郭碧青是腾讯公司的一位资深前端工程师,他在Web前端性能优化方面有着丰富的实践经验,并且对于性能优化的工作充满热情。郭碧青在行业内的知名度很高,虽然行事低调,但是经常受邀在各种大型会议和技术活动中分享...
Web性能测试工具是用于评估和优化网站或Web应用程序性能的关键工具。在IT行业中,特别是对于开发人员、系统管理员和质量保证工程师来说,这类工具是非常重要的。微软提供的Web性能测试工具以其易用性和强大的功能而...