重学前端
程劭非（winter）
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 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
    75
  • Scorpio
    flex自从用过后，就不想用其他的了。。能用flex就用flex
    2019-02-16
    44
  • 大漠
    文档流和排版是最难的部分！

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

    2019-02-18
    33
  • 大粒仔
    请问老师，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
下载
客户端
返回
顶部