轩枫阁

是不是动画效果越多越好？哪些效果需要付出高昂的性能代价？怎样才能做到兼顾网站的效果与效率呢？来看看浏览器的重排与重绘知识，了解如何在具体的开发过程中注意重绘和重排引发的性能问题

简介

浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树(rendering tree)。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

重绘

重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。

重排

重排是更明显的一种改变，可以理解为渲染树需要重新计算。 查看全文

在新浪微博的新鲜事微博输入框中输入文字，这时如果没发布但是已经离开页面，等再回到该页面时，微博发布框中的内容还是存在的。同样，QQ空间、百度贴吧等也是有此类功能，但实现的方法可能不太一样。如数据可以存在服务器上，但是总是在输入文字，那服务器压力不是很大？用cookie有大小限制不可轻易使用。所以本地存储是个不错的选择，这时候大家是不是顿时产生想法：HTML5本地存储~下面详细介绍下

本地存储解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。 查看全文

今天需要些一个回复评论的页面，设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好，然后想起了新浪微博的做法：点击评论，默认显示一行，当输入的文字超过一行或者输入Enter时，输入框的高度会随着改变，直到输入完毕。顿时觉得这个细节做得挺不错的，可以效仿下。下面分享2种实现textarea高度自适应的做法，一种是用div来模拟textarea来实现的，用CSS控制样式，不用JS；另一种是利用JS控制的（因为存在浏览器兼容问题，所以写起来比较麻烦）； 查看全文

不知道大家平时上网有没有注意到许多网站的搜索框有个语音的图标，点击之后能实现语音搜索，如淘宝的搜索等。

这看起来很强大的功能，给了我们不错的用户体验，使我们可以直接通过语音代替键盘输入，接下来看看怎么实现的吧~

点击之后：

查看全文

做个全面的总结，之前做面试的时候，有些标签有点混淆，确实挺多的，下面详细介绍下内联元素与块级元素：

block（块）元素的特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度。

④它可以容纳内联元素和其他块元素

inline元素的特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或图片的宽度，不可改变 查看全文