jquery性能优化高级技巧
编程学习 2021-07-04 21:48www.dzhlxh.cn编程入门
jquery性能优化做好,速度也很快,那么如何提高jquery性能呢,本篇文章给大家介绍jquery性能优化高级技巧,需要的朋友可以参考下
有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题。
因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷、更流畅的运行效果。
jquery性能优化高级技巧,狼蚁网站SEO优化主要从七个方面对jquery性能优化做介绍:
1.通过CDN(Content Delivery Network)引入jQuery库
2.减少DOM操作
3.适当使用原生JS
4.选择器优化
5.缓存jQuery对象
6.定义一个可以复用的函数
7.用数组方式来遍历jQuery 对象集合
狼蚁网站SEO优化详解每一个方法的具体说明:
通过CDN(Content Delivery Network)引入jQuery库
要提升网站中javascript的性能的最简单的一步就是引入最新版本的jQuery库,新发布的版本通常在性能上会有更好的提升而且也修复了一下bug。或者通过CDN引入也是很好的选择,通过CDN引入能够减少网站的加载时间。
以下是一些CDN服务:
<!-- Case 1 - jQuery CDN --> <script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script> <!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> <!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script> <!-- Case 4 - requesting the absolute latest jQuery version (use with caution) --> <script src="http://code.jquery.com/jquery.min.js" ></script>
一些国内的CDN服务:
http://www.bootcdn.cn/jquery/ <!--新浪 CDN--> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <!--百度 CDN--> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--Bootstrap CDN--> http://www.bootcdn.cn/jquery/
减少DOM操作
虽然javascript性能上有了很大的提升,但是DOM操作还是很耗费资源的,需要减少对DOM操作。当在一个页面中插入大量的元素的时候,尤其重要。
例如:
<div id="elem" ></div> // 不好的方式 //var elem = $('#elem'); //for(var i = 0; i < 100; i++){ // elem.append('<li>element '+i+'</li>'); /