`
快乐_虫
  • 浏览: 7523 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

加载javascript,会不会阻塞进程?

阅读更多
需求:加载js或css,onload后做一些事情(因为有依赖关系,回调方法里用到了加载js的方法)

首先,第一个问题,加载js是否阻塞主线程??自测如下,欢迎拍砖和补充。

如图,当执行完循环的时候,body的内容没有显示出来。

 


 
2:在head或者body标签中,引入外部js文件,这样会阻塞进程的!
代码如下:


 

 结果如图所示:当执行完循环的时候,body的内容同样没有显示出来,说明外链js的方式也阻塞了进程。

 

 3:在head或者body标签中,javaScript创建script标签引入js文件,这样相当于开启了一个新的进程,不会阻塞当前进程。

代码如下:

 

 

 结果如图所示:当执行完循环的时候,body中显示出了文字,说明动态创建script标签的方式是异步的,并没有阻塞当前进程的执行。


 

 

  • 大小: 25.1 KB
  • 大小: 53.8 KB
  • 大小: 33.2 KB
  • 大小: 18.8 KB
  • 大小: 51.9 KB
  • 大小: 18.8 KB
  • 大小: 37.4 KB
  • 大小: 50 KB
分享到:
评论

相关推荐

    关于延迟加载JavaScript

    由于JavaScript的执行会阻塞浏览器的渲染进程,若页面中有大量的JavaScript代码,尤其是在页面头部引入,会明显拖慢页面加载速度。为了改善用户体验并提升搜索引擎排名,开发者会采用延迟加载JavaScript的方法。 ...

    23-渲染流水线:CSS如何影响首次加载时的白屏时间?_For_vip_user_0011

    2. **异步加载非关键CSS**:对于非首屏内容或非关键样式的CSS,可以使用`<link rel="preload">`或`<link rel="async">`来异步加载,这样不会阻塞DOM构建。 3. **使用CSS媒体查询**:针对不同的设备条件,利用媒体...

    高性能的javascript之加载顺序与执行原理篇

    这些库提供延迟加载和无阻塞加载的功能,有助于在不影响页面渲染的情况下加载JavaScript。 总结提高JavaScript性能的关键点: 1. 将所有`<script>`标签放在`</body>`之前,以确保页面在脚本执行前完成渲染。 2. ...

    四款由html+css+js实现的精美网页加载页面动画源码

    在这些加载动画中,JS通常用来监听页面加载事件,如DOMContentLoaded或load事件,当页面内容加载完成后,JS会停止加载动画,显示实际内容。此外,JS还可以根据用户行为触发动画,比如点击按钮启动加载动画。例如,...

    callJavaScript

    1. **初始化环境**:这通常涉及加载JavaScript引擎并设置必要的上下文。例如,使用V8引擎,我们需要创建一个Isolate实例,它是JavaScript执行环境的核心。 2. **编译和执行JavaScript代码**:这可以通过读取脚本...

    android与WebView进程通信

    3. **避免长时间运行的JavaScript**: 长时间运行的JavaScript任务会阻塞WebView进程,可能导致ANR(Application Not Responding)错误。因此,应限制JavaScript的执行时间,并使用异步机制处理耗时任务。 通过理解...

    高性能JavaScript编程1

    浏览器中的JavaScript性能直接影响用户体验,因为JavaScript执行时会阻塞其他操作。以下是各章节主要内容的概述: 第一章 “加载和执行”: 本章探讨JavaScript在浏览器中的加载和执行过程,强调了JavaScript执行的...

    《高性能 JavaScript》

    由于JavaScript的阻塞性质,在执行JavaScript代码时,其他任何操作都无法进行。实际上,大多数浏览器都使用单一进程来处理用户界面(UI)更新和JavaScript执行,这意味着两者无法同时发生。因此,JavaScript执行时间...

    高性能JavaScript.pdf

    - **单进程模型**:大多数现代浏览器使用单一进程来处理用户界面更新和JavaScript执行,这意味着在任意时刻只能进行其中一种操作。 **技术细节:** - 当浏览器遇到`<script>`标签时,无论脚本是内联还是外部文件...

    高性能javascript中英文对照版

    性能问题之所以重要,是因为JavaScript的执行具有阻塞性质,即在JavaScript代码执行期间,其他浏览器操作(比如页面渲染)会暂停,这就导致了用户在JavaScript代码运行完毕之前无法与页面交互。 2. 浏览器对...

    Javascript 加载和执行-性能提高篇

    由于JavaScript的执行是阻塞的,浏览器会使用单一进程处理用户界面(UI)和JS的执行,这意味着如果JavaScript代码正在运行,浏览器将无法同时处理其他任务,如渲染页面或响应用户的交互。这种阻塞性可能导致页面加载...

    22-DOM树:JavaScript是如何影响DOM树构建的?_For_vip_user_0011

    了解这一机制对于优化网页性能至关重要,因为延迟JavaScript执行或使用异步加载可以减少阻塞,加快页面的初始渲染速度。同时,DOM作为JavaScript与HTML页面交互的桥梁,是实现动态网页功能的基础,也是保障用户安全...

    JavaScript王者归来中文源码

    12. **Node.js**:如果"JavaScript王者归来"也涵盖了Node.js,那么将包含服务器端JavaScript编程,如Express框架、文件系统操作、进程管理等。 单兴华的"JavaScript王者归来中文源码"不仅提供了详尽的理论讲解,还...

    javascript王者归来

    2. 模块打包工具:Webpack、Rollup等工具可以对JavaScript代码进行优化,提高加载速度。 3. 性能监控:利用Chrome DevTools等工具进行性能分析,找出瓶颈并优化。 八、JavaScript安全 1. XSS(跨站脚本攻击)与CSRF...

Global site tag (gtag.js) - Google Analytics