高性能HTML5(2)-html5开发原则

文章标签: 高性能html5,html5
2014-12-6 18:36:04     6 人阅读    

我们发现了一些很有用的开发原则,这些原则贯穿于本书之中(当然也包括我们平时 的工作),它们奠定了这本书要讨论的基础。所以在讨论更多细节前,还是把这些原则先摆 在这里吧。下面列出了我们所遵从的设计和开发原则:


•编写符合当代浏览器性能的代码

•用CSS来布局
•使用渐进式增强的方法

•各司其职


当我们在一个多人团队中协同开发的时候,遵循这些原则有助于我们达到最优的性能 体验,同时也能最大程度上帮助我们避免产生一些跨浏览器兼容方面的“坑”。
编写符合当代浏览器性能的代码

如果你想当一个性能高手,那么必须理解浏览器的工作原理,哪怕是个大概。只有这样你才能知道瓶颈在哪里以及如何优化


首先HTML被解析为一棵DOM树,也叫作文档对象模型。这就是为什么浏览器要在 第一时间下载页面的HTML内容的原因之一,另一个原因是HTML包含了展示页面所需 要的其他所有资源文件(样式、脚本、图片等)。然后第二棵树是DOM树和CSS样式表结 合起来构成的渲染树(在Firefox中渲染树被称作框架树),其中CSS样式表不仅包括你自 定义的也包括浏览器默认的。根据这棵渲染树,浏览器就开始显示了,把你写的元素“画” 到屏幕上,从左上开始到右下结束。
你可以从以下两方面改进性能:
•减少HTML中元素的数量。
•减少重绘。


减少HTML中元素的数量
HTML元素是首先被解析进DOM树和渲染树的,通过减少HTML元素的数量,可以 让浏览器更快地显示完节点(参见图2-1)。不要滥用HTML,而是要用最少量但是必需的 HTML去语义化地布局。
别忘了“各司其职“(内容与样式分离)的原则,在这章稍后还会详细讨论它。让HTML 做内容的事情,让CSS做展现的事情。这样做不仅可以提高客户端的性能,同样可使得页 面更易于维护从而提高开发效率。

 

减少重绘
       对于提高性能来说,减少HTML元素的数量确实很管用,但减少浏览器重绘次数的效 果会更加明显。在元素完成绘制之后动态更改DOM结构或CSS样式都会引发浏览器重绘。
       性能的损耗直接取决于动态改动的范围。现代的高级浏览器只会重绘必要的部分, 如果只是改动一个元素的背景颜色,那就只引发这一个元素的重绘,但如果是改动一个 元素的位置或是增加一个新的元素,那就会引发大量的重绘,因为它影响了所有的兄弟 元素。
      在动态改动DOM和CSS样式时有两点是需要考虑的。第一点是要改动的元素在DOM 树中的深度,越深则改动就越独立,对其他节点影响越少,所以能改多深就改多深。第二 点也是更重要的一点,如果要对DOM有多次操作,尽量合并到一次做完而不是分成一次 一次地去做。正是因为这个原因,CSS就成了我们改动DOM时最好的伙伴。


例如,你想在双击的时候改动一个元素的宽度、背景色和前景色,可能会用到清单2-1 所示的代码。

清单2-1: JavaScript产生多次重绘

<a href=njavascript:;n id^’example^I^m an Example</a>
<script>
var example = document.getElementById("example");
example.ondblclick = function() {
example.style.backgroundColor = "red"; example.style.width = "200px"; example.style.color = "white";
}
</script>


在这个例子里,我们逐次对元素的样式进行更改。首先把背景色改为红色(第一次重 绘),然后把宽度改为200像素(第二次重绘),最后把前景色改成白色(第三次重绘)。当 然你可以用JavaScript把这些操作合并成一次操作,而更简单、更易于维护的方式是用 JavaScript去改动这个元素的CSS class,在这个class内包含了你所需要的所有样式。这样 做会把三次重绘变成只有一次重绘。清单2-2给出了详细的代码。
清单2-2: JavaScript产生一次重绘

<style>
.dblClick { width: 200px; background: red; color: white;
}
</style>
<a href="javascript:;" id^’example^I^m an Example</a>
<script>
var example = document.getElementById("example");
example.ondblclick = function() { example.className = "dblClick";
}
</script>

        还有,要把CSS (包括外链CSS)放到head标签内,把script放到body标签的尾部。 因为,浏览器并不会等全部HTML解析完成之后才渲染元素,而是同时进行,把CSS放到 前面就会保证先渲染的那一部分元素的显示样式是正确的。这么写在性能方面也有更重要 的意义,你绝对不希望引起大量的浏览器重绘的原因仅仅是你把CSS写到了后面。因为浏 览器要预处理JavaScript文件,所以把JavaScript文件放到头部会延迟页面元素的渲染,用 户会觉得页面变慢了。


        我们会在下一章更详细地讨论这些内容,下一章还会介绍一些其他避免重绘的方法。


用CSS来布局,处理边界

         浏览器渲染页面其实是在渲染一系列的“盒子”,而且这些盒子里还包含了许多其他“盒 子”。所以我们说浏览器的天然渲染模型是“很多盒子套很多盒子”,知道这一点,会让我 们更明智地布局页面。

 

         完美实现“盒子套盒子”的方法就是把一个或一大组元素都包在一个盒子里。相反, 不好的方式就是把一些元素丢到盒子的外面,下面会用一个例子进行说明。

        首先来明确一下我们要做的事情。我们要做一个文章的栏目,包括一个在文字左边的 图片,一个在文字上面的标题,而且文字可以适应任意的高度。

 

 

           关于可复用,我再多说两句。如果你写的代码是独立于内容的,那它就是可复用的, 因为它没有跟任何配置绑定。比如一个购买的按钮,这是一个有专门意图的功能键(购买), 但是它可能出现在各种情形之下,比如详情页、列表页或优惠页。把它模块化,我们可以 随心所欲地把它放到任何需要的地方。同样,因为我们没有对盒子的边界做任何其他修饰, 这些模块应该在不同的情形下表现得一样好,只是需要我们在一开始的时候花一些时间去 建立可复用的机制。

有时并不是很容易就能发现你的代码出现问题,你要仔细观察周围的盒子有没有重叠, 负的左偏移或右偏移。


原文地址:http://www.itmmd.com/201412/268.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

android学习笔记(11)android布局管理器详解   上一篇
下一篇  linux命令详解(11)alias watch命令详解

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!