重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32863 人已学习
课程目录
已完结 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-16
你好,我是 winter。
我们书接上文。浏览器进行到这一步,我们已经给 DOM 元素添加了用于展现的 CSS 属性,接下来,浏览器的工作就是确定每一个元素的位置了。我们的基本原则仍然不变,就是尽可能流式地处理上一步骤的输出。
在构建 DOM 树和计算 CSS 属性这两个步骤,我们的产出都是一个一个的元素,但是在排版这个步骤中,有些情况下,我们就没法做到这样了。
尤其是表格相关排版、Flex 排版和 Grid 排版,它们有一个显著的特点,那就是子元素之间具有关联性。

基本概念

首先我们先来介绍一些基本概念,使你可以感性地认识一下我们平常说的各种术语。
“排版”这个概念最初来自活字印刷,是指我们把一个一个的铅字根据文章顺序,放入板框当中的步骤,排版的意思是确定每一个字的位置。
在现代浏览器中,仍然借用了这个概念,但是排版的内容更加复杂,包括文字、图片、图形、表格等等,我们把浏览器确定它们位置的过程,叫作排版。
浏览器最基本的排版方案是正常流排版,它包含了顺次排布和折行等规则,这是一个跟我们提到的印刷排版类似的排版方案,也跟我们平时书写文字的方式一致,所以我们把它叫做正常流。
浏览器的文字排版遵循公认的文字排版规范,文字排版是一个复杂的系统,它规定了行模型和文字在行模型中的排布。行模型规定了行顶、行底、文字区域、基线等对齐方式。(你还记得小时候写英语的英语本吗?英语本上的四条线就是一个简单的行模型。)
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(38)

  • 瞧,这个人
    不如讲讲 一个完整的html+css实例 构建dom树,渲染树的全过程 来的实在。(从里往外计算的过程)
    2019-02-17
    74
  • Scorpio
    flex自从用过后,就不想用其他的了。。能用flex就用flex
    2019-02-16
    43
  • 大漠
    文档流和排版是最难的部分!

    作者回复: 对大漠老师来说小菜一碟 哈哈哈

    2019-02-18
    32
  • 大粒仔
    请问老师,domContentLoaded事件是不是在完整的DOM构建完成后才触发,如果这样的话,按照流式的处理上一步输出思想,domContentLoaded事件触发前浏览器是不是可能已经开始进行排版,渲染,绘制的工作了。但是按developers.google上的说法,只有domContentLoaded事件触发后,浏览器才会开始生成渲染树,排版等一系列操作。我对这块很困惑
    2019-03-03
    8
  • yummy
    写代码之前认真思考整体的布局真的太有必要了。。。
    2019-02-16
    7
  • soulful
    希望讲完这部分浏览器工作原理后,能给一个简单的demo实例一节课,把前面的贯通一下,加深理解。

    作者回复: 我想把这部分留给你们 我写没用啊

    2019-02-18
    5
  • 刘圣伟
    flex目前能避免就避免,用多了,对文档流就难理解了
    2019-03-08
    3
  • ytd
    平常用flex和position:absolute比较多,float用的比较少,我会尽量避免用它。
    2019-03-02
    3
  • 无羡
    最喜欢使用flex布局,但是工作中页免不了要使用定位和浮动来实现特殊定位,所以对不同排版之间的关系及相互作用不太清楚,老师可不可以讲讲

    作者回复: 使用定位和浮动没有问题。

    不同排版间的关系这个就复杂了,我觉得遵守可以内外嵌套、但是不混用的规则即可。

    2019-02-16
    3
  • CC
    想起最早 CSS 的排版方案是 table,到 float、position,再到现在的 flex 和 grid。CSS 排版系统还在不断进化,包括 sub grid 有可能让 CSS 更加优美的达到排版目的。

    回到 winter 老师的提问,我平时最喜欢使用 grid,在不同场景下辅助使用 float 和 flex。

    一开始抱有「grid 才是最牛的方案」的想法,但后来发现是自己的误解。在使用中发现,它们几个方案并不冲突,各有所长。

    不知道这样的理解是否准确?

    感谢 winter 老师在上一讲指出我对 CSSOM 的理解问题,通过重新阅读,修正了理解。
    2019-02-16
    3
  • 温木
    老师,“当没有强制指定文字书写方向时,在左到右文字中插入右到左向文字,会形成一个双向文字盒,反之亦然。”
    这个嫩不能给个例子,不明白什么意思。

    2019-04-28
    2
  • 小明 张
    移动端布局就上flex。太好用了。
    2019-04-05
    2
  • 田野的嘴好冰
    毫无疑问就是flex布局,但是一旦混用,就无法清楚布局
    2019-03-16
    2
  • 捉迷藏的铁人
    最喜欢flex布局,感觉几乎都可以用它来实战!

    作者回复: 淘宝用weex开发,就只有flex布局。

    2019-02-17
    2
  • 胡永
    平常都是写企业中后台,有nz-zerro,基本上都是表格,都是很简单的布局,小程序写过都是用display:flex,老师讲的这些大部分没用过,请问老师 css方面有没有好的自己练习的网站呢?
    2019-02-16
    2
  • Fred 、
    flex自从用过后,就不想用其他的了。。能用flex就用flex
    2019-04-06
    1
  • Teng
    大框架布局用grid layout 因为方便支持不同device和dynamic responsive. 具体的内部用 flex 排版
    2019-02-26
    1
  • William
    双向文字盒,行内级盒两个概念,老师会在css部分详细讲一下吗?

    作者回复: 行内级盒会详细介绍,双向文字这个不会,毕竟用到太少啦。

    2019-02-16
    1
  • 王天狗
    我看到很多人都喜欢用 flex 布局,但是flex 的兼容性不是很好,
    2019-09-23
  • 国先生👀
    flex
    2019-07-29
收起评论
38
返回
顶部