帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> HTML5教程 >> 阅读文章

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

来源:远方教程 作者:远方教程 发布时间:2015-09-14 查看次数:4228 访问[新版]

  从性能角度来说,HTML5首先是缩减了HTML文档,使这件事情变得更简单。第一,从用户可读性上说,原先一大堆东西,像初学者第一次看到这些东 西是看不懂的,而HTML5的声明方式对用户来说显然更友好一些。 第二,文档编码的声明,用HTML5方式的话,就很简单。很多人问HTML5是什么?我们说可以先用HTML5的方式就是把DOCTYPE先改了,因为目前很多页面都还是用传统的方式。HTML5的方式,本身是兼容IE浏览器的,从IE6到IE10都可以,包括高级浏览器都支持。所以说拥抱HTML5最简 单的方式就是把DOCTYPE给改了。

从9个不同的方面深入分析HTML5的性能-远方教程

  1.更简洁的标签

  接下来可能并不是一件很常见的事情,但是却是我比较推崇的,使用更简洁的标签方式。HTML5从这个名字大家可以听出,它是从HTML4继承过来 的。HTML4里面有严格模式跟过渡模式,HTML5是支持这种过渡模式的,就是你可以不把一些标签闭合。但是,我并不推荐所有的标签,比方说BODY标 签的不闭合,这种我们不推荐。但是像P标签最常用的,还有列表标签LI。为什么这样说?首先从视觉的角度来说,这样的方式更简洁一点。然后关键的是在文档 传输过程中,内容会更少。 HTML5标签属性的声明支持三种方式:单括号、双括号和不加括号。为了减少文档大小,我是选择不加双引号的方式或单引号的方式。但是要注意,假设 是类属性的声明,因属性可能包括多个类,多个类的时候则必须用括号括起来。在这方面,给大家看一下谷歌的一个实践。谷歌自己有一个页面完全实践了上面的东 西,文档的大小减少了20%,使HTML文档的传输减少了20%。如果把整个都实践起来,可以达到5%—20%之间的减少。这是第一步,缩减HTML文档 的大小。

从9个不同的方面深入分析HTML5的性能-远方教程

  2.图片优化

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

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

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2020 远方教程 © All Rights Reserved.

回顶部