js
文章平均质量分 58
Ginger_undefined
这个作者很懒,什么都没留下…
展开
-
Three.js 性能优化
three.js是Javascript编写的WebGL第三方库。能用BufferGeometry代替Geometry的尽量用BufferGeometry. BufferGeometry会缓存网格模型,性能更高效网格模型生成原理:Geometry生成的模型过程:(代码) -> (CPU进行数据处理,转化成虚拟的3D数据) -> (GPU进行数据组装,转化为像素点,准备渲染) -> (显示器 )第二次操作时重复走一遍此流程BufferGeometry生成模型流程(代码)原创 2021-08-01 18:36:22 · 1653 阅读 · 0 评论 -
requestAnimationFrame替代setTimout 和 setInterval的方案
requetAnimationFramerequestAnimationFrame的基本用法let myReqlet i = 0 function step(timestamp){ // step的函数体 console.log(i++) myReq = window.requestAnimationFram(step)}document.onclick = function(){ window.cancelAnimationFrame(myReq)}如果我们想用requestAn原创 2021-07-01 17:50:39 · 2418 阅读 · 0 评论 -
前端页面如何正确渲染大量数据
当面临上千万条记录要显示时候,该怎么处理?分页显示(分页查询)分批插入setTimeout(()=>{ // 插入十万条数据 const total = 100000 // 一次性插入200条 const once = 200 const loopCount = total / once let countOfRender = 0 let ul = document.querSelector('ul') function add(){ // 优化性能,插入不会造成回流原创 2021-04-13 17:14:15 · 2733 阅读 · 0 评论 -
requestAnimationFrame 与 setTimeout的性能比较
1. setTimeout定时器一直是js动画的核心技术,但是它不够精准,因为定时器参数是指time 秒后放入异步队列中等待执行,如果前面有其他任务队列执行时间过长,则会导致动画延迟,效果不精准的问题。requestAnimation的好处是,采用系统时间间隔(大多数浏览器刷新频率是60Hz, 相当于16.7ms刷新一次), 保持最佳的绘制效率, 不会因为间隔时间过短,造成多度绘制,增加开销。也不会因为时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制。 并且rAF会把每一帧中所有原创 2021-04-13 17:12:17 · 1271 阅读 · 0 评论 -
快速排序及sort的理解
快速排序的思想: (1)在数据集中,选择一个元素作为"基准" (2)所有小于“基准”的元素都移动到“基准”左边,所有大于“基准”的元素都移动到“基准”右边 (3) 对"基准"左右两边的子集,递归地重复(1)和(2)直到所有子集的长度都只有1个时停止var nums = [85,24,63,45,45,17,31,96,50]var fastSort = function(nums){ let len = nums.length if(len < 2){原创 2021-04-13 11:48:14 · 755 阅读 · 0 评论 -
手写bind, call, apply方法(二)
手写bind, call, apply方法(一)注意 在函数上应用 …arr 可以将数组变为参数序列function add(x,y){ return x+ y }var nums = [2,4]add(...nums)applyFunction.prototype.myApply = function(context, args){ if(context == null){ context = window }else{ context = Object(context)原创 2021-04-06 17:57:15 · 76 阅读 · 0 评论 -
手写bind, call, apply方法(一)
bindbind: 绑定一个函数的上下文. (改变函数的this指向)常见用例:let foo = function(){ console.log(this)}let boo = foo.bind({content: 'hello'})// bind只是绑定上下文,改变this,但是并不会执行,你需要自己手动执行foo() // windowboo() // {content: 'hello'}简单实现:版本1Function.prototype.bind = function原创 2021-04-06 16:40:10 · 122 阅读 · 0 评论 -
Promise.all() Promise.race()及其实现
Promise.all()Promise.all()方法接收一个promise的iterable类型。(Array、Map、Set都属于ES6的iterable类型)的属于,并且只返回一个promise实例。function promiseAll(promises){// Promise.all会返回一个promise return new Promise((resolve,reject)=>{ if(!Array.isArray(promises)){ return reject(原创 2021-04-05 23:19:09 · 700 阅读 · 0 评论 -
Promise.resolve() Promise.reject()实现
Promise.resolve()Promise.resolve方法有以下三种形式Promise.resolve(value)Promise.resolve(promise)Promise.resolve(thenable)Promise.resolve可以把,同步值value, 一个promise, 一个thenable类型的对象都包裹成一个新的Promise。如果是一个普通值,则返回一个resolved的promise实例,并且这个promise实例的状态是fulfilled, 值是va原创 2021-04-05 21:55:26 · 471 阅读 · 0 评论 -
promise的实现(如何手写一个promise)(下)
接上篇 promise的实现(如何手写一个promise)实现promise的链式调用第一个例子这是第一个例子,可以看到,promise的链式调用就是 可以.then().then().then()…这样一直调用下去。说明, .then() 执行完后会返回一个promise。 并且上一个.then返回的值会被resolve然后传给下一个then。第二个例子如果上一个.then你没有手动给一个返回值,那么就会将undefined传递给下一个.thenclass Promise{ const原创 2021-04-04 00:27:35 · 102 阅读 · 0 评论 -
promise的实现(如何手写一个promise)
如果你打算手动实现一个promise,你可能需要先问问自己,promise是什么?你平常最常见的promise是怎么样用的?new Promise((resolve,reject)=>{ resolve(2)}).then(val=>{ console.log(val)})如果你了解事件循环,你就知道,promise里面的回调函数是在立即执行的,而then中的回调任务是会被推入异步微队列中等待执行的。让我们先来捋捋这个Promise到底是个什么?Promise是异步函数的一种原创 2021-04-03 18:03:59 · 244 阅读 · 0 评论