重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32948 人已学习
课程目录
已完结 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-12
你好,我是 winter,今天我们继续来看浏览器的相关内容。
我在上一篇文章中,简要介绍了浏览器的工作大致可以分为 6 个阶段,我们昨天讲完了第一个阶段,也就是通讯的部分:浏览器使用 HTTP 协议或者 HTTPS 协议,向服务端请求页面的过程。
今天我们主要来看两个过程:如何解析请求回来的 HTML 代码,DOM 树又是如何构建的。

解析代码

我们在前面讲到了 HTTP 的构成,但是我们有一部分没有详细讲解,那就是 Response 的 body 部分,这正是因为 HTTP 的 Response 的 body,就要交给我们今天学习的内容去处理了。
HTML 的结构不算太复杂,我们日常开发需要的 90% 的“词”(指编译原理的术语 token,表示最小的有意义的单元),种类大约只有标签开始、属性、标签结束、注释、CDATA 节点几种。
实际上有点麻烦的是,由于 HTML 跟 SGML 的千丝万缕的联系,我们需要做不少容错处理。“<?”和“<%”什么的也是必须要支持好的,报了错也不能吭声。

1. 词(token)是如何被拆分的

首先我们来看看一个非常标准的标签,会被如何拆分:
<p class="a">text text text</p>
如果我们从最小有意义单元的定义来拆分,第一个词(token)是什么呢?显然,作为一个词(token),整个 p 标签肯定是过大了(它甚至可以嵌套)。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(34)

  • 阿成
    参考了 github 上的一个 gist,才算写出来个能跑起来的...
    https://github.com/aimergenge/toy-html-parser

    作者回复: 嗯 这个超棒 推荐大家一起看看

    2019-02-18
    50
  • 曼塔特
    感觉在看编译原理
    2019-02-12
    38
  • Aaaaaaaaaaayou
    return tagOpen 是不是应该改为 return tagOpenState

    作者回复: 对,我改一下

    2019-02-13
    11
  • umaru
    老师cdata是啥?( ・◇・)

    作者回复: XML的相关知识,可以看一下,不怎么重要。

    2019-02-21
    8
  • RMX
    https://blog.csdn.net/userkang/article/details/80851153
    之前在看 Webkit 技术揭秘 这本书,记的笔记。结合老师的文章,了解的更深了。谢谢!
    2019-02-20
    7
  • 是零壹呀
    这一节讲的应该是如何实现一个parser吧。
    关于状态机这一块,我觉得是不是可以先讲一节正则的知识点呢。
    理解了正则,那么大家对状态机的概念就有了更加直观的理解了。

    作者回复: 一般正则都是状态机实现的,讲正则对理解它底层的状态机毫无意义啊。

    当然了,词法分析也可以用正则来实现,我这里没有这么做而已,我写过一个js的词法分析是用正则做的,你可以参考:

    https://github.com/wintercn/JSinJS/blob/master/source/LexicalParser.js

    2019-02-19
    5
  • 瞧,这个人
    只简单讲了浏览器怎么解析html,并没有讲具体怎么构建dom树,请寒老师不要偷工减料

    作者回复: 怎么没讲,还有构造的算法和视频呢,不认真到这个地步了么?

    2019-02-16
    5
  • 阿成
    老师,为什么状态机没办法封装,能详细解释一下吗
    2019-02-12
    5
  • leslee
    状态机的图没看懂...
    2019-02-12
    3
  • 王飞
    老师,感觉在可以讲下virtual-dom

    作者回复: virtual-dom不是浏览器的东西,算是一种应用技巧吧,我觉得它寿命不会特别长。

    2019-02-19
    2
  • Marphy Demon
    老师可否提供一些课外阅读的材料呢?单纯通过这一篇文章,没有接触相关知识的前提下,get到的东西比较少。

    作者回复: 这一篇主要涉及的是编译原理,不过我讲的比书简单多了,有个感性认识就可以。

    2019-02-14
    2
  • we
    老师 能回答下,或者给个资料补充一下。手机浏览器与电脑浏览器的区别吗?

    作者回复: 工作原理上,当然没区别了,但是如果你指兼容性,那三天三夜也说不完……

    2019-02-13
    2
  • Nirvana
    老师讲的真好,这部分内容虽完全没接触过,但是相信多听几遍,加上自己的查阅应该也能弄清楚。老师如果开新班请尽快推广,这个课听的太值了。
    2019-02-12
    2
  • 这是一篇我不是太懂,却不会自责的文章,毕竟已经涉及浏览器解析html的编译原理了
    2019-02-12
    2
  • 【执着】Paranoid
    2019-04-08
    1
  • 周飞
    做了一个简单的demo https://github.com/kobefaith/simpleHtmlParse.git
    2019-03-17
    1
  • [已重置]
    https://github.com/haven2world/HavenStudyRepository/tree/master/geekbang-winter/htmlParser

    _(:з」∠)_ 啰里啰嗦写了一大堆,这大概是我用js写过的最面向对象的东西了
    2019-03-04
    1
  • 风吹一个大耳东
    看到状态机就已经获益匪浅了,老师讲的都是我们平时不在意却又是必须懂的东西~
    2019-02-20
    1
  • coma
    请问为什么如果使用基于类的面向对象方式,就要使用抽象工厂来创建对象?

    作者回复: 这块是设计模式的一个小应用了,因为创建对象的过程无法用接口抽象,所以要用抽象工厂,当然JavaScript里面不是特别有必要用抽象工厂,一般浏览器都是用C++编写的,就一定需要抽象工厂。

    2019-02-12
    1
  • soulful
    看来大学重修一遍编译原理还是值得的
    2019-02-12
    1
收起评论
34
返回
顶部