from_the_star的博客

重绘-样式计算也会导致性能问题？

ECAMScript 中的类字段（class field）在stage-2的时候使用的是[[Set]] 语义，而在stage-3改成了 [[Define]] 语义。从Babel转译来看，就是将直接定义在 this上的方法和属性换成使用 Object.defineProperty。其实对于展开语法(Spread syntax) 处理也是这样的，有[[Set]] 语义和 [[Define]] 语义的区别。举个例子Define语义会导致有时候的setter、getter失效。原始代码class Bas

JS沙盒简述沙盒（英语：sandbox，又译为沙箱），计算机术语，在计算机安全领域中是一种安全机制，为运行中的程序提供的隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。沙盒通常严格控制其中的程序所能访问的资源，比如，沙盒可以提供用后即回收的磁盘及内存空间。在沙盒中，网络访问、对真实系统的访问、对输入设备的读取通常被禁止或是严格限制。从这个角度来说，沙盒属于虚拟化的一种。沙盒中的所有改动对操作系统不会造成任何损失。通常，这种技术被计算机技术人员广泛用于测试可能带毒的程

Laya的2D绘制模式大致如此，每一个Node根据其类型（Text、Sprite）和某些属性（alpha、mask)等得到一个名为renderType的二进制数值，再去RenderSprite.render数组中查找对应的绘制函数单链表，进行调用。关键词为：单链表、二进制。Canvas绘制内容时，需要根据需绘制内容，选择stroke，fill，strokeText，fillText等绘制方法。根据这些绘制方法，组合出绘制文本、绘制图片、绘制自定义图形、混合、遮盖等函数，方便调用。在Laya中不是使用Ca

很久之前写的笔记才贴出来，在某次面试之后，面试官问： 100万个模型绘制 ，很卡，你会怎么优化？我查询的大部分资料都是OpenGL的（太久了，没留下地址），所以我会根据自己的经验，说明下WebGL怎么做。影响性能的因素CPU过多的draw call（就是调用了drawElements或者是drawArrays函数，GPU就会根据渲染状态（例如材质、纹理、着色器等）和所有输入的顶点数据来进行计算，最终输出到屏幕）复杂的脚本或是物理模拟GPU顶点处理过多的顶点过多的逐顶点计算

主要基于WebGLRendere类的render方法开展，需要读者有基本的计算机图形知识，比如计算机图形管线（实时渲染管线）之类的。在Three.js的渲染中，大概可以分为以下几步：清空当前帧缓冲区，更新MVP矩阵；将物体分为透明和不透明两类，按照离摄像机从近到远排序（也可在Object3D单独设置renderOrder）；根据灯光信息，阴影计算，如果有开启平面裁剪就对进行剪裁；开始逐个渲染物体，按以下顺序，背景、不透明物体、透明物体；渲染前后还有两个类似于生命周期的回调函数，scene.on

背景介绍点击后，将不透明的按钮修改为渐进透明的按钮。代码如下：修改前：let style = this.props.style;style["background"] = "rgba(250,103,37,1)";//...return (<div style={this.style}>立即下载</div>);修改后：let style = this.props.style;let progStr= Math.floor(progress*100)+"%";

定义Decorators make it possible to annotate and modify classes and properties at design time.装饰器可以让你在设计时对类和类的属性进行注解和修改通俗来说，就是在不改变原有对象的基础上，通过对其进行包装扩展（添加属性或者方法）使原有对象可以满足用户更复杂的需求。就增加功能来说，装饰模式相对生成子类更为灵活。实现装饰模式有不同的实现方法，第一种，使用继承方式，构建装饰类，传入被装饰类，进行修饰；//被装饰的

定义Define a one-to-many dependency between objects so that when one object change state,all its dependents are notified and updated automatically.（定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并被自动更新...

本文主要内容基于HTTP1.1。HTTP简介为了了解HTTP（HyperText Transfer Protocol，超文本传输协议），我们需要从TCP/IP入手，HTTP就是它内部的一个子集。TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/网际协议）是指能够在多个不同网络间实现信息传输的协议簇。TCP/IP协议不仅仅指的是TCP 和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇， 只是因

Generator了解一个异步函数的原理，首先要来看下Generator（具体内容去看文档）：function* fibonacci() { try{ var a = yield 1; yield a * 2; }catch(err){ console.log(err.message); }}var it = fibonacci(); it.next(); // {value: 1, done: false}it.next

坐标变换的流程我们探讨的其实就是输入的顶点怎么变换为像素点的坐标（也就是窗口空间坐标），具体矩阵怎么求得感兴趣可以看下这篇文章。从物体空间到世界空间的变换是通过乘以基本变换矩阵（模型矩阵ModelMatrix）来实现的。从世界空间到摄像机空间的变换是通过乘以视图矩阵（ViewMatrix）来实现的、从摄像机空间到剪裁空间的变换是通过乘以投影矩阵（ProjectMatrix）来完成的，根据需求的不同可以选用正交投影或透视投影的相关变换矩阵。乘以投影矩阵后，任何一个点的坐标[x, y, z, w]

在计算机图形学中，计算机图形管线（渲染管线 或简称 图形管线）是一个概念模型，它描述了图形系统将 3D场景渲染到2D屏幕所需执行的步骤 。一旦创建了3D模型（例如在视频游戏或任何其他3D计算机动画中），图形管道就是将3D模型转换为计算机显示内容的过程。因为此操作所需的步骤取决于所使用的软件和硬件以及所需的显示特性，所以没有适用于所有情况的通用图形管线。顶点着色器（可编程），将顶点数组的点逐个传入顶点着色器进行处理，比如说旋转、视图透视投影转换等，再输出顶点数据几何着色器（可编程）.

平面在数学上的定义是，平面，是指面上任意两点的连线整个落在此面上。在现实生活中你很容易一眼看出什么平面，但是在计算机的程序里，你将如何表示一个平面的呢？又是怎么样求点到平面的距离？判断点在平面的正面还是反面？线与平面的交点又是怎么求出来的呢？这篇文章就简单讨论这么几个问题，本文代码有TypeScript所实现，看起来和其他面向对象语言一样，求点积叉积的方法不具体实现，如果有疑惑可以查看我之前的文章。平面的定义平面，我们可以通过一条法线和一个点来表示，这个点我们为了方便，就取法线的点， 由于

我们在写笔试题的时候，经常碰到涉及隐式转换的题目，例如"1" + 2obj + 1[] == ![] [null] == false=== 和 ===== 叫做严格运算符，对象类型指向地址相同或原始类型（ 数值、字符串、布尔值）值相同；==叫做相等运算符，类型不同会进行转化再比较，undefined、null相等，对象类型还是比较引用。==运算符将原始值和其包装对象视为相等，但===运算符将它们视为不等。所有obj.a==null（相当于obj.a=== null || obj.a ==

ThreeJS是WebGL的一种前端框架，UV坐标的原理是一样的。前置知识WebGL纹理如果对WebGL有兴趣，可以去看WebGL贴材质这篇文章简单了解下。纹理坐标系统uv其实就是纹理坐标，因为xyz已经被顶点坐标占用了，所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据，把表面的点与平面上的像素对应起来，一般取值在0~1；u：图片在显示器水平的坐标v：垂直方向w：垂直于显示器表面一般情况只是在表面贴图，就涉及不到w，所以常称为uv。ThreeJS纹理贴图使用纹理对象贴图T

Promise实现的基石就是，先了解Promises/A+规范，我按照自己的理解简单描述下。Promise规范术语：解决（fulfill）：指一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决，但在后世的 promise 实现多以 resolve 来指代之。拒绝（reject）：指一个 promise 失败时进行的一系列操作。终值（eventual value）：所谓终值，指的是 promise 被解决时传递给解决回调的值，由于 pr

这是官网动态组件的讲解，我不知道你们是什么感觉，反正我当初作为一个初学者，是没怎么看懂，一个头两个大，也是难怪Angular不如Vue火，实在是容易劝退啊。使用场景我们先明确下动态组件的使用场景，在代码运行时要动态加载组件，换成普通人话，代码需要根据具体情况（比如用户的操作，向后台请求结果）确定在某些地方加载某些组件，这些组件不是静态的（不是固定的）。官网的举例就是，构建动态广告条，广告组件不断会推出新的，再用只支持静态组件结构的模板显然是不现实的。再举一个常见的例子，动态弹出框，弹出的组件是不确定

点积和叉积在计算机图形学中，是最为基础且重要的概念，初学者弄清它的概念的应用，是很重要的。先说明下，以下均采用列向量的表示方法，和线性代数书本上的行向量不同，采用列向量表示，则表达为列向量左乘矩阵，只是定义的不同，其他含义没有什么不同。点积点积在数学中，又称数量积（dot product; scalar product），是指接受在实数R上的两个向量并返回一个实数值标量的二元运算。它是欧几里得空间的标准内积。点积的结果是一个数。a→⋅b→=∣a∣∣b∣cosθ\overrightarrow{a}

在高效的检索方法中，二分检索法具有最高的查找效率，但是它只适合于顺序存储结构，这样对于数据的操作和删除操作带来不便。二叉排序树不仅有二分检索的效率，同时保持数据的动态性。但是当二叉排序树只有左子树或者右子树，二叉排序树就退化成了单链表，具有较低的检索效率。平衡二叉树就可以解决这种问题。平衡二叉树又称为AVL树，它或是一颗空树，或是具有以下性质的二叉树：它的左右子树都是平衡二叉树，且左子树和右子树的高度之差绝对值不超过1。平衡二叉树的调整插入时通过对二叉树的调整可以保持这棵树为平衡二叉树。只有这么