高性能网站建设的黄金法则

　　性能黄金法则

　　只有10%–20%的最终用户时间花在了下载HTML文档上，其余的80%~90%的时间花在了下载页面中的所有组件上。

　　关注前端可以很好的提高整体性能

　　改进前段通常只需要较少的时间和资源

　　规则1 减少HTTP请求

　　由于上面的”性能黄金法则”，我们必须减少用户下载html文档的时间，最基本的一个方法是必须减少http请求，包括image，css和js文件。

　　规则2 使用CDN

　　什么是CDN?

　　一组分布在多个不同地理位置的Web服务器用于更有效的向用户发布内容。

　　如果应用程序的web服务器离用户更近，则1个http请求的响应时间将缩短;如果组件web服务器离用户更近，则多个http请求的响应时间将缩短。

　　同时，我们需要关注CDN Cache.例如修改了某个js文件，需要及时清除CDN Cache,甚至会出现不同步的情况。

　　规则3 添加Expires头

　　Expires: Thu, 15 Apr 2010 20:00:00 GMT

　　Cache-Control: max-age=315360000

　　Expires的局限：需要服务器和客户端的时钟严格同步，所以我们可以使用cache-control来控制。

　　@import 规则必须放在所有其他规则之前，而且会导致组件下载的无序性

　　规则5 将样式表放在顶部

　　这个规则其实并不影响性能，但是却关乎用户的体验。

　　如果样式表放在顶部，那么在下列三种情况下，浏览器会出现白屏

　　1、在新窗口中打开

　　2、重新加载

　　3、作为主页

　　@import 规则必须放在所有其他规则之前，而且会导致组件下载的无序性。

　　规则6 将脚本放在底部

　　规则7 避免CSS表达式

　　规则8 使用外部的Javascript和CSS

　　页面中尽量使用外部的js和css文件，虽然会带来额外的http请求访问时间，但是因为缓存机制会节省后期访问时http的请求。

　　特殊情况：主页。在主页中尽量将js和css写在页面中，这样会节省主页的访问时间。

　　两全其美的方式

　　1、加载后下载

　　在主页加载外币之后，动态加载js和css文件。例如我们的loadJs和loadCss方法。

　　2、动态内联

　　可以使用例如cookie的方法，如果js加载过，则写入cookie一个值;动态检测cookie的值，如果不存在则加载，如果存在则跳出加载过程。

　　规则9 减少DNS查找

　　DNS查找可以被缓存起来以提高性能，通过Keep-Alive和较少的域名来减少DNS查找。

　　规则10 精简Javascript

　　精简：从代码中移除不必要的字符以减少其大小，进而改善加载时间。移除所有的注释和不必要的空白字符

　　混淆：除了精简，还将函数和变量的名字转换为更短的字符串。

　　规则11 避免重定向

　　在下列几种情况下可能会发生

　　1. 缺少结尾的斜线

　　2. 连接网站

　　3. 跟踪内部流量

　　4. 跟踪出站流量

　　5. 美化URL

　　规则12 移除重复的脚本

　　规则13 配置Etag(Entity Tag)

　　Etag是Web服务器和浏览器用于确认缓存组件的有效性的一种机制,是唯一标识了一个组件的一个特定版本的字符串.

　　GET /i/yahoo.gif HTTP1.1

　　Host: us.yimg.com

　　HTTP 1.1 200 OK

　　Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

　　Etag: “a531782d768ca1:dcc”

　　Content-Length：1195

　　GET /i/yahoo.gif HTTP 1.1

　　Host: us.yimg.com

　　If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

　　If-None-Match: “a531782d768ca1:dcc”

　　HTTP 1.1 304 Not Modified

　　问题：通常使用组件的某些属性来构造它，这些属性对以特定的、寄宿了网站服务器来说是唯一的。另一台不同的服务器发起请求，是不会匹配的。

　　规则14 使Ajax可缓存

　　被动请求(Passive Request)

　　主动请求(Acitve Request)

　　笔者举了一个yahoo! mail的例子,当用户登录的时候，主动的ajax请求前三封邮件的内容并缓存起来，这种做法称作主动请求。

评论总数：0 条 [ 查看全部 ] 网友评论