摘要：五绘制把任何位图合成到最终位图的操作称为绘制。个人总结这一节主要讲解了浏览器中的位图操作部分，包括渲染合成和绘制三个部分。作业用实现一个玩具浏览器。。。。
笔记说明
重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。一、回顾
大致梳理一下前面四篇文章主要讲的内容。
把 URL 变成字符流
把字符流变成词（token）流
把词（token）流构造成 DOM树
把不含样式信息的 DOM 树应用 CSS 规则，变成包含样式信息的 DOM 树
并且根据样式信息，计算了每个元素的位置和大小。
二、概括本文是最后的步骤，就是根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置。三、渲染
本文中出现的“渲染”一词，统一指的是它在图形学的意义，也就是把模型变成位图的过程。3.1、位图
在内存里建立一张二维表格，把一张图片的每个像素对应的颜色保存进去。
位图信息也是 DOM 树中占据浏览器内存最多的信息，做内存占用优化时，主要就是考虑这一部分。
3.2、图形和文字浏览器中渲染这个过程，就是把每一个元素对应的盒变成位图。这里的元素包括 HTML 元素和伪元素，一个元素可能对应多个盒（比如 inline 元素，可能会分成多行）。每一个盒对应着一张位图。
盒的背景、边框、SVG 元素、阴影等特性，都是需要绘制的图形类。
盒中的文字，也需要用底层库来支持，叫做字体库。能根据字符的码点抽取出字形。字形分为像素字形和矢量字形两种。
四、合成合成的过程，就是为一些元素创建一个“合成后的位图”（称为合成层），把一部分子元素渲染到合成的位图上面。
1、好的合成策略是“猜测”可能变化的元素，把它排除到合成之外。
举个例子：
...
假设合成策略能够把 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://www.ucloud.cn/yun/55042.html
摘要：五绘制把任何位图合成到最终位图的操作称为绘制。个人总结这一节主要讲解了浏览器中的位图操作部分，包括渲染合成和绘制三个部分。作业用实现一个玩具浏览器。。。。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音...
摘要：五绘制把任何位图合成到最终位图的操作称为绘制。个人总结这一节主要讲解了浏览器中的位图操作部分，包括渲染合成和绘制三个部分。作业用实现一个玩具浏览器。。。。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音...
摘要：一正常流的行为正常流的排版行为依次排列，排不下了换行。在正常流基础上，有相关规则，使得一些盒占据了正常流需要的空间，可以把理解为文字环绕。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联...
阅读 1696·2021-10-09 09:44
阅读 3262·2021-09-27 13:36
阅读 1519·2021-09-22 15:33
阅读 1273·2021-09-22 15:23
阅读 1159·2021-09-06 15:02
阅读 1695·2019-08-29 16:14
阅读 2900·2019-08-29 15:26
阅读 2407·2019-08-28 18:08
