浏览器详解

Amos 发布于2019-08-22 15:11 / 721人阅读

摘要：渲染引擎也称为呈现引擎浏览器内核，负责显示请求的内容。引擎是基于事件驱动单线程执行的，引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个线程在运行程序。

1 浏览器结构

浏览器分为以下7个部分：

用户界面

浏览器引擎：在用户界面和呈现引擎之间传送指令。

渲染引擎：也称为呈现引擎/浏览器内核，负责显示请求的内容。

不同的浏览器有不同的呈现引擎，例如：
Chrome: Blink。Blink是Webkit的一个分支，添加了一些优化新特性。
Safari: Webkit
Firfox: Gecko
IE: Trident

网络：用于网络调用，比如 HTTP 请求。

用户界面后端：用于绘制基本的窗口小部件，比如组合框和窗口。

JavaScript 解释器：用于解析和执行 JavaScript 代码。又称为 JavaScript 引擎，也可以成为 JavaScript 内核，在线程方面又称为 JavaScript 引擎线程。

同样不同的浏览器有不同的JS解释器，例如：
Chrome: V8引擎。之前是机器码，最近重回字典码
Safari: JavaScriptCore引擎
Firfox: Ion引擎
PS：不同浏览器间引擎性能差距不大，详见https://arewefastyet.com

数据存储：这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。

2 浏览器占比 2.1 PC浏览器占比

2018年2月份占比

2.2 移动浏览器占比

3 渲染引擎详解

浏览器渲染引擎最重要的工作就是将 HTML 和 CSS 文档解析组合最终渲染到浏览器窗口上。如下图所示：

解析 HTML 构建 DOM 树时渲染引擎会将 HTML 文件的便签元素解析成多个 DOM 元素对象节点，并且将这些节点根据父子关系组成一个树结构。同时 CSS 文件被解析成 CSS 规则表，然后将每条 CSS 规则按照「从右向左」的方式在 DOM 树上进行逆向匹配，生成一个具有样式规则描述的 DOM 渲染树。接下来就是将渲染树进行布局、绘制的过程。首先根据 DOM 渲染树上的样式规则，对 DOM 元素进行大小和位置的定位，关键属性如position;width;margin;padding;top;border;...，接下来再根据元素样式规则中的color;background;shadow;...规则进行绘制。

另外，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

再者，需要注意的是，在浏览器渲染完首屏页面后，如果对 DOM 进行操作会引起浏览器引擎对 DOM 渲染树的重新布局和重新绘制，我们叫做「重排」和「重绘」，由于重排和重绘是前后依赖的关系，重绘发生时未必会触发渲染引擎的重排，但是如果发生了重排就必然会触发重绘操作，这样带来的性能损害就是巨大的。因此我们在做性能优化的时候应该遵循「避免重排；减少重绘」的原则。[1]

4 浏览器的进程与线程 4.1 浏览器的进程

在浏览器刚被设计出来的时候，那时的网页非常的简单，每个网页的资源占有率是非常低的，因此一个进程处理多个网页时可行的。然后在今天，大量网页变得日益复杂。把所有网页都放进一个进程的浏览器面临在健壮性，响应速度，安全性方面的挑战。因为如果浏览器中的一个tab网页崩溃的话，将会导致其他被打开的网页应用。另外相对于线程，进程之间是不共享资源和地址空间的,所以不会存在太多的安全问题，而由于多个线程共享着相同的地址空间和资源,所以会存在线程之间有可能会恶意修改或者获取非授权数据等复杂的安全问题。
因此Chrome浏览器针对每一个tab页签，都开了一个进程。

4.2 浏览器的线程

浏览器的内核是多线程的，它们在内核控制下相互配合以保持同步，一个浏览器大概会有以下几个线程：JavaScript引擎线程，GUI渲染线程（又称为UI主线程），浏览器事件触发线程，异步 HTTP 请求线程（Chrome最多并发6个）。

JavaScript引擎是基于事件驱动单线程执行的，JavaScript引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。

var isEnd = true;
window.setTimeout(function () {
    isEnd = false;//1s后，改变isEnd的值
}, 1000);
//这个while永远的占用了js线程，所以setTimeout里面的函数永远不会执行
while (isEnd);

GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(Reflow)时，该线程就会执行。但需要注意，GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。

事件触发线程，当一个事件被触发时，该线程会把事件添加到待处理队列的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等，但由于JavaScript的单线程关系，所有这些事件都得排队等待JavaScript引擎处理（当线程中没有执行任何同步代码的前提下才会执行异步代码）。[2]

console.log(1)
setTimeout(function() {
    console.log(2)
}, 0)
console.log(3) // 输出结果1,3,2

4.3 开启额外的线程-Web Worker

如下图，耗时JS的同步加载会阻拦页面的渲染，这时候如果有一个线程可以处理这个耗时js就好了。Web Worker可以创建一个新的进程，来和UI主线程并发运行。但是这个新进程不能操作Dom对象, 只能用来处理复杂的JS的操作。

使用方法：

// main.js
var worker = new Worker("task.js");
worker.postMessage(
        {
            id:1,
            msg:"Hello World"
        }
);
worker.onmessage=function(message){
    var data = message.data;
    console.log(JSON.stringify(data));
    worker.terminate();
};
worker.onerror=function(error){
    console.log(error.filename,error.lineno,error.message);
}
// task.js
onmessage = function(message){
    var data=message.data;
    data.msg = "Hi from task.js";
    postMessage(data);
}

可以看到，两个js之间通过事件通讯。尽管Web Worker在大量数据的检索、数据运算上能提供一些帮助，但是使用面还是比较窄的。

5 页面加载优化

《雅虎前端优化35条规则翻译》
《优化JavaScript执行》

服务器托管专线服务判断详解日志详解属性详解算法详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93245.html

八问WebSocket协议：为你快速解答WebSocket热门疑问

一、引言 WebSocket是一种比较新的协议，它是伴随着html5规范而生的，虽然还比较年轻，但大多主流浏览器都已经支持。它使用方面、应用广泛，已经渗透到前后端开发的各种场景中。对http一问一答中二式流程（就是从所周之的长轮询技要啦）的不满，催生了支持双向通信的WebSocket诞生。WebSocket是个不太干净协议。本文将从8个常见的疑问入手，为还不了解WebSocket协议的开发者快...

Zoom 2019-08-05 16:49 评论0 收藏0
HTML中meta标签详解；property=og标签详解

摘要：是用来在文档中模拟协议的响应头报文。标签是语言区的一个辅助性标签，它位于文档头部的标记和标记之间，它提供用户不可见的信息。 meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的coo...

Little_XM 2019-08-01 15:11 评论0 收藏0
web响应式布局之 meta详解

摘要：响应式布局详解之标签添加的属性详解表示设置屏幕按的尺寸显示，在和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。这个是的专用标记，是用来指定浏览器模拟某个特定版本浏览器的渲染方式，以此来解决浏览器的兼容问题。响应式布局详解之head标签添加的属性详解表示:设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。表...

233jl 2019-08-05 17:53 评论0 收藏0
web响应式布局之 meta详解

摘要：响应式布局详解之标签添加的属性详解表示设置屏幕按的尺寸显示，在和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。这个是的专用标记，是用来指定浏览器模拟某个特定版本浏览器的渲染方式，以此来解决浏览器的兼容问题。响应式布局详解之head标签添加的属性详解表示:设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。表...

yuanzhanghu 2019-08-30 15:52 评论0 收藏0
web响应式布局之 meta详解

摘要：响应式布局详解之标签添加的属性详解表示设置屏幕按的尺寸显示，在和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。这个是的专用标记，是用来指定浏览器模拟某个特定版本浏览器的渲染方式，以此来解决浏览器的兼容问题。响应式布局详解之head标签添加的属性详解表示:设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。表...

shixinzhang 2019-08-01 16:20 评论0 收藏0
「JavaScript」JS两种服务端相关跨域方法详解

摘要：之前我们讲了一下四种跨域的方式四种跨域方式详解。这四种方式是使用纯来进行跨域的。今天就介绍两种有涉及到服务器的跨域技术。之前我们讲了一下四种 JavaScript 跨域的方式 - 「JavaScript」四种跨域方式详解。这四种方式是使用纯 JavaScript 来进行跨域的。今天就介绍两种有涉及到服务器的跨域技术。一、反向代理服务器基础思想很简单，将你的服务器配置成需要跨域...

kid143 2019-08-21 10:39 评论0 收藏0