十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
html5中提供了worker 可以让javascript多线程 具体是不是真正的多线程我没去研究,只是知道,你可以看下
创新互联建站专注于成都网站建设、成都网站制作、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户,用严谨的态度对待客户,用专业的服务创造价值,成为客户值得信赖的朋友,为客户解除后顾之忧。
PS: html5以前的 基本可以确定 不管用什么库和方法去模拟多线程 本质上都是单线程的 尤其是为了解决界面阻塞 想通过多线程在另外线程中组装数据的做法基本都不行。
最好的办法就是在耗时函数开始的过程中加进度条等待耗时函数执行完毕~
1、iframe的创建比一般的DOM元素慢了1-2个数量级
iframe的创建比其他包括scripts和css的DOM元素的创建慢了1-2个数量级。当然页面一般不会包含太多的iframe,所以创建DOM节点花费的时间还不会占很大比重。
2、阻塞页面加载
及时触发window的onload事件是非常重要的。onload事件触发使浏览器的“忙”指示器停止,告诉用户当前网页已经加载完毕。当onload事件加载延迟后,它给用户的感觉是这个网页非常慢。
window的onload事件需要在所有iframe加载完毕后(包含里面的元素)才会触发。通过Javascript动态设置iframe的src可以避免这种阻塞情况。
3、唯一的连接池
浏览器只能开少量的连接到web服务器。绝大部分浏览器,主页面和其中的iframe是共享这些连接的。这意味着iframe在加载资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加载。如果iframe中的内容比主页面的内容更重要,这当然是好的。但通常情况下,iframe里的内容是没有主页面重要的。这时iframe用光可用连接就不值得了。
4、不利于SEO
搜索引擎的检索程序无法解读iframe。另外,iframe本身不是动态语言,样式和脚本都需要额外导入。
综上,iframe应谨慎使用。
首先,很多命令都是阻塞的,比如DOM操作、localStorage的读取。但是这里谈论阻塞没有什么意义,因为操作很快就完成了。
其次,Node.js里面很多IO可以是阻塞的,但是猜想题主问的是浏览器环境下的JavaScript,所以就不讨论了。
再其次,Webworker里面有很多操作可以是阻塞的,但是这同样没有什么意义,因为worker与主线程之间是只能够使用异步通讯的。
无阻塞加载js
浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到/body前,防止UI线程的阻塞。
而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术。
Dynamic Script Elements 动态脚本元素
DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的script元素可以非常容易的通过标准DOM创建:
var script = document.createElement ("script"); script.type = "text/javascript"; script.src = "file1.js"; document.body.appendChild(script);
新的script元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程。
当文件使用动态脚本节点下载时,返回的代码通常立即执行(除了Firefox和Opera,它们将等待此前的所有动态脚本节点执行完毕)。
大多数情况下,我们希望调用一个函数就可以实现Javascript文件的动态下载。下面的函数封装实现了标准实现和IE实现:
function loadScript(url, callback){ var script = document.createElement ("script") ; script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } loadScript("file1.js", function(){ //调用 alert("File is loaded!"); });
此函数接受两个参数:Javascript文件的Url和一个当Javascript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性,并将javascript文件添加到head。
动态脚本加载是非阻塞Javascript下载中最常用的模式,因为它可以跨浏览器,而且简单易用。
js是单线程的,所以当某一步计算耗时过多,就会产生阻塞现象。
一般采用 异步 的方式实现非阻塞,es5之前用闭包,es6有了一个新的概念promise。
主要有两个可能出问题的地方:1.ajax请求是同步的(open方法的参数中,可以设置)
2.ajax请求的服务器端asp页面可能使用了session,导致页面被锁死。关闭ajax所请求的页面的session(是ajax请求的页面,不是ajax所在的页面)