浏览器原理

有兴趣读一下

常⻅的浏览器内核有哪些

360浏览器：Chrome内核和IE内核。 百度浏览器：IE和Webkit双内核。 QQ浏览器：Chromium内核+IE双内核。 猎豹浏览器：Trident(IE内核)和WebKit。 搜狗浏览器：chromium内核

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

渲染引擎

• 渲染网页代码
• 页面生成以后，脚本操作和样式表操作，都会触发“重流”和“重绘” js引擎（又称 JS 解释器）
• 读取网页中的 JS 代码，对其处理后运行
• JS 是一种解释型语言，也就是说，它不需要编译，由解释器实时运行。运行速度慢于编译型
• 为了提高运行速度，目前的浏览器都将JS进行一定程度的编译，生成类似字节码的中间代码，以提高运行速读
• 字节码不能直接运行，而是运行在一个虚拟机（Viryual Machine）上，一般也把虚拟机称为 JS 引擎（如V8引擎）

浏览器是如何渲染UI的

1. 浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
2. 与此同时，进行CSS解析，生成Style Rules
3. 接着将DOM Tree与Style Rules合成为 Render Tree
4. 接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标

浏览器如何解析css选择器

浏览器从右往左（也称为自底向上）解析 CSS 选择器，这样的匹配节点的方式可以快速、准确的与 render 树上的节点进行匹配，避免了许多无效匹配。浏览器需要评估的规则越少，样式引擎执行的速度就越快。

DOM Tree是如何构建的

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

浏览器重绘与重排的区别

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

如何触发重排和重绘

任何改变⽤来构建渲染树的信息都会导致⼀次重排或重绘： 添加、删除、更新DOM节点 通过display: none隐藏⼀个DOM节点-触发重排和重绘 通过visibility: hidden隐藏⼀个DOM节点-只触发重绘，因为没有⼏何变化 移动或者给⻚⾯中的DOM节点添加动画 添加⼀个样式表，调整样式属性 ⽤户⾏为，例如调整窗⼝⼤⼩，改变字号，或者滚动。

如何避免重绘或者重排

1、减少直接操作dom元素，改用className用于控制
2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘
3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发reflow的
4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
5、如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

前端如何实现即时通讯

基于Web的前端，存在以下可实现即时通信的方式：

短轮询（历史方案）

• 开启个定时器，每隔一短时间发送请求（实时性不强）

Comet - ajax 长轮询（历史方案）

• 发送一个请求，服务器只要数据不更新，就一直阻塞（服务器压力过大）

SSE

• 利用了 http协议，流数据的传输并不是严格意义的双向通信，无法复用连接

Websocket（主流）

• 性能和效率都高

什么是浏览器同源策略

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。同源策略/SOP（Same origin policy）是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易受到 XSS、 CSFR 等攻击。

如何实现跨域

1、jsonp
利用了 script 不受同源策略的限制
缺点：只能 get 方式，易受到 XSS攻击

2、CORS（Cross-Origin Resource Sharing）,跨域资源共享
当使用XMLHttpRequest发送请求时，如果浏览器发现违反了同源策略就会自动加上一个请求头 origin；
后端在接受到请求后确定响应后会在 Response Headers 中加入一个属性 Access-Control-Allow-Origin；
浏览器判断响应中的 Access-Control-Allow-Origin 值是否和当前的地址相同，匹配成功后才继续响应处理，否则报错
缺点：忽略 cookie，浏览器版本有一定要求

3、代理跨域请求(Nginx)
前端向发送请求，经过代理，请求需要的服务器资源
缺点：需要额外的代理服务器

4、Html5 postMessage 方法
允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本、多窗口、跨域消息传递
缺点：浏览器版本要求，部分浏览器要配置放开跨域限制

5、修改 document.domain 跨子域
相同主域名下的不同子域名资源，设置 document.domain 为 相同的一级域名
缺点：同一一级域名；相同协议；相同端口

6、基于 Html5 websocket 协议
websocket 是 Html5 一种新的协议，基于该协议可以做到浏览器与服务器全双工通信，允许跨域请求
缺点：浏览器一定版本要求，服务器需要支持 websocket 协议

7、document.xxx + iframe
通过 iframe 是浏览器非同源标签，加载内容中转，传到当前页面的属性中
缺点：页面的属性值有大小限制