.beautiful-table th { /* headerClass的内容 */ }
.beautiful-table td { /* cellClass的内容 */ }
再者，对于tr的奇偶行样式，在部分浏览器下可以使用：nth-child伪类来实现，这方面可以利用特性探测，仅在不支持该伪类的浏览器中使用addClass添加样式。当然如果你仅仅想对IE系列进行优化的话，这一条可以忽略了。
对于：nth-child伪类的探测，可以用以下的思路来进行：创建一个stylesheet，再创建一条规则，如#test span:nth-child（odd） { display： block; }。创建相应的HTML结构，一个id为test的div，内部放置3个span。
将stylesheet和div一同加入的DOM树中。查看第1和第3个span的运行期display样式，如果是block，则表明支持该伪类。删除创建的stylesheet和div，别忘了缓存探测的结果。最后，对于给所有th和td元素添加text-align样式，也是可以通过css进行优化的。既然不知道添加的是哪个align，那么就多写几个样式：
复制代码 代码如下:
/* CSS样式 */
.beautiful-table-center th,.beautiful-table-center td { text-align: center !important; }
.beautiful-table-rightright th,.beautiful-table-rightright td { text-align: rightright !important; }
.beautiful-table-left th,.beautiful-table-left td { text-align: left !important; }
/* javascript */
table.addClass('beautiful-table-' + options.align);
当然，上面所说的优化，是建立在对CSS有控制权的情况下的，如果本身无法接触到CSS样式，比如这是一个通用的插件函数，会被完全无法控制的第三方使用，那么怎么办呢？也不是完全没有办法：
去找页面里的所有CSS规则，比如document.styleSheets。遍历所有规则，把配置项中的headerClass、cellClass等拿出来。提取需要的几个class中的所有样式，再自己组装成新的选择器，如beautiful-table th。使用创建出来的选择器，生成新的stylesheet，加入到DOM树中。那么只给table加上beautiful-table这个class就搞定了。
当然上面的做法其实也蛮消耗时间的，毕竟又要遍历stylesheet，又要创建stylesheet。具体是不是对效率提升有很大的帮助，则依据页面的规模会有不同的效果，是否使用就要看函数设计人员的具体需求了，这里也就是提一种策略。
总的来说，通过尽可能少地执行javascript，将更多的样式化的任务交给CSS，则浏览器的渲染引擎来完成，又可以进一步地优化该函数，假设对addClass、css的调用需要100ms的话，此次优化直接消灭了原有120+726=846次的操作，节约了84600ms的时间（当然有夸张的成分，但是对整个函数的消耗来说，这个确实是很大的一块）。
这篇文章，仅仅是想在jQuery的各个实现的层面上来进行优化，只涉及到了对jQuery整个运行过程的分析、细节介绍和优化方向，并没有提到一些基本之基本的优化方法，比如：先将整个table从DOM树中移除，完成所有的操作之后再放回DOM，减少repaint。将mouseover和mouseout改为mouseenter和mouseleave，减少因为下正确的事件冒泡模型导致的重复的事件函数的执行。对于th、td之类单纯元素的选择，优先考虑使用原生的getElementsByTagName，消灭sizzle分析选择器的时间。
最后，这篇文章只是想说明，对于前端开发人员，虽然浏览器可能是个黑盒，但是很多框架、工具、库都是开放的，在使用之前如果可以进行一定程度的了解，必然有助于个人的技术提升和最终产品的质量优化，“知其然而不知其所以然”是非常忌讳的情况。
您可能感兴趣的文章: