重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32964 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

浏览器:一个浏览器是如何工作的?(阶段五)

winter 2019-02-19
你好,我是 winter。我们的浏览器系列已经进行到最后一篇。
在之前的几篇文章中,我们已经经历了把 URL 变成字符流,把字符流变成词(token)流,把词(token)流构造成 DOM 树,把不含样式信息的 DOM 树应用 CSS 规则,变成包含样式信息的 DOM 树,并且根据样式信息,计算了每个元素的位置和大小。
那么,我们最后的步骤,就是根据这些样式信息和大小信息,为每个元素在内存中渲染它的图形,并且把它绘制到对应的位置。

渲染

首先我们来谈谈渲染这个词,渲染也是个外来词,它是英文词 render 的翻译,render 这个词在英文里面,有“导致”“变成”的意思,也有“粉刷墙壁”的意思。
在计算机图形学领域里,英文 render 这个词是一个简写,它是特指把模型变成位图的过程。我们把 render 翻译成“渲染”,是个非常有意思的翻译,中文里“渲染”这个词是一种绘画技法,是指沾清水把墨涂开的意思。
所以,render 翻译成“渲染”,我认为是非常高明的,对 render 这个过程,用国画的渲染手法来概括,是颇有神似的。
我们现在的一些框架,也会把“从数据变成 HTML 代码的过程”称为 render,其实我觉得这是非常具有误导性的,我个人是非常不喜欢这种命名方式,当然了,所谓“文无第一”,在自然语言的范围里,我们很难彻底否定这种用法的合理性。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(28)

  • 大漠
    重绘,重排~都蛋疼

    编辑回复: 老师好呀,谢谢留言支持呀。

    2019-02-20
    40
  • 逆风
    浏览器渲染出的结果如果是位图,请问输入框是怎么实现的?

    作者回复: 这个问到点子上啦,这块太复杂我故意没讲,实际上渲染过程除了位图,最终绘制上去还产生一个"热区",这个“热区”不但跟你说的input相关,还跟用户选择、鼠标事件和scroll等交互相关。

    2019-02-20
    21
  • wz
    是用canvas模拟一个iframe吗

    作者回复: 嗯 差不多是这个意思吧

    2019-02-19
    8
  • Fuhui
    浏览器工作流程:
    从服务器端获取文档数据☞浏览器解析成DOM树☞CSS根据DOM规则开始排版文档内容☞浏览器分文字和图形进行渲染在窗口展现☞接下来就是JS的交互了。

    自己根据印象总结下。
    2019-02-21
    6
  • 宝贝
    做一个玩具浏览器的想法有点大胆好玩哈哈基础打好后可以尝试!
    2019-02-19
    4
  • 🐻🔫🐸
    所以重绘不一定是什么恐怖的事情,真正的问题在于需要重绘的位图尺寸,不知道可以这么理解吗
    2019-03-07
    3
  • espelansa
    老师您好!在合成这边您写道“如果我们所有的元素都不合成,那么必须要重新绘制所有的元素”,这里我不是特别明白,为什么会需要重新绘制呢?

    作者回复: 你最终把元素画到屏幕上,当然所有元素都要重新绘制了。

    2019-02-22
    1
    3
  • 温木
    老师有几个问题希望回答:
    文中提到:“注意,我们这里讲的渲染过程,是不会把子元素绘制到渲染的位图上的,这样,当父子元素的相对位置发生变化时,可以保证渲染的结果能够最大程度被缓存,减少重新渲染。”
    1.缓存的是什么东西,位图吗?如何减少重新渲染的?
    2.是不是所有的元素都有对应的位图?
    文中你举了两个例子,说如果只有一个位图,任何改变都会引起所有重新渲染。
    这个好理解,一个大位图就是一个单元,任何的改动相当于这个单元被变了,所以要重新创建这个,这样理解对吗?
    但是你下面又说如果不合并,每次还是所有的重新渲染。
    感觉说的很矛盾啊,如果上面说的缓存的位图,那么不合并的位图就不缓存吗,不能减少重新渲染吗?另外如果不合并,有元素变更,所有的都重新进行了渲染,那是不是合并了也会重新渲染呢?只是单元的个数减少从而提升了性能,就像http请求使用长连接,合并小请求,减少简历三次握手的次数是一个道理呢?

    希望老师能回答一下我的疑问。
    2019-04-28
    2
  • 陈斌
    总结:
    页面图片的本质就是一张“完整的二维表格(页面图片的每个像素对应的颜色保存进去的二维表格)”

    渲染:把DOM树的各个元素变成位图(二维表格)
    合成(可选):把不会经常改变位置和样式的元素的位图“拼接起来”,变成一个较大的合成后的位图(暂时称之为“较大的位图”)。(有个问题:合成只能合成有父子关系的元素的位图吗?)
    绘制:把各个DOM元素的位图 和 “较大的位图”“拼接”成一个最终位图,交给操作系统,最后呈现出页面图片。

    请问老师,这样总结有什么不妥之处?
    2019-03-13
    2
  • 子雅
    请问老师伪元素是怎么渲染展示的呢?
    2019-03-12
    1
  • Mr.Ren
    感觉一遍看下来不是太懂,只能多看两遍
    2019-02-23
    1
  • oillie
    跟developers.google上的用词有点不太一样,developers.google上是paint(绘制),对应本文中的render(渲染)

    另外合成这块有点出入,以文中的例子来说,我的先前的认知是页面默认只有一个layer(chrome里的GraphicsLayer),c元素有transform样式属性,则单独生成一个layer,而合成是指gpu把两张layer合成一张位图

    作者回复: 合成的位图不可能就叫位图吧……

    2019-02-21
    1
  • Hulk
    你好,我理解客户端在使用基于webkit的webView控件的时候,‘浏览器’的工作流程也是这样的吧?
    大神能否明确一下浏览器在完成哪个节点以后会让webView控件发出webViewLoadFinish的通知?
    此前遇到过一下问题,比如H5前端同学所言js是在页面加载成功后立马调用的,而客户端的同学未收到加载成功(收到webViewLoadFinish回调)却也看到了js的执行效果;所以这两端同学所言的加载成功,想必不是一回事?

    作者回复: 没记错的话LoadFinish应该是跟js里的onload同时发出的。

    你可以让你们前端把performance全都打印出来跟你对一下。

    2019-02-21
    1
  • CC
    没想到之前对“重绘”的理解并不准确,发生的频率远比想象的高很多,学到了。
    2019-02-19
    1
  • 宅。
    为什么我们专业老师说windows重绘机制下,只有窗口遮盖会产生无效矩形,鼠标划过是不会导致重绘的?

    作者回复: 我们学习的时候,需要有个基本的逻辑判断能力,而不是根据“谁说的”来判断对错。

    如果鼠标划过不会重绘,那么鼠标遮盖住的内容是怎么出来的呢?

    2019-11-05
  • 全林聪
    如果每个盒子都会绘制一张位图, 父子盒子不合并成一张位图, 那么会占据大量的内存, 在把位图渲染到界面的时候, 又会花费大量的GPU, CPU. 所以怎么去合并位图就等同减少内存占用和减少CPU/GPU耗能了, 至于原文说, "可以保证渲染的结果能够最大程度被缓存", 我想指的是, 比如js改变了某一个元素, 不需要绘制位图->合成位图2步,而是只需要绘制位图这一步就可以了, 而原来存在的位图任然有效, 至于渲染成界面, 原文说, "那么如果我们所有的元素都不合成,会怎样呢?结果就是,相当于每次我们都必须要重新绘制所有的元素", 这里的每次都要必须绘制所有的元素, 我觉得有问题, 如果是第一次绘制, 那么会把所有的元素都绘制一次到UI界面上, 如果用js只修改了一个元素, 那么只影响到一个位图的变化, 那么也只会增量绘制一个位图的内容吧?

    作者回复: 怎么增量呢,这个位图可能被别人盖住了一半,你怎么算它的增量区域?

    2019-08-10
  • 白晓宇(7530)
    听起来很像设计原型图
    2019-06-11
  • 忍冬
    老师请问下,对这句话不太懂“那么如果我们所有的元素都不合成,会怎样呢?结果就是,相当于每次我们都必须要要重新绘制所有的元素,这也不是对性能有好的选择”,照您说的渲染过程是把每一个元素对应的盒变成位图,既然是这样那我即使都不合成,也不太会影响呀 修改哪个元素就重新渲染下哪个元素呀
    2019-05-23
  • Geek_eea87d
    作者大大,我想知道如果想深层次了解这方面知识应该查看的书籍或者是方向是什么

    作者回复: 书我不知道,可以看看chromium项目的邮件组,自己挑选阅读一些它的源代码。

    2019-04-09
  • Geek_28f1ae
    注意,我们这里讲的渲染过程,是不会把子元素绘制到渲染的位图上的,这样,当父子元素的相对位置发生变化时,可以保证渲染的结果能够最大程度被缓存,减少重新渲染。老师,您好,渲染过程不会把子元素渲染到位图中,那渲染完岂不是子元素还没有位图信息?

    作者回复: 有啊 所有元素都要被渲染啊

    2019-04-05
收起评论
28
返回
顶部