笔记申明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时刻开的一个专栏,
天天10分钟,重构你的前端学问系统,笔者重要整顿进修历程的一些要点笔记以及感悟,完全的可以到场winter的专栏进修【原文有winter的语音】,若有侵权请联络我,邮箱:kaimo313@foxmail.com。
一、回忆
大抵梳理一下前面四篇文章重要讲的内容。
- 把
URL
变成字符流 - 把字符流变成词(
token
)流 - 把词(
token
)流构形成DOM
树 - 把不含款式信息的
DOM
树运用CSS
划定规矩,变成包含款式信息的DOM
树 - 而且依据款式信息,计算了每一个元素的位置和大小。
二、归纳综合
本文是末了的步骤,就是依据这些款式信息和大小信息,为每一个元素在内存中衬着它的图形,而且把它绘制到对应的位置。
三、衬着
本文中涌现的“衬着”一词,一致指的是它在图形学的意义,也就是把模子变成位图的历程。
3.1、位图
在内存里竖立一张二维表格,把一张图片的每一个像素对应的色彩保留进去。
位图信息也是 DOM
树中占有浏览器内存最多的信息,做内存占用优化时,重要就是斟酌这一部份。
3.2、图形和笔墨
浏览器中衬着这个历程,就是把每一个元素对应的盒变成位图。这里的元素包含
HTML
元素和伪元素,一个元素可以对应多个盒(比方
inline
元素,可以会分红多行)。每一个盒对应着一张位图。
- 盒的背景、边框、SVG 元素、暗影等特征,都是须要绘制的图形类。
- 盒中的笔墨,也须要用底层库来支撑,叫做字体库。能依据字符的码点抽取出字形。字形分为像素字形和矢量字形两种。
四、合成
合成的历程,就是为一些元素建立一个“合成后的位图”(称为合成层),把一部份子元素衬着到合成的位图上面。
1、好的合成战略是“猜想”可以变化的元素,把它消除到合成以外。
举个例子:
<div id="a">
<div id="b">...</div>
<div id="c" style="transform:translate(0,0)"></div>
</div>
假定合成战略可以把 a、b
两个 div
合成,而不把 c
合成,实行以下代码时:
document.getElementById("c").style.transform = "translate(100px, 0)";
绘制的时刻,只须要绘制 a
和 b
合成好的位图和 c
,从而减少了绘制次数。假如 b
有许多庞杂的子元素,那末机能提拔收益异常高。
2、主流浏览器平常依据 position、transform
等属性来决议合成战略,新的 CSS
规范中,划定了 will-change
属性,提拔合成战略的效果。
五、绘制
把任何位图合成到
终究位图
的操纵称为绘制。
1、绘制
发作的频次比我们设想中要高很多。
比方:鼠标的每次挪动,都形成了从新绘制,假如我们不从新绘制,就会发生大批的鼠标残影。
2、计算机图形学中,运用的计划就是脏矩形
算法限定绘制面积,也就是把屏幕匀称地分红多少矩形地区。
个人总结
这一节winter重要讲解了浏览器中的位图操纵部份,包含衬着、合成和绘制三个部份。
衬着历程把元素变成位图,合成把一部份位图变成合成层,终究的绘制历程把合成层显现到屏幕上。
某位同砚:浏览器衬着出的效果假如是位图,叨教输入框是怎样完成的?
winter复兴: 这个问到点子上啦,这块太庞杂我有意没讲,实际上衬着历程除了位图,终究绘制上去还发生一个”热区
“,这个“热区
”不只跟你说的input
相干,还跟用户挑选、鼠标事宜和scroll
等交互相干。
winter留了一个课后功课,有做出来的大佬可以通知一下,我进修一下。
功课:用JavaScript完成一个玩具浏览器。。。。
大漠先生:“重绘,重排~都蛋疼”