电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 提升 web 应用程序的性能(2) [打印本页]

作者: look_w 时间: 2018-9-23 12:14 标题: 提升 web 应用程序的性能(2)

DOM 性能本章简要介绍了一些可进行调整以提升 DOM 性能的内容。
重绘（Repaint）当之前不可见的内容变得可见，DOM 就会重绘，反过来也一样。重绘也称为重画。此行为不会改变文档布局。不改变元素尺寸、形状或位置，只改变外观也会触发重绘。
例如，给元素添加边框或改变背景色就会触发重绘。重绘的性能代价很大；它需要引擎搜索所有元素以确定哪些可见，哪些必须显示。
回流（Reflow）回流是比重绘更显著的改变。在回流中：

要操作 DOM 树。
影响布局的样式会改变。
元素的 className 属性会改变。
浏览器窗口尺寸改变。

引擎将会对相关元素回流，以确定各部分显示在哪。子元素也会被回流以反映父元素的新布局。DOM 中元素后面的元素也会被回流，以计算新布局，因为它们可能在初始回流时被移动了。祖先元素也会因子孙元素大小变化而被回流。最后，所有内容都被重绘。
每次向文档添加一个元素，浏览器都要回流页面来计算所有内容如何定位、如何呈现。添加的东西越多，回流次数越多。如果能减少单独添加元素的次数，浏览器回流次数就更少，运行也更快。
CSS 性能将 Cascading Style Sheets (CSS) 放在顶端。如果样式表放在底部，将最后加载。之前几秒钟，页面都是空白，浏览器等待样式表加载，然后页面上其他东西才能呈现 — 甚至是静态文本。
在 Internet Explorer 中，@import 与在底部使用 <link> 效果一样。我们建议您不要使用。
缩写属性使用缩写属性在一个声明中一次设置几个属性，而不是每个属性用一个声明。使用缩写属性，可以减小文件大小，降低维护量。
例如，可以设置背景、边框、边框颜色、边框样式、边框侧（顶部边框、右侧边框、底部边框、左侧边框）、边框宽度、字体、页边距、轮廓、填充属性。
CSS 选择器CSS 选择器通过从右到左 移动来匹配。所示，浏览器必须遍历页面中每个锚元素以确定它的父元素 ID 是否是 aElement。
清单 7. 选择器正从右到左匹配

1
2
3

#aElement > a{
font-size: 18px;
}

如果从代码中移除 > ，如所示，性能更糟。浏览器要检查整个文档中的所有锚。这样就不是只检查锚的父元素，而是顺着文档树向上查找 ID 为 aElement 的祖先元素。如果正在检查的元素不是aElement 的子孙，浏览器就要沿着祖先元素的树查找，直到文档根部。
清单 8. 如果没有 >，性能更糟

1
2
3

#aElement a{
font-size: 18px;
}

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)