ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码

HTML5性能优化与分析(1/4)

来源:网络整理     时间:2016-04-06     关键词:HTML5,性能优化

本篇文章主要介绍了"HTML5性能优化与分析",主要涉及到HTML5,性能优化方面的内容,对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下: 每次跟朋友谈起HTML5,就会有人说可以先用HTML5的方式就是把DOCTYPE先改了,因为目前很多页面都还是用传统的方式,HTML5的方式,本身是兼容IE浏览...

每次跟朋友谈起HTML5,就会有人说可以先用HTML5的方式就是把DOCTYPE先改了,因为目前很多页面都还是用传统的方式,HTML5的方式,本身是兼容IE浏览器的,从IE6到IE10都可以,包括高级浏览器都支持,所以说拥抱HTML5最简单的方式就是把DOCTYPE给改了。

从性能角度来说,HTML5首先是缩减了HTML文档,使这件事情变得更简单,首先,从用户可读性上说,原先一大堆东西,像初学者第一次看到这些东西是看不懂的,而HTML5的声明方式对用户来说显然更友好一些;最后,文档编码的声明,用HTML5方式的话,就很简单。

1、更简洁的标签

接下来可能并不是一件很常见的事情,但是却是我比较推崇的,使用更简洁的标签方式。

HTML5从这个名字大家可以听出,它是从HTML4继承过来的,HTML4里面有严格模式跟过渡模式,HTML5是支持这种过渡模式的,就是你可以不把一些标签闭合,但是,我并不推荐所有的标签,比方说BODY标签的不闭合,这种我们不推荐。

但是像P标签最常用的,还有列表标签LI,为什么这样说?首先从视觉的角度来说,这样的方式更简洁一点,然后关键的是在文档传输过程中,内容会更少。

HTML5标签属性的声明支持三种方式:单括号、双括号和不加括号,为了减少文档大小,我是选择不加双引号的方式或单引号的方式,但是要注意,假设是类属性的声明,因属性可能包括多个类,多个类的时候则必须用括号括起来,在这方面,给大家看一下谷歌的一个实践,谷歌自己有一个页面完全实践了上面的东西,文档的大小减少了20%,使HTML文档的传输减少了20%,如果把整个都实践起来,可以达到5%—20%之间的减少,这是第一步,缩减HTML文档的大小(具体可查看马海祥博客《HTML5的主要技术组成部分及功能介绍》的相关介绍)。

2、预取

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

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

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

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

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

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

3、图片优化

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

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

4、DNS解析

相关图片

相关文章