MyException - 我的异常网
当前位置:我的异常网» 互联网 » 增高网站访问速度的34条军规(14-17)

增高网站访问速度的34条军规(14-17)

www.MyException.Cn  网友分享于:2015-08-26  浏览:2次
提高网站访问速度的34条军规(14-17)

原文:Best Practices for Speeding Up Your Web Site

 

14 让Ajax可以缓存 (Make Ajax Cacheable)

tag:content

 

Ajax的好处之一是它能给用户提供瞬间的响应,因为它从服务端异步请求数据。但Ajax不能保证用户在等候那些异步的JavaScript和XML响应返回时什么都不做。在应用程序中,用户是否继续等待取决于Ajax怎样应用。比如,在一个基于Web的Email客户端用户会等候Ajax返回他们所搜索的邮件信息。记住异步并不代表“即刻”。

为了提高性能,优化Ajax响应很重要。提高Ajax性能最重要的方式是使响应缓存,正如“添加一个过期期限和缓存控制头”这一节讨论的。这些原则同样适用于Ajax

  • Gzip组件
  • 减少DNS查询
  • 压缩JavaScript
  • 避免重定向
  • 设定ETag

我们看一个例子。一个Web2,0的邮件客户端可能会用Ajax自动下载用户地址簿。如果用户从上次使用邮件网站以来没有修改她的地址簿,那么如果Ajax响应使用了长期失效时间或者缓存控制头部,地址簿就可以从缓存中读取出来。浏览器必须被告知“使用之前的缓存地址簿”而不是“请求一个新的地址簿”。可以在地址簿Ajax的URL中添加一个标识用户最后一次修改地址簿的时间戳,比如,&t=1190241612。如果地址簿从最后一次下载后没有被更改,时间戳将相同而地址簿将会从浏览器的缓存中得到来替代额外的HTTP传输。如果用户更改了她的地址簿,时间戳会保证新的URL不会和缓存中的匹配,而且浏览器会请求会请求更新的地址簿记录。

即使你的Ajax响应时动态创建的,而且只适用于一个用户,它们依然会被缓存。这样做会让你的Web2.0应用程序更快。

 

15 更早的刷新缓冲区 (Flush the Buffer Early)

tag:server

 

当用户请求一个页面,服务端会花费200至500毫秒的时间组合HTML页面。在这期间,浏览器会静静等待数据到来。PHP中有flush()函数,它允许你向浏览器发送部分就绪的HTML响应,这样浏览器可以在服务器处理余下的HTML页面时去获取组件。这样的好处主要在忙碌的后台和轻松的前台间可以看到。

在HEAD后面是放置刷新操作的好地方,因为头部的HTML代码更容易产生,而且可以让你放置任何CSS和JavaScript文件,以便浏览器在后台工作依然进行时并行开始获取组件。

例子:

... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->

Yahoo! search先行研究并且进行了真人测试证明了使用这项技术的好处。

 

16 在Ajax请求中使用GET方法 (Use GET for AJAX Requests)

tag:server

 

Yahoo! Mail 团队发现进行XMLHttpRequest的时候,POST方法在浏览器中分两步执行:先发送头部,然后发送数据。所以最好使用只发送一个TCP包(除非你有很多的cookie)的GET方法。IE中URL的最大长度是2000,所以如果你发送超过2000的数据就不能使用GET方法。

一个有趣的现象是,POST方法并不像GET那样实际发送数据(而Get则名副其实)。基于HTTP规范,GET方法意味着取回数据,所以当你只是请求数据时使用GET方法更为有意义(从语义上来说),而在发送需要储存在服务器端的数据时则相反使用POST。

 

17 后加载组件 (Post-load Components)

tag:content

 

你可以仔细端详下你的页面然后自问:“什么是在页面初始化时必须的?”那么其余的内容和组件可以放在后面。

JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单,它们可以稍后加载,因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容(当用户做某项操作才会展现的内容)和被折叠的图片。

可以帮助你的工具有: YUI Image Loader能帮助你延缓加载折叠的图片,而且YUI Get utility 能够很简单的包装运行中的JS和CSS。比如,打开Firebug的网络选项卡去查看Yahoo! Home Page。

当性能指标和其它网站开发的好的实践一致时是不错的。渐进增强的观念告诉我们当支持JavaScript时,会提高用户体验,但你必须确保在没有JavaScript时页面也能工作。所以当你确保页面工作正常时,你会通过延后加载的那些更花哨的脚本比如拖放和动画,来增强你的页面。

文章评论

Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
漫画:程序员的工作
漫画:程序员的工作
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
中美印日四国程序员比较
中美印日四国程序员比较
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
代码女神横空出世
代码女神横空出世
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
为什么程序员都是夜猫子
为什么程序员都是夜猫子
 程序员的样子
程序员的样子
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员和编码员之间的区别
程序员和编码员之间的区别
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
编程语言是女人
编程语言是女人
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
每天工作4小时的程序员
每天工作4小时的程序员
旅行,写作,编程
旅行,写作,编程
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
10个调试和排错的小建议
10个调试和排错的小建议
程序员都该阅读的书
程序员都该阅读的书
鲜为人知的编程真相
鲜为人知的编程真相
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
我的丈夫是个程序员
我的丈夫是个程序员
那些争议最大的编程观点
那些争议最大的编程观点
如何成为一名黑客
如何成为一名黑客
总结2014中国互联网十大段子
总结2014中国互联网十大段子
老程序员的下场
老程序员的下场
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
一个程序员的时间管理
一个程序员的时间管理
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
我是如何打败拖延症的
我是如何打败拖延症的
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有