js大量数据计算导致页面假死

JavaScript017

js大量数据计算导致页面假死,第1张

为什么页面会卡顿呢,以60Hz为例,即一秒钟的动画就是由60张静态图片连在一起。60fps是动画播放比较理想、比较基础的要求,windows系统有个刷新频率也是这个意思。60fps就要求一帧的时间为1s/60=16.67ms。浏览器显示页面的时候,要处理js逻辑,还要做渲染,每个执行片段的时间不能超过16.67ms。实际上,浏览器内核自身支撑体系运行也需要消耗一些时间,所以留给我们的时间差不多只有10ms。并且在处理js计算时,浏览器不会响应用户的操作,所以就造成了页面“假死”。 Web Work,就是为JavaScript创造多线程环境,允许主线程创建Web Worker线程,将一些任务分配给后台运行。在主线程运行的同事,Work线程在后台运行,两者互不干扰。等到Work线程完成计算任务再把结果返回给主线程。这样的好处是,一些密集或者高延迟的计算任务,被Work线程给分担了,这样主线程就会很流程。 Worker线程一旦创建成功,就会始终运行,不会被主线程上的活动打断取消。这样有利于随时响应主线程的通信。但是,这也造成了Worker比较耗费资源,不应该过度使用,所以一旦使用完毕,就应该关闭。 1.同源限制:分配给Worker线程运行的脚本文件,必须与主线程的脚本文件同源。 2.DOM限制:Work线程所在的全局对象和主线程不一样,所以无法读取主线程所在网页的DOM对象,也无法使用document,window,parent这些对象。但是可以使用navigator和location。 3.通信联系:Worker线程和主线程不在同一个上下文环境,他们不能直接通信,必须通过消息完成。 4.脚本限制:Worker线程不能执行alert和confirm方法,但是可以使用XMLHttpRequest对象发出的AJAX请求。 5.文件限制:Work线程不能读取本地文件,它所加载的脚本必须来自网络。

方法一:

var result = 0

for(var i = 0i <arra.lengthi++) {

result += arra[i]

}

方法二:

let sum = 0

function sumArr(arr){

return eval(arr.join(“+”))

sum = sumArr(arr)

扩展资料

JavaScript脚本语言具有以下特点:

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

参考资料来源:百度百科—javascript

let 公式=(b,c,d)=>

{

return b+c+d

}

let a

a=公式(1,2,3)

console.log(a)

a=公式(4,5,6)

console.log(a)

a=公式(7,8,9)

console.log(a)

运行如图: