使用JS提高性能--选择器篇

前言：jquery选择器提供了简洁方便的查询dom元素的API,经过jquery封装过的dom元素是一个代理对象，包含dom本身，长度等等，可以打印jquery选择器查看。一个jquery选择器代理了诸多。所以在dom查询的速度上是慢于原生js选择器的。

 

1. document.getElementById(sle);也许就是最快的id选择器了。
2. document.getElementsByClassName(cla);慢于第一种;
3. document.getElementsByName(na);
4. document.getElementsByTagName(tag);

 

对于dom操作的话,则建议使用 innerHTML,innerText,等来操作。这样有利于提高性能，对于千条数据以上效果明显。对于前端来说，dom操作是极其耗费性能的，这一点是共识，当然，如果数据量较小，则推荐使用简单易用的jquery选择器。

 

1. $("#sel")
2. $(".sel")
3. $("tag")

以上jquery选择器最快的是id选择器，但是有一点id选择器过多也不好，满屏幕的$对于代码审查等过程是极其痛苦的，如果让审美要求很高的人来审查的话。

 

 

在html5中，js也提供了几个较为简单易用的选择器，例如：

 

 

1. document.querySelector();//参数可以是id class，tag等等
2. document.querySelectorAll();参数可以是class,tag等等

他们的性能也是速速的。所以考虑一下，使用更快的原生选择器与API来操作dom提高性能。