轩枫阁

首页 / 搜索标签: 性能优化 (第2页)

前端优化之浏览器重排与重绘

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

简介

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

重绘

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

重排

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

2013/11 12  周二

关于jQuery性能优化

也许很多人都在使用jQuery,因为它给我们的开发效率、兼容处理、代码量等方面带来了很多便利。无论是什么,都会有它需要优化的地方,即使你平常没注意到。那下面来看看这篇优秀的外国文章的翻译版,相信会对你有所用处。

我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来。我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景。

一、选择器性能优化建议

1. 总是从#id选择器来继承

这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。 查看全文

2013/11 07  周四

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子