`
hui_jing_880210
  • 浏览: 43378 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery js位置阻塞和优化

 
阅读更多

       所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
       有人会问:为什么JS不能像CSS、image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理,
当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,而不需要等待request的返回,当request返回 后,只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

        阻塞下载图:下图是访问blogjava首页的时间瀑布图,可以看出来开始的2个image都是并行下载的,而后面的2个JS都是阻塞下载的(1个1个下载)。

 

嵌入JS应该放在什么位置

   1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。 
   2、如果嵌入JS放在head中,请把嵌入JS放在CSS前面。
   3、使用defer      <script src="../jquery.js" defer></script>     加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!
   4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用setTimeout来调用

   PS:很多网站喜欢在head中嵌入JS,并且习惯放在CSS后面,比如看到的www.qq.com,当然也有很多网站是把JS放到CSS前面的,比如yahoo,google

分享到:
评论

相关推荐

    js jquery 非阻塞式 消息提示框

    在JavaScript和jQuery的世界里,创建非阻塞式的消息提示框是一种优化用户体验的重要技术。传统的`alert()`函数在显示消息时会阻塞整个页面的交互,直到用户点击“确定”按钮,这种方式在某些场景下并不理想,因为它...

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

    如`jquery-2.0.0.js`和`jquery-2.0.0.min.js`,后者是经过压缩后的版本,更适合生产环境使用。 - **更好的DOM操作**:jQuery 2.0.0进一步增强了选择器引擎,提升了对CSS3选择器的支持,使得开发者能更方便地选取和...

    《JavaScript和jQuery实战手册》PDF

    此外,还会介绍如何优化jQuery代码,提高性能,以及与现代前端框架(如React、Vue.js)的集成。 在阅读《JavaScript和jQuery实战手册》的过程中,读者不仅可以学习到扎实的理论知识,还能通过丰富的示例和实践项目...

    FileSaver.js和jquery.wordexport.js插件

    FileSaver.js和jquery.wordexport.js是两个在前端开发中常用的JavaScript库,它们主要用于实现文件保存功能,尤其是针对HTML内容的导出和保存为Word文档。 FileSaver.js是一个轻量级的JavaScript库,它的主要功能是...

    jQuery性能优化(转)

    然而,随着网站复杂性的增加,优化jQuery代码以提高页面加载速度和用户体验变得至关重要。以下是一些关于jQuery性能优化的关键点: 1. **延迟脚本加载**:如果某些jQuery功能在页面加载后才需要,可以使用`$(window...

    jQuery+CSS3触摸优化画廊.zip

    jQuery Mobile和Hammer.js等库提供了对这些事件的良好支持,可以简化触摸事件的处理。 **性能考虑** 在创建触摸优化的画廊时,性能是一个重要的考虑因素。我们应该避免在滑动事件中执行过于复杂的操作,以防止阻塞...

    jquery文件上传插件 jquery.uploadify.js

    《jQuery文件上传插件jQuery.uploadify.js:跨越浏览器限制的智能解决方案》 在Web开发中,文件上传功能是一项常见的需求,而jQuery.uploadify.js是一款高效且用户友好的文件上传插件,尤其对于需要兼容多种浏览器...

    jquery-1.8.0min.js&&jquery;-1.8.0.js

    在这个标题为"jquery-1.8.0min.js&&jquery-1.8.0.js"的资源包中,包含了两个版本的jQuery库——未压缩版的jquery-1.8.0.js和压缩版的jquery-1.8.0.min.js,它们都是jQuery 1.8.0的实现,供开发者根据需求选择使用。...

    bootstrap3.37稳定版本含(js和css)并带有jquery.min的2.1.1版本

    jQuery 2.1.1是一个稳定的版本,经过了广泛的测试和优化,确保在大多数现代浏览器上运行良好。 最后,`bootstrap.min.js`是Bootstrap的JavaScript文件,包含了Bootstrap的插件和组件。这些组件包括但不限于:模态框...

    JavaScript+jQuery Mobile+Node.js跨平台网页设计附书源码

    JavaScript,jQuery Mobile和Node.js是现代网页开发中的关键技术,它们各自扮演着不同的角色,而将它们结合起来可以创建出强大的、跨平台的网页应用。在这个项目中,我们看到这三个技术的融合,为开发者提供了从桌面...

    JavaScript+jQuery交互式Web前端开发-源代码.zip

    JavaScript 和 jQuery 是现代 Web 前端开发中的两个核心工具,它们共同为创建动态、交互式的网页提供了强大的功能。在本教程中,我们将深入探讨如何将这两种技术与 HTML 和 CSS 结合,以实现高效的网页设计。 ...

    XMPP高级编程——使用JavaScript和jQuery

    1. **异步编程**:JavaScript的核心特性之一,通过回调函数、Promise和async/await等机制处理非阻塞I/O操作,非常适合XMPP的实时性需求。 2. **XMLHttpRequest与Fetch API**:用于发送HTTP请求,获取和发送XMPP...

    精通Javascript+jQuery视频下载

    7. **性能优化**:理解如何避免 JavaScript 的常见性能陷阱,如过多的 DOM 操作、阻塞主线程等,并学习使用 jQuery 的优化技巧。 8. **实战项目**:通过实际项目练习,将所学知识应用于实际场景,提升解决问题的...

    node.js ,jquery_mobile.js

    Node.js和jQuery Mobile是两种非常不同的...Node.js强化了JavaScript在服务器端的能力,而jQuery Mobile则致力于提高前端的交互性和移动适配性。了解并熟练掌握这两者,将极大地提升开发者在现代Web开发中的竞争力。

    超级实用的JS和CSS和JQuery源码(包含面试资料)

    这份压缩包提供的"超级实用的JS和CSS和JQuery源码(包含面试资料)"是一份宝贵的资源,涵盖了这些核心技术的重要知识点,旨在帮助开发者提升技能并顺利通过面试。 **JavaScript**: JavaScript是一种解释型的、面向...

    Jquery所需驱动

    8. **性能优化**:在Android中使用jQuery时,由于JavaScript运行在单独的线程,所以需要注意性能优化,避免阻塞主线程。合理使用异步操作和避免不必要的DOM操作能有效提升应用性能。 综上所述,"Jquery所需驱动...

    jquery-2.2.4插件

    在jQuery 2.2.4版本中,我们注意到有四个文件:`jquery-1.12.4.js`、`jquery-2.2.4.js`、`jquery-1.12.4.min.js`和`jquery-2.2.4.min.js`。其中,`js`后缀的文件是未压缩的源代码,便于开发者阅读和调试;而`min.js`...

    关于JQUERY性能的优化

    在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了DOM操作、事件处理和动画效果,极大地提升了开发效率。然而,随着网页复杂性的增加,优化jQuery性能变得至关重要,以确保页面加载速度和用户体验。以下是...

    jquery页面加载效果

    9. **性能优化**:避免在页面加载时进行过多的计算或操作,以减少阻塞用户体验。可以使用延迟加载(lazy loading)技术,只在用户需要时加载内容。 10. **浏览器兼容性**:虽然jQuery对大部分浏览器都提供了良好的...

    jquery制作酷炫圣诞主题首页

    然后,通过JavaScript动态改变这些元素的位置,模拟下落过程。同时,为了增加真实感,还可以设置雪花随机消失和重新生成的机制。 接下来,是轮播图的制作。jQuery提供了丰富的插件,如Slick或Bootstrap Carousel,...

Global site tag (gtag.js) - Google Analytics