`
pmfou_site
  • 浏览: 30111 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JQuery效率问题

 
阅读更多

1,前言

我们开发了一个专题系统,生成了JSON的数据格式,采用JQuery动态插入HTML中,在前期的使用中,没有太大的问题,效率还可以接受,但是最近可能由于网络加之页面设计问题,我们的JS效率比较差,长达10多秒中,实在难以忍受,到底是什么原因呢?


2,分析

我观察了一下JS脚本,应该说没有太费时间的操作,采用ID的元素选择法,应该是最快的,虽然有个类选择器,但是元素很少,一般在2个左右,不至于影响效率,我注释一下,发现确实不是这个问题。


后来分析,可能是HTML外面套的INDEX.JSP的问题,加上头尾后,效率很慢,所以我们分析思路:

2.1 把JSP分出top,bottom.jsp,采用jquery load()事件加入至页面,确实效率有所提升,但是在FF,和CHROME下不太正常,而调整后,都正常显示,但是效率又下降了。

2.2 采用IFrame方式:把页面的头和尾部采用Iframe嵌入,去掉边框,固定大小,这个确实效率提高了,但是ifram里的跳转是个大问题,效果不是很好;

3,根本原因

我们吧注意力放在了JS上面,突然想到,是不是$(document).ready()方法的原因??

我们去掉此方法,变为函数,同时在页面中用setTimeout()延时10毫秒触发,发现,正常了;

我网上查了一下read方法的说明:

分享到:
评论

相关推荐

    jQuery1.12.4+jQuery中文手册.rar

    - 结合实际项目练习,将jQuery的知识应用到网页交互、动态效果和Ajax通信中,提升开发效率。 以上是对jQuery 1.12.4及其相关资源的基本介绍,掌握这些内容,将有助于你在实际开发中熟练运用jQuery,提升前端开发...

    jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_

    这个版本修复了之前版本中的一些已知问题,提高了代码的执行效率,并对API进行了优化,为开发者提供了更流畅的开发体验。 jQuery的核心特性包括选择器、DOM操作、事件处理、动画效果以及Ajax操作。选择器是jQuery的...

    jquery例子大全 jquery demo

    **jQuery 是一个高效、简洁且功能...每个demo都是一个学习的机会,可以帮助你掌握如何将jQuery应用到实际项目中,提高开发效率。所以,无论是初学者还是有一定经验的开发者,都应该好好利用这些示例来提升自己的技能。

    解决ECSHOP和jquery冲突问题所需文件

    引入`jquery.json.js`后,可以使用jQuery的方法来便捷地处理JSON对象,提高代码效率。 解决ECSHOP和jQuery冲突的具体步骤如下: 1. **加载顺序**:确保jQuery库在ECSHOP的任何自定义JavaScript代码之前加载。这样...

    jquery1.4.2 jquery1.4.2

    这个版本的发布极大地简化了网页开发,提升了效率,使得复杂的前端交互变得轻而易举。 一、jQuery核心概念 1. 选择器:jQuery的核心之一是其强大的CSS选择器支持,包括ID选择器 (#id)、类选择器 (.class)、元素...

    经典jquery案例 经典jquery

    在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、...通过学习和实践这些案例,开发者能够更好地掌握jQuery的核心技能,提升Web开发效率,同时也能为用户提供更流畅、更具互动性的网页体验。

    jQuery Starterkit

    常见问题通常包括错误处理、兼容性问题、性能优化等,这些问题的答案可以帮助开发者避免常见的陷阱,提高开发效率。 **jQuery库的版本** 压缩包内有两个jQuery库的文件:"jquery-1.2.6"和"jquery-1.3.2",这是...

    Jquery 3.2.1.zip

    此外,jQuery还提供了丰富的链式调用机制,允许我们在一个语句中完成多个操作,提高了代码的可读性和效率。 在压缩包内,有一个"chm"文档,这是jQuery的参考手册。CHM(Compiled Help Manual)是Windows的帮助文件...

    jquery-migrate3.4版本

    jQuery Migrate 是一个插件,它的主要目的是帮助开发者平滑地过渡到较新版本的 jQuery,解决老版本代码在新版本中可能遇到的兼容性问题。在jQuery Migrate 3.4.0版本中,我们看到了对旧API和功能的维护,以及对现代...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    jQuery Iframe Transport是jQuery File Upload的一部分,主要解决大型文件或者需要跨域上传时的问题。由于浏览器的安全策略,某些情况下普通的Ajax上传可能无法工作,这时Iframe Transport通过创建一个隐藏的iframe...

    jquery-3.5.1.rar

    《jQuery 3.5.1:前端开发的强大工具》 ...对于前端开发者而言,掌握jQuery的使用技巧,无疑能提升工作效率,打造更流畅的用户体验。因此,无论你是初学者还是经验丰富的开发者,都值得深入研究和掌握jQuery。

    JQuery1.4.1与JQuery1.8.3

    3. **链式操作增强**:jQuery 1.4.1 进一步完善了链式操作,允许开发者在一个链中执行多个方法,提高了代码的可读性和效率。 4. **事件处理改进**:此版本对事件处理函数进行了优化,包括添加了 `live()` 方法,该...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    《jQuery 3.0.0:深入理解与应用》 jQuery,这个JavaScript库,自2006年发布以来,已经成为了Web开发中不可或缺的一部分。...通过理解和熟练运用jQuery,可以大大提高前端开发的效率,为用户带来更好的浏览体验。

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    《jQuery 2.1.1:...总结来说,jQuery 2.1.1是JavaScript开发中的重要工具,它通过简洁的API和强大的功能,极大地提高了开发效率。无论你是初学者还是经验丰富的开发者,掌握jQuery都能让你在网页开发中游刃有余。

    jquery-migrate-3.0.0.zip

    最佳实践是逐步升级和修改代码,以适应最新版本的jQuery,因为旧的API和特性可能有安全风险,或者效率较低。使用jQuery Migrate的目的是为了有一个平滑的过渡期,而不是永久依赖。 总的来说,jQuery Migrate 3.0.0...

    jquery整合dtree 动态加载树形结构,提高效率

    本人这段时间正巧要做一个省市县的树状结构图,公司之前用的dtree实现起来效率太低,半天打不开页面,于是考虑用jquery动态加载,通过网上查资料,学习别人的列子,现将本人所整理的树状结构实例上传。测试数据库为...

    从零开始学jquery

    【从零开始学jQuery】这个教程旨在帮助初学者全面理解并掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和...在这个过程中,不断练习和解决问题将使你成为一个熟练的jQuery开发者。

    jquery-1.11.0+jquery-UI-1.10.4

    《jQuery 1.11.0与jQuery UI 1.10.4:经典组合的深度解析》 在Web开发领域,jQuery与jQuery UI是两个不可或缺的...在不断变化的前端技术环境中,理解和掌握这两个库的精髓,对于提升开发效率和项目质量具有显著作用。

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    另外,避免全局变量的使用,以及合理地组织和合并CSS选择器,都能提升页面运行效率。 在实际应用中,jQuery广泛应用于网页交互、表单验证、数据异步加载、响应式设计等多个领域。例如,利用jQuery,我们可以轻松...

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    jQuery降低了JavaScript开发的复杂度,提高了开发效率,尤其在DOM操作、事件处理和Ajax交互方面表现突出。无论是初学者还是经验丰富的开发者,jQuery都能作为一个强大的工具,提升开发体验和项目质量。通过深入学习...

Global site tag (gtag.js) - Google Analytics