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效率问题的更多相关文章

  1. jQuery效率提升建议

    jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效.网上有一篇文章转载比较泛滥,已经 ...

  2. jQuery 效率提升建议

    jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效.网上有一篇文章转载比较泛滥,已经 ...

  3. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  4. nodejs--vue

    nodejs--vue 基础知识认识: 前端工程化 最近才兴起,nodejs(包的管理更加方便),webpack 数据双向绑定 mvm 数据驱动vue,vue改变数据 组件化开发 vue 中的常见 概 ...

  5. 十条jQuery代码片段助力Web开发效率提升

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

  6. paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

    paip.提升效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----An ...

  7. jquery选择器效率优化问题

    jquery选择器效率优化问题   jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...

  8. 10 款提高开发效率的 jQuery/CSS3 组件

    前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件.今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件.部分插件可以下载 ...

  9. js jquery版本的 金额千分位转换函数(非正则,效率极高)

    没想到js里面没有 金额千分位格式化的处理函数(例:1,234.01 这样的格式),网上搜了一圈,都是使用正则的方式处理的.正则的效率不敢恭维啊,又耗费资源速度又慢(虽然处理起来会直观一些). 因此专 ...

随机推荐

  1. Windows 7 MBR的修复与Linux产品正确卸载

    这几天折腾系统很令人崩溃,但也明白了开机引导流程具体如何. 觉得Centos 7不好用,想卸载Redhat安装Ubuntu,为了图方便直接把红帽的硬盘区格式化了.于是开机引导崩溃,咨询了下大神,大神叫 ...

  2. 20172319 2018.10.12《Java程序设计教程》第6周课堂实践(补写博客)

    20172319 2018.10.12 <Java程序设计教程>第6周课堂测验 课程:<程序设计与数据结构> 班级:1723 学生:唐才铭 学号:20172319 指导老师:王 ...

  3. npm 升级自身

    用cue-cli 生成新项目 提示升级npm 解决方案: npm install -g npm 呵呵呵,简直太简单了   然而今天是2016.11.11

  4. setInterval 和 setTimeout

    setInterval 和 settimeout的区别 setinterval 1.会造成某些间隔会被跳过2.多个定时器之间的执行代码事假间隔比预期的小 而且 当定时器代码添加到任务队列里面没有被执行 ...

  5. WebMvcConfigurerAdapter已经过时的问题解决

    spring 5开始已经废弃WebMvcConfigurerAdapter,替代的是WebMvcConfigurer接口. 参考: https://blog.csdn.net/lenkvin/arti ...

  6. “一次编写,随处运行” Intel HTML5技术研讨会

    HTML5 是一种开放标准.通过使用此标准,开发人员只需编写一次程序,即可在任何地方运行. 这一跨平台方法能够显著增加开发人员的总体潜在受众,同时在不同屏幕尺寸上为用户带来更一致的体验.因此,HTML ...

  7. Ubuntu 中启用 root 帐号

    参考:http://linuxtoy.org/archives/howto_enable_ubuntu_root_account.html 如果你实在需要在 Ubuntu 中启用 root 帐号的话, ...

  8. STL中经常使用数据结构

    STL中经常使用的数据结构: [1]  stack.queue默认的底层实现为deque结构. [2]  deque:用map管理多个size大小的连续内存块,方便头尾插入. [3]  vector: ...

  9. win10镜像重装,快速设置之后无限重启怎么办?

    我得操作过程: 1.下载老毛桃最win8pe装机版 2.安装老毛桃到U盘, 3.格式化U盘,用extFat格式,拷贝win10镜像文件(你也可以拷贝到硬盘上) 4.插入电脑,通过U盘启动,进入PE 5 ...

  10. mac 刻录ISO系统盘

    今天本本系统坏了,手头上又没有U盘PE工具,只有MAC和光驱,只好在MAC上下载系统ISO刻录,我是直接点ISO文件,右键刻录到光盘,刻录好之后放到本本上发现不能引导,再把光盘放回MAC上一看,光盘里 ...