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() 函数仅能用于当前文档,因此无需选择器。
分享到:
相关推荐
本人这段时间正巧要做一个省市县的树状结构图,公司之前用的dtree实现起来效率太低,半天打不开页面,于是考虑用jquery动态加载,通过网上查资料,学习别人的列子,现将本人所整理的树状结构实例上传。测试数据库为...
错误的MIME类型能够导致脚本出现意想不到的问题。请查看AJAX的范例来了解数据类型的更多信息。 $.ajax()函数需要一个参数,一个包含有键/值对的对象,用于初始化并操作请求对象。 在jQuery 1.2版本中,如果...
jquery div排序 高效率
jquery实现表格内容静态排序,提高效率,jquery tablesorter.js。
省时省力,时间就是金钱,效率就是实力,不要让领导怀疑你的能力,相信你懂。 《jQuery 1.3》 《jQuery 1.4参考手册》 《jQuery 1.7中文手册》 《jQuery 1.11》 《jQuery 3.1参考手册》 《jQuery.api_1.4.4》 ...
为了解决这些问题,提高开发效率,我们通常会在JavaScript开发中使用jQuery。 在学习jQuery时,你可以从以下几个方面入手:首先,学习如何引入和使用jQuery库,你只需要在页面的head部分引入jQuery文件即可;其次,...
本书从实际应用角度出发,介绍了使用jQuery的方方面面,不仅包括处理字符串等比较基础的内容,还涉及表单验证、视觉特效等进阶知识,以及如何使用它来实现Ajax功能,如何使用插件得到更高的开发效率。等等。几乎囊括...
此外,选择器引擎Sizzle修复了一些边缘问题和bug,包括对于多个选择符(~ > +)的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素,如果被用来传递一个[removed]标签,则可以运行脚本。...
行原理和内部机制,在使用 jquery时,肯定会碰到许多的问题。这些问题有一部 分是 Jquery 的 Bug。大部分是自身的使用不当而造成的。而文档的简单的使用说 明很难解决问题。在调试基于 jQuery 的 web 应用时,很多...
1. jQuery是一个优秀的JavaScript库,使用他可大大提高Web客户端的开发效率 2. 要使用jQuery的功能,需要首先引用jQuery库文件 3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的...
jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...
让你写出更高效的jquery代码。一篇指导你如何实现简洁高效率的代码。
jQuery去读取json的数据非常非常方面而且大大提高了用户界面的可读性,提高了读取的效率,比读xml文件更加方面
网页设计涉及到JQuery技术,使用Dw5开发,可以通过JQuery API文档查阅来提高开发效率
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,该手册能大大提高工作效率
此外,选择器引擎Sizzle修复了一些边缘问题和bug,包括对于多个选择符(~ > +)的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素,如果被用来传递一个[removed]标签,则可以运行脚本。...
本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化。
PPT课件,从入门到深入,讲述jQuery的各种便捷用法,提高我们的开发效率。 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 ...