>

深远驾驭CSS中的层叠上下文和层叠顺序,directi

- 编辑:云顶娱乐yd2221 -

深远驾驭CSS中的层叠上下文和层叠顺序,directi

前边四特性能优化 – 能源预加载

2015/11/19 · JavaScript · 预加载

初藳出处: ROBIN RENDLE   译文出处:bubkoo的博客(@问崖的崖)   

当提到前端质量优化时,大家第一会联想到文件的集结、压缩,文件缓存和开启服务器端的 gzip 压缩等,那使得页面加载越来越快,客商能够连忙接纳大家的 Web 应用来完成他们的对象。 

财富预加载是另贰个属性优化手艺,大家能够利用该技术来预先告知浏览器某个能源可能在今日会被使用到。

引用 Patrick Hamann 的解释:

预加载是浏览器对明清说不定被选取能源的一种暗中提示,一些资源可以在当前页面使用到,一些或许在以后的某个页面中被利用。作为开荒职员,大家比浏览器越发驾驭大家的运用,所以大家得以对大家的着力能源利用该手艺。

这种做法早已被叫作 prebrowsing,但这并非一项单一的本领,能够细分为多少个例外的本事:DNS-prefetchsubresource 和正式的 prefetchpreconnectprerender

 

CSS direction属性简单介绍与事实上接纳

2016/03/21 · CSS · 1 评论 · direction

最早的小讲出处: 张鑫旭   

深刻精通CSS中的层叠上下文和层叠顺序

2016/01/10 · CSS · 层叠上下文

原来的书文出处: 张鑫旭   

零、凡间的道理都是想通的

在这里个世界上,所有事都有个先后顺序,凡物都有个论资排辈。比方说茶楼排队打饭,对啊,讲求先到先得,总不容许蜂拥而上。再比方说说话语权,老婆的话永恒是对的,领导的话恒久是对的。

在CSS届,也是那般。只是,日常情形下,我们平平静静,看不出什么差异,即所谓的众平生等。可是,当产生冲突发生争辨的时候,显著,是不恐怕产生一心等同的,前后相继顺序,身份差别就显现出来了。举个例子,杰克和罗斯,只好一位浮在木板上,此时,出现了冲突,结果大家都清楚的。那对于CSS世界中的成分来讲,所谓的“冲突”指什么啊,在那之中,很爱戴的一个规模正是“层叠显示冲突”。

默许情状下,网页内容是从未偏移角的垂直视觉显示,当内容产生层叠的时候,一定会有叁个左右的层叠顺序发生,有一些类似于真实世界中论资排辈的感到到。

而要精通网页相月素是何许“论资排辈”的,就要求深刻明白CSS中的层叠上下文和层叠顺序。

小编们我们恐怕都听得多了自然能详细讲出来CSS中的z-index质量,须要跟大家讲的是,z-index实际只是CSS层叠上下文和层叠顺序中的一叶小舟。

GCanvas 渲染引擎介绍

2017/07/31 · HTML5 · Canvas

初藳出处: 天猫前端团队(FED)- 韦青   

云顶娱乐 1

GCanvas 提供了一套类似于 H5 Canvas 规范的 JavaScript API。基于那套 API 能够实惠的去做图形绘制、动画渲染等,开拓的感受与 H5 Canvas 是一心同样的。

本人在翻阅 NodeJS 文书档案中读出的贰11个套路

2016/11/21 · JavaScript · NodeJS

原版的书文出处: David Gilbertson   译文出处:王下邀月熊_Chevalier   

即使本身已经用了三年多的NodeJS,也曾经感觉自个儿对其无所不知。但是我好像从没有安静的坐下来稳重地阅读NodeJS的完全文书档案。假诺有熟练自身的朋友应该清楚,作者在此之前早就看了HTML,DOM,Web APIs,CSS,SVG以至ECMAScript的文书档案,NodeJS是本身那一个类别的末段三个待翻阅的山脉。在翻阅文书档案的历程中本人也意识了数不完自然不明了的学问,作者以为自个儿有要求分享给我们。不过文档更加多的是平铺直叙,因而我也以涉猎的逐个列举出本身以为须求领会的点。

DNS 预解析 DNS-Prefetch

因而 DNS 预解析来报告浏览器今后大家兴许从有些特定的 UOdysseyL 获取能源,当浏览器真正使用到该域中的有个别财富时就足以尽早地产生 DNS 解析。举个例子,我们以后讲不定从 example.com 获取图片或音频财富,那么能够在文书档案最上部的 `` 标签中参预以下内容:

<link rel="dns-prefetch" href="//example.com">

1
<link rel="dns-prefetch" href="//example.com">

当大家从该 UOdysseyL 诉求叁个财富时,就不再需求等待 DNS 的分析进程。该本事对运用第三方能源特别有用。

在 Harry Roberts 的文章中提到:

透过轻易的一行代码就足以告知那二个包容的浏览器举行 DNS 预解析,那意味当浏览器真正乞请该域中的有些能源时,DNS 的剖释就早已做到了。

那仿佛是一个相当的细小的性质优化,显得也休想那么主要,但事实并非那样 – Chrome 平素都做了近乎的优化。当在浏览器的地点栏中输入 UQashqaiL 的一小段时,Chrome 就活动达成了 DNS 预深入分析(以致页面预渲染),进而为种种恳求节省了第一的小运。

一、用的少并不意味着未有用

最少,在自个儿接触的如此多类型里,未有看出使用过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特性轻易好记,属性值少,宽容性好,关键时候方便省力,是时候给大家宣传宣传,不要埋没了人家的非凡技能。

一、什么是层叠上下文

层叠上下文,日语名为”stacking context”. 是HTML中的贰个三维的概念。假如贰个要素含有层叠上下文,大家能够清楚为那个成分在z轴上就“卓绝群伦”。

此地出现了叁个名词-z轴,指的是何等呢?

意味着的是客商与显示屏的这条看不见的垂直线(参见下图表示-红线):
云顶娱乐 2

层叠上下文是叁个概念,跟「块状格式化上下文(BFC)」类似。可是,概念这些事物是相比虚相比空虚的,要想轻易通晓,大家要求将其具象化。

怎么个实际化法呢?

你可以把「层叠上下文」精通为当官:网页中有很多众多的要素,我们得以视作是全神关注世界的大千世界。真实世界里,大家超越二分一人是常见贩夫皂隶们,还大概有一点点人是从事政务的管理者。OK,这里的“官员”就足以知道为网页中的层叠上下文成分。

换句话说,页面中的成分有了层叠上下文,就好比大家日常老百姓当了官,一旦当了官,相比日常愚夫俗子来讲,离国君更近了,对不对,就一样网页凉月素品级更加高,离大家客商更近了。

云顶娱乐 3

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)。

querystring:能够作为通用剖析器的模块

有的是时候咱们会从数据库或别的地点得到这种古怪格式的字符串:name:Sophie;shape:fox;condition:new,平常的话大家会利用字符串切割的主意来讲字符串划分到JavaScript Object。但是querystring也是个不利的现存的工具:

JavaScript

const weirdoString = `name:Sophie;shape:fox;condition:new`; const result = querystring.parse(weirdoString, `;`, `:`); // result: // { // name: `Sophie`, // shape: `fox`, // condition: `new`, // };

1
2
3
4
5
6
7
8
const weirdoString = `name:Sophie;shape:fox;condition:new`;
const result = querystring.parse(weirdoString, `;`, `:`);
// result:
// {
//   name: `Sophie`,
//   shape: `fox`,
//   condition: `new`,
// };

预连接 Preconnect

与 DNS 预分析类似,preconnect 不止做到 DNS 预分析,同一时间还将开展 TCP 握手和成立传输层协议。能够这么使用:

<link rel="preconnect" href=";

1
<link rel="preconnect" href="http://example.com">

在 Ilya Grigorik 的文章中有更详细的牵线:

今世浏览器都试着预测网址现在内需什么样连接,然后预先创设 socket 连接,进而化解昂贵的 DNS 查找、TCP 握手和 TLS 往返开销。可是,浏览器还远远不够聪明,并无法规范预测每一个网址的有着预链接目的。幸而,在 Firefox 39 和 Chrome 46 中大家得以接纳 preconnect 告诉浏览器大家必要展开什么样预连接。

二、CSS direction简介

大略,大家只要关心上边那八个属性值就好了:

direction: ltr; // 默认值 direction: rtl;

1
2
direction: ltr;   // 默认值
direction: rtl;

其中,ltr是起首值,表示left-to-right,正是从左往右的意思,再具体描述下,就是内联内容是从左往右依次排布的,大家平昔网页的管理都是这么的,比方说前后三个图片,暗中认可意况下,DOM在前的就彰显在右边。

rtl则是其他八个值,right-to-left缩写,正是从右往左的意趣,再具体描述下,就是内联内容是从右往左依次排布的,参与应用了那么些CSS注解,则前后八个图片,私下认可情状下,DOM在前的就呈现在左边;并且是在容器的右端。

举例说mm1是张含韵(Zhang Hanyun),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>

结果,张妹子跑到了最右侧,并不是左侧,同不平时候,貌似右对齐容器了,如下截图:
云顶娱乐 4

更动的只是内联成分块的左右一一
急需小心的是,当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在右边:
云顶娱乐 5

因为改换的只是内联元素块的左右家家户户,全部的文字,尽管采纳内联标签分隔,实际上,照旧贰个同质内联盒子,是用作一个完整管理的,因而,唯有近似右对齐效果,而现实每一种文字都不曾左右顺序的浮动。

那怎么是“内联成分块”呢?包含替换来分(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

二、什么是层叠水平

再来讲说层叠水平。“层叠水平”匈牙利(Hungary)语名为”stacking level”,决定了同三个层叠上下文申月素在z轴上的来得顺序。level那个词很轻便让大家联想到大家真正世界中的三六九等、论资排辈。真实世界中,每一个人都以单独的私家,富含同卵双胞胎,有反差就有分别。举例,双胞胎固然长得像Ctrl+C/Ctrl+V获得的,但实际,出生时间依旧有前后相继顺序的,先出生的极其就大,二哥或嫂子。网页中的成分也是这么,页面中的每一种成分皆以独立的个体,他们迟早是会有三个看似的排行排序的情况存在。而那个排名排序、论资排辈正是大家那边所说的“层叠水平”。层叠上下文成分的层叠水平足以驾驭为领导的职务和等级,1品2品,局长省长之类;对于日常成分,那些嘛……你谐和随意精晓。

于是乎,可想而知,全部的成分都有层叠水平,包罗层叠上下文成分,层叠上下文成分的层叠水平足以领会为管事人的职务和品级,1品2品,市长市长之类。然后,对于常见成分的层叠水平,大家的探赜索隐仅仅局限在日前层叠上下文成分中。为啥呢?因为不然没有意义。

如此清楚啊~ 下面提过成分具备层叠上下文好比当官,我们都明白的,那当官的家里都有丫鬟啊保镖啊管家啊什么的。所谓打狗看主人,A官员家里的管家和B官员家里的管家做PK实际上是没有意义的,因为他们牛不牛逼完全由她们的东家决定的。一人飞升一人得道,你说那和善保家里的管家和七侠镇娄知县校尉家里的管家有可比性吗?李鹏的秘书是否分分钟灭了你村支书的文书(假如有)。

翻译成术语便是:普通成分的层叠水平优先由层叠上下文决定,由此,层叠水平的可比独有在脚下层叠上下文成分中才有意义。

云顶娱乐 6

亟需介意的是,诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没有错,某个情况下z-index确实能够影响层叠水平,可是,仅限于定位成分以致flex盒子的子女成分;而层叠水平具备的因素都存在。

GCanvas 组成

云顶娱乐 7

如上海体育地方所示 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 完结的出入,网络图片下载,字体渲染等方面。
  • 主题渲染库
    基本渲染库包罗对外统一的接口,以致 Contex2D 和 WebGL 模块,底层则是对 OpenGL ES API 等分装。

V8 Inspector

--inspect参数运转你的Node应用程序,它会反映你有个别U索罗德L。将该UCR-VL复制到Chrome中并展开,你就足以应用Chrome DevTools来调度你的Node应用程序啦。详细的尝试可以参照那篇小说。可是要求静心的是,该参数依旧属于实验性质。
云顶娱乐 8

预获取 Prefetching

万一大家规定有个别能源今后必定会被运用到,大家得以让浏览器预先供给该能源并放入浏览器缓存中。比如,四个图形黄岩乱弹本或别的能够被浏览器缓存的财富:

<link rel="prefetch" href="image.png">

1
<link rel="prefetch" href="image.png">

与 DNS 预剖判差异,预获取真正哀告并下载了能源,并储存在缓存中。但预获取还依附于一些法规,有个别预获取恐怕会被浏览器忽略,举个例子从四个特出缓慢的网络中获得三个巨大的书体文件。並且,Firefox 只会在浏览器闲置时实行能源预获取。

在 Bram Stein 的帖子中聊起,那对 webfonts 品质进步特别显然。近些日子,字体文件必得等到 DOM 和 CSS 创设变成之后才起来下载,使用预获取就能够轻易绕过该瓶颈。

注意:要测验财富的预获取有一点点不方便,但在 Chrome 和 Firefox 的互联网面板中都有能源预获取的记录。还索要记住,预获取的能源未有同源战术的限量。

三、CSS direction实际利用

CSS direction能够让大家不退换DOM前后相继的气象下,沟通元素的光景相继,在有个别场景下丰硕有效。

上面是自作者实际碰到的例子:

大致,做PC页面项目里都有多个Panel可能Dialog组件,就是弹框什么的。当中,上边会有“鲜明”,“撤销”按键,如下截图:

云顶娱乐 9

下一场,具体很奇异的,有多少个Dialog,设计希望这五个开关顺序是相反的。

假诺只是上海体育场合的急需,想要退换开关前后相继转换其实如若使用浮动就足以了,全体开关都float:right

.button { float: right; }

1
.button { float: right; }

那几个简单。然而,要是说我们的弹框开关是居中体现的,比如,科科:
云顶娱乐 10

不要讲浮动了,飞动都知足不断供给,是或不是又供给助万能的JS了,去改动DOM顺序?

别傻了,一行CSS direction:rtl十七个假名,包你方便到家。笔者敢保障,那势必是性能和价格的比例最高的不二等秘书籍!

您能够狠狠地方击这里:CSS direction调节居中按键顺序改动demo

云顶娱乐 11

本来,大家还恐怕有别的消除思路,但是宽容性嘛,咳咳~

.container, .button { transform: scaleX(-1); }

1
.container, .button { transform: scaleX(-1); }

即使父级容器和按键同不平时间水平翻转,IE7,IE8倒是能够选择IE的翻转滤镜试试,好疑似flipX,作者从前有写过作品:“CSS垂直翻转/水平翻转升高web页面资源重用性”,幸而看了下,原本是flipH,完整写法:

filter: FlipH;

1
filter: FlipH;

可是,滤镜内再滤镜是还是不是支持,小编就不明确了,何况自身也没兴趣对那些占着茅坑不拉屎的浏览器做测量检验,大家风乐趣能够本人探寻看。

三、什么是层叠顺序

再来讲说层叠顺序。“层叠顺序”法文名字为”stacking order”. 表示成分爆发层叠时候全部一定的垂直展现顺序,注意,这里跟上面三个差异样,下面的层叠上下文和层叠水平是概念,而那边的层叠顺序是平整

在CSS2.1的时期,在CSS3还从未出现的时候(注意这里的前提),层叠顺序准则遵从上边那张图:
云顶娱乐 12

云顶娱乐,有人也有见过类似图,那么些图是成都百货上千浩新禧前老外绘制的,塞尔维亚语内容。而是更首要的是国内估摸未有同行举行过注明与实行,实际上非常多种大新闻缺点和失误。上边是自己要好手动重绘的汉语版同一时候补充相当多任啥地点方相对未有的重大文化音讯。假如想要无水印高清大图,点击这里购置(0.5元)。

缺点和失误的严重性音讯包涵:

  1. 坐落最低水平的border/background指的是层叠上下文成分的边框和背景象。每八个层叠顺序准绳适用于二个全部的层叠上下文成分。
  2. 原图未有呈现inline-block的层叠顺序,实际上,inline-block和inline水平元素是平等level品级。
  3. z-index:0实际上和z-index:auto单纯从层叠水平上看,是能够看作是一样的。注意这里的用语——“单纯从层叠水平上看”,实际上,两者在层叠上下文领域有着根性格的差异。

上边小编要向我们发问了,大家有未有想过,为何内联成分的层叠顺序要比变化成分和块榜眼素都高?
云顶娱乐 13

为何吗?小编显明以为浮动成分和块状成分要更屌一点哟。

嘿嘿嘿,笔者就不卖关子了,直接看下图的标明表明:
云顶娱乐 14

诸如border/background相似为装修属性,而转换和块状成分经常作为布局,而内联成分都以内容。网页中最重大的是怎么着?当然是内容了哈,对不对!

为此,一定要让内容的层叠顺序非常高,当发生层叠是很好,主要的文字啊图片内容能够优先揭露在荧屏上。比方,文字和调换图片重叠的时候:

云顶娱乐 15

地方说的那么些层叠顺序法则还是老时期的,假使把CSS3也牵扯进来,科科,事情就不雷同了。

GCanvas 流程

云顶娱乐 16

上海体育场面是 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 运维结果如下

云顶娱乐 17

深远驾驭CSS中的层叠上下文和层叠顺序,direction属性简单介绍与实际使用。具体分析下总体工艺流程。结合插件层和着力渲染库来分析。

  • 插件层流程
    以 iOS 为例深入分析,Android 的经过是相仿的。
    • GLKView 视图创设,并且与 GCanvas 对象创立绑定关系;
    • GCVCommon,能源加载与纹理绑定;
    • GCanvasPlugin,设置岗位消息、设备比率、下发渲染命令;
  • 渲染库流程

云顶娱乐 18

渲染命令的深入分析,最终通过调用 OpenGL ES 的方式或结成格局来贯彻 Context2D 和 WebGL 的效果与利益,生成帧缓存,提交给 GPU 渲染,最终在绑定的 GLKView 视图上显得。

  • Context2D,要求贯彻诸如 GPath、GTexture、GTransform、GTriangulate 等来落到实处 Canvas 的渲染效果;
  • WebGL 绝对简便易行,WebGL1.0 的 API 基本都能与从 OpenGL ES2.0 找到与之相呼应的 API;

nextTick 与 setImmediate的区别

这两货的差别可能光从名字上还看不出来,作者感到应该给它们取个别称:

  • process.nextTick()应该为process.sendThisToTheStartOfTheQueue()
  • setImmediate应该为sendThisToTheEndOfTheQueue()

再说句不相干的,React中的Props应为stuffThatShouldStayTheSameIfTheUserRefreshes,而State应该为stuffThatShouldBeForgottenIfTheUserRefreshes

本文由云顶娱乐发布,转载请注明来源:深远驾驭CSS中的层叠上下文和层叠顺序,directi