浏览器的相关知识

今天在网上找到了一些需要大致了解的有关浏览器的相关知识分享，原文链接在下方

1.浏览器的主要组成部分是什么？

• 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
• 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
• 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
• 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
• 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
• JavaScript 解释器。用于解析和执行 JavaScript 代码。
• 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

2.浏览器是如何渲染UI的？

• 浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
• 与此同时，进行CSS解析，生成Style Rules
• 接着将DOM Tree与Style Rules合成为 Render Tree
• 接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
• 随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来

3.DOM Tree是如何构建的？

• 转码: 浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串
• 生成Tokens: 之后开始parser，浏览器会将HTML字符串解析成Tokens
• 构建Nodes: 对Node添加特定的属性，通过指针确定 Node 的父、子、兄弟关系和所属 treeScope
• 生成DOM Tree: 通过node包含的指针确定的关系构建出DOM Tree

4.浏览器重绘与重排的区别？

• 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素
• 重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

5.如何触发重排和重绘？

• 添加、删除、更新DOM节点
• 通过display: none隐藏一个DOM节点-触发重排和重绘
• 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的DOM节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

6.什么是浏览器同源策略？

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

7.如何实现跨域？

1.jsonp本质上是一个Hack，它利用<script>标签不受同源策略限制的特性进行跨域操作。

jsonp优点：

• 实现简单
• 兼容性非常好

jsonp的缺点：

• 只支持get请求（因为<script>标签只能get）
• 有安全性问题，容易遭受xss攻击
• 需要服务端配合jsonp进行一定程度的改造

2.cors是目前主流的跨域解决方案，跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。