jquery性能优化高级技巧

网络编程 2021-07-04 21:48www.168986.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./jquery-1.10.2.min.js" ></script>
<!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) -->
<script src="//ajax.googleapis./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./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./jquery.min.js" ></script>

一些国内的CDN服务:

http://.bootcdn./jquery/
<!--新浪 CDN-->
<script src="http://lib.sinaapp./js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--百度 CDN-->
<script src="http://libs.baidu./jquery/1.9.1/jquery.min.js"></script>
<!--Bootstrap CDN-->
http://.bootcdn./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>');
/ 

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by