change提升页面滚动，渲染引擎介绍
利用document.domain和iframe来设置
结束语
change提升页面滚动，渲染引擎介绍。去 hack 多个 Node.js 模块，供给对该 Node.js 模块的调用链路有早晚的打听，在非常多景况下，不必然是最优的主意，但也真是豆蔻年华种缓和方案。风趣的是，Node.js 源码中实际上有后生可畏行那样的笺注：
JavaScript
// Hello, and welcome to hacking node.js! // some descriptions
1
2
|
// Hello, and welcome to hacking node.js!
// some descriptions
|
So, just hacking for fun!
1 赞 2 收藏 评论
二、CSS direction简介
许多，大家如若关怀下边那七个属性值就好了：
direction: ltr; // 默认值 direction: rtl;
1
2
|
direction: ltr; // 默认值
direction: rtl;
|
其中，ltr是初步值，表示left-to-right，正是从左往右的意思，再具体描述下，正是内联内容是从左往右依次排布的，大家平时网页的管理都以这么的，比如说前后七个图片，私下认可景况下，DOM在前的就显示在侧面。
rtl则是其余叁个值，right-to-left缩写，正是从右往左的意味，再具体陈诉下，就是内联内容是从右往左依次排布的，参与应用了这一个CSS注脚，则前后七个图片，暗中认可景况下，DOM在前的就显得在左臂；并且是在容器的右端。
举例说mm1是张含韵（zhāng hán yùn 卡塔 尔（阿拉伯语：قطر，DOM结构如下：
<p class="rtl"> <img src="mm1.jpg"/> <img src="mm2.jpg"/> </p>
1
2
3
4
|
<p class="rtl">
<img src="mm1.jpg"/>
<img src="mm2.jpg"/>
</p>
|
结果，张妹子跑到了最右面，并不是左臂，同期，貌似右对齐容器了，如下截图：
退换的只是内联成分块的左右各种
亟待注意的是，当direction天性的值是rtl的时候，大家的文字的左右相继是不改变了，比如：
<p class="rtl"><span>span1</span> <span>span2</span></p>
1
|
<p class="rtl"><span>span1</span> <span>span2</span></p>
|
结果，还是span1在左边，span2在右边：
因为改动的只是内联元素块的左右依次，全体的文字，纵然使用内联标签分隔，实际上，照旧多个同质内联盒子，是用作八个完全管理的，因而，唯有相通右对齐效果，而现实每一个文字都还没左右每一种的变型。
那什么样是“内联元素块”呢？包蕴替换来分(replaced
element)，如<img>, <button>, <input>, <video>, <object>等，或者inline-block水平的因素。因而，上面span1,
span2的例子，独有恣意二个span设置display:inline-block，都会看出左右逐项的生成。
您能够狠狠地方击这里：CSS direction属性与左右生机勃勃生龙活虎测量试验demo
在IE浏览器下(最少IE11)，设置direction:rtl会转移容器暗中同意的text-align值，因为IE11在内的浏览器（IE11以上版本小编一贯不测量试验卡塔尔都不辅助text-align:start/end等CSS3属性值，而Chrome和FireFox浏览器均不会改良text-align值，因为这一个浏览器的text-align初阶值是start，这里我们也应该或多或少体会到了text-align:start/end本条新证明的效应和含义了——当direction值为ltr的时候，start就表示left，当direction值为rtl的时候，start就表示right。
GCanvas 介绍
GCanvas发展经验了四个阶段。
- 率先阶段，二〇一四 年中到 贰零壹伍 年初，消除 Android 平台 WebView Canvas 渲染性能差的主题素材。
- 其次等第，二〇一六 年 11 月到现行反革命，为前端提供 Native 图形绘制本事。
用一句话来归纳 GCanvas，即遵照 W3C 标准，移动端的跨平台的高品质图形渲染引擎。能够从几个方面来分解。
- 遵循 W3C 标准
GCanvas 提供了风姿罗曼蒂克套近似于 H5 Canvas 规范的 JavaScript API，开垦人士基于那套 API 能够实惠的去做图形绘制、动漫渲染等。开荒的心得与 H5 Canvas 是一丝一毫等同的。 - 跨平台
GCanvas 的基本基于 OpenGL ES， 用 C++ 达成了意气风发套用于描述 Canvas 标准API 的接口完毕。大家将其称为渲染引擎内核。并通过交叉编译，使得能够适配 Android、iOS 这两大主流移动平台，由此具备跨平台的特点。 - 高性能
最早移动平台上 H5 Canvas 去做一些头晕目眩的卡通或嬉戏，在 WebView 上的经历拾贰分数差。 主因是 WebView 对 GPU 硬件加快的支撑差。高质量则是充裕利用了 GPU 硬件的渲染技术，主要展示四个方面：- 对于 Android 3.0 早前的系统，Android 的渲染管线是不援助硬件加快的，WebView 中的 Canvas 不可能获得 GPU 的图形渲染工夫的帮助。对于这类系统，通过 GCanvas 能够得到更底层的 OpenGL ES 的硬件加快手艺巩固渲染功能。
- 链路上来看，收缩了调用路线，提升了渲染性能。使用了 GCanvas 则无需经过 WebView 内部的纷纷逻辑管理和图层树渲染，而是让 JavaScript 通过桥接方式一向调用渲染引擎内核（OpenGL ES卡塔 尔（阿拉伯语：قطر。
选用CSS3 will-change进步页面滚动、动漫等渲染质量
2015/11/05 · CSS · 渲染质量
初稿出处： 张鑫旭
navigator
用那几个平时是在计算客户浏览器版本，操作系统等情景下才用的上，有时有多少个会比较实用。
- cookieEnabled 推断cookie是不是展开
- userAgent 浏览器顾客代理字符串
- plugins数组 首如若用来检查测试浏览器安装的插件
###screen
在Js中有多少个对象在编制程序里真用不上，这些正是中间之豆蔻年华。它最首假设用来表明顾客端的手艺，比方显示器的音讯，像素，高，宽等。
多进度的图景
模块间调用的链路比较长，有非常大恐怕会新建子进程，必要构思你项目中的入口文件和你需求代理的文书是不是在三个进度中，轻便的措施就是在输入文件和您要求代理的公文打字与印刷pid：
JavaScript
console.log(process.pid)
1
|
console.log(process.pid)
|
豆蔻梢头经生机勃勃致，那么直接在输入调用前代理就能够，不然事态会更复杂点，必要找到相应的长河调用项举行代理。
CSS direction属性简要介绍与事实上行使
2016/03/21 · CSS · 1 评论 · direction
原稿出处： 张鑫旭
GCanvas 渲染引擎介绍
2017/07/31 · HTML5 · Canvas
原稿出处： Tmall前端团队（FED卡塔尔- 韦青
GCanvas 提供了一套相似于 H5 Canvas 标准的 JavaScript API。基于那套 API 能够方便的去做图形绘制、动漫渲染等，开辟的体验与 H5 Canvas 是全然同样的。
二、CSS3 will-change粉墨登台
CSS3 will-change归属web标准属性，就算近期照旧草案阶段，但现身已经某些时间了，宽容性那块Chrome/FireFox/Opera都是支撑的。
本条个性功用很单纯，正是“加强页面渲染质量”。那它是什么加强的呢？
咱俩大概听听别人说过，3D
transform会启用GPU加快①，例如translate3D, scaleZ等等，不过呢，那些属性业界往往称之为hack加快法。我们实在不需求z轴的生成，可是照旧假模假样地宣称了，诈欺浏览器，那实乃风度翩翩种分歧房的做法。
⑤ GPU即图形微电脑，是与拍卖和制图图形相关的硬件。GPU是专为推行复杂的数学和几何总计而安顿的，能够让CPU从图形管理的职责中解放出来，进而试行此外更加多的类别职责，举例，页面包车型大巴简政放权与重绘。
而will-change则天然为此安插，顾名思意“我要变形了”，礼貌而本人。
几何老师：“同学们注意，笔者要从头变形了。”
嘿嘿，别笑。真是这样的。
当大家通过一些行为（点击、移动或滚动卡塔 尔（阿拉伯语：قطر触发页面进行科学普及绘制的时候，浏览器往往是不曾筹算的，只好被动使用CPU去总括与重绘，由于还未有事先打算，应付渲染够呛，于是掉帧，于是卡顿。而will-change则是真正的一坐一起触发从前告诉浏览器：“浏览器同学，小编待会儿将在变形了，你心境和生理上都打算希图”。于是乎，浏览器同学把GPU给拉上了，坦然自若将要惠临的变形。
那实际上很好掌握的，对吧，提前预订临危不俱；倏然探问似是而非。
MDN上体现该属性语法如下：
CSS
/* 关键字值 */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* <custom-ident>示例 */ will-change: opacity; /* <custom-ident>示例 */ will-change: left, top; /* 两个<animateable-feature>示例 */ /* 全局值 */ will-change: inherit; will-change: initial; will-change: unset;
1
2
3
4
5
6
7
8
9
10
11
12
|
/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* <custom-ident>示例 */
will-change: opacity; /* <custom-ident>示例 */
will-change: left, top; /* 两个<animateable-feature>示例 */
/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;
|
其中：
auto
就跟width:auto同黄金年代，实际上没什么卵用，前不久嘛，测度纵然用来重新初始化别的超棒的值。
scroll-position
告知浏览器，作者要起来沸腾了。
contents
告诉浏览器，内容要动画或改变了。
<custom-ident>
顾名思意，自定义的甄别。非标准称呼，应该是MDN本身的名称叫，以后或许会鲜明写入典型。比如说animation的名称，计数器counter-reset,counter-increment概念的名号等等。
上边突显了2个例证，四个是transform一个是opacity，都以CSS3动漫常用属性。纵然给定的性质是缩写，则有所缩写相关属性别变化化都会接触。同不日常间无法是以下这么些关键字值：unset, initial, inherit, will-change, auto, scroll-position,
或 contents.
<animateable-feature>
可动漫的部分特征值。举例说left, top, margin之类。移动端，非transform, opacity品质的卡通片品质都是放下的，所以都以提出幸免使用left/top/margin之流实行独一等。不过，如若您以为自身是margin特性奶大的，非要使用之，试试加个will-change:margin恐怕也会很通畅（移动端近日援助还不是很好卡塔 尔（阿拉伯语：قطر。
就当前来说，使用的大半都以：
CSS
.example { will-change: transform; }
1
2
3
|
.example {
will-change: transform;
}
|
原型情势
谈起原型形式就只可以提风华正茂提关于指针的标题，因为每一个函数都有多个prototype属性，而那性子情是二个指南针，指向三个目标。
C语言描述指针，这一个在iOS开荒中非常首要
比如说自身先定义叁个int类型的指针变量和一个惯常的int类型数据，然后给指针变量赋值。
JavaScript
int *p; int pp = 123; p = &pp; *p = 999; printf('%d',pp);
1
2
3
4
5
|
int *p;
int pp = 123;
p = &pp;
*p = 999;
printf('%d',pp);
|
*是叁个特殊符号用于标注它是一个指南针变量。
&是地址符
分析那几个将在提及栈内部存款和储蓄器和堆内部存储器了，比如*p在栈内部存款和储蓄器中分配了三个地点即使是ff22x0，它还尚无空间。而pp存在多少个地址ff23x0，何况分配了二个空间存款和储蓄着123，这些地点是指向那一个空间的。
p = &pp 这样的赋值操作，也正是把ff23x0抽取来，况且给p分配叁个上空把ff23x0存款和储蓄进去，何况ff22x0指向这些空间。
*p = 999 今后处就足以见到来p操作的是地点，而那些地方不正是ff23x0么，于是pp成了999。
所谓的指针也便是积攒着地点的变量。
归来原型上，假使每一个函数中的
修改require.cache
在蒙受模块暴光的是非对象的意况，就须求平素去修正 require 的 cache
对象了。关于修正 require.cache
的有效性，会在前边的规律部分详细说，先来回顾的说下操作：
JavaScript
//a.js 揭穿的非对象,而是函数 module.exports = function(){ doSomething(); } //c.js const aOld = require(a); let aId = require.resolve(aPath); require.cache[aId] = function(...args){ injectSomething(); aOld.apply(this, args); } require(b);
1
2
3
4
5
6
7
8
9
10
11
12
|
//a.js 暴露的非对象,而是函数
module.exports = function(){
doSomething();
}
//c.js
const aOld = require(a);
let aId = require.resolve(aPath);
require.cache[aId] = function(...args){
injectSomething();
aOld.apply(this, args);
}
require(b);
|
症结：恐怕继续调用链路会有人手动去改过 require.cache，比如热加载。
豆蔻年华、用的少并不代表未有用
起码，在小编接触的那样三种类里，未有见到使用过CSS direction属性加强际支付的。
何以吗？是因为direction长得丑吗？
虽然说direction真正口眼喎斜，可是CSS并不是二个看脸卖萌的社会风气。
那是因为包容性吗？
那更不是了，在十二分“美丽的女子”确实是玉女的年份，包涵IE6在内的浏览器，CSS
direction就已经被帮助。
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Any | 9.2+ | 5.5+ | Any | 3.1+ |
那毕竟是什么样原因吧？
缘由就在于笔者那篇小说写得太晚了！
CSS
direction质量轻松好记，属性值少，包容性好，关键时候方便省力，是时候给大家宣传宣传，不要埋没了人家的特别手艺。
附：GCanvas API 帮衬意况
最后附上 GCanvas Contex2D 和 WebGLAPI 的扶植列表，协理常用的接口。别的，WebGL 的 API 如今正值做补全开荒，后续会匡助 WebGL1.0 API 的全覆盖。
- Context2D API
| API名称 | API类型 | 状态 |
|---|---|---|
| fillStyle | Attribute getter/setter | Implemented |
| strokeStyle | Attribute getter/setter | Empty |
| shadowColor | Attribute getter/setter | Empty |
| shadowBlur | Attribute getter/setter | Empty |
| shadowOffsetX | Attribute getter/setter | Empty |
| shadowOffsetY | Attribute getter/setter | Empty |
| createLinearGradient() | Method | Empty |
| createPattern() | Method | Empty |
| createRadialGradient() | Method | Empty |
| addColorStop() | Method | Empty |
| isPointInPath() | Method | Empty |
| createEvent() | Method | Empty |
| toDataURL() | Method | Empty |
| lineCap | Attribute getter/setter | Implemented |
| lineJoin | Attribute getter/setter | Implemented |
| lineWidth | Attribute getter/setter | Implemented |
| miterLimit | Attribute getter/setter | Implemented |
| font | Attribute getter/setter | Implemented |
| textAlign | Attribute getter/setter | Implemented |
| textBaseline | Attribute getter/setter | Implemented |
| globalAlpha | Attribute getter/setter | Implemented |
| globalCompositeOperation | Attribute getter/setter | Implemented |
| rect() | Method | Implemented |
| fillRect() | Method | Implemented |
| strokeRect() | Method | Implemented |
| clearRect() | Method | Implemented |
| fill() | Method | Implemented |
| stroke() | Method | Implemented |
| beginPath() | Method | Implemented |
| moveTo() | Method | Implemented |
| closePath() | Method | Implemented |
| lineTo() | Method | Implemented |
| clip() | Method | Implemented |
| quadraticCurveTo() | Method | Implemented |
| bezierCurveTo() | Method | Implemented |
| arc() | Method | Implemented |
| arcTo() | Method | Implemented |
| scale() | Method | Implemented |
| rotate() | Method | Implemented |
| translate() | Method | Implemented |
| transform() | Method | Implemented |
| setTransform() | Method | Implemented |
| fillText() | Method | Implemented |
| strokeText() | Method | Implemented |
| measureText() | Method | Implemented |
| drawImage() | Method | Implemented |
| createImageData() | Method | Implemented |
| getImageData() | Method | Implemented |
| putImageData() | Method | Implemented |
| save() | Method | Implemented |
| restore() | Method | Implemented |
| getContext() | Method | Implemented |
| loadTexture() | Method | Implemented |
| unloadTexture() | Method | Implemented |
| resetTransform() | Method | Implemented |
| render() | Method | Implemented |
| capture() | Method | Implemented |
| resetClip() | Method | Implemented |
- WebGL API
| API名称 | API类型 | 状态 |
|---|---|---|
| viewport() | Method | Implemented |
| vertexAttribPointer() | Method | Implemented |
| vertexAttrib2fv() | Method | Implemented |
| useProgram() | Method | Implemented |
| uniformMatrix4fv() | Method | Implemented |
| uniformMatrix3fv() | Method | Implemented |
| uniformMatrix2fv() | Method | Implemented |
| uniform4iv() | Method | Implemented |
| uniform4i() | Method | Implemented |
| uniform4fv() | Method | Implemented |
| uniform4f() | Method | Implemented |
| uniform3iv() | Method | Implemented |
| uniform3i() | Method | Implemented |
| uniform3fv() | Method | Implemented |
| uniform3f() | Method | Implemented |
| uniform2iv() | Method | Implemented |
| uniform2i() | Method | Implemented |
| uniform2fv() | Method | Implemented |
| uniform2f() | Method | Implemented |
| uniform1iv() | Method | Implemented |
| uniform1i() | Method | Implemented |
| uniform1fv() | Method | Implemented |
| uniform1f() | Method | Implemented |
| texParameteri() | Method | Implemented |
| texImage2D() | Method | Implemented |
| shaderSource() | Method | Implemented |
| scissor() | Method | Implemented |
| renderbufferStorage() | Method | Implemented |
| pixelStorei() | Method | Implemented |
| linkProgram() | Method | Implemented |
| lineWidth() | Method | Implemented |
| getUniformLocation() | Method | Implemented |
| getShaderParameter() | Method | Implemented |
| getAttribLocation() | Method | Implemented |
| generateMipmap() | Method | Implemented |
| frontFace() | Method | Implemented |
| framebufferTexture2D() | Method | Implemented |
| flush() | Method | Implemented |
| enableVertexAttribArray() | Method | Implemented |
| enable() | Method | Implemented |
| drawElements() | Method | Implemented |
| disableVertexAttribArray() | Method | Implemented |
| disable() | Method | Implemented |
| depthMask() | Method | Implemented |
| depthFunc() | Method | Implemented |
| deleteTexture() | Method | Implemented |
| deleteShader() | Method | Implemented |
| deleteRenderbuffer() | Method | Implemented |
| deleteProgram() | Method | Implemented |
| deleteFramebuffer() | Method | Implemented |
| deleteBuffer() | Method | Implemented |
| cullFace() | Method | Implemented |
| createTexture() | Method | Implemented |
| createShader() | Method | Implemented |
| createRenderbuffer() | Method | Implemented |
| createProgram() | Method | Implemented |
| createFramebuffer() | Method | Implemented |
| createBuffer() | Method | Implemented |
| compileShader() | Method | Implemented |
| colorMask() | Method | Implemented |
| clearStencil() | Method | Implemented |
| clearDepth() | Method | Implemented |
| clearColor() | Method | Implemented |
| clear() | Method | Implemented |
| bufferData() | Method | Implemented |
| blendFuncSeparate() | Method | Implemented |
| blendFunc() | Method | Implemented |
| blendEquationSeparate() | Method | Implemented |
| blendEquation() | Method | Implemented |
| bindRenderbuffer() | Method | Implemented |
| bindFramebuffer() | Method | Implemented |
| bindBuffer() | Method | Implemented |
| bindAttribLocation() | Method | Implemented |
| attachShader() | Method | Implemented |
| activeTexture() | Method | Implemented |
| validateProgram() | Method | Empty |
| texSubImage2D() | Method | Empty |
| texParameterf() | Method | Empty |
| stencilOpSeparate() | Method | Empty |
| stencilOp() | Method | Empty |
| stencilMaskSeparate() | Method | Empty |
| stencilMask() | Method | Empty |
| stencilFuncSeparate() | Method | Empty |
| stencilFunc() | Method | Empty |
| sampleCoverage() | Method | Empty |
| readPixels() | Method | Empty |
| polygonOffset() | Method | Empty |
| isTexture() | Method | Empty |
| isShader() | Method | Empty |
| isRenderbuffer() | Method | Empty |
| isProgram() | Method | Empty |
| isFramebuffer() | Method | Empty |
| isEnabled() | Method | Empty |
| isContextLost() | Method | Empty |
| isBuffer() | Method | Empty |
| getVertexAttribOffset() | Method | Empty |
| getVertexAttrib() | Method | Empty |
| getUniform() | Method | Empty |
| getTexParameter() | Method | Empty |
| getSupportedExtensions() | Method | Empty |
| getShaderSource() | Method | Empty |
| getShaderPrecisionFormat() | Method | Empty |
| getShaderInfoLog() | Method | Empty |
| getRenderbufferParameter() | Method | Empty |
| getProgramParameter() | Method | Empty |
| getProgramInfoLog() | Method | Empty |
| getParameter() | Method | Empty |
| getFramebufferAttachmentParameter() | Method | Empty |
| getExtension() | Method | Empty |
| getError() | Method | Empty |
| getContextAttributes() | Method | Empty |
| getBufferParameter() | Method | Empty |
| getAttachedShaders() | Method | Empty |
| getActiveUniform() | Method | Empty |
| getActiveAttrib() | Method | Empty |
| drawArrays / drawArraysInstancedANGLE() | Method | Empty |
| detachShader() | Method | Empty |
| depthRange() | Method | Empty |
| copyTexSubImage2D() | Method | Empty |
| copyTexImage2D() | Method | Empty |
| compressedTexSubImage2D() | Method | Empty |
| compressedTexImage2D() | Method | Empty |
| checkFramebufferStatus() | Method | Empty |
| bufferSubData() | Method | Empty |
| blendColor() | Method | Empty |
| bindTexture() | Method | Undefined |
| commit() | Method | Undefined |
| finish() | Method | Undefined |
| framebufferRenderbuffer() | Method | Undefined |
| hint() | Method | Undefined |
1 赞 1 收藏 评论
豆蔻梢头、先来看壹个例证
上面这些事例来自某外文，作者这里大致转述下。
视差滚动今后不是挺流行的嘛，然后Chris
Ruppel当其选取background-attachment: fixed落到实处背景图片不随滚动条滚动而滚动效应的时候，发掘，页面包车型大巴绘图质量掉到了每秒30帧，这种帧频人眼已经足以感到到到自然的顿挫感了。
新生，参照他事他说加以调查一些任何同事依旧同行的提出，做了生机勃勃番优化，然后，页面包车型客车渲染质量——
那优化在此以前完全正是肺痈，屎拉不出去的以为；而优化今后，完全就是一泻百里，裤子都来不如脱的痛感。
生机勃勃兄得健忘，在厕所里久久不可能如便。
正在他全力努力的时候，看黄金时代汉子风同样的冲进厕所，进了他旁边的地点，刚进来就盛传大器晚成真狂尘雷雨，那兄倾慕的对那哥们说：男生好艳羡你啊！
这男生说：敬慕啥，裤子还未有脱呢。。。
世家确定会感叹，那到底施了如何法力，能够让渲染提高如此之妇孺皆知。3个小tips:
background-attachment: fixed改成了position: fixed，因为前边这玩意儿滚动实时总计重绘；- 背景图片所在的成分轮换为
::before伪元素； - 使用了CSS3
will-change加速；
连锁代码如下（要是类名是front）：
CSS
.front::before { content: ''; position: fixed; // 替代background-attachment width: 百分百; height: 百分百; top: 0; left: 0; background-color: white; background: url(/img/front/mm.jpg) no-repeat center center; background-size: cover; will-change: transform; // 创立新的渲染层 z-index: -1; }
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.front::before {
content: '';
position: fixed; // 代替background-attachment
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url(/img/front/mm.jpg) no-repeat center center;
background-size: cover;
will-change: transform; // 创建新的渲染层
z-index: -1;
}
|
OK, 主演粉墨登台了，正是will-change, 那是怎么着鬼？
移步事件
- touchstart 当手指触摸到荧屏时接触
- touchmove 当手指在显示屏上连年滑动时接触
- touchend 当手指从显示器上移开时接触
- touchcancel 当系统甘休追踪触摸时触发（那些事件尚无分明的触发时间卡塔尔
它们都以冒泡的，也足以收回
八个追踪触摸事件的质量
- touches 当前追踪触摸操作的touch数组，在touchend事件中为空
- targetTouchs 特定事件目的的touch数组
- ChangedTouches 上次入手时爆发了何等变动的touch数组
挪动event事件指标
PC上存在的，在移动上也存在，描述上有差距，比如
- target 触摸的DOM节点目的
- pageX 触摸目的在页面中的X坐标
- pageY 触摸目标在页面中的Y坐标
有的手势
- gesturestart 当三个指头按在荧屏上其它一个指尖又入手显示屏时接触
- gesturechange 注重前面一个当当中的叁个指头产生变动时接触
- gestureend 当任何多个手指头离开时接触
挪入手势干货三部曲
- 对于Touch的处理
- 管理大约手势
- 管理百废待举手势
叁个进度只存在三个 cache 对象？
先来走访 module._load 干了怎样？
JavaScript
Module._load = function(request, parent, isMain) { var filename = Module._resolveFilename(request, parent, isMain); var cachedModule = Module._cache[filename]; // get cache if (cachedModule) { return cachedModule.exports; } …… var module = new Module(filename, parent); …… Module._cache[filename] = module; // set cache tryModuleLoad(module, filename); return module.exports; };
1
2
3
4
5
6
7
8
9
10
11
12
13
|
Module._load = function(request, parent, isMain) {
var filename = Module._resolveFilename(request, parent, isMain);
var cachedModule = Module._cache[filename]; // get cache
if (cachedModule) {
return cachedModule.exports;
}
……
var module = new Module(filename, parent);
……
Module._cache[filename] = module; // set cache
tryModuleLoad(module, filename);
return module.exports;
};
|
能够见见，在 load 的二个模块时，会先读缓存
Module._cache，若无就能去 new 三个 Module 的实例,
接下来再把实例放到缓存里。由前边的 Node.js 运转进程能够知晓，
bootstrap_node.js 中的 startup() 只会施行了一遍，此中发生的 Module
对象在整个node进度调用链路中只会设有三个，从而 Module._cache
唯有七个。
四、结束语
实际上direction属性关注的少，是因为……小编想了想，依然因为大家没今儿深夜看来想本文那样深入分析介绍direction的篇章，会让无数同伙，固然眼睛瞟到了，也以为是那一个嘎吱角落的上世纪淘汰的CSS属性，实际上，人才被埋没了。
CSS
direction再有一个近亲writing-mode，可比direction复杂的多，也风趣的多，争取月初前也给大家介绍下。
以上，应接沟通！
本文为原创文章，会时常更新知识点以至改善一些荒谬，由此转发请保留原出处，方便溯源，防止陈旧错误知识的错误的指导，同临时候有越来越好的开卷资历。
1 赞 2 收藏 1 评论
GCanvas 组成
如上海体育场地所示 GCanvas 由三层组成 JavaScript 层、插件层、大旨渲染库。
- JavaScript 层
JavaScript 提供对外统少年老成的 API，支持 Canvas 2D 和 WebGL 的成效接口。接口支持意况请参照他事他说加以考查 API 覆盖。 - 插件层
插件层主旨包蕴三有的。- Bridge 桥接
JavaScript 到 Native 的桥接，相比主流的方法 JSBridge 和 JSBinding。JSBridge 实现方式，如 Cordva、WebviewJavascriptBridge 等。 还足以用 JSBinding 方式来落到实处，如 V8、JavascriptCore 等。实际的行使场景中那二种桥接情势都有支撑。 - 通用插件
通用插件包涵了通用插件接口与贯彻、GCanvas 的军事管制、渲染命令队列管理、纹理缓存等。扶持分裂连串桥接情势下的强盛。 - 系统适配
系统适配涉及 Android 和 iOS 对 OpenGL ES 达成的差异，互连网图片下载，字体渲染等方面。
- Bridge 桥接
- 主干渲染库
骨干渲染库包涵对外统风流倜傥的接口，以致 Contex2D 和 WebGL 模块，底层则是对 OpenGL ES API 等分装。
四、参照他事他说加以考察小说
- Fix scrolling performance with CSS will-change property
- MDN:will-change
- An Introduction to the CSS will-change Property
本文内容均归于外文收拾搜聚，加上自个儿驾驭书写。内容并没有亲自实施注脚，由此，无法保障百分之百不错，仅供我们学习参照他事他说加以考查。
假诺文中有何样发挥不可信赖的地点，招待大力指正，多谢阅读，接待交换！
1 赞 1 收藏 评论
面向对象
面向对象的语言有一个相当料定的评释：类，通过类来创建放肆多少个有着同等属性和章程的对象，缺憾的是Js里未有这么的定义。
唯独Js有二个特点：一切皆已经目的。
智慧的开垦者通过这几个特色开展检索，于是迂回发明了风流倜傥部分程序设计，以便越来越好的团伙代码结构。
require 区别情形的挂载
最开头自己觉着 require 是挂载在 global 上的，为了图方便，日常用 Node.js repl 来测验：
JavaScript
$ node > global.require { [Function: require] resolve: [Function: resolve], main: undefined, extensions: { '.js': [Function], '.json': [Function], '.node': [Function] }, cache: {} }
1
2
3
4
5
6
7
|
$ node
> global.require
{ [Function: require]
resolve: [Function: resolve],
main: undefined,
extensions: { '.js': [Function], '.json': [Function], '.node': [Function] },
cache: {} }
|
可以观察，repl 下，global.require 是存在的，假使以为可以一向在 Node.js
文件中代理 global.require 那就踩坑了，因为若是在 Node.js
文件中央银行使会意识：
JavaScript
console.log(global.require); // undefined
1
2
|
console.log(global.require);
// undefined
|
从上文可以知道，Node.js 文件中的 require 其实是来源于于
Module.prototype._compile 中注入的 Module.prototype.require,
而最后的针对其实是 Module._load，并未有挂载到 module 上下文景况中的
global 对象上。
而 repl 中也许有 module 实例，于是小编尝试在 repl 中打字与印刷：
JavaScript
$ node > global.require === module.require false
1
2
3
|
$ node
> global.require === module.require
false
|
结果有一些匪夷所思，于是作者一连追究了下。在 bootstrap_node.js 中找到 repl
的调用文件 repl.js
JavaScript
const require = internalModule.makeRequireFunction.call(module); context.module = module; context.require = require;
1
2
3
|
const require = internalModule.makeRequireFunction.call(module);
context.module = module;
context.require = require;
|
赢得结论：在 repl 中，module.require 和 global.require
最后的调用方法是平等的，只是函数指向不相同而已。
三、CSS direction实际运用
CSS
direction能够让大家不改造DOM前后相继的情事下，沟通元素的光景相继，在有些场景下丰富有效。
下边是自家实在境遇的事例：
大概，做PC页面项目里都有一个Panel可能Dialog组件，便是弹框什么的。此中，上面会有“分明”，“撤消”开关，如下截图：
下一场，具体很奇异的，有多少个Dialog，设计希望那四个开关顺序是倒转的。
借使只是上海体育场所的须要，想要改动开关前后相继转变其实假如利用浮动就能够了，全数开关都float:right：
.button { float: right; }
1
|
.button { float: right; }
|
以此轻易。可是，即使说大家的弹框按键是居中显示的，例如，科科：
不要说浮动了，飞动都满意不断须求，是还是不是又须求助万能的JS了，去改换DOM顺序？
别傻了，一行CSS
direction:rtl19个假名，包你方便到家。笔者敢保险，那自然是性能和价格的比例最高的不二等秘书诀！
你能够狠狠地方击这里：CSS direction调控居中开关顺序改动demo
本来，我们还恐怕有其余解决思路，但是兼容性嘛，咳咳~
.container, .button { transform: scaleX(-1); }
1
|
.container, .button { transform: scaleX(-1); }
|
不怕父级容器和开关同临时候水平翻转，IE7,IE8倒是能够选拔IE的翻转滤镜试试，好疑似flipX，作者在此之前有写过文章：“CSS垂直翻转/水平翻转进步web页面能源重用性”，幸赏心悦目了下，原来是flipH，完整写法：
filter: FlipH;
1
|
filter: FlipH;
|
不过，滤镜内再滤镜是或不是援助，作者就不分明了，何况小编也没兴趣对那一个占着茅坑不拉屎的浏览器做测量试验，大家风野趣能够友善尝试看。
GCanvas 测量试验例子
下边给出一些 GCanvas 的案例。
- GCanvas 与 H5 Canvas 质量比较
- Android 平台，左侧是 GCanvas，侧面是 H5 Canvas。同屏渲染图片更加的多，性能差别越刚强。
- Hilo 2D
100 条鱼听闻Hilo 2D 动漫库，满屏鱼的动漫片测量试验。 - Chart Logo渲染
Chart Logo库的渲染效果依附图表库，差异类其他图片渲染测量检验。
三、CSS3 will-change使用注意事项
will-change就算如此能够加快，不过，一定断定要稳当使用。这种全局都张开will-change等候情势的做法，无疑是死路一条。尼玛，用脚趾头想一想也清楚，你让浏览器种种要素都随即GPU渲染加速待命，照旧妥妥搞死！
谈起此处，想到了活动端的GPU加速。比比较多自感觉然的同校写CSS3动漫片的时候，也许静态属性的时候，动不动就把translateZ等等GPU
hack属性写上。同学们啊，GPU那玩意儿升高页面渲染品质它是有代价的哟，什么代价呢，便是手提式无线电话机的电量。你真认为有“既要马儿跑，又要马儿不吃草”的好事情啊！
平常，大家平日地CSS动漫，常常的渲染管理，手提式有线电话机都以足以相比较流畅的。未有供给以就义别的东西来落到实处。手提式有线电话机上的电量弥足体贴。即便开采(极度Android)机子h5页面不流畅，找找看是否卡通属性使用难点，或然非可视动漫层没隐蔽等等原因。
回到will-change.
同样的，will-change的施用也要如履薄冰，遵守最小化影响原则，所以，大器晚成最初的例证，才使用伪成分去搞，独立渲染（固然自身没看出来这么些梗在怎么地点卡塔 尔（英语：State of Qatar）。
sitePoint网址上的那篇作品呈现了多少个管理例子：
无须那样一向写在暗中同意状态中，因为will-change会从来挂着：
CSS
.will-change { will-change: transform; transition: transform 0.3s; } .will-change:hover { transform: scale(1.5); }
1
2
3
4
5
6
7
|
.will-change {
will-change: transform;
transition: transform 0.3s;
}
.will-change:hover {
transform: scale(1.5);
}
|
能够让父元素hover的时候，申明will-change，那样，移出的时候就能活动remove，触发的限定基本上是一蹴而就成分范围。
CSS
.will-change-parent:hover .will-change { will-change: transform; } .will-change { transition: transform 0.3s; } .will-change:hover { transform: scale(1.5); }
1
2
3
4
5
6
7
8
9
|
.will-change-parent:hover .will-change {
will-change: transform;
}
.will-change {
transition: transform 0.3s;
}
.will-change:hover {
transform: scale(1.5);
}
|
尽管使用JS增添will-change, 事件或动漫达成，应当要马上remove.
举个例子说点击有个别开关，其余有个别成分举办动漫。点击开关(click)，要先按下(mousedown)再抬起才起身。由此，能够mousedown时候打声招呼,
动漫结束自带回调，于是（暗意，不要留意细节卡塔 尔（阿拉伯语：قطر：
CSS
dom.onmousedown = function() { target.style.willChange = 'transform'; }; dom.onclick = function() { // target动画哔哩哔哩... }; target.onanimationend = function() { // 动漫甘休回调，移除will-change this.style.willChange = 'auto'; };
1
2
3
4
5
6
7
8
9
10
|
dom.onmousedown = function() {
target.style.willChange = 'transform';
};
dom.onclick = function() {
// target动画哔哩哔哩...
};
target.onanimationend = function() {
// 动画结束回调，移除will-change
this.style.willChange = 'auto';
};
|
等。
事件
- 事件类型一览表
IE浏览器的事件不是根本
事件是JavaScript与HTML实行人机联作的叁个枢纽，明白事件能够越来越好的管理Web应用程序，未来的浏览器中要害扶助二种事件流：
- 事件冒泡
- 事件捕获
- DOM事件流
事件冒泡则是指事件发轫时由现实的成分选用，然后逐级向上传播。比方：
JavaScript
<html> <head></head> <body> <div> <p></p> </div> </body> </html>
1
2
3
4
5
6
7
8
|
<html>
<head></head>
<body>
<div>
<p></p>
</div>
</body>
</html>
|
给p标签监听叁个风浪，它的流向是p,div,body,html,document，其实细心看来这种流的走向会存在四个标题，给div也监听三个事件，当顾客点击P的时候是会触发五回的，还好event对象中有能够阻挡事件冒泡的章程。
事件捕获则是指事件由最上级接收，逐级向下传播到实际的要素上，驾驭了冒泡之后那么些就十分好精通了，正是一个反倒的步子。
而DOM事件流又恰巧是冒泡与捕获的结合体，它分成多个阶段：事件捕获，指标事件，事件冒泡，若是在纸上画出来，它的走向就是叁个圆形。
对于事件管理程序，写在HTML标签中的，其余朝气蓬勃种是一贯写二个function的，比如doc.onclick
function(){}，平日的话这么些浏览器补助，不过许多不会选用了。因为前面三个是跟HTML耦合的，不利代码维护，何况固然HTML加载精晓则Js文件还未有加载，客商点击后，是平素报错的。前者尽管也足以去除，比方doc.onclick = null，对于对代码有性障碍的同学，基本上不会接受到它。
那么，大家该怎么给二个因素增加上事件管理程序吗？
path路径
require.cache 是二个 key、value 的 map，key
看上去是模块所在的相对路线，然则是不可能用相对路径直接去用的，要求
require.resolve 来解析路径，深入深入分析后才是 cache 中准确的 key 格式。
下直面比下分别：
JavaScript
// 模块的相对路线/Users/kino/.def/def_modules/.builders/@ali/builder-cake-kpm/node_modules/@ali/builder-cake-kpm/node_modules/@ali/cake-webpack-config/index.js // 用 require.resolve 转义后的结果 /Users/kino/.def/def_modules/.builders/@ali/builder-cake-kpm/node_modules/.0.16.23@@ali/cake-webpack-config/index.js
1
2
3
4
5
|
// 模块的绝对路径
/Users/kino/.def/def_modules/.builders/@ali/builder-cake-kpm/node_modules/@ali/builder-cake-kpm/node_modules/@ali/cake-webpack-config/index.js
// 用 require.resolve 转义后的结果
/Users/kino/.def/def_modules/.builders/@ali/builder-cake-kpm/node_modules/.0.16.23@@ali/cake-webpack-config/index.js
|
GCanvas 流程
上图是 JavaScript 层渲染核心库的大致流程，关键的八个流程是发轫化和渲染。
- 初始化
开始化，JavaSript 层获取配置判定运维条件，通过桥接层，插件层完结视图和 GCanvas 的开创。进一层成功对 OpenGL 景况的起头化。 - 渲染
渲染，JavaScript 层将兼具的API调用托管，而且转变成自定义的通令格式（命令类型 + 参数的三结合卡塔尔。渲染触发则由 JavaScript 计时器触发可能手动触发的办法，将这几个命令颁发到渲染主题库施行。
以 Weex 为例, 绘制图形和图表的测验代码如下。
JavaScript
<template> <div ref="test"> <gcanvas ref="canvas_holder" style="width:750; height:750; background-color:rgba(0, 0, 0, 0.1)"></gcanvas> </div> </template> <script> var GCanvas=require('weex-gcanvas'); var Image=require('weex-gcanvas/gcanvasimage'); module.exports = { mounted: function () { //1、初始化 GCanvas var ref = this.$refs.canvas_holder; var gcanvas = GCanvas.start(ref); var ctx = gcanvas.getContext('2d'); //2、推行渲染操作 //rect ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 100, 100); //rect ctx.fillStyle = 'black'; ctx.fillRect(100, 100, 100, 100); ctx.fillRect(25, 210, 700, 5); //circle ctx.arc(450, 200, 100, 0, Math.PI * 2, true); ctx.fill(); //drawImage var image = new Image(); image.onload = function(){ ctx.drawImage(image, 100, 330); ctx.drawImage(image, 100+300, 330, 225, 75); } image.src = ''; } }; </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<template>
<div ref="test">
<gcanvas ref="canvas_holder" style="width:750; height:750; background-color:rgba(0, 0, 0, 0.1)"></gcanvas>
</div>
</template>
<script>
var GCanvas=require('weex-gcanvas');
var Image=require('weex-gcanvas/gcanvasimage');
module.exports = {
mounted: function () {
//1、初始化 GCanvas
var ref = this.$refs.canvas_holder;
var gcanvas = GCanvas.start(ref);
var ctx = gcanvas.getContext('2d');
//2、执行渲染操作
//rect
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
//rect
ctx.fillStyle = 'black';
ctx.fillRect(100, 100, 100, 100);
ctx.fillRect(25, 210, 700, 5);
//circle
ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
ctx.fill();
//drawImage
var image = new Image();
image.onload = function(){
ctx.drawImage(image, 100, 330);
ctx.drawImage(image, 100+300, 330, 225, 75);
}
image.src = 'https://www.khronos.org/assets/uploads/ceimg/made/assets/uploads/apis/OpenGL-ES_100px_May16_225_75.png';
}
};
</script>
|
经过 Weex Playground 运营结果如下
具体解析下任何流程。结合插件层和着力渲染库来解析。
- 插件层流程
以 iOS 为例深入分析，Android 的进度是相通的。- GLKView 视图成立，况兼与 GCanvas 对象营造绑定关系；
- GCVCommon，能源加载与纹理绑定；
- GCanvasPlugin，设置岗位音信、设备比率、下发渲染命令；
- 渲染库流程
渲染命令的深入分析，最后通过调用 OpenGL ES 的形式或结成情势来兑现 Context2D 和 WebGL 的功效，生成帧缓存，提交给 GPU 渲染，最后在绑定的 GLKView 视图上出示。
- Context2D，要求完毕诸如 GPath、GTexture、GTransform、GTriangulate 等来贯彻 Canvas 的渲染效果；
- WebGL 相对简便易行，WebGL1.0 的 API 基本都能与从 OpenGL ES2.0 找到与之相呼应的 API；
寄生组合世襲
如此的艺术重要化解的主题材料是调用四回父类的题目，幸免额外的借来的天性或艺术。动脑看第贰遍电脑.call(this)，借来了this上的品质或方法，第一回Apple.prototype = new Computer()，又借来了this上的习性或艺术，这里的初心是想借原型，无法那些是实例，所以该借的不应该借的都借来了。那么要防止那样的难点，就要消释持续属性的继续属性，世袭原型的三回九转原型，也不乱借。
JavaScript
var extendPrototype = function(sub,supers){ var F = function(){} F.prototype = supers.prototype; var _f = new F(); _f.constructor = sub; sub.prototype = _f; } var Computer = function(name){ this.name = name; } Computer.prototype.show = function(){ alert(this.name); } var Apple = function(name){ Computer.call(this,name); } extendPrototype(Apple,Computer); var apple = new Apple('apple'); apple.show();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var extendPrototype = function(sub,supers){
var F = function(){}
F.prototype = supers.prototype;
var _f = new F();
_f.constructor = sub;
sub.prototype = _f;
}
var Computer = function(name){
this.name = name;
}
Computer.prototype.show = function(){
alert(this.name);
}
var Apple = function(name){
Computer.call(this,name);
}
extendPrototype(Apple,Computer);
var apple = new Apple('apple');
apple.show();
|
首先步把supers的原型赋值给F，第二步成立F的实例，第三步把_f实例的constructor属性改进成子类，第四步把_f实例赋值给子类的prototype。
那样的话正是不应当借的也不会三番五遍了
相关原理
HTML5 postMessage
至关重固然选拔window.postMessage来发送新闻，监听window.message来获取音信，剖断origin能够决断消息来源，data得到消息内容，soucre来援用发送方的window对象援引。
www.b.com/b.html发送音讯给www.a.com/a.html
JavaScript
window.postMessage('hello','www.a.com/a.html')
1
|
window.postMessage('hello','www.a.com/a.html')
|
www.a.com/a.html获取新闻
JavaScript
window.addEventLister('message',function(event){ if(event.origin === ' //处理 } })
1
2
3
4
5
|
window.addEventLister('message',function(event){
if(event.origin === 'http://b.com'){
//处理
}
})
|
iframe的出殡格局
JavaScript
contentWindow.postMessage('data','b.com')
1
|
contentWindow.postMessage('data','b.com')
|
话非常少说，移动端这种跨域方式也很常用（提议推荐使用卡塔尔
首要方法
本文由云顶娱乐棋牌发布于云顶娱乐棋牌,转载请注明出处：change提升页面滚动，渲染引擎介绍
TAG标签：
