浏览器基础必知必会

程序员文章站 2022-05-14 23:46:09

...

浏览器常见内核

浏览器/RunTime	内核（渲染引擎）	JavaScript 引擎
Chrome	Blink（28~） Webkit（Chrome 27）	V8
FireFox	Gecko	SpiderMonkey
Safari	Webkit	JavaScriptCore
Edge	EdgeHTML	Chakra(for JavaScript)
IE	Trident	Chakra(for JScript)
PhantomJS	Webkit	JavaScriptCore
Node.js	-	V8

浏览器主要组成（Chrome浏览器每个标签页都对应一个呈现引擎实例，每个标签页都是一个独立的进程）
- 用户界面：包括地址栏、前进/后退按钮、书签菜单等
- 浏览器引擎：在用户界面和呈现引擎之间传递指令
- 呈现引擎：负责显示请求的内容
- 网络：用于网络调用，比如HTTP请求
- 用户界面后端：用于绘制基本的窗口小部件，比如组合框和窗口
- JavaScript解释器：用于解释和执行JavaScript代码
- 数据存储
浏览器UI渲染
- 浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
- 与此同时，进行CSS解析，生成Style Rules
- 接着将DOM Tree和Style Rules合成为Render Tree
- 接着进入布局（Layout）阶段，也就是为每个节点分配出现在屏幕上的确切坐标
- 然后调用GPU进行绘制，遍历Render Tree的节点，并将元素呈现出来
浏览器如何解析CSS选择器：浏览器会从右往左解析CSS选择器，这样更高效，可以避免很多无效的查找
```
.mod-nav h3 span {font-size: 16px;}复制代码
```
DOM Tree构建
- 转码：浏览器将接收到的二进制数据按照指定的编码格式转换为HTML字符串
- 生成Tokens：浏览器将HTML字符串解析成Tokens
- 构建Nodes：对Node添加特定的属性，通过指针确定Node的父、子、兄弟关系和所属的treeScope
- 生成DOM Tree：通过Node包含的指针确定的关系构建出DOM Tree
重绘与重排的区别
- 重排：渲染树需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素
- 重绘：节点的几何属性发生改变或样式发生改变，表现为元素的外观发生改变
- 重排的性能影响大于重绘的性能影响
- 重绘不一定会出现重排，重排一定会出现重绘
如何触发重排和重绘
- 添加、删除、更新DOM节点
- 通过display: none隐藏一个节点——触发重排和重绘
- 通过visibility: hidden隐藏一个节点——触发重绘，因为没有几何变化
- 移动或者给页面中的DOM节点添加动画
- 添加一个样式表，调整样式属性
- 用户行为，例如调整窗口大小，改变字号，或者滚动
如何避免重排或重绘
- 通过改变class的方式集中改变样式
- 使用DocumentFragment
- 通过CSS的will-change属性提升为合成层
前端实现即时通讯方式
- 短轮询
  - 优点：兼容性强，实现非常简单
  - 缺点：延迟性高，非常消耗请求资源，影响性能
- comet
  - 基于AJAX的长轮询方式
    - 优点：兼容性好，资源浪费较小
    - 缺点：服务器hold连接会浪费资源，返回数据顺序无保证，难以管理维护
  - 基于Iframe及htmlfile的流方式（长连接）
    - 优点：兼容性好，消息即时到达，不发无用请求
    - 缺点：服务器维护长连接消耗资源
- SSE：Server-Sent Event，服务端推送事件，是一种允许服务端向客户端推送新数据的HTML5技术
  - 优点：基于HTTP而生，不需要太多改造即可使用，而websocket则相对复杂，大多时候需要借助成熟的库或框架
  - 缺点：基于文本传输，效率没有websocket高，不是严格的双向通信，客户端向服务端发送请求无法复用之前的连接，需要重新发出独立的连接
- Websocket：全新的、独立的协议，基于TCP协议，与HTTP协议兼容，作为html5的一部分，其作用是在服务器和客户端建立实时的双向通信
  - 优点：真正意义上的实时双向通信，性能好，延迟低
  - 缺点：独立于HTTP协议，因此需要额外项目改造，使用复杂度相对较高，需要引入成熟的库，无法兼容低版本浏览器
浏览器同源策略
- 同源：“协议+域名+端口”三者相同
- 同源策略限制了从同一个源加载的文件或脚本与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制
- 不受同源策略限制的标签：link、img、script
跨域实现
- jsonp
  - 优点
    - 实现简答
    - 兼容性好
  - 缺点
    - 只支持get请求
    - 有安全性问题，容易遭受xss攻击
    - 需要服务端配合jsonp做一定程度的改造
- 跨域资源共享（CORS）
```
res.header('Access-Control-Allow-Origin', 'http://example.com');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type')复制代码
```
- Nginx转发（首选）
  - 实现方便
  - 轻量级
  - 启动快
  - 高并发