Best Practices for Speeding Up Your Web Site -- yahoo

原文:https://developer.yahoo.com/performance/rules.html

笔记:

1. 减少http request数目

多个css,javascript打包成一个文件

CSS Sprites技术多个image打包成一个,访问时按照位置便宜访问图片

将图片直接嵌入html或css

2. 使用CDN

3. 缓存静态和动态内容

http header 设置cache-control

4. 压缩静态和动态内容

5. 将css放在head里

可以使页面平滑加载而不是一开始出现空白或者无样式的页面

6. 将javascript放到页面底部

避免加载javascript的时候页面卡住,但是要保证javascript里面没有一开始就要加载的DOM,如用document.write直接在网页种写入内容

7. 不要用css表达式

页面会计算表达式很多次,包括鼠标移动一下都计算上千次

8. 把css和javascript单独拿出来

html不会缓存,把css和script单独成一个文件后续请求可以缓存,但首次访问会增加http request次数,可以通过某些技术实现首次请求时融合,后续请求分开

9. 减少DNS查找次数

不要在页面的img,css,script用很多不同的域名,每个域名需要一次DNS查找,但是一般浏览器配置同一个域下面最多同时发2个请求,所以全都放一个域里也不一定好,建议2-4个域

10. 减少javascript和css大小

用专用工具 JSMin and YUI Compressor. 压缩javascript和css

11. 尽量减少重定向

定向完成,新的html下来之前,浏览器什么也干不了。如果域名更改了 可以用 CNAME , Alias or mod_rewrite等技术

需要注意的是  http://astrology.yahoo.com/astrology results in a 301 response containing a redirect to http://astrology.yahoo.com/astrology/

12. 不要在页面重复引用同一个script

13. 配置Etag

Entity tag可以快速地比较资源是否变化,但是如果网站是部署在多个服务器上,每个服务网(apache 或IIS)对于同一资源的etag会不一样,所以如果网站部署在多个服务器上,最好不要用etag,如果部署在一个服务器上,用etag会加快速度

14. 提前flush内容

可以在HTML文件里配置flush,可以在head元素后配flush,让head内容先送到客户端,使得客户端可以提早发起多个资源请求

15. ajax用get的地方不用post

当使用get时,ajax会缓存,post不会

16. 延迟加载组建

一些最初页面不需要的组件,如用户点击后才看到的 可以延迟加载。YUI Image Loader 能延迟加载图片,YUI Get utility 能延迟加载css和script

17. 提前加载组件

可以在当前页面加载完毕的时候提前加载用户可能转入的下一页面的组件,如前一页和后一页内容

18. 减少DOM元素数量,不要在不必要的时候滥用DIV

19. 尽量减少iframe

如果是第三方的内容,如广告等,可以使用iframe,做到较好的隔离,但是iframe比较重。

20. 减少404

404 请求浪费同时请求的数目,浪费时间检查404结果,在script引用时可以减少外部资源的引用

21. 减少cookie

减少不必要的cookie,因为每次请求都会带上cookie在head里

静态资源请求不需要cookie,可以考虑把静态资源单独部署到一个二级域里

22. 减少DOM操作

在javascript里操作DOM是很耗时的,操作时尽量缓存DOM变量

23. 减少event handler

even监听很耗CPU,如果在一个DIV里有10个button,可以考虑在DIV层设置event,而不是每个button一个,因为event会向上传递发起event的元素,所以能找到是哪个button发起的event

24. 优化图片

如果图片用的色不多,可以不用255色系,对于GIF图,可以转成png图片,使用工具来优化png和jpeg图片

不要在html里扩大图片大小

25. 不要有空链接

<script src=""> and <link href="">. 这种会浪费请求,空字符串会被当作一个相对路径来处理。


猜你喜欢

转载自blog.csdn.net/xuefeiliuyuxiu/article/details/79093648
今日推荐