从9个不同的方面深入分析HTML5的性能


点击次数: 次 发布时间:2013-4-1

2.图片优化

  接下来是关于图片的优化,图片永远是又爱又恨的元素。因为当图片多的时候,会严重拖垮整个页面的加载速度。关于图片的优化方式,《高性能网站》书中已有很多介绍,总结起来主要有三点:使用精灵图、优化图片的大小,使用DATA URI,具体这里就不细说了。

  图片优化的另一个思路是:no-image。抛弃图片,拥抱CSS3。原先需要设置一张圆角效果的图片,现在使用CSS3中的 border-radius;原先需要设置阴影效果的图片,现在使用CSS3中的box-shadow;原先需要设置渐变的背景图片,现在使用CSS3中 的gradient。

3.预取

  接下来讲Prefetching,预取,是优化的另一个思路。我们现在优化的思路无非就是少。很多都是从少的角度,比方说前面把文档大小减少,把图 片的大小减少。很多张的图片变成一张精灵图,都是为了把发送请求的数量减少。预取的话,是另一种思路,提早加载好资源,用户去点的时候,实际上已经加载 好,那肯定是更快了。

  预取,一共有两部分:一部分是资源的预取,还有一部分是DNS的预解析。

  资源预加载有几个点需要注意:

  预加载只是在浏览器空闲的时候才会去拉,但不保证一定会去拉,这是很重要的一点。因为本身浏览器有一个全局的监听器,这是内部的一个接口,当浏览气空闲的时候,它会去执行浏览器空闲的时候应该做事情,但是这个空闲的回调不一定被触发,所以说并不保证一定会执行预加载。

  Chrome不支持HTTPS资源的预加载,像Alipay是HTTPS的页面,Chrome不会去预拉取。

  一个预拉取的页面虽存在后不可见,实际上它是在正常解析。假如说我预拉取登陆页面,登陆页面有很多资源,比方说有图片,有CSS文件,JS文件。它 是从上往下正常的会被解析,解析的过程中,这个页面没有显现,但是它实际上是存在的。在HTML5里面,可通过 document.visibilityState得到当前页面状态,通常页面有两种状态,可见与不可见,但是现在有一个新的状态,叫做预渲染的状态。可 以直接通过document.visibilityState 是否等于 prerender 来判断页面是否在预渲染状态。

作者天宇科技 - 从9个不同的方面深入分析HTML5的性能

本文地址:http://www.chongyv.com/News_Show_519_1.html   手机地址http://www.chongyv.com/Mobile/News_Show_519_1.html

版权所有 © 转载时必须以链接形式注明作者和原始出处!
相关文章
关于我们
关于我们
企业文化
最新资讯
核心服务
品牌形象
邢台网站建设
邢台网站优化
成功案例
品牌设计
公司成功案例
邢台网站优化
解决方案
邢台网络公司
邢台网站维护
邢台网络营销
招贤纳士
加入我们
学习发展
常见问题
联系我们
联系我们
我要留言
如何合作
首页
手机网站
FLASH版
旧版邢台网络公司
本站关键词邢台网站建设邢台网站制作邢台网站设计,交换链接QQ:83004814 链接要求:pr>=3,百度快照三天内。