这是我参与8月更文挑战的第24天，活动详情查看： 8月更文挑战
前言
在JavaScript处理过后，若发生了添加和删除元素，对样式属性和类进行了修改，就都会导致浏览器重新计算所涉及元素的样式，某些修改还可能会引起页面布局的更改和浏览器的重新绘制，本文着眼于样式相关的优化点，来看看如何提升前端渲染性能。
减少要计算样式的元素数量
首先我们需要知道与计算样式相关的一条重要机制：CSS引擎在查找样式表时，对每条规则的匹配顺序是从右向左的，这与我们通常从左向右的书写习惯相反，举个例子，如下CSS规则：
.product-list li {}
如果不知道样式规则查找顺序，则推测这个选择器规则应该不会太费力，首先类选择器.product-list的数量有限应该很快就能查找到，然后缩小范围再查找其下的li标签就顺理成章。
但CSS选择器的匹配规则实际上是从右向左的，这样再回看上面的规则匹配，其实开销相当高，因为CSS引擎需要首先遍历页面上的所有li标签元素，然后确认每个li标签有包含类名为product-list的父元素才是目标元素，所以为了提高页面的渲染性能，计算样式阶段应当尽量减少参与样式计算的元素数量，总结如下几点实战建议：
使用类选择器替代标签选择器，对于上面li标签的错误示范，如果想对类名为product-list下的li标签添加样式规则，可直接为相应的li标签定义名为product-list_li的类选择器规则，这样做的好处是在计算样式时，减少了从整个页面中查找标签元素的范围，毕竟在CSS选择器中，标签选择器的区分度是最低的。
避免使用通配符做选择器，对于刚入门前端的同学，通常在编写CSS样式之前都会有使用通配符去清楚默认样式的习惯，如下所示：
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
这种操作在标签规模较小的demo项目中，几乎看不出有任何性能差异。但对实际的工程项目来说，使用通配符就意味着在计算样式时，浏览器需要去遍历页面中的每一个元素，这样的性能开销很大，应当避免使用。
