这是我参与8月更文挑战的第25天，活动详情查看： 8月更文挑战
前言
在JavaScript处理过后，若发生了添加和删除元素，对样式属性和类进行了修改，就都会导致浏览器重新计算所涉及元素的样式，某些修改还可能会引起页面布局的更改和浏览器的重新绘制，本文着眼于样式相关的优化点，来看看如何提升前端渲染性能。
降低选择器的复杂性
随着项目不断迭代，复杂性会越来越高，或许刚开始仅有一个名为content的类选择元素，但慢慢地单个元素可能会并列出列表，列表又会包裹在某个容器元素下，甚至该列表中的部分元素的样式又与其他兄弟元素有所差异，这样原本的一个类选择器就会被扩展成如下形式：
.container:nth-last-child(-n+1) .content {
/* 样式属性 */
}
浏览器在计算上述样式时，首先就需要查询有哪些应用了content类的元素，并且其父元素恰好带有container类的倒数第n+1个元素，这个计算过程可能就会话费许多时间，如果仅对确定的元素使用单一的类名选择器，那么浏览器的计算开销就会大幅度降低。比如使用名为final-container-content的类选择器替代上述的复杂样式计算，直接添加到目标元素上。而且复杂的匹配规则，可能也会存在考虑不周从而导致画蛇添足的情况，例如，通过id选择器已经可以唯一确定目标元素了，就无须再附加其他多余的选择器：
/* 错误示范 */
.content #my-content
/* 正确方式 */
#my-content
由于id选择器本身就是唯一存在的，定位到目标元素后再去查找名为content的类选择器元素就多此一举。当然在实际项目中的情况会复杂的多，但若能做到尽量降低选择器的复杂性，则类似的问题也会容易避免。
