前端性能优化35条规则 yahoo -CSS

前端性能优化35条规则 yahoo -CSS
前端性能优化35条规则 yahoo -CSS
前端性能优化35条规则 yahoo -CSS

01) 把样式表放在`<head>`中

虽然研究在雅虎的表现！我们发现，移动样式表文件HEAD使页面看起来是加载速度更快。这是因为将样式表放在HEAD中可以使页面逐步呈现。

关心性能的前端工程师希望页面逐渐加载。也就是说，我们希望浏览器尽快显示其具有的所有内容。这对于内容丰富的页面以及Internet连接速度较慢的用户而言尤其重要。为用户提供视觉反馈（例如进度指示器）的重要性已经得到了充分的研究和记录。在我们的例子中，HTML页面是进度指示器！当浏览器逐步加载页面时，标题，导航栏，顶部的徽标等均作为等待页面的用户的视觉反馈。这样可以改善整体用户体验。

将样式表放在文档底部附近的问题是，它禁止在许多浏览器（包括Internet Explorer）中进行渐进式渲染。这些浏览器会阻止渲染，以避免样式发生更改时必须重绘页面元素。用户被困在查看空白白页。

的HTML规范明确指出，样式表是被包括在网页的HEAD：“与A，[LINK]可以仅出现在一个文档的HEAD部分，尽管它可能出现任意次数”。空白的黑屏或未样式化的内容闪烁均不值得冒险。最佳解决方案是遵循HTML规范并将样式表加载到文档HEAD中。

02) 避免使用`CSS`表达式

CSS表达式是一种动态设置CSS属性的强大（危险）方式。从版本5开始，Internet Explorer支持它们，但从IE8开始不推荐使用。例如，可以使用CSS表达式将背景色设置为每小时交替显示：

1	背景颜色：expression（（new Date（））。getHours（）％2？“＃B8D4FF”：“＃F08A00”）;

如此处所示，该expression方法接受JavaScript表达式。CSS属性设置为评估JavaScript表达式的结果。该expression方法被其他浏览器忽略，因此对于在Internet Explorer中设置创建跨浏览器的一致体验所需的属性很有用。

表达式的问题在于对它们的评估比大多数人期望的要频繁。不仅会在呈现页面和调整页面大小时对它们进行评估，还会在滚动页面甚至用户将鼠标移到页面上时对其进行评估。在CSS表达式中添加一个计数器，使我们能够跟踪何时以及何时评估CSS表达式。在页面上移动鼠标可以轻松生成10,000多个评估。

减少对CSS表达式求值的次数的一种方法是使用一次性表达式，其中第一次对表达式求值时，它将style属性设置为显式值，该值替换CSS表达式。如果必须在页面的整个生命周期中动态设置style属性，则可以使用事件处理程序代替CSS表达式。如果必须使用CSS表达式，请记住，它们可能会被评估数千次，并且可能会影响页面的性能。