前端面试 浏览器之番外篇--与前端密不可分的...

260 阅读3分钟

与前端密不可分的浏览器你了解多少呢??
让我们一起看一下~

浏览器基础结构 (相关了解)

  • 用户界面(User Interface):包括地址栏、后退/前进按钮、书签目录等,就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分地址栏、后退/前进按钮、书签目录等看到的

  • 浏览器引擎(Browser Engine): 浏览器引擎可以加载一个给定的URI,并支持诸如:前进/后退/重新加载等浏览操作;
    浏览器引擎提供查看浏览会话的各个方面的挂钩,例如:当前页面加载进度、JavaScript alert、、、;用来查询及操作渲染引擎的接口

  • 渲染引擎 (Rendering Engine): 渲染引擎能够显示HTML和XML文档,可选择CSS样式,以及嵌入式内容(如img) 渲染引擎能够准确计算页面布局,可使用“回流”算法逐步调整页面元素的位置。
    渲染引擎内部包含HTML解析器。用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来

  • 网络(Networking): 实现HTTP和FTP等文件传输协议。
    可以在不同的字符集之间进行转换,为文件解析MIME媒体类型。
    实现最近检索资源的缓存功能用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作

  • XML解析器(XML Parser): XML解析器可以将XML文档解析成文档对象模型(Document Object Model,DOM)树。
    XML解析器是浏览器架构中复用最多的子系统之一,几乎所有的浏览器实现都利用现有的XML解析器,而不是从头开始创建自己的XML解析器。

  • JS解释器(JavaScript Interpreter):JavaScript解释器能够解释并执行嵌入在网页中的JavaScript(又称ECMAScript)代码。用来解释执行JS代码的

  • 显示后端 (Display Backend):用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。

  • 数据持久层 (Data Persistence): 数据持久层将与浏览会话相关联的各种数据存储在硬盘上。
    这些数据可能是诸如:书签、工具栏设置等这样的高级数据,也可能是诸如:Cookie,安全证书、缓存等这样的低级数据。轻量级完整的客户端存储技术

常见的浏览器内核有哪些(很base)

浏览器内核:,主要由2部分组成,模版引擎(渲染引擎)JS 引擎; 可以理解为排版引擎(由于js引擎越来越独立,内核只倾向于只指渲染引擎,负责请求网络页面资源,解析排版并渲染呈现出来)
排版引擎(渲染引擎): 主要是负责获取网页内容(HTMLXML图像CSSJS)等信息进行解析、渲染网页,将网页的代码转换为看得到的页面;
JS 引擎: 解析 Javascript 脚本,执行 Javascript脚本来实现网页的动态效果;

  • Webkit: Chrome(早期谷歌浏览器,后期Blink),Safari

  • Trident: Internet Explorer(IE浏览器,逐渐被替代)

  • Presto:Opera浏览器(2013年被Blink取代)

  • Blink: Chrome、Opera

  • Gecko:Firefox (火狐浏览器)

  • Chromium(谷歌开源):Chrome 是 Chromium 的稳定版(国内的大部分双核浏览器都采用 Chromium 内核)

    1661755331788.jpg 以上的相关简单信息哦~~

    但table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因

image.png 发文引入问题: 欢迎大家留言!!! 一起探讨与前端密不可分的东西有哪些?