浏览器原理面试题前端「前端面试进阶之浏览器原理」(12) _为什么网页跳转到淘宝

（8）百度浏览器、世界之窗内核：IE 内核；
（9） 2345浏览器内核：好像以前是 IE 内核，现在也是 IEChrome 双内核了；
（10）UC 浏览器内核：这个众口不一， UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident，还有说是基于火狐内核。
5. 浏览器的主要组成部分
?户界? - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗?显示的您请求的??外，其他显示的各个部分都属于?户界? 。
浏览器引擎 - 在?户界?和呈现引擎之间传送指令。
呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
?络 - ?于?络调?，?如 HTTP 请求。其接?与平台?关，并为所有平台提供底层实现。
?户界?后端 - ?于绘制基本的窗??部件，?如组合框和窗? 。其公开了与平台?关的通?接? ， ?在底层使?操作系统的?户界??法。
JavaScript 解释器。?于解析和执? JavaScript 代码。
数据存储 - 这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie 。新的 HTML 规范 (HTML5) 定义了“?络数据库”，这是?个完整（但是轻便）的浏览器内数据库。
值得注意的是，和?多数浏览器不同，Chrome 浏览器的每个标签?都分别对应?个呈现引擎实例。每个标签?都是?个独?的进程。
五、浏览器渲染原理
1. 浏览器的渲染过程
浏览器渲染主要有以下步骤：
首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
然后对 CSS 进行解析，生成 CSSOM 规则树。
根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排” 。
布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。
大致过程如图所示：
image
**注意：**这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
2. 浏览器渲染优化
**（1）针对JavaScript：**JavaScript既会阻塞HTML的解析，也会阻塞CSS的解析。因此我们可以对JavaScript的加载方式进行改变，来进行优化：
（1）尽量将JavaScript文件放在body的最后
（2） body中间尽量不要写
服务端返回如下（返回时即执行全局函数）：
handleCallback({"success": true, "user": "admin"})
2）Vue axios实现：
this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
后端node.js代码：
var querystring = require('querystring');
var http = require('http');

浏览器原理面试题 前端「前端面试进阶之浏览器原理」(12)

浏览器原理面试题前端「前端面试进阶之浏览器原理」(12)