浏览器是如何工作的(2)

这篇具有很好参考价值的文章主要介绍了浏览器是如何工作的(2)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

如何解析请求回来的 HTML 代码,DOM 树又是如何构建的。

浏览器是如何工作的(2)

如何解析请求回来的 HTML 代码

字符流拆成了词(token)需要两个方面(1.2)

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

浏览器是如何工作的(2)

2. 状态机

状态机的初始状态,我们仅仅区分 “< ”和 “非 <”:

  •       如果获得的是一个非 < 字符,那么可以认为进入了一个文本节点;
  •       如果获得的是一个 < 字符,那么进入一个标签状态。 

不过当我们在标签状态时,则会面临着一些可能性。 

  • 比如下一个字符是“ ! ” ,那么很可能是进入了注释节点或者 CDATA 节点。
  • 如果下一个字符是 “/ ”,那么可以确定进入了一个结束标签。
  • 如果下一个字符是字母,那么可以确定进入了一个开始标签。
  • 如果我们要完整处理各种 HTML 标准中定义的东西,那么还要考虑“ ? ”“% ”等内容。 

用状态机做词法分析,其实正是把每个词的“特征字符”逐个拆开成独立状态,然后再把所有词的特征字符链合并起来,形成一个联通图结构。

DOM 树又是如何构建的

  • 用栈来实现构建DOM树
  • 栈顶元素就是当前节点;
  • 遇到属性,就添加到当前节点;
  • 遇到文本节点,如果当前节点是文本节点,则跟文本节点合并,否则入栈成为当前节点的子节点;遇到注释节点,作为当前节点的子节点;
  • 遇到 tag start 就入栈一个节点,当前节点就是这个节点的父节点;
  • 遇到 tag end 就出栈一个节点(还可以检查是否匹配)。

此文章为4月Day7学习笔记,内容来源于极客时间《重学前端》,推荐该课程。文章来源地址https://www.toymoban.com/news/detail-407273.html

到了这里,关于浏览器是如何工作的(2)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS-27 前端数据请求方式;HTTP协议的解析;JavaScript XHR、Fetch的数据请求与响应函数;前端文件上传XHR、Fetch;安装浏览器插件FeHelper

    早期的网页都是通过后端渲染来完成的,即服务器端渲染(SSR,server side render): 客户端发出请求 - 服务端接收请求并返回相应HTML文档 - 页面刷新,客户端加载新的HTML文档; 服务器端渲染的缺点: 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数

    2024年02月16日
    浏览(46)
  • 如何在Web浏览器中运行JavaScript代码

    为大家介绍如何在Web浏览器中运行JavaScript代码。 首先,让我们来了解一下JavaScript是什么。JavaScript是一种编程语言,它广泛用于Web开发中,可以让我们在网页上添加动态效果、交互性和动画等等。如果你想在Web浏览器中运行JavaScript代码,你需要先在浏览器中安装JavaScript引擎

    2024年02月16日
    浏览(28)
  • 前端---需要了解浏览器相关知识--浏览器请求服务器资源---缓存

    掘金1:浏览器缓存 掘金2 :浏览器缓存 跟别人怎么讲,从大的说:缓存的原理是什么? 再说什么是浏览器缓存? 浏览器缓存 请求(静态资源 | 动态资源) 一、缓存是什么? 二、为什么? 浏览器是如何判断是否使用缓存的??第一次请求网页 第二次请求相同网页: 三、怎

    2024年02月12日
    浏览(36)
  • 浏览器请求加Headers

    Chrome 应用商店安装 Modify Header Value 选项里添加 URL、Header Name、Header Value 添加 URL: http://127.0.0.1/ Header Name: Token Header Value: 123 访问 http://127.0.0.1:5000/ HTTP Headers - HTTP | MDN

    2024年02月07日
    浏览(28)
  • 浏览器请求导入postman

    简单三步 1. 复制请求 2.导入 3. send 1. 选择 复制- 复制为cURL(bash)  2. 打开postman 选择import - raw text - continue  然后点击  import 点击send        

    2024年02月13日
    浏览(32)
  • 浏览器网络请求——HTTP详解

    HTTP(Hyper Text Transfer Protocol): 超文本传输协议 ,是用层协议,用于从万维网服务器传输超文本到本地浏览器的传送协议。 截至目前,http 经历了原始版本、 http1.0、 http1.1、 http2.0 几个版本,新版本每次出现都针对上一个版本的不足进行加强 1.0 版本有个很大的缺点: TCP连

    2024年02月07日
    浏览(26)
  • 使用Postman拦截浏览器请求

    项目上线之后,难免会有BUG。在出现问题的时候,我们可能需要获取前端页面发送请求的数据,然后在测试环境发送相同的数据将问题复现。手动构建数据是挺麻烦的一件事,所以我们可以借助Postman在浏览器上的插件帮助拦截请求,获取发送的数据。 既然是基于Postman进行操

    2024年02月15日
    浏览(25)
  • 浏览器并发请求数以及解决办法

    页面卡顿,需要好长一段时间才能加载完成,有可能是资源请求过多,再加上请求响应慢的原因。每个浏览器都有资源请求并发数的限制,本文内容讲 如何查看请求阻塞情况 到前端如何针对该限制进行优化。 按 F12 查看浏览器控制台,如下图: 从 Waterfall 看出,前六个GET请

    2024年02月08日
    浏览(57)
  • 【python爬虫】10.指挥浏览器自动工作(selenium)

    上一关,我们认识了cookies和session。 分别学习了它们的用法,以及区别。 还做了一个项目:带着小饼干登录,然后在博客中发表评论。 除了上一关所讲的登录问题,在爬虫过程中,我们还可能会遇到各种各样棘手的问题—— 有的网站登录很复杂,验证码难以破解,比如大名

    2024年02月10日
    浏览(32)
  • 一键将浏览器请求导入到 Postman

    如果你想一键将浏览器请求导入到 Postman 中,可以使用以下两种方法: 方法一:使用 Postman 的“导入”功能 将浏览器中复制出来的 cURL 命令,打开 Postman 应用,点击左上角的“Import”按钮,选择“Import from Clipboard”,然后粘贴刚才保存的 cURL 命令,点击“Import”按钮。 Pos

    2024年02月08日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包