PHP教程:发掘细节进步网站功用-Php-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝29
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:489回复:0

  PHP教程:发掘细节进步网站功用

楼主#
更多 发布于:2016-05-20 18:59

         工程师很形象地讲它分成了“怀孕,出世,结业,成婚”四个期间。假如在咱们点击页面连接的时分能够意识到

这个进程而不是简略的恳求-呼应的话,咱们便能够发掘出许多细节上能够进步功用的东西。今日听了taobao小马哥的一个对yahoo开发团队对web功用研讨的

一个讲座,感受

信任互联网现已越来越成为咱们日子中不可或缺的一部分。ajax,flex等等富客户端的运用使得咱们越加“美好”地体验着许多原先只能在C/S实

现的功用。比方Google机会现已把最基本的office运用都搬到了互联网上。当然便当的一起毫无疑问的也使页面的速度越来越慢。自个是做前端开发的,在功用方面,根据yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是能够优化的。

以上是一张web2.0页面的生命周期图。工程师很形象地讲它分成了“怀孕,出世,结业,成婚”四个期间。假如在咱们点击页面连接的时分能够意识到

这个进程而不是简略的恳求-呼应的话,咱们便能够发掘出许多细节上能够进步功用的东西。今日听了taobao小马哥的一个对yahoo开发团队对web功用研讨的

一个讲座,感受收获很大,想在blog上做个共享。

信任许多人都听过优化网站功用的14条规矩。更多的信息可见developer.yahoo.com

1. 尽也许的削减 HTTP 的恳求数[content]

2. 运用 CDN(Content Delivery Network)[server]

3. 添加 Expires 头(或许 Cache-control )[server]

4. Gzip 组件[server]

5. 将 CSS 款式放在页面的上方[css]

6. 将脚本移动到底部(包括内联的)[javascript]

7. 防止运用 CSS 中的 Expressions[css]

8. 将 JavaScript 和 CSS 独立成外部文件[javascript]

[css]

9. 削减 DNS 查询[content]

10. 紧缩 JavaScript 和 CSS (包括内联的)[javascript]

[css]

11. 防止重定向[server]

12. 移除重复的脚本[javascript]

13. 装备实体标签(ETags)[css]

14. 使 AJAX 缓存

在firefox下有一个插件yslow,集成在firebug中,你能够用它很便利地来看看自个的网站在这几个方面的体现。

这是对用yslow对我的网站西风坊测评的成果,很惋惜,只有51分。呵呵。我国各大网站的分值都不高,刚测了一下,新浪和网易都是31分。然后yahoo(美国)的分值的确97分!可见yahoo在这方面作出的尽力。从他们总结的这14条规矩,现已如今又新添加的20个点来看,有许多细节咱们真得是怎样都不会去想,有些做法乃至是有些“反常”了。

第一条、尽也许的削减 HTTP 的恳求数 (Make Fewer

HTTP Requests )

http恳求是要开支的,想办法削减恳求数天然能够进步页面速度。常用的办法,兼并css,js(将一个页面中的css和js文件别离兼并)以及

Image maps和css

sprites等。当然或许将css,js文件拆分多个是由于css构造,共用等方面的思考。阿里巴巴中文站其时的做法是开发时仍然分开开发,然后在后台

对js,css进行兼并,这么关于浏览器来说仍然是一个恳求,可是开发时仍然能还原成多个,便利办理和重复引证。yahoo乃至主张将主页的css和js

直接写在页面文件里边,而不是外部引证。由于主页的拜访量太大了,这么做也能够削减两个恳求数。而事实上国内的许多门户都是这么做的。

而css

sprites是指只用将页面上的布景图兼并成一张,然后经过css的background-position特点界说不过的值来取他的布景。taobao和阿里巴巴中文站如今都是这么做的。有爱好的能够看下taobao和阿里巴巴的布景图。

http://www.csssprites.com/

这是个东西网站,它能够主动将你上载的图像兼并并给出对应的background-position坐标。并将成果以png和gif的格局输出。

第二条、运用CDN(内容分发网络): Use a Content

Delivery Network

说实话,关于CDN这一块自个并不是很了解,简略地讲,经过在现有的Internet中添加一层新的网络架构,将网站的内容发布到最接近用户的

cache服务器内,经过DNS负载均衡的技能,判别用户来历就近拜访cache服务器获得所需的内容,杭州的用户拜访近杭州服务器上的内容,北京的拜访

近北京服务器上的内容。这么能够有用削减数据在网络上载输的时刻,进步速度。更具体地内容咱们能够参阅baidu百科上关于CDN的解说。Yahoo!把静态内容散布到CDN削减了用户影响时刻20%或更多。

CDN技能示意图:

CDN组网示意图:

第三条、 添加Expire/Cache-Control 头:Add

an Expires Header

如今不断添加的图像,脚本,css,flash被嵌入到页面中,当咱们拜访他们的时分必然会做许屡次的http恳求。本来咱们能够经过设置Expires

header 来缓存这些文件。Expire本来即是经过header报文来指定特定类型的文件在览器中的缓存时刻。大多数的图像,flash在发布后都是不需求常常修

改的,做了缓存今后这么浏览器今后就不需求再从服务器下载这些文件而是而直接从缓存中读取,这么再次拜访页面的速度会大大加速。一个典型的HTTP

1.1协议回来的头信息:

HTTP/1.1 200 OK

Date: Fri, 30 Oct 1998 13:19:41 GMT

Server: Apache/1.3.3 (Unix)

Cache-Control: max-age=3600, must-revalidate

Expires: Fri, 30 Oct 1998 14:19:41 GMT

Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT

ETag: “3e86-410-3596fbbc”

Content-Length: 1040

Content-Type: text/html

其中经过服务器端脚本设置Cache-Control和Expires能够完结。

如,在php中设置30天后过期:

也能够经过装备服务器本身完结,这些偶就不是很明白了,呵呵。想了解跟多的兄弟能够参阅http://www.web-caching.com/

据我了解,如今阿里巴巴中文站的Expires过期时刻是30天。不过期间也有过疑问,特别是关于脚本过期时刻的设置仍是应当仔细思考下,否则相应的脚本功用更新后客户端也许要过很长一段时刻才干“感知”到这么的变化。曾经做[suggest项目]

的时分就遇到过这个疑问。所以,哪些应当缓存,哪些不应缓存仍是应当仔细斟酌一番。

第四条、启用Gzip紧缩:Gzip Components

Gzip的思想即是把文件先在服务器端进行紧缩,然后再传输。这么能够明显削减文件传输的巨细。传输结束后浏览器会

从头对紧缩过的内容进行解紧缩,并履行。如今的浏览器都能“杰出”地支持

gzip。不只浏览器能够辨认,并且各大“爬虫”也相同能够辨认,各位搜索引擎优化人员能够放下心了。并且gzip的紧缩份额十分大,通常紧缩率为85%,即是

说服务器端100K的页面能够紧缩到25K摆布再发送到客户端。具体的Gzip紧缩原理咱们能够参阅csdn上的《gzip紧缩算法》 这篇文章。yahoo特别强调, 一切的文本内容都应当被gzip紧缩: html (php), js, css, xml, txt… 这一点咱们网站做得不错,是一个A。曾经咱们的主页也并不是A,由于主页上还有许多广告代码投进的js,这些广告代码具有者的网站的js没有经过gzip紧缩,也会连累咱们网站。

以上三点大多归于服务器端的内容,自个也是粗浅地了解罢了。说得不对的当地有待各位指正。

第五条、将css放在页面最上面 ( Put Stylesheets

at the Top)

将css放在页面最上面,这是为什么?由于

ie,firefox等浏览器在css悉数传输彻底之前不会去烘托任何的东西。理由诚如小马哥说得那样很简略。css,全称Cascading Style Sheets

(层叠款式表单)。层叠即意味这后边的css能够掩盖前面的css,等级高的css能够掩盖等级低的css。在[css之!important]

这篇文章的最下面曾简略地提到过这层级关系,这儿咱们只需求知道css能够被掩盖的。已然前面的能够被掩盖,浏览器在他彻底加载结束以后再去烘托无疑也是合情合理的许多浏览器下,如IE,把款式表放在页面的底部的疑问在于它制止了页面内容的顺序显现。浏览器阻挠显现防止重画页面元素,那用户只能看到空白页了。Firefox不会阻挠显现,但这意味着当款式表下载后,有些页面元素也许需求重画,这致使闪耀疑问。所以咱们应当尽快让css加载结束

顺着这层意思,假如咱们再细究的话,本来还有能够优化的当地。比方本站上面包括的两个css文件,和。

从media就能够看出第一个css是对于浏览器的,第二个css文件是对于打印款式的。从用户的行为习惯上来将,要打印页面的动作必定是发作在页面页面

显现出来以后的。所以对比好的办法应当是在页面加载结束以后再动态地为这张页面加上对于打印设备的css,这么又能够进步一点速度。(哈哈)

第六条、将script放在页面最下面 (Put Scripts

at the Bottom )

将脚本放在页面最下面的意图有那么两点: 1、

由于防止script脚本的履行堵塞页面的下载。在页面loading的进程中,当浏览器读到js履行句子的时分必定会把它悉数解说结束后在会接下来读下

面的内容。不信你能够写一个js死循环看看页面下面的东西还会不会出来。(setTimeout 和

setInterval的履行有点类似于多线程,在相应的呼应时刻之前也会持续下面的内容烘托。)浏览器这么做的逻辑是由于js随时也许执 行

location.href或是别的也许彻底中止此页面进程的函数,即如此,当然得等他履行结束以后再加载咯。所以放在页面最终,能够有用削减页面可 视元素的加载时刻。

      

 2、脚本导致的第二个疑问是它堵塞并行下载数量。HTTP/1.1标准主张浏览器每个主机的并行下载数不超越2个(IE只能为2个,别的浏览器如ff等都是默认设置为2个,不过新出的ie8能够达6个)。因而假如您把图像文件散布到多台机器的话,您能够达到超越2个的并行下载。可是当脚本文件下载时,浏览器不会发动别的的并行下载。

当然对各个网站来说,把脚本都放到页面底部加载的可行性仍是值得商讨的。就比方阿里巴巴中文站的页面。许多当地有内联的js,页面的显现严峻依靠于此,我供认这和无侵入脚本的理念相差甚远,可是许多“前史遗留疑问”却不是那么简单处理的。

第七条、防止在CSS中运用Expressions (Avoid CSS Expressions )

不过这么就多了两层无意义的嵌套,必定欠好。还需求一个十分好的办法。

第八条、把javascript和css都放到外部文件中 (Make JavaScript and CSS External )

这点我想仍是很简单了解的。不只从功用优化上会这么做,用代码易于保护的视点看也应当这么做。把css和js写在页面内容能够削减2次恳求,但也增

大了页面的巨细。假如现已对css和js做了缓存,那也就没有2次剩余的http恳求了。当然,我在前面中也说过,有些特别的页面开发人员仍是会挑选内联

的css和js文件。

第九条、削减DNS查询 (Reduce DNS

Lookups)

Internet上域名与IP地址之间是一一对应的,域名(kuqin.com)极好记,但计算机不认识,计算机之间的“相认”还要转成ip地址。在网络

上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的变换作业称为域名解析,也称DNS查询。一次DNS的解析进程会耗费20-120毫秒的

时刻,在dns查询结束之前,浏览器不会下载该域名下的任何东西。所以削减dns查询的时刻能够加速页面的加载速度。yahoo的主张一个页面所包括的域

名数尽量控制在2-4个。这就需求对页面全体有一个极好的计划。如今咱们这点做的欠好,许多打点的广告投进体系连累了咱们。

第十条、紧缩 JavaScript 和 CSS (Minify JavaScript )

紧缩js和css的摆布很显然,削减页面字节数。容量小页面加载速度天然也就快。并且紧缩除了削减体积以外还能够起到必定的保护摆布。这点咱们做得不错。常用的紧缩东西有JsMin、YUI

compressor等。别的像http://dean.edwards.name/packer/还给咱们供给了一个十分便利的在线紧缩东西。你能够在jQuery的页面看到紧缩过的js文件和没有紧缩过的js文件的容量差别:

当然,紧缩带来的一个坏处即是代码的可读性没了。信任许多做前端的兄弟都遇到过这个疑问:看Google的作用很帅,可是去看他的源代码却是一大堆

挤在一起的字符,连函数名都是替换过的,汗死!自个的代码也这么岂不是对保护十分不便利。一切阿里巴巴中文站如今选用的做法是在js和css发布的时分在

服务器端进行紧缩。这么在咱们很便利地保护自个的代码。

第十一条、防止重定向 (Avoid Redirects )

不久前在ieblog上看到过《Internet Explorer and Connection

Limits》这篇文章,比方 当你输入http://www.webjx.com/

的时分服务器会主动发生一个301服务器转向http://www.webjx.com/

,你看浏览器的地址栏就能看出来。这种重定向天然也是需求耗费时刻的。当然这仅仅一个比如,发作重定向的原因还有许多,可是不变的是每添加一次重定向就会添加一次web恳求,所以因该尽量削减。

第十二条、移除重复的脚本 (Remove Duplicate Scripts )

这点我想不说也知道,不仅仅从功用上思考,代码标准上看也是这么。可是不得不供认,许多时分咱们会由于图一时之快而加上一些或许是重复的代码。或许一个统一的css结构和js结构能够对比好的处理咱们的疑问。小猪的观念很对,不仅仅要做到不重复,更是要做到可重用。

第十三条、装备实体标签(ETags) (Configure ETags )

这点我也不明白,呵呵。在inforQ上找到一篇解说得对比具体的阐明《运用ETags削减Web运用带宽和负载》,有爱好的同学能够去看看。

第十四条、使 AJAX 缓存 (Make Ajax Cacheable )

ajax还要去缓存?做ajax恳求的时分往往还要添加一个时刻戳去防止他缓存。It’s

important to remember that “asynchronous” does not imply

“instantaneous”.(记住“异步”不是“刹那间”这一点很主要)。记住,即便AJAX是动态发生的并且只对一个用户起作用,他们仍然能够被缓 存。

优质IT资源分享社区[font=Tahoma  ]为你提供此文。[font=Tahoma  ]

[font=Tahoma  ]本站有大量优质php教程视频,资料等资源,包含php基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。[font=Tahoma  ]

php教程视频

优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客