`
piperzero
  • 浏览: 3474343 次
  • 性别: 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方法的说明:

当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档,因此无需选择器。

分享到:
评论

相关推荐

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

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

    jquery-1.1.3 效率提高800%

    错误的MIME类型能够导致脚本出现意想不到的问题。请查看AJAX的范例来了解数据类型的更多信息。 $.ajax()函数需要一个参数,一个包含有键/值对的对象,用于初始化并操作请求对象。 在jQuery 1.2版本中,如果...

    jquery div排序 高效率

    jquery div排序 高效率

    (完整实例)jquery实现表格内容静态排序,提高效率,jquery tablesorter.js

    jquery实现表格内容静态排序,提高效率,jquery tablesorter.js。

    JQuery手册大全全套20+本_全网最全_中文_完整_jquery最好学习资料

    省时省力,时间就是金钱,效率就是实力,不要让领导怀疑你的能力,相信你懂。 《jQuery 1.3》 《jQuery 1.4参考手册》 《jQuery 1.7中文手册》 《jQuery 1.11》 《jQuery 3.1参考手册》 《jQuery.api_1.4.4》 ...

    JQuery入门,JQuery总结

    为了解决这些问题,提高开发效率,我们通常会在JavaScript开发中使用jQuery。 在学习jQuery时,你可以从以下几个方面入手:首先,学习如何引入和使用jQuery库,你只需要在页面的head部分引入jQuery文件即可;其次,...

    jQuery攻略

    本书从实际应用角度出发,介绍了使用jQuery的方方面面,不仅包括处理字符串等比较基础的内容,还涉及表单验证、视觉特效等进阶知识,以及如何使用它来实现Ajax功能,如何使用插件得到更高的开发效率。等等。几乎囊括...

    最新jquery.1.8.1

    此外,选择器引擎Sizzle修复了一些边缘问题和bug,包括对于多个选择符(~ > +)的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素,如果被用来传递一个[removed]标签,则可以运行脚本。...

    [pdf]Jquery1.2.6源码分析

    行原理和内部机制,在使用 jquery时,肯定会碰到许多的问题。这些问题有一部 分是 Jquery 的 Bug。大部分是自身的使用不当而造成的。而文档的简单的使用说 明很难解决问题。在调试基于 jQuery 的 web 应用时,很多...

    初始jQuery

    1. jQuery是一个优秀的JavaScript库,使用他可大大提高Web客户端的开发效率 2. 要使用jQuery的功能,需要首先引用jQuery库文件 3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的...

    jQuery权威指南-源代码

    jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...

    JQuery性能的优化大全

    让你写出更高效的jquery代码。一篇指导你如何实现简洁高效率的代码。

    jQuery读取json数据

    jQuery去读取json的数据非常非常方面而且大大提高了用户界面的可读性,提高了读取的效率,比读xml文件更加方面

    JQuery_Api文档

    网页设计涉及到JQuery技术,使用Dw5开发,可以通过JQuery API文档查阅来提高开发效率

    超实用的jQuery代码段

    11.4 解决jQuery版本冲突问题 11.5 如何设置IE特有的功能 11.6 判断浏览器类型并设置HTML元素内容 11.7 加载Google CDN的jQuery库 11.8 Cookies应用方法 11.9 使用cookie.js管理Cookies 11.10 让Cookies在N分钟后...

    JQuery课堂笔记实例

    达*JQuery课堂笔记,JQuery是前端开发人员必知的库,熟练掌握JQuery能大大简化代码提高开发效率

    JQuery-API手册.zip

    前端必备工具JQuery,该手册能大大提高工作效率

    最新JQuery版本1.8

    此外,选择器引擎Sizzle修复了一些边缘问题和bug,包括对于多个选择符(~ > +)的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素,如果被用来传递一个[removed]标签,则可以运行脚本。...

    jQuery插件及其效率提高

    本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化。

    jQuery入门到精通

    PPT课件,从入门到深入,讲述jQuery的各种便捷用法,提高我们的开发效率。 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 ...

Global site tag (gtag.js) - Google Analytics