重学前端进修笔记（十五）--浏览器事情剖析（五）

2024年4月27日 173次阅读 来源: 凯小默

笔记申明

重学前端是程劭非（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完成一个玩具浏览器。。。。

大漠先生：“重绘，重排～都蛋疼”

    原文作者：凯小默
    原文地址: https://segmentfault.com/a/1190000019170100
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞