利用分层优化,前端简洁并实用的工具类函数封装

利用分层优化 HTML5 画布渲染

2015/02/02 · HTML5 ·
HTML5

原文出处: IBM
developerworks   

前端简洁并实用的工具类函数封装

2018/03/06 · JavaScript
· 函数

原文出处: 火狼   

从setTimeout/setInterval看JS线程

2018/04/19 · JavaScript
· setInterval,
settimeout

原文出处:
PalmerYe   

最近项目中遇到了一个场景,其实很常见,就是定时获取接口刷新数据。那么问题来了,假设我设置的定时时间为1s,而数据接口返回大于1s,应该用同步阻塞还是异步?我们先整理下js中定时器的相关知识,再来看这个问题。

初识setTimeout 与 setInterval

先来简单认识,后面我们试试用setTimeout 实现 setInterval 的功能

setTimeout 延迟一段时间执行一次 (Only one)

setTimeout(function, milliseconds, param1, param2, …) clearTimeout()
// 阻止定时器运行 e.g. setTimeout(function(){ alert(“Hello”); }, 3000);
// 3s后弹出

1
2
3
4
5
setTimeout(function, milliseconds, param1, param2, …)
clearTimeout() // 阻止定时器运行
 
e.g.
setTimeout(function(){ alert("Hello"); }, 3000); // 3s后弹出

setInterval 每隔一段时间执行一次 (Many times)

setInterval(function, milliseconds, param1, param2, …) e.g.
setInterval(function(){ alert(“Hello”); }, 3000); // 每隔3s弹出

1
2
3
4
setInterval(function, milliseconds, param1, param2, …)
 
e.g.
setInterval(function(){ alert("Hello"); }, 3000); // 每隔3s弹出

setTimeout和setInterval的延时最小间隔是4ms(W3C在HTML标准中规定);在JavaScript中没有任何代码是立刻执行的,但一旦进程空闲就尽快执行。这意味着无论是setTimeout还是setInterval,所设置的时间都只是n毫秒被添加到队列中,而不是过n毫秒后立即执行。

进程与线程,傻傻分不清楚

为了讲清楚这两个抽象的概念,我们借用阮大大借用的比喻,先来模拟一个场景:

这里有一个大型工厂
工厂里有若干车间,每次只能有一个车间在作业
每个车间里有若干房间,有若干工人在流水线作业

那么:

一个工厂对应的就是计算机的一个CPU,平时讲的多核就代表多个工厂
每个工厂里的车间,就是进程,意味着同一时刻一个CPU只运行一个进程,其余进程在怠工
这个运行的车间(进程)里的工人,就是线程,可以有多个工人(线程)协同完成一个任务
车间(进程)里的房间,代表内存。

再深入点:

车间(进程)里工人可以随意在多个房间(内存)之间走动,意味着一个进程里,多个线程可以共享内存
部分房间(内存)有限,只允许一个工人(线程)使用,此时其他工人(线程)要等待
房间里有工人进去后上锁,其他工人需要等房间(内存)里的工人(线程)开锁出来后,才能才进去,这就是互斥锁(Mutual
exclusion,缩写 Mutex)
有些房间只能容纳部分的人,意味着部分内存只能给有限的线程

再再深入:

如果同时有多个车间作业,就是多进程
如果一个车间里有多个工人协同作业,就是多线程
当然不同车间之间的工人也可以有相互协作,就需要协调机制

JavaScript 单线程

总所周知,JavaScript
这门语言的核心特征,就是单线程(是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个)。这和
JavaScript 最初设计是作为一门 GUI
编程语言有关,最初用于浏览器端,单一线程控制 GUI
是很普遍的做法。但这里特别要划个重点,虽然JavaScript是单线程,但浏览器是多线程的!!!例如Webkit或是Gecko引擎,可能有javascript引擎线程、界面渲染线程、浏览器事件触发线程、Http请求线程,读写文件的线程(例如在Node.js中)。ps:可能要总结一篇浏览器渲染的文章了。

HTML5提出Web
Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。

同步与异步,傻傻分不清楚

之前阮大大写了一篇《JavaScript 运行机制详解:再谈Event
Loop》,然后被朴灵评注了,特别是同步异步的理解上,两位大牛有很大的歧义。

同步(synchronous):假如一个函数返回时,调用者就能够得到预期结果(即拿到了预期的返回值或者看到了预期的效果),这就是同步函数。

e.g. alert(‘马上能看到我拉’); console.log(‘也能马上看到我哦’);

1
2
3
e.g.
alert(‘马上能看到我拉’);
console.log(‘也能马上看到我哦’);

异步(asynchronous):假如一个函数返回时,调用者不能得到预期结果,需要通过一定手段才能获得,这就是异步函数。

e.g. setTimeout(function() { // 过一段时间才能执行我哦 }, 1000);

1
2
3
4
e.g.
setTimeout(function() {
    // 过一段时间才能执行我哦
}, 1000);

异步构成要素

一个异步过程通常是这样的:主线程发起一个异步请求,相应的工作线程(比如浏览器的其他线程)接收请求并告知主线程已收到(异步函数返回);主线程可以继续执行后面的代码,同时工作线程执行异步任务;工作线程完成工作后,通知主线程;主线程收到通知后,执行一定的动作(调用回调函数)。

发起(注册)函数 – 发起异步过程
回调函数 – 处理结果

e.g. setTimeout(fn, 1000); //
setTimeout就是异步过程的发起函数,fn是回调函数

1
2
3
e.g.
setTimeout(fn, 1000);
// setTimeout就是异步过程的发起函数,fn是回调函数

通信机制

异步过程的通信机制:工作线程将消息放到消息队列,主线程通过事件循环过程去取消息。

消息队列 Message Queue

一个先进先出的队列,存放各类消息。

事件循环 Event Loop

主线程(js线程)只会做一件事,就是从消息队列里面取消息、执行消息,再取消息、再执行。消息队列为空时,就会等待直到消息队列变成非空。只有当前的消息执行结束,才会去取下一个消息。这种机制就叫做事件循环机制Event
Loop,取一个消息并执行的过程叫做一次循环。图片 1

工作线程是生产者,主线程是消费者。工作线程执行异步任务,执行完成后把对应的回调函数封装成一条消息放到消息队列中;主线程不断地从消息队列中取消息并执行,当消息队列空时主线程阻塞,直到消息队列再次非空。

setTimeout(function, 0) 发生了什么

其实到这儿,应该能很好解释setTimeout(function, 0)
这个常用的“奇技淫巧”了。很简单,就是为了将function里的任务异步执行,0不代表立即执行,而是将任务推到消息队列的最后,再由主线程的事件循环去调用它执行。

HTML5 中规定setTimeout 的最小时间不是0ms,而是4ms。

setInterval 缺点

再次强调,定时器指定的时间间隔,表示的是何时将定时器的代码添加到消息队列,而不是何时执行代码。所以真正何时执行代码的时间是不能保证的,取决于何时被主线程的事件循环取到,并执行。

setInterval(function, N)

1
setInterval(function, N)

那么显而易见,上面这段代码意味着,每隔N秒把function事件推到消息队列中,什么时候执行?母鸡啊!图片 2

上图可见,setInterval每隔100ms往队列中添加一个事件;100ms后,添加T1定时器代码至队列中,主线程中还有任务在执行,所以等待,some
event执行结束后执行T1定时器代码;又过了100ms,T2定时器被添加到队列中,主线程还在执行T1代码,所以等待;又过了100ms,理论上又要往队列里推一个定时器代码,但由于此时T2还在队列中,所以T3不会被添加,结果就是此时被跳过;这里我们可以看到,T1定时器执行结束后马上执行了T2代码,所以并没有达到定时器的效果。

综上所述,setInterval有两个缺点:

使用setInterval时,某些间隔会被跳过;
可能多个定时器会连续执行;

链式setTimeout

setTimeout(function () { // 任务 setTimeout(arguments.callee, interval);
}, interval)

1
2
3
4
setTimeout(function () {
    // 任务
    setTimeout(arguments.callee, interval);
}, interval)

警告:在严格模式下,第5版 ECMAScript (ES5) 禁止使用
arguments.callee()。当一个函数必须调用自身的时候, 避免使用
arguments.callee(), 通过要么给函数表达式一个名字,要么使用一个函数声明.

上述函数每次执行的时候都会创建一个新的定时器,第二个setTimeout使用了arguments.callee()获取当前函数的引用,并且为其设置另一个定时器。好处:

在前一个定时器执行完前,不会向队列插入新的定时器(解决缺点一)
保证定时器间隔(解决缺点二)

So…

回顾最开始的业务场景的问题,用同步阻塞还是异步,答案已经出来了…

PS:其实还有macrotask与microtask等知识点没有提到,总结了那么多,其实JavaScript深入下去还有很多,任重而道远呀。

 

1 赞 收藏
评论

图片 3

简介

通常情况下,在玩 2D 游戏或渲染 HTML5
画布时,需要执行优化,以便使用多个层来构建一个合成的场景。在 OpenGL 或
WebGL
等低级别渲染中,通过逐帧地清理和绘制场景来执行渲染。实现渲染之后,需要优化游戏,以减少渲染的量,所需成本因情况而异。因为画布是一个
DOM 元素,它使您能够对多个画布进行分层,以此作为一种优化方法。

前言

本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率.

常用的缩写

  • CSS: Cascading Style Sheets(级联样式表)
  • DOM: Document Object Model(文档对象模型)
  • HTML: HyperText Markup Language(超文本标记语言)

本文将探讨对画布进行分层的合理性。了解 DOM
设置,从而实现分层的画布。使用分层进行优化需要各种实践。本文还将探讨一些优化策略的概念和技术,它们扩展了分层方法。

您可以下载在本文中使用的示例的源代码。

1.日期

日期在后台管理系统还是用的很多的,一般是作为数据存贮和管理的一个维度,所以就会涉及到很多对日期的处理

选择优化策略

选择最佳优化策略可能很难。在选择分层的场景时,需要考虑场景是如何组成的。大屏幕上固定物的渲染经常需要重用若干个组件,它们是进行研究的极佳候选人。视差或动画实体等效果往往需要大量的变化的屏幕空间。在探索您的最佳优化策略时,最好注意这些情况。虽然画布的分层优化需要采用几种不同的技术,但在正确应用这些技术后,往往会大幅提升性能。

1.1 element-UI的日期格式化

图片 4

DatePicker日期选择器默认获取到的日期默认是Date对象,但是我们后台需要用到的是yyyy-MM-dd,所以需要我们进行转化

方法一:转化为dd-MM-yyyy HH:mm:ss

export const dateReurn1=(date1)=>{ date1.toLocaleString(“en-US”, {
hour12: false }).replace(/\b\d\b/g, ‘0$&’).replace(new
RegExp(‘/’,’gm’),’-‘) }

1
2
3
export const dateReurn1=(date1)=>{
    date1.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, ‘0$&’).replace(new RegExp(‘/’,’gm’),’-‘)
}

方法二:
从element-UI的2.x版本提供了value-format属性,可以直接设置选择器返回的值
图片 5

设置层

在使用分层的方法时,第一步是在 DOM
上设置画布。通常情况下,这很简单,只需定义画布元素,将其放入 DOM
中即可,但画布层可能需要一些额外的样式。在使用 CSS
时,成功地实现画布分层有两个要求:

  • 各画布元素必须共存于视区 (viewport) 的同一位置上。
  • 每个画布在另一个画布下面必须是可见的。

图 1显示了层设置背后的通用重叠概念。

1.2 获取当前的时间yyyy-MM-dd HH:mm:ss

没有满10就补0

export default const obtainDate=()=>{ let date = new Date(); let year
= date.getFullYear(); let month = date.getMonth() + 1; let
day=date.getDate(); let hours=date.getHours(); let
minu=date.getMinutes(); let second=date.getSeconds(); //判断是否满10 let
arr=[month,day,hours,minu,second]; arr.forEach(item=>{ item

1
2
3
4
5
6
7
8
9
10
11
12
export default const obtainDate=()=>{
let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day=date.getDate();
      let hours=date.getHours();
      let minu=date.getMinutes();
      let second=date.getSeconds();
      //判断是否满10
      let arr=[month,day,hours,minu,second];
      arr.forEach(item=>{
        item
图 1. 层示例

图片 6

设置层的步骤如下:

  1. 将画布元素添加到 DOM。
  2. 添加画布元素定位样式,以便支持分层。
  3. 样式化画布元素,以便生成一个透明的背景。

2.数组

设置画布重叠堆栈

在 CSS 中创建一个重叠堆栈 (overlay stack) 可能需要少量的样式。使用 HTML
和 CSS
有许多方法进行重叠。本文中的示例使用一个<div>标签来包含画布。<div>标签指定了一个惟一 ID,它将样式应用于其子 HTML5 画布元素,如清单 1所示。

2.1 检测是否是数组

export default const judgeArr=(arr)=>{ if(Array.isArray(arr)){ return
true; } }

1
2
3
4
5
export default const judgeArr=(arr)=>{
        if(Array.isArray(arr)){
            return true;
        }
    }
清单 1. 画布定位样式

CSS

#viewport { /** * Position relative so that canvas elements *
inside of it will be relative to the parent */ position: relative; }
#viewport canvas { /** * Position absolute provides canvases to be
able * to be layered on top of each other * Be sure to remember a
z-index! */ position: absolute; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#viewport {
    /**
     * Position relative so that canvas elements
     * inside of it will be relative to the parent
     */
    position: relative;
}
 
#viewport canvas {
    /**
     * Position absolute provides canvases to be able
     * to be layered on top of each other
     * Be sure to remember a z-index!
     */
    position: absolute;
}

容器<div>通过将所有子画布元素样式化为使用绝对定位来完成重叠要求。通过选择让#viewport使用相对定位,您可以适应未来的发展,因此,应用于子样式的绝对布局样式将会是相对于#viewport容器的样式。

这些 HTML5 画布元素的顺序也很重要。可以按元素出现在 DOM
上的顺序进行顺序管理,也可以按照画布应该显示的顺序来样式化 z-index
样式,从而管理顺序。虽然并非总是如此,但其他样式可能也会影响渲染;在引入额外的样式(比如任何一种
CSS 转换)时要小心。

2.2数组去重set方法

1.常见利用循环和indexOf(ES5的数组方法,可以返回值在数组中第一次出现的位置)这里就不再详写,这里介绍一种利用ES6的set实现去重.

2.set是新怎数据结构,似于数组,但它的一大特性就是所有元素都是唯一的.

3.set常见操作
大家可以参照下面这个:新增数据结构Set的用法

4.set去重代码

export const changeReArr=(arr)=>{ return Array.from(new
Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array
from将set转化成数组类型 } 或者 export const changeReArr=(arr)=>{
return […new
Set([1,2,2,3,5,4,5])]//利用…扩展运算符将set中的值遍历出来重新定义一个数组,…是利用for…of遍历的
}

1
2
3
4
5
6
7
8
export const changeReArr=(arr)=>{
    return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型
}
 
或者
export const changeReArr=(arr)=>{
    return […new Set([1,2,2,3,5,4,5])]//利用…扩展运算符将set中的值遍历出来重新定义一个数组,…是利用for…of遍历的
}

Array.from可以把带有lenght属性类似数组的对象转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接收2个参数,转换对象与回调函数,…和Array.from都是ES6的方法

透明的背景

通过使用重叠可见性来实现层技术的第二个样式要求。该示例使用这个选项来设置
DOM 元素背景颜色,如清单
2所示。

2.3 纯数组排序

常见有冒泡和选择,这里我写一下利用sort排序

export const orderArr=(arr)=>{ arr.sort((a,b)=>{ return a-b
//将arr升序排列,如果是倒序return -(a-b) }) }

1
2
3
4
5
export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            return a-b //将arr升序排列,如果是倒序return -(a-b)
        })
    }
清单 2. 设置透明背景的样式表规则

JavaScript

canvas { /** * Set transparent to let any other canvases render
through */ background-color: transparent; }

1
2
3
4
5
6
canvas {
    /**
     * Set transparent to let any other canvases render through
     */
    background-color: transparent;
}

将画布样式化为拥有一个透明背景,这可以实现第二个要求,即拥有可见的重叠画布。现在,您已经构造了标记和样式来满足分层的需要,所以您可以设置一个分层的场景。

2.4 数组对象排序

export const orderArr=(arr)=>{ arr.sort((a,b)=>{ let value1 =
a[property]; let value2 = b[property]; return value1 –
value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
//来接收对象属性名,其他部分代码与正常使用sort方法相同 }) }

1
2
3
4
5
6
7
8
export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            let value1 = a[property];
            let value2 = b[property];
            return value1 – value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
            //来接收对象属性名,其他部分代码与正常使用sort方法相同
        })
    }      

分层方面的考虑因素

在选择优化策略时,应该注意使用该策略时的所有权衡。对 HTML5
画布场景进行分层是一个侧重于运行时内存的策略,用于获得运行时速度方面的优势。您可以在页面的浏览器中增加更多的权重,以获得更快的帧速率。一般来说,画布被视为是浏览器上的一个图形平面,其中包括一个图形
API。

通过在 Google Chrome 19
进行测试,并记录浏览器的选项卡内存使用情况,您可以看到内存使用的明显趋势。该测试使用了已经样式化的<div>(正如上一节中讨论的那样),并生成了放置在<div>上的用单一颜色填充的画布元素。画布的大小被设定为
1600 x 900 像素,并从 Chrome1 的任务管理器实用程序收集数据。表
1显示了一个示例。

在 Google Chrome 的 Task Manager
中,您可以看到某个页面所使用的内存量(也称为 RAM)。Chrome 也提供 GPU
内存,或者是 GPU
正在使用的内存。这是常见信息,如几何形状、纹理或计算机将您的画布数据推送到屏幕可能需要的任何形式的缓存数据。内存越低,放在计算机上的权重就会越少。虽然目前还没有任何确切的数字作为依据,但应始终对此进行测试,确保您的程序不会超出极限,并使用了过多的内存。如果使用了过多的内存,浏览器或页面就会因为缺乏内存资源而崩溃。GPU
处理是一个远大的编程追求,已超出本文的讨论范围。您可以从学习 OpenGL
或查阅 Chrome
的文档(请参阅参考资料)开始。

2.5 数组的”短路运算”every和some

数组短路运算这个名字是我自己加的,因为一般有这样一种需求,一个数组里面某个或者全部满足条件,就返回true

情况一:全部满足 export const allTrueArr=(arrs)=>{ return
arr.every((arr)=>{ return
arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
}) } 情况二:有一个满足 export default const OneTrueArr=(arrs)=>{
return arr.some((arr)=>{ return
arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
}) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
情况一:全部满足
 
    export const allTrueArr=(arrs)=>{
          return arr.every((arr)=>{
             return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
          })  
    }
 
情况二:有一个满足
export default const OneTrueArr=(arrs)=>{
      return arr.some((arr)=>{
         return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
      })  
}

以上两种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然两种情况都可以通过遍历去判断每一项然后用break和return
false 结束循环和函数.

表 1. 画布层的内存开销
层数 内存 GPU 内存
0 30.0 11.9
1 37.6 28.9
1 37.6 28.9
2 49.0 46.6
3 52.2 59.6
8 58.4 98.0
16 65.0 130
32 107 187

在表 1中,随着在页面上引入和使用了更多的 HTML5
画布元素,使用的内存也越多。一般的内存也存在线性相关,但每增加一层,内存的增长就会明显减少。虽然这个测试并没有详细说明这些层对性能带来的影响,但它确实表明,画布会严重影响
GPU
内存。一定要记得在您的目标平台上执行压力测试,以确保平台的限制不会导致您的应用程序无法执行。

当选择更改某个分层解决方案的单一画布渲染周期时,需考虑有关内存开销的性能增益。尽管存在内存成本,但这项技术可以通过减小每一帧上修改的像素数量来完成其工作。

下一节将说明如何使用分层来组织一个场景。

3.对象

对场景进行分层:游戏

在本节中,我们将通过重构一个滚动平台跑步风格的游戏上的视差效果的单画布实现,了解一个多层解决方案。图
2显示了游戏视图的组成,其中包括云、小山、地面、背景和一些交互实体。

3.1 对象遍历

export const traverseObj=(obj)=>{ for(let variable in obj){
//For…in遍历对象包括所有继承的属性,所以如果
//只是想使用对象本身的属性需要做一个判断
if(obj.hasOwnProperty(variable)){ console.log(variable,obj[variable])
} } }

1
2
3
4
5
6
7
8
9
export const traverseObj=(obj)=>{
        for(let variable in obj){
        //For…in遍历对象包括所有继承的属性,所以如果
         //只是想使用对象本身的属性需要做一个判断
        if(obj.hasOwnProperty(variable)){
            console.log(variable,obj[variable])
        }
        }
    }

发表评论

电子邮件地址不会被公开。 必填项已用*标注