LIJIWEI0611的博客

解决：C:\chromium>export DEPOT_TOOLS_UPDATE=0。

explicit MathImpl(mojo::PendingReceiver<math::mojom::Math> receiver)的使用。Invition 机制。

"disable_d3d11" 代表禁用d3d11。(以下d3d11==gl3，d3d9==gl2)

这个窗口是gpu进程创建的，作为一个子窗口嵌入到父窗口 Chrome_WidgetWin_1 中，chrome在使用gpu渲染时，网页的渲染最后会在GPU中渲染，即 Intermediate D3D Window 窗口。所以，我们需要一个假的 HWND，其窗口类为Chrome_RenderWidgetHostHWND 作为可访问性树的根每个选项卡。默认容器窗口是包含网页的整个窗口WebContents 等。// 用于匹配 Chrome 窗口的窗口类的前缀。浏览器将其重新设置为其窗口的子窗口。

这个方法基于的规则：当RunLoop::Run进入delegate_->Run后，执行的是MessagePump::Run，只要退出了MessagePump::Run就意味着退出RunLoop::Run。// 已拥有一个base::Thread的指针。SequencedTaskRunnerHandle::Get()执行的是访问局部存储，把sequenced_task_runner_tls中成员task_runner_（不是sequenced_task_runner_tls）值返回给app。

BindOnce 是如何实现的呢？翻看源码：base\functional\bind.h写的 非常简洁重要的也就是最后一句：构造一个BindImpl，同时完美转发BindState的实现其中用到了std::tuple？？

Broker提供介绍机制（Introduce）帮助一对node建立IPC链接broker是个特殊的node channel，规定只有它能introduce（通过调用的能力找到两个node）并发送Introduce message，这就要求broker需要跟每个node都有链接node与node之间一开始只有IPC点对点通信，假如要发给另一个node，但是和当前node之间没有直接的IPC，则需要通过broker建立一个新的IPC通道，消息就是这个过程.

Mojom 是 Mojo 接口的 IDL。给定一个.mojom文件，绑定生成器C++JavaScript或Java。举一个简单的例子，考虑我们写入的以下假设的 Mojom 文件这定义了一个名称为Frobinator的interface，它在widget.mojom模块，因此它的全称是如果我们将相应的 GN 目标添加到etc...这些生成的源模块中的每一个都包含一组用 C++ 表示 Mojom 内容的定义。您还可以构建或依赖带后缀的目标名称来获取其他语言的绑定。例如，

为了教导生成的绑定代码如何将任意本机类型序列T化为任意 Mojom 类型mojom::U，我们需要定义模板的适当特化。有效特化必须定义以下静态方法：Mojom 结构的每个字段的单个静态访问器，与结构字段具有完全相同的名称。这些访问器都必须采用（最好是 const）引用到本机类型的对象，并且必须返回与 Mojom 结构字段的类型兼容的值。这用于在消息序列化期间安全且一致地从本机类型中提取数据，而不会产生额外的复制成本。一个单一的静态Read。

概述是一个组件，像 Chromium 这样的大型应用程序可以使用它来支持跨平台、多进程、面向服务、连字符形容词负载的体系结构。本文档介绍了如何将嵌入到应用程序中，以及如何定义和注册服务以供其管理。如果您只想阅读有关定义服务和使用公共服务 API 的内容，请跳至主要部分。

123

123

git地址：首先克隆仓库QCefViewgit clone https://github.com/CefView/QCefView.git然后进入QCefView文件夹，执行 git submodule update --init --recursive这样可以拉下来子仓库克隆CefViewCore

因为我的项目是基于qt的来做的，而qt的运行时库是MDd类型的，因此cef3编译的时候也应该遵循这个运行时库的编译方式 我在网上也看到了不少介绍创建cef项目的办法，不过个人觉得好多都是只讲过程，不讲原理，其实使用这个库很简单，我直- 说debug模式，release照搬。首先拷贝exe执行所需资源文件和运行时库(Resources目录下的除include文件夹、Debug目录下所有动态库)，然后拷贝连接器的静态库(out/Debug/lib目录下的静态库、Debug目录下的所有静态库) ..

cef下载cef:下载地址https://cef-builds.spotifycdn.com/index.html选择了87版本+32位cmake生成vs工程文件设置源码路径：D:/demo/cef+qtdemo/cef_binary_87.1.14+ga29e9a3+chromium-87.0.4280.141_windows32设置编译结果路径：D:/demo/cef+qtdemo/cef_binary_87.1.14+ga29e9a3+chromium-87.0.4..

123

1. 什么是 PWAPWA，全称是 Progressive Web App，翻译过来就是渐进式网页应用。根据字面意思，它就是“渐进式 +Web 应用”。对于 Web 应用很好理解了，就是目前我们普通的 Web 页面，所以 PWA 所支持的首先是一个 Web 页面。至于“渐进式”，就需要从下面两个方面来理解。 站在 Web 应用开发者来说，PWA 提供了一个渐进式的过渡方案，让普通站点逐步过渡到 Web 应用。采取渐进式可以降低站点改造的代价，使得站点逐步支持各项新技术，而不是一步到位。

虚拟 DOM 是最近非常火的技术，两大著名前端框架 React 和 Vue 都使用了虚拟 DOM，所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了，React 和 Vue 框架本身所蕴含的知识点非常多，而且也不是我们专栏的重点，所以在这里我们还是把重心聚焦在虚拟 DOM 上。　　在本文我们会先聊聊 DOM 的一些缺陷，然后在此基础上介绍虚拟 DOM 是如何解决这些缺陷的，最后再站在双缓存浏览器缓存和MVC的视角来聊聊虚拟 DOM。理解了这些会让你对目前的...

在前面几篇文章中，我们分析了页面加载和 DOM 生成，讨论了 JavaScript 和 CSS 是如何影响到 DOM 生成的，还结合渲染流水线来讲解了分层和合成机制，同时在这些文章里面，我们还穿插说明了很多优化页面性能的最佳实践策略。通过这些知识点的学习，相信你已经知道渲染引擎是怎么绘制出帧的，不过之前我们介绍的内容比较零碎、比较散，那么今天我们就来将这些内容系统性地串起来。　　那么怎么才能把这些知识点串起来呢？我的思路是从如何系统优化页面速度的角度来切入。　　这里我们所谈论的页面优...

在上一篇文章中我们分析了 CSS 和 JavaScript 是如何影响到 DOM 树生成的，今天我们继续沿着渲染流水线向下分析，来聊聊 DOM 树之后所发生的事情。　　在前面《05 | 渲染流程(上)：HTML、CSS 和 JavaScript 文件，是如何变成页面的？》文章中，我们介绍过 DOM 树生成之后，还要经历布局、分层、绘制、合成、显示等阶段后才能显示出漂亮的页面。　　本文我们主要讲解渲染引擎的分层和合成机制，因为分层和合成机制代表了浏览器最为先进的合成技术，Chrome 团队...

在上一篇文章中我们详细介绍了 DOM 的生成过程，并结合具体例子分析了 JavaScript 是如何阻塞 DOM 生成的。那本文我们就继续深入聊聊渲染流水线中的 CSS。因为 CSS 是页面中非常重要的资源，它决定了页面最终显示出来的效果，并影响着用户对整个网站的第一体验。所以，搞清楚浏览器中的 CSS 是怎么工作的很有必要，只要理解了 CSS 是如何工作的，你才能更加深刻地理解如何取优化页面。　　本文我们先站在渲染流水线的视角来介绍 CSS 是如何工作的，然后通过 CSS 的工作流程来...

在上一篇文章中，我们通过开发者工具中的网络面板，介绍了网络请求过程的几种性能指标以及对页面加载的影响。而在渲染流水线中，后面的步骤都直接或者间接地依赖于 DOM 结构，所以本文我们就继续沿着网络数据流路径来介绍 DOM 树是怎么生成的。然后再基于 DOM 树的解析流程介绍两块内容：第一个是在解析过程中遇到 JavaScript 脚本，DOM 解析器是如何处理的？第二个是 DOM 解析器是如何处理跨站点资源的？什么是 DOM从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以

浏览器中的页面循环系统”模块我们已经介绍完了，循环系统是页面的基础，理解了循环系统能让我们从本质上更好地理解页面的工作方式，加深我们对一些前端概念的理解。　　 接下来我们就要进入新的模块了，也就是“浏览器中的页面”模块，正如专栏简介中所言，页面是浏览器的核心，浏览器中的所有功能点都是服务于页面的，而 Chrome 开发者工具又是工程师调试页面的核心工具，所以在这个模块的开篇，我想先带你来深入了解下 Chrome 开发者工具。　　Chrome 开发者工具（简称 DevTools）是一组...

　在上一篇文章中，我们介绍了怎么使用 Promise 来实现回调操作，使用 Promise 能很好地解决回调地狱的问题，但是这种方式充满了 Promise 的 then() 方法，如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程。　　比如下面这样一个实际的使用场景：我先请求极客邦的内容，等返回信息之后，我再请求极客邦的另外一个资源。下面代码展示的是使用 fetch 来实现这样的需求，fetch 被定义在 window 对象中，可以用它来发起对远程资源的请

在上一篇文章中我们聊到了微任务是如何工作的，并介绍了 MutationObserver 是如何利用微任务来权衡性能和效率的。今天我们就接着来聊聊微任务的另外一个应用Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 Promise。可以这么说，Promise 已经成为现代前端的 “水” 和 “电”，很是关键，所以深入学习 Promise 势在必行。　　不过，Promise 的知识点有那么多，而我们只有一篇文...

在前面的几篇文章中，我们介绍了消息队列，并结合消息队列介绍了两种典型的 WebAPI ——setTimeout和XMLHttpRequest，通过这两个 WebAPI 我们搞清楚了浏览器的消息循环系统是怎么工作的。不过随着浏览器的应用领域越来越广泛，消息队列中这种粗时间颗粒度的任务已经不能胜任部分领域的需求，所以又出现了一种新的技术——微任务。微任务可以在实施姓名和效率之间做一个有效的权衡。　　从目前的情况来看，微任务已经被广泛地应用，基于微任务的技术有 MutationObs...

在上一篇文章中我们介绍了 setTimeout 是如何结合渲染进程的循环系统工作的，那本篇文章我们就继续介绍另外一种类型的 WebAPI —— XMLHttpRequest。　　自从网页中引入了 JavaScript，我们就可以操作 DOM 树中任意一个节点，例如隐藏 / 显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等，几乎可以 “为所欲为” 了。　　不过在 XMLHttpRequest 出现之前，如果服务器数据有更新，依然需要重新刷新整个页面。而 XMLHttpRe...

在上一篇文章中我们介绍了页面中的事件和消息队列，知道了浏览器页面是由消息队列和事件循环系统来驱动的。　　那在接下来的两篇文章中，我会通过setTimeout和XMLHttpRequest这两个 WebAPI 来介绍事件循环的应用。这两个 WebAPI 是两种不同类型的应用，比较典型，并且在 JavaScript 中的使用频率非常高。你可能觉得它们太简单、太基础，但有时候恰恰是基础简单的东西才最重要，了解它们是如何工作的会有助于你写出更加高效的前端代码。　　本篇文章主要介绍的是...

　 前面我们讲到了每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理DOM，又要计算样式，还要处理布局，同时还需要处理JavaScript任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行，这就需要一个系统来统筹调度这些任务，这个统筹调度系统就是我们今天要讲的消息队列和事件循环系统。　　在写这篇文章之前，我翻阅了大量的资料，却发现没有一篇文章能把消息循环系统给讲清楚的，所以我决定用一篇文章来专门介绍页面的事件循环系统。事件循环非常底层且非常重要，学会它能让你理解页面...

站在 JavaScript 引擎 V8 的视角，来分析 JavaScript 代码是如何被执行的。前端工具和框架的自身更新速度非常块，而且还不断有新的出现。要想追赶上前端工具和框架的更新速度，你就需要抓住那些本质的知识，然后才能更加轻松地理解这些上层应用。比如我们接下来要介绍的 V8 执行机制，能帮助你从底层了解 JavaScript，也能帮助你深入理解语言转换器 Babel、语法检查工具 ESLint、前端框架 Vue 和 React 的一些底层实现机制。因此，了解 V8 的编译流程能让你对语言以及相

在上一篇文章中，我们提到了 JavaScript 中的数据是如何存储的，并通过例子分析了原始数据类型是存储在栈空间中的，引用类型的数据是存储在堆空间中的。通过这种分配方式，我们解决了数据的内存分配的问题。　　不过有些数据被使用之后，可能就不再需要了，我们把这种数据称为垃圾数据。如果这些垃圾数据一直保存在内存中，那么内存会越用越多，所以我们需要对这些垃圾数据进行回收，以释放有限的内存空间。不同语言的垃圾回收策略　　通常情况下，垃圾数据回收分为手动回收和自动回收两种策略。　　如 ...

对于前端开发者来说，JavaScript 的内存机制是一个不被经常提及的概念 ，因此很容易被忽视。特别是一些非计算机专业的同学，对内存机制可能没有非常清晰的认识，甚至有些同学根本就不知道 JavaScript 的内存机制是什么但是如果你想成为行业专家，并打造高性能前端应用，那么你就必须要搞清楚JavaScript 的内存机制了。其实，要搞清楚 JavaScript 的内存机制并不是一件很困难的事，在接下来的三篇文章（数据在内存中的存放、JavaScript 处理垃圾回收以及 V8 执行代码）中，我们

在上篇文章中，我们讲了词法作用域、作用域链以及闭包，并在最后思考题中留了下面这样一段代码var bar = { myName:"time.geekbang.com", printName: function () { console.log(myName) } }function foo() { let myName = " 极客时间 " return bar.printName}let myName = " 极客邦 "let _

理解作用域链是理解闭包的基础，而闭包在 JavaScript 中几乎无处不在，同时作用域和作用域链还是所有编程语言的基础。所以，如果你想学透一门语言，作用域和作用域链一定是绕不开的那今天我们就来聊聊什么是作用域链，并通过作用域链再来讲讲什么是闭包。首先我们来看下面这段代码：function bar() { console.log(myName)}function foo() { var myName = " 极客邦 " bar()}var myName = "

由于 JavaScript 存在变量提升这种特性，从而导致了很多与直觉不符的代码，这也是 JavaScript 的一个重要设计缺陷。分析为什么在 JavaScript 中会存在变量提升，以及变量提升所带来的问题 介绍如何通过块级作用域并配合 let 和 const 关键字来修复这种缺陷作用域（scope）作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。在 ES6 之前，ES 的作用域只

在上篇文章中，我们讲到了，当一段代码被执行时，JavaScript引擎先会对其进行编译，并创建执行上下文。但是并没有明确说明到底什么样的代码才算符合规范那么接下来我们就来明确下，哪些情况下代码才算是“一段”代码，才会在执行之前就进行编译并创建执行上下文。一般说来，有这么三种情况当JavaScript执行全局代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。 当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束

讲解完宏观视角下的浏览器后，从这篇文章开始，我们就进入下一个新的模块了，这里我会对JavaScript执行原理做深入介绍。今天在该模块的第一篇文章，我们主要讲解执行上下文相关的内容。那为什么先讲执行上下文呢？它这么重要吗？可以这么说，只有理解了JavaScrip的执行上下文，你才能更好地理解JavaScript语言本身，比如变量提升、作用域和闭包等。不仅如此，理解执行上下文和调用栈的概念还能助你成为一名更合格的前端开发者。不过由于我们专栏不是专门讲JavaScript语言的，所以我并不会对JavaS

在上篇文章中，我们介绍了渲染流水线中的DOM生成、样式计算和布局三个阶段，那今天我们接着讲解渲染流水线后面的阶段。这里还是先简单回顾下上节前三个阶段的主要内容：在HTML页面内容被提交给渲染引擎之后，渲染引擎首先将HTML解析为浏览器可以理解的DOM；然后根据CSS样式表，计算出DOM树所有节点的样式；接着又计算每个元素的几何坐标位置，并将这些信息保存在布局树中#分层现在我们有了布局树，而且每个元素的具体位置信息都计算出来了，那么接下来是不是就要开始着手绘制页面了？答案依然是否定的。因为

在上一篇文章中我们介绍了导航相关的流程，那导航被提交后又会怎么样呢？就进入了渲染阶段。这个阶段很重要，了解其相关流程能让你“看透”页面是如何工作的，有了这些知识，你可以解决一系列相关的问题，比如能熟练使用开发者工具，因为能够理解开发者工具里面大部分项目的含义，能优化页面卡顿问题，使用JavaScript优化动画流程，通过优化样式表来防止强制同步布局，等等。既然它的功能这么强大，那么今天，我们就来好好聊聊渲染流程。通常，我们编写好HTML、CSS、JavaScript等文件，经过浏览器就会显示出漂亮的

“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ ”这是一道经典的面试题，能比较全面地考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web 等一系列的知识。下图是“从输入 URL 到页面展示完整流程示意图”：从图中可以看出，整个过程需要各个进程之间的配合，所以在开始正式流程之前，我们还是先来快速回顾下浏览器进程、渲染进程和网络进程的主要职责。浏览器进程主要负责用户交互、子进程管理和文件储存等功能。 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。 渲染进程的主要