chrome多进程架构

问题

构建几乎不会崩溃或挂起的渲染引擎几乎是不可能的。构建完全安全的渲染引擎几乎也是不可能的。

在某种程度上,2006年左右的网络浏览器的状态类似于过去的单用户,协作多任务操作系统。由于此类操作系统中的行为异常的应用程序可能会破坏整个系统,因此Web浏览器中的行为异常的网页也可能因此而崩溃。它只需要一个浏览器或插件错误即可关闭整个浏览器和所有当前运行的选项卡。

现代操作系统更强大,因为它们将应用程序置于相互隔离的单独进程中。一个应用程序中的崩溃通常不会损害其他应用程序或操作系统的完整性,并且每个用户对其他用户数据的访问受到限制。

建筑概述

我们对浏览器选项卡使用单独的过程,以保护整个应用程序免受渲染引擎中的错误和干扰。我们还限制了每个渲染引擎进程对其他进程以及系统其余部分的访问。在某些方面,这为Web浏览带来了内存保护和访问控制带给操作系统的好处。

我们将运行UI并管理选项卡和插件过程的主要过程称为“浏览器过程”或“浏览器”。同样,特定于选项卡的过程称为“渲染过程”或“渲染器”。渲染器使用Blink开源布局引擎来解释和布局HTML。

管理渲染过程

每个渲染进程都有一个全局RenderProcess对象,该对象管理与父浏览器进程的通信并维护全局状态。浏览器RenderProcessHost 为每个渲染进程维护一个对应项,该进程管理浏览器状态和渲染器的通信。浏览器和渲染器使用Chromium的IPC系统进行通信。

管理视图

每个渲染过程都有一个或多个RenderView对象,由管理RenderProcess,这些对象对应于内容的选项卡。对应项 在渲染器中RenderProcessHost维护RenderViewHost与每个视图对应的内容。每个视图都有一个视图ID,该ID用于区分同一渲染器中的多个视图。这些ID在一个渲染器中是唯一的,但在浏览器中不是唯一的,因此要识别视图,需要一个RenderProcessHostID和一个View ID。通过这些RenderViewHost对象可以完成从浏览器到特定内容选项卡的通信,这些对象知道如何将消息通过它们发送RenderProcessHostRenderProcessRenderView

组件和接口

在渲染过程中:

  • 在浏览器中RenderProcess使用相应的句柄处理IPC RenderProcessHostRenderProcess每个渲染过程只有一个对象。这就是所有浏览器↔渲染器通信的发生方式。
  • RenderView对象RenderViewHost在浏览器进程中(通过RenderProcess)和我们的WebKit嵌入层与其对应的对象通信。此对象表示选项卡或弹出窗口中一个网页的内容

在浏览器过程中:

  • Browser对象表示顶级浏览器窗口。
  • RenderProcessHost对象表示单个浏览器↔渲染器IPC连接的浏览器端。有一个RenderProcessHost在每个渲染过程中的浏览器进程。
  • RenderViewHost对象封装的通信与远程RenderViewRenderWidgetHost处理用于输入和绘画RenderWidget在浏览器中。

有关此嵌入的工作方式的更多详细信息,请参阅Chromium如何显示网页  设计文档。

共享渲染过程

通常,每个新窗口或选项卡都会在新过程中打开。浏览器将产生一个新进程,并指示它创建一个RenderView

有时有必要或希望在选项卡或窗口之间共享渲染过程。Web应用程序会打开一个新窗口,希望与之进行同步通信,例如,使用  JavaScript中的window.open。在这种情况下,当我们创建新的窗口或选项卡时,我们需要重用打开窗口的过程。如果进程总数太大,或者用户已经打开一个导航到该域的进程,我们还可以为新进程分配新选项卡的策略。这些策略在过程模型中进行了描述。

检测崩溃或行为异常的渲染器

与浏览器进程的每个IPC连接都会监视进程句柄。如果发出了这些句柄的信号,则表示渲染过程已崩溃,并且向选项卡通知了崩溃。现在,我们显示一个“悲伤的标签”屏幕,通知用户渲染器崩溃了。可以通过按下重新加载按钮或开始新的导航来重新加载页面。发生这种情况时,我们注意到没有任何流程,而是创建一个新的流程。

沙盒渲染器

鉴于渲染器在单独的进程中运行,我们有机会通过sandboxing限制其对系统资源的访问。例如,我们可以确保渲染器对网络的唯一访问是通过其父浏览器进程进行的。同样,我们可以使用主机操作系统的内置权限来限制其对文件系统的访问。

除了限制渲染器对文件系统和网络的访问之外,我们还可以限制对渲染器对用户的显示和相关对象的访问。我们在用户看不见的单独Windows“ 桌面 ” 上运行每个渲染过程。这样可以防止受损的渲染器打开新窗口或捕获击键。

回馈记忆

给定渲染器在单独的进程中运行,将隐藏的选项卡视为较低优先级就变得很简单。通常,Windows上最小化的进程会将其内存自动放入“可用内存”池中。在低内存情况下,Windows将在交换出更高优先级的内存之前将该内存交换到磁盘上,从而有助于使用户可见的程序具有更高的响应速度。我们可以将相同的原理应用于隐藏的标签。当渲染进程没有顶级选项卡时,我们可以释放该进程的“工作集”大小,以提示系统在必要时先将该内存换出到磁盘。因为我们发现减小工作集大小也会降低用户在两个选项卡之间切换时的选项卡切换性能,所以我们逐渐释放此内存。这意味着,如果用户切换回最近使用的选项卡,则与最近使用的选项卡相比,该选项卡的内存更有可能被分页。具有足够内存来运行所有程序的用户根本不会注意到此过程:Windows仅会在需要时才真正回收这些数据,因此,如果有足够的内存,则不会对性能造成任何影响。

这有助于我们在低内存情况下获得更好的内存占用。与很少使用的背景标签相关联的内存可以完全换出,而前景标签的数据可以完全加载到内存中。相比之下,单进程浏览器会将所有选项卡的数据随机分布在其内存中,并且不可能如此干净地分离使用和未使用的数据,从而浪费内存和性能。

插件和扩展

Firefox风格的NPAPI插件在其自身的进程中运行,与渲染器分开。插件体系结构中对此进行了详细描述。 

“ 网站隔离”项目旨在提供渲染器之间的更多隔离,该项目的早期交付成果包括在隔离的进程中运行Chrome的HTML / JavaScript内容扩展。

chrome渲染引擎blink如何工作

眨眼的工作原理

bit.ly/how-blink-works

作者:haraken @

最后更新:2018年8月14日

状态:PUBLIC

 

在眨眼上工作并不容易。对于新的Blink开发人员而言,这并不容易,因为已经引入了许多特定于Blink的概念和编码约定来实现非常快速的渲染引擎。即使对于有经验的Blink开发人员来说,这也不容易,因为Blink庞大且对性能,内存和安全性极为敏感。

 

本文档旨在提供1 万英尺的“ Blink的工作原理”概述,我希望它将有助于Blink开发人员快速熟悉该体系结构:

 

  • 该文档不是有关Blink详细架构和编码规则(可能会更改和过时)的详尽教程。相反,该文档简明扼要地描述了Blink的基本原理(短期内不太可能改变),并指出了您想了解更多信息时可以阅读的资源。
  • 该文档未解释特定功能(例如ServiceWorkers,编辑)。而是该文档解释了广泛的代码库所使用的基本功能(例如,内存管理,V8 API)。

 

有关Blink开发的更多常规信息,请参阅Chromium Wiki页面

 

眨眼做什么

流程/线程架构

工艺流程

线程数

闪烁的初始化

目录结构

内容公共API和Blink公共API

目录结构和依赖性

WTF

内存管理

任务调度

页面,框架,文档,DOMWindow等

概念

OOPIF

分离的框架/文件

Web IDL绑定

V8和闪烁

隔离,上下文,世界

V8 API

V8包装器

渲染管线

有什么问题吗

 

眨眼做什么

Blink是Web平台的渲染引擎。粗略地说,Blink实现了所有在浏览器选项卡中呈现内容的内容:

 

  • 实施Web平台的规范(例如HTML标准),包括DOM,CSS和Web IDL
  • 嵌入V8并运行JavaScript
  • 从基础网络堆栈请求资源
  • 建立DOM树
  • 计算样式和布局
  • 嵌入Chrome合成器并绘制图形

 

许多用户(例如Chromium,Android WebView和Opera)通过内容公开API嵌入了Blink 

 

从代码库的角度来看,“闪烁”通常是指// third_party / blink /。从项目角度来看,“闪烁”通常表示实现Web平台功能的项目。实现Web平台功能的代码跨越// third_party / blink /,// content / renderer /,// content /浏览器/和其他地方。

流程/线程架构

工艺流程

铬具有多工艺体系结构。Chromium具有一个浏览器进程和N个沙盒渲染器进程。闪烁在渲染器进程中运行。

 

创建了多少个渲染器进程?出于安全原因,隔离跨站点文档之间的内存地址区域非常重要(这称为Site Isolation)。从概念上讲,每个渲染器过程最多应专用于一个站点。但是实际上,当用户打开太多标签页或设备没有足够的RAM时,有时将每个渲染器进程限制在一个站点上有时会很繁琐。然后,渲染器进程可以由从不同站点加载的多个iframe或标签共享。这意味着一个选项卡中的iframe可以由不同的渲染器进程托管,而不同选项卡中的iframe可以由相同的渲染器进程托管。渲染器进程,iframe和Tab之间没有1:1映射

 

假定渲染器进程在沙箱中运行,则Blink需要要求浏览器进程调度系统调用(例如,文件访问,播放音频)并访问用户配置文件数据(例如Cookie,密码)。这种浏览器-渲染器过程通信是由Mojo实现的。(注意:过去我们使用的是Chromium IPC,但仍然有很多地方在使用它。但是,它已被弃用,并在后台使用Mojo。)在Chromium方面,服务化正在进行中,并将浏览器过程抽象为一组“服务。从Blink角度来看,Blink可以仅使用Mojo与服务和浏览器进程进行交互。

 

如果您想了解更多信息:

 

  • 多进程架构
  • Blink中的Mojo编程:platform / mojo / MojoProgrammingInBlink.md

线程数

在渲染器进程中创建了多少个线程?

 

眨眼有一个主线程,N个工作线程和几个内部线程。

 

几乎所有重要的事情都在主线程上发生。所有JavaScript(工人除外),DOM,CSS,样式和布局计算都在主线程上运行。假设主要是单线程体系结构,Blink进行了高度优化以最大化主线程的性能。

 

眨眼可能会创建多个工作线程来运行Web WorkersServiceWorkerWorklets

 

Blink和V8可能会创建几个内部线程来处理webaudio,数据库,GC等。

 

对于跨线程通信,必须使用通过PostTask API传递消息。不建议使用共享内存编程,除了出于性能原因确实需要使用它的几个地方。这就是为什么您在Blink代码库中看不到很多MutexLocks的原因。

 

如果您想了解更多信息:

 

闪烁的初始化和完成

眨眼由BlinkInitializer :: Initialize()初始化。在执行任何Blink代码之前必须调用此方法。

 

另一方面,Blink从未完成。也就是说,渲染器进程被强制退出而不进行清理。原因之一是性能。另一个原因是,通常很难以一种有序的方式清理渲染器进程中的所有内容(这是不值得的工作)。

目录结构

内容公共API和Blink公共API

内容公共API是使嵌入程序嵌入呈现引擎的API层。内容公共API必须小心维护,因为它们会暴露在嵌入程序中。

 

眨眼公共API是将// // third_party / blink /的功能公开给Chromium的API层。该API层只是从WebKit继承的历史工件。在WebKit时代,Chromium和Safari共享WebKit的实现,因此需要API层才能将WebKit的功能公开给Chromium和Safari。既然Chromium是// third_party / blink /的唯一嵌入者,那么API层就没有意义了。通过将网络平台代码从Chromium移到Blink(该项目称为Onion Soup),我们正在积极减少Blink公共API的数量。

 

目录结构和依赖性

// third_party / blink /具有以下目录。有关这些目录的更详细定义,请参阅此文档

 

  • 平台/
    • Blink的较低级功能的集合,这些功能是从整体内核中剔除的。例如,几何和图形工具。
  • 核心/和模块/
    • 规范中定义的所有Web平台功能的实现。core /实现与DOM紧密结合的功能。模块/实现更多独立功能。例如webaudio,indexeddb。
  • 绑定/核心/和绑定/模块/
    • 从概念上讲,bindings / core /是core /的一部分,而bindings / modules /是modules /的一部分。大量使用V8 API的文件被放在bindings / {core,modules}中。
  • 控制器/
    • 一组使用core /和modules /的高级库。例如devtools前端。

 

依存关系按以下顺序流动:

 

  • 铬=>控制器/ =>模块/和绑定/模块/ =>核心/和绑定/核心/ =>平台/ =>底层基元,例如// base,// v8和// cc

 

Blink仔细维护暴露于// third_party / blink /的低级基元列表。

 

如果您想了解更多信息:

 

WTF

WTF是一个“特定于眨眼的基础”库,位于platform / wtf /。我们正在尝试尽可能多地统一Chromium和Blink之间的编码原语,因此WTF应该很小。需要此库是因为确实需要针对Blink的工作量和Oilpan(Blink GC)优化许多类型,容器和宏。如果类型是在WTF中定义的,则Blink必须使用WTF类型而不是// base或std库中定义的类型。最受欢迎的是矢量,哈希集,哈希图和字符串。眨眼应该使用WTF :: Vector,WTF :: HashSet,WTF :: HashMap,WTF :: String和WTF :: AtomicString而不是std :: vector,std :: * set,std :: * map和std :: string 。

 

如果您想了解更多信息:

 

内存管理

就Blink而言,您需要关心三个内存分配器:

 

 

您可以使用USING_FAST_MALLOC()在PartitionAlloc的堆上分配一个对象:

 

类SomeObject {

  USING_FAST_MALLOC(SomeObject);

  静态std :: unique_ptr <SomeObject> Create(){

    返回std :: make_unique <SomeObject>(); //分配在PartitionAlloc的堆上。

}

};

 

由PartitionAlloc分配的对象的生存期应由scoped_refptr <>或std :: unique_ptr <>管理。强烈建议不要手动管理生命周期。闪烁禁止手动删除

 

您可以使用GarbageCollected在Oilpan的堆上分配一个对象:

 

类SomeObject:公共GarbageCollected <SomeObject> {

  静态SomeObject * Create(){

    返回新的SomeObject; //分配在Oilpan的堆上。

  }

};

 

Oilpan分配的对象的生存期由垃圾收集自动管理。您必须使用特殊的指针(例如Member <>,Persistent <>)将对象保存在Oilpan的堆上。请参阅此API参考以熟悉有关Oilpan的编程限制。最重要的限制是不允许您在油锅对象的析构函数中触摸任何其他油锅对象(因为无法保证销毁顺序)。

 

如果您既不使用USING_FAST_MALLOC()也不使用GarbageCollected,则在系统malloc的堆上分配对象。在眨眼中强烈建议不要这样做。所有Blink对象应由PartitionAlloc或Oilpan分配,如下所示:

 

  • 默认情况下使用Oilpan。
  • 仅在以下情况下才使用PartitionAlloc:1)对象的生存期非常明确并且std :: unique_ptr <>或scoped_refptr <>足够,2)在Oilpan上分配对象会带来很多复杂性,或者3)在Oilpan上分配对象会导致给垃圾收集运行时带来了不必要的压力。

 

无论使用PartitionAlloc还是Oilpan,都必须非常小心,不要创建悬空的指针(注意:强烈建议不要使用原始指针)或内存泄漏。

 

如果您想了解更多信息:

 

任务调度

为了提高渲染引擎的响应速度,Blink中的任务应尽可能异步执行。不鼓励同步IPC / Mojo和任何其他可能花费几毫秒的操作(尽管某些操作是不可避免的,例如用户的JavaScript执行)。

 

呈现器进程中的所有任务都应使用正确的任务类型发布到Blink Scheduler,如下所示:

 

//使用kNetworking的任务类型将任务发布到框架的调度程序

frame-> GetTaskRunner(TaskType :: kNetworking)-> PostTask(…,WTF :: Bind(&Function));

 

Blink Scheduler维护多个任务队列,并巧妙地对任务进行优先级排序,以最大化用户感知的性能。重要的是要指定适当的任务类型,以使Blink Scheduler能够正确,智能地调度任务。

 

如果您想了解更多信息:

 

  • 如何发布任务:platform / scheduler / PostTask.md

页面,框架,文档,DOMWindow等

概念

页面,框架,文档,ExecutionContext和DOMWindow是以下概念:

 

  • 页面与选项卡的概念相对应(如果未启用下面说明的OOPIF)。每个渲染器进程可能包含多个选项卡。
  • 框架对应于框架(主框架或iframe)的概念。每个页面可以包含一个或多个以树状层次结构排列的框架。
  • DOMWindow对应于JavaScript中的窗口对象。每个框架都有一个DOMWindow。
  • Document对应于JavaScript中的window.document 对象。每个框架都有一个文档。
  • ExecutionContext是一个抽象文档(用于主线程)和WorkerGlobalScope(用于工作线程)的概念。

 

渲染过程:页面= 1:N

 

页:框架= 1:M.

 

框架:DOMWindow:文档(或ExecutionContext)= 1:1:1在任何时间点,但映射可能随时间而变化。例如,考虑以下代码:

 

iframe.contentWindow.location.href =“ https://example.com”;

 

在这种情况下,将为https://example.com创建一个新的DOMWindow和一个新的Document 。但是,可以重复使用该框架。

 

(注意:确切地说,在某些情况下会创建一个新的Document,但是DOMWindow和Frame会被重用。甚至还有一些更复杂的情况。)

 

如果您想了解更多信息:

 

  • 核心/框架/FrameLifecycle.md

进程外iframe(OOPIF)

站点隔离使事情变得更加安全,但更加复杂。🙂站点隔离的想法是为每个站点创建一个渲染器进程。(网站是页面的可注册域+ 1标签及其URL方案。例如,https://mail.example.comhttps://chat.example.com在同一网站中,但https:// noodles.comhttps://pumpkins.com都没有。)如果一个页面包含一个跨站点IFRAME,该页面可以由两个渲染过程托管。考虑以下页面:

 

<!– https://example.com –>

<身体>

<iframe src =” https://example2.com”> </ iframe>

</ body>

 

主框架和<iframe>可以由不同的渲染器进程托管。渲染器进程本地的帧由LocalFrame表示,而不是渲染器进程本地的帧由RemoteFrame表示。

 

从主框架的角度来看,主框架是LocalFrame,而<iframe>是RemoteFrame。从<iframe>的角度来看,主框架是RemoteFrame,而<iframe>是LocalFrame。

 

本地框架和远程框架(可能存在于不同的渲染器进程中)之间的通信是通过浏览器进程进行处理的。

 

如果您想了解更多信息:

 

分离的框架/文件

相框/文档可能处于分离状态。考虑以下情况:

 

doc = iframe.contentDocument;

iframe.remove(); //将iframe与DOM树分离。

doc.createElement(“ div”); //但是您仍然可以在分离的框架上运行脚本。

 

棘手的事实是,您仍然可以在分离的框架上运行脚本或DOM操作。由于框架已经分离,大多数DOM操作将失败并引发错误。不幸的是,分离框架上的行为在浏览器之间并不能真正实现互操作,在规范中也没有明确定义。基本上,人们期望JavaScript可以继续运行,但是大多数DOM操作应该会因某些适当的异常而失败,例如:

 

无效someDOMOperation(…){

  if(!script_state _-> ContextIsValid()){//框架已经分离

    …;//设置例外等

    返回;

}

}

 

这意味着在通常情况下,当框架分离时,Blink需要执行一系列清理操作。您可以通过从ContextLifecycleObserver继承来做到这一点,如下所示:

 

类SomeObject:公共GarbageCollected <SomeObject>,公共ContextLifecycleObserver {

  void ContextDestroyed()覆盖{

    //在此进行清理操作。

}

  〜SomeObject(){

    //在这里进行清理操作不是一个好主意,因为现在进行清理已经太迟了。此外,不允许析构函数接触Oilpan堆上的任何其他对象。

  }

};

Web IDL绑定

当JavaScript访问node.firstChild时将调用node.h 中的Node :: firstChild()。它是如何工作的?让我们看一下node.firstChild的工作方式。

 

首先,您需要根据规范定义一个IDL文件:

 

// node.idl

接口Node:EventTarget {

  […]只读属性Node?第一个孩子;

};

 

Web IDL的语法在Web IDL规范中定义[…] 称为IDL扩展属性。一些IDL扩展属性是在Web IDL规范中定义的,而另一些是特定于Blink的IDL扩展属性。除了特定于闪烁的IDL扩展属性外,IDL文件应以符合规范的方式编写(即,仅从规范中复制并粘贴)。

 

其次,您需要为Node定义一个C ++类,并为firstChild实现一个C ++ getter:

 

class EventTarget:public Sc​​riptWrappable {//所有暴露给JavaScript的类都必须从ScriptWrappable继承。

…;

};

 

类Node:public EventTarget {

  DEFINE_WRAPPERTYPEINFO(); //所有具有IDL文件的类都必须具有此宏。

  节点* firstChild()const {return first_child_; }

};

 

在通常情况下,就是这样。生成node.idl时,IDL编译器会自动为Node接口和Node.firstChild生成Blink-V8绑定。自动生成的绑定是在//src/out/{Debug,Release}/gen/third_party/blink/renderer/bindings/core/v8/v8_node.h中生成的。当JavaScript调用node.firstChild时,V8会调用v8_node.h中的V8Node :: firstChildAttributeGetterCallback(),然后会调用您在上面定义的Node :: firstChild()。

 

如果您想了解更多信息:

 

V8和闪烁

隔离,上下文,世界

当您编写涉及V8 API的代码时,了解隔离,上下文和世界的概念很重要。它们分别在代码库中由v8 :: Isolate,v8 :: Context和DOMWrapperWorld表示。

 

隔离对应于物理线程。隔离:闪烁中的物理线程= 1:1。主线程具有自己的隔离。辅助线程具有其自己的隔离。

 

上下文对应于全局对象(在使用框架的情况下,它是框架的窗口对象)。由于每个框架都有其自己的窗口对象,因此渲染器进程中存在多个上下文。调用V8 API时,必须确保您使用的是正确的上下文。否则,v8 :: Isolate :: GetCurrentContext()将返回错误的上下文,在最坏的情况下,它将最终导致对象泄漏并导致安全问题。

 

World是支持Chrome扩展程序的内容脚本的概念。世界与Web标准中的任何内容都不对应。内容脚本希望与网页共享DOM,但是出于安全原因,必须将内容脚本的JavaScript对象与网页的JavaScript堆隔离。(还必须将一个内容脚本的JavaScript堆与另一个内容脚本的JavaScript堆隔离。)为了实现隔离,主线程为网页创建了一个主世界,为每个内容脚本创建了一个隔离世界。主世界和孤立世界可以访问相同的C ++ DOM对象,但是它们的JavaScript对象是孤立的。通过为一个C ++ DOM对象创建多个V8包装器来实现这种隔离。也就是说,每个世界一个V8包装器。

 

上下文,世界和框架之间有什么关系?

 

想象一下,在主线程上有N个世界(一个主世界+(N – 1)个孤立世界)。然后,一个框架应具有N个窗口对象,每个窗口对象用于一个世界。上下文是与窗口对象相对应的概念。这意味着,当我们有M个框架和N个世界时,我们有M * N个上下文(但是这些上下文是惰性创建的)。

 

如果是工人,则只有一个世界和一个全局对象。因此,只有一个上下文。

 

同样,当您使用V8 API时,应该非常小心使用正确的上下文。否则,您最终将在孤立的世界之间泄漏JavaScript对象并造成安全灾难(例如,来自A.com的扩展程序可以操纵来自B.com的扩展程序)。

 

如果您想了解更多信息:

 

V8 API

//v8/include/v8.h中定义了许多V8 API 。由于V8 API是低级的并且难以正确使用,因此platform / bindings /提供了一堆包装V8 API的帮助程序类。您应该考虑尽可能使用助手类。如果您的代码必须大量使用V8 API,则应将文件放在bindings / {core,modules}中。

 

V8使用句柄指向V8对象。最常见的句柄是v8 :: Local <>,用于从计算机堆栈指向V8对象。在计算机堆栈上分配v8 :: HandleScope之后,必须使用v8 :: Local <>。v8 :: Local <>不应在机器堆栈之外使用:

 

void function(){

  v8 :: HandleScope范围;

  v8 :: Local <v8 :: Object> object =…; // 这是对的。

}

 

类SomeObject:公共GarbageCollected <SomeObject> {

  v8 :: Local <v8 :: Object> object_; //这是错误的。

};

 

如果要从计算机堆栈外部指向V8对象,则需要使用包装器跟踪。但是,您必须非常小心,不要用它创建参考循环。通常,V8 API很难使用。如果您不确定自己在做什么,请询问blink-review-bindings @

 

如果您想了解更多信息:

 

  • 如何使用V8 API和帮助程序类:platform / bindings / HowToUseV8FromBlink.md

V8包装器

每个C ++ DOM对象(例如Node)都有其对应的V8包装器。确切地说,每个C ++ DOM对象每个世界都有其对应的V8包装器。

 

V8包装器对其相应的C ++ DOM对象有很强的引用。但是,C ++ DOM对象仅对V8包装程序具有弱引用。因此,如果您想让V8包装器存活一段时间,则必须明确地做到这一点。否则,将过早收集V8包装器,并且V8包装器上的JS属性将丢失。

 

div = document.getElementbyId(“ div”);

child = div.firstChild;

child.foo =“酒吧”;

child = null;

GC(); //如果不执行任何操作,则| firstChild |的V8包装器 由GC收集。

assert(div.firstChild.foo ===“ bar”); // …这将失败。

 

如果我们什么都不做,GC会收集child ,因此child.foo 会丢失。为了使div.firstChild 的V8包装器保持活动状态,我们必须添加一种机制,“ 只要div 所属的DOM树可以从V8到达,则使div.firstChild 的V8包装器保持活动状态”。

 

有两种方法可以使V8包装器保持活动状态:ActiveScriptWrappable包装器跟踪

 

如果您想了解更多信息:

 

渲染管线

从将HTML文件发送到Blink到在屏幕上显示像素还有很长的一段路要走。渲染管道的结构如下。

 

阅读这个出色的资料,以了解渲染管线的每个阶段的功能。(我认为我能写出比甲板更好的解释🙂

 

如果您想了解更多信息,请联系:GC收集。

 

assert(div.firstChild.foo ===“ bar”); // …这将失败。

 

如果我们什么都不做,GC会收集child,因此child.foo会丢失。为了使div.firstChild的V8包装器保持活动状态,我们必须添加一种机制,“只要div所属的DOM树可以从V8到达,则使div.firstChild的V8包装器保持活动状态”。

 

有两种方法可以使V8包装器保持活动状态:ActiveScriptWrappable和包装器跟踪。

 

如果您想了解更多信息:

 

如何管理V8包装器的生命周期:bindings / core / v8 / V8Wrapper.md

 

如何使用包装程序跟踪:platform / bindings / TraceWrapperReference.md

 

渲染管线

从将HTML文件发送到Blink到在屏幕上显示像素还有很长的一段路要走。渲染管道的结构如下。

Chrome如何显示网页

概念应用层

(此插图的原始Google文档为http://goo.gl/MsEJX,任何@ chromium.org均可开放对其进行编辑)
每个框代表一个概念性的应用程序层。任何层都不应该了解或依赖任何更高层。
  • WebKit:在Safari,Chromium和所有其他基于WebKit的浏览器之间共享的渲染引擎。该港口是WebKit的一部分,与平台相关的系统集成服务,如资源加载和图形。
  • 胶水:将WebKit类型转换为Chromium类型。这是我们的“ WebKit嵌入层”。它是两个浏览器Chromium和test_shell(允许我们测试WebKit)的基础。
  • 渲染器/渲染主机:这是Chromium的“多进程嵌入层”。它跨流程边界代理通知和命令。
  • WebContents:一个可重用的组件,它是Content模块的主要类。它很容易嵌入,以允许将HTML的多进程呈现到视图中。有关更多信息,请参见内容模块页面
  • 浏览器: 代表浏览器窗口,其中包含多个WebContent。
  • 选项卡助手:可以附加到WebContents的单个对象(通过WebContentsUserData mixin)。浏览器将其中的各种附加到它所拥有的WebContentses(一个用于收藏夹图标,一个用于信息栏等)。

WebKit

我们使用WebKit开源项目来布局网页。此代码从Apple中提取,并存储在/ third_party / WebKit目录中。WebKit主要由代表核心布局功能的“ WebCore”和运行JavaScript的“ JavaScriptCore”组成。我们仅出于测试目的运行JavaScriptCore,通常我们将其替换为高性能的V8 JavaScript引擎。我们实际上并没有使用Apple称为“ WebKit”的层,它是WebCore和OS X应用程序(例如Safari)之间的嵌入API。为了方便起见,我们通常将Apple的代码统称为“ WebKit”。

WebKit端口

在最低级别,我们有WebKit“端口”。这是我们所需的特定于平台的功能的实现,该功能可与独立于平台的WebCore代码对接。这些文件位于WebKit树中,通常位于目录中或作为带有铬后缀的文件。我们的许多端口实际上并不是特定于操作系统的:您可以将其视为WebCore的“ Chromium端口”。对于每个平台,某些部分(如字体渲染)必须以不同的方式处理。

  • 网络流量是由我们的多进程资源加载系统处理的,而不是直接从渲染过程传递给OS的。
  • 图形使用为Android开发的Skia图形库。这是一个跨平台的图形库,可处理除文本以外的所有图像和图形基元。Skia位于t hird_party / skia中。图形操作的主要入口点是/webkit/port/platform/graphics/GraphicsContextSkia.cpp。它使用同一目录以及/ base / gfx中的许多其他文件。

WebKit胶

与第三方WebKit代码相比,Chromium应用程序使用不同的类型,编码样式和代码布局。WebKit“胶水”为使用Google编码约定和类型的WebKit提供了更方便的嵌入API(例如,我们使用std :: string代替WebCore :: StringGURL代替KURL)。粘合代码位于/ webkit / glue中。胶合对象的名称通常类似于WebKit对象,但开头带有“ Web”。例如,WebCore :: Frame变为WebFrame

WebKit的“胶水”层将其余的Chromium代码库与WebCore数据类型隔离开来,以帮助最小化WebCore更改对Chromium代码库的影响。因此,Chromium永远不会直接使用WebCore数据类型。当Chromium需要戳入某些WebCore对象时,API会被添加到WebKit的“胶水”中。

“测试外壳”应用程序是一个准系统的Web浏览器,用于测试我们的WebKit端口和粘合代码。它使用与Chromium相同的粘合接口与WebKit进行通信。它为开发人员提供了一种更简单的方法来测试新代码,而无需具有许多复杂的浏览器功能,线程和进程。此应用程序还用于运行自动化的WebKit测试。但是,“测试外壳”的缺点是,它不像Chromium那样以多进程方式使用WebKit。内容模块嵌入在称为“内容外壳”的应用程序中,该应用程序将很快运行测试。

渲染过程

Chromium的渲染过程使用胶水接口嵌入了我们的WebKit端口。它不包含太多代码:它的工作主要是作为浏览器IPC通道的呈现器端。

渲染器中最重要的类是RenderView,它位于/content/renderer/render_view_impl.cc中。该对象表示一个网页。它处理往返于浏览器进程的所有与导航有关的命令。它源自提供绘画和输入事件处理的RenderWidget。所述的RenderView经由全球浏览器进程通信(每呈现进程)RenderProcess对象。

FAQ:RenderWidget和RenderView有什么区别?RenderWidget通过在称为WebWidgetDelegate的粘合层中实现抽象接口,映射到一个WebCore :: Widget对象。基本上,这是屏幕上的一个窗口,用于接收输入事件并绘制到该窗口中。甲的RenderView从继承RenderWidget并且是选项卡或弹出窗口的内容。除了小部件的绘制和输入事件外,它还处理导航命令。仅在一种情况下存在RenderWidget而没有RenderView ,这是网页上的选择框。这些是带有向下箭头的框,这些框会弹出一个选项列表。选择框必须使用本机窗口渲染,以便它们可以显示在其他所有框的上方,并在必要时弹出框。这些窗口需要绘制并接收输入,但是没有单独的“网页”(RenderView)。

渲染器中的线程

每个渲染器都有两个线程(有关图表,请参见多进程体系结构页面;有关如何编程,请参见Chromium中的线程)。渲染线程是主要对象(例如RenderView)所在的位置并运行所有WebKit代码。当它与浏览器通信时,消息首先发送到主线程,然后主线程将消息分派给浏览器进程。除其他外,这使我们能够将消息从渲染器同步发送到浏览器。发生这种情况的原因是少数操作需要浏览器的结果才能继续。一个示例是在JavaScript请求时获取页面的Cookie。渲染器线程将阻塞,并且主线程将对所有收到的消息进行排队,直到找到正确的响应为止。随后将任何同时接收到的消息发布到渲染器线程以进行正常处理。

浏览器过程

 

低级浏览器过程对象

与渲染过程的所有IPC通信都是在浏览器的I / O线程上完成的。该线程还处理所有网络通信,以防止其干扰用户界面。

在主线程(运行用户界面的地方)上初始化RenderProcessHost时,它将创建新的渲染器进程和带有指向渲染器的命名管道的ChannelProxy IPC对象。该对象在浏览器的I / O线程上运行,侦听到渲染器的命名管道,并自动将所有消息转发回UI线程上的RenderProcessHost。甲ResourceMessageFilter将被安装在该通道中,这将筛选出可直接在I / O线程上处理诸如网络请求的某些消息。此过滤发生在ResourceMessageFilter :: OnMessageReceived中

所述RenderProcessHost在UI线程上是负责分派所有视图专用消息到适当的RenderViewHost(它处理非观看专用消息本身的有限的数目)。这种调度发生在RenderProcessHost :: OnMessageReceived中

高级浏览器过程对象

特定于视图的消息进入RenderViewHost :: OnMessageReceived。大多数消息都在这里处理,其余消息转发到RenderWidgetHost基类。这两个对象映射到渲染器中的RenderViewRenderWidget(有关这些含义,请参见上面的“ Render Process”)。每个平台都有一个视图类(RenderWidgetHostView [Aura | Gtk | Mac | Win]),以实现与本机视图系统的集成。

RenderView / Widget上方是WebContents对象,大多数消息实际上最终都作为对该对象的函数调用而结束。一个WebContents代表网页的内容。它是内容模块中的顶级对象,并负责以矩形视图显示网页。有关更多信息,请参见内容模块页面

所述WebContents对象被包含在TabContentsWrapper。那是chrome /并负责制表符。

说明性例子

围绕Chromium源代码 涵盖了导航和启动的其他示例。

“设置游标”消息的寿命

设置光标是从渲染器发送到浏览器的典型消息的示例。在渲染器中,将发生以下情况。

  • 设置光标消息是由WebKit在内部生成的,通常是响应输入事件而生成的。设置光标消息将从content / renderer / render_widget.cc中的RenderWidget :: SetCursor开始
  • 它将调用RenderWidget :: Send来分派消息。RenderView也使用此方法将消息发送到浏览器。它将调用RenderThread :: Send 
  • 这将调用IPC :: SyncChannel,它将在内部将消息代理到渲染器的主线程,并将其发布到命名管道以发送到浏览器。

然后浏览器控制:

  • RenderProcessHost中的IPC :: ChannelProxy在浏览器的I / O线程上接收所有消息。它首先通过ResourceMessageFilter发送它们,后者直接在I / O线程上调度网络请求和相关消息。由于我们的消息没有被过滤掉,因此它将继续进入浏览器的UI线程(IPC :: ChannelProxy在内部执行此操作)。
  • RenderProcessHost :: OnMessageReceived内容/浏览器/ renderer_host / render_process_host_impl.cc获取相应的渲染过程的所有意见的消息。它直接处理几种类型的消息,其余的则转发到与发送消息的源RenderView对应的适当的RenderViewHost
  • 该消息到达RenderViewHost :: OnMessageReceived内容/浏览器/ renderer_host / render_view_host_impl.cc。很多消息都在这里处理,但我们是不是因为它是从发送的消息RenderWidget和处理由RenderWidgetHost
  • RenderViewHost中所有未处理的消息都将自动转发到RenderWidgetHost,包括我们设置的光标消息。
  • 内容/浏览器/renderer_host/render_view_host_impl.cc中的消息映射  最终在RenderWidgetHost :: OnMsgSetCursor中接收到消息,并调用适当的UI函数来设置鼠标光标。

“鼠标单击”消息的寿命

发送鼠标单击是从浏览器到渲染器的典型消息示例。

  • Windows消息由RenderWidgetHostViewWin :: OnMouseEvent在浏览器的UI线程上接收,然后在同一类中调用ForwardMouseEventToRenderer
  • 转发器功能将输入事件打包到一个跨平台的WebMouseEvent中,并最终将其发送到与之关联的RenderWidgetHost
  • RenderWidgetHost :: ForwardInputEvent创建一条IPC消息ViewMsg_HandleInputEvent,将WebInputEvent序列化为其,然后调用RenderWidgetHost :: Send
  • 这只是转发给拥有的RenderProcessHost :: Send函数,后者将消息提供给IPC :: ChannelProxy
  • 在内部,IPC :: ChannelProxy将消息代理到浏览器的I / O线程,并将其写入相应渲染器的命名管道。

请注意,WebContents中还会创建许多其他类型的消息,尤其是导航消息。它们遵循从WebContentsRenderViewHost的相似路径。

然后渲染器控制:

  •  渲染器主线程上的IPC :: Channel读取浏览器发送的消息,而IPC :: ChannelProxy代理到渲染器线程。
  • RenderView :: OnMessageReceived获取消息。许多类型的消息直接在这里处理。由于单击消息不是,因此它(与所有其他未处理的消息一起)进入RenderWidget :: OnMessageReceived  ,后者又将其转发到  RenderWidget :: OnHandleInputEvent
  • 将输入事件提供给  WebWidgetImpl :: HandleInputEvent,在此将其转换为WebKit PlatformMouseEvent类,并提供给WebKit 中的WebCore :: Widget类。

如何用谷歌浏览器分析网页速度

凯斯巴斯克斯

凯斯巴斯克斯

通过Kayce 巴斯克技术作家,Chrome DevTools&Lighthouse

在这个全面的Chrome DevTools网络分析功能参考中,探索分析页面加载方式的新方法。注意:此参考文献基于Chrome 58.如果您使用其他版本的Chrome,则DevTools的用户界面和功能可能会有所不同。检查chrome://help您正在运行的Chrome版本。

记录网络请求

默认情况下,只要DevTools处于打开状态,DevTools就会在“网络”面板中记录所有网络请求。

网络面板。
图1。网络面板

停止记录网络请求

要停止录制请求:

  • 单击 网络”面板上的“ 停止录制网络日志 ” 它变为灰色表示DevTools不再记录请求。
  • 在“网络”面板处于焦点时按Command+ E(Mac)或 Control+ E(Windows,Linux)。

清除请求

明确

单击“网络”面板上的“ 清除  ”以清除“请求”表中的所有请求。

清除按钮。
图2。清楚,用蓝色勾勒出来

跨页面加载保存请求

要跨页面加载保存请求,请选中“网络”面板上的“ 保留日志”复选框。DevTools保存所有请求,直到您禁用 保留日志

保留日志复选框。
图3。“保留日志”复选框,以蓝色标出

在页面加载期间捕获屏幕截图

捕获屏幕截图以分析用户在等待页面加载时看到的内容。

捕获屏幕截图

要启用屏幕截图,请单击“网络”面板上的“ 捕获屏幕截图  ”。启用后会变为蓝色。

在“网络”面板处于焦点时重新加载页面以捕获屏幕截图。

捕获后,您可以通过以下方式与屏幕截图进行交互:

  • 将鼠标悬停在屏幕截图上可查看捕获屏幕截图的位置。“概述”窗格中将显示一条黄线。
  • 单击屏幕截图的缩略图以过滤掉捕获屏幕截图后发生的任何请求。
  • 双击缩略图以放大缩略图。

将鼠标悬停在屏幕截图上。
图4。将鼠标悬停在屏幕截图上。“概述”窗格和“瀑布”中的黄色垂直线表示捕获屏幕截图的时间。

重播XHR请求

要重播XHR请求,请右键单击“请求”表中的请求,然后选择“ 重播XHR”

选择重播XHR。
图5。选择重播XHR

改变加载行为

通过禁用浏览器缓存来模拟首次访问者

要模拟首次使用者体验您网站的方式,请选中“ 禁用缓存”复选框。DevTools禁用浏览器缓存。这更准确地模拟了首次用户的体验,因为请求是在重复访问时从浏览器缓存提供的。

禁用缓存复选框。
图6。“禁用缓存”复选框,以蓝色标出

从“网络条件”抽屉中禁用浏览器缓存

如果要在其他DevTools面板中工作时禁用缓存,请使用“网络条件”抽屉。

  1. 打开“ 网络条件”抽屉
  2. 选中或取消选中“ 禁用缓存”复选框。

手动清除浏览器缓存

要随时手动清除浏览器缓存,请右键单击“请求”表中的任意位置,然后选择“ 清除浏览器缓存”

选择清除浏览器缓存。
图7。选择清除浏览器缓存

离线模拟

有一类新的Web应用程序,称为Progressive Web Apps,可以在服务工作者的帮助下脱机运行。在构建此类应用程序时,能够快速模拟没有数据连接的设备非常有用。

选中“ 脱机”复选框以模拟完全脱机的网络体验。

离线复选框
图8。“脱机”复选框,以蓝色标出

模拟慢速网络连接

Network Throttling 菜单模拟2G,3G和其他连接速度。

网络限制菜单。
图9。网络限制菜单,以蓝色标出

您可以从各种预设中进行选择,例如Regular或Good 2G。您还可以通过打开“网络限制”菜单并选择“ 自定义” >“ 添加”来添加自己的自定义预设。

DevTools在“ 网络”选项卡旁边显示一个警告图标,提醒您已启用限制。

从“网络条件”抽屉模拟慢速网络连接

如果要在其他DevTools面板中工作时节流网络连接,请使用“网络条件”抽屉。

  1. 打开“ 网络条件”抽屉
  2. Network Throttling菜单中选择所需的连接速度。

手动清除浏览器cookie

要随时手动清除浏览器cookie,请右键单击“请求”表中的任意位置,然后选择“ 清除浏览器Cookie”

选择清除浏览器Cookie。
图10。选择清除浏览器Cookie

覆盖用户代理

要手动覆盖用户代理:

  1. 打开“ 网络条件”抽屉
  2. 取消选中自动选择
  3. 从菜单中选择用户代理选项,或在文本框中输入自定义选项。

过滤请求

按属性过滤请求

使用“ 过滤器”文本框按属性过滤请求,例如请求的域或大小。

如果您看不到文本框,则可能隐藏了“过滤器”窗格。请参见隐藏过滤器窗格

“过滤器”文本框。
图11。“过滤器”文本框,以蓝色标出

通过使用空格分隔每个属性,可以同时使用多个属性。例如,mime-type:image/gif larger-than:1K显示大于一千字节的所有GIF。这些多属性过滤器等同于AND操作。目前不支持OR操作。

以下是支持的属性的完整列表。

  • domain。仅显示指定域中的资源。您可以使用通配符(*)来包含多个域。例如,*.com 显示以所有域名结尾的资源.com。DevTools使用它遇到的所有域填充自动完成下拉菜单。
  • has-response-header。显示包含指定HTTP响应标头的资源。DevTools使用它遇到的所有响应标头填充自动完成下拉列表。
  • is。使用is:runningWebSocket资源。
  • larger-than。显示大于指定大小的资源(以字节为单位)。设置值1000等于设置值1k
  • method。显示通过指定的HTTP方法类型检索的资源。DevTools使用它遇到的所有HTTP方法填充下拉列表。
  • mime-type。显示指定MIME类型的资源。DevTools使用它遇到的所有MIME类型填充下拉列表。
  • mixed-content。显示所有混合内容资源(mixed-content:all)或仅显示当前显示的资源(mixed-content:displayed)。
  • scheme。显示通过不受保护的HTTP(scheme:http)或受保护的HTTPS(scheme:https)检索的资源。
  • set-cookie-domain。显示具有Set-Cookie标题的资源,该标题具有Domain与指定值匹配的属性。DevTools使用它遇到的所有cookie域填充自动完成。
  • set-cookie-name。显示具有Set-Cookie名称与指定值匹配的标头的资源。DevTools使用它遇到的所有cookie名称填充自动完成。
  • set-cookie-value。显示具有Set-Cookie与指定值匹配的值的标头的资源。DevTools使用它遇到的所有cookie值填充自动完成。
  • status-code。仅显示HTTP状态代码与指定代码匹配的资源。DevTools使用它遇到的所有状态代码填充自动完成下拉菜单。

按类型过滤请求

要按请求类型筛选请求,请单击“网络”面板上的XHRJSCSS, Img媒体字体文档WS(WebSocket),清单其他(此处未列出的任何其他类型)按钮。

如果您看不到这些按钮,则可能隐藏了“过滤器”窗格。请参见隐藏过滤器窗格

要同时启用多个类型过滤器,请按住Command (Mac)或Control(Windows,Linux),然后单击。

使用Type过滤器显示JS,CSS和Doc [ument]资源。
图12。使用Type过滤器显示JS,CSS和Doc [ument]资源。

按时间过滤请求

单击并在“概述”窗格中向左或向右拖动,仅显示在该时间范围内处于活动状态的请求。过滤器是包含在内的。显示在突出显示的时间内处于活动状态的任何请求。

过滤掉2500ms左右未激活的任何请求。
图13。过滤掉2500ms左右未激活的任何请求

隐藏数据网址

数据URL是嵌入到其他文档中的小文件。您在Requests表中看到的任何请求 data:都是数据URL。

选中隐藏数据URL复选框以隐藏这些请求。

隐藏数据URL复选框。
图14。隐藏数据URL复选框

排序请求

默认情况下,“请求”表中的请求按启动时间排序,但您可以使用其他条件对表进行排序。

按列排序

单击“请求”中任何列的标题,以按该列对请求进行排序。

按活动阶段排序

要更改Waterfall排序请求的方式,请右键单击“请求”表的标题,将鼠标悬停在“ 瀑布”上,然后选择以下选项之一:

  • 开始时间。启动的第一个请求位于顶部。
  • 响应时间。开始下载的第一个请求位于顶部。
  • 结束时间。完成的第一个请求位于顶部。
  • 总持续时间。具有最短连接设置和请求/响应的请求位于顶部。
  • 延迟。等待最短响应时间的请求位于顶部。

这些描述假设每个相应的选项从最短到最长排名。单击Waterfall列的标题可以反转顺序。

按总持续时间对瀑布进行排序。
图15。按总持续时间对瀑布进行排序。每个酒吧较轻的部分是等待的时间。较暗的部分是下载字节所花费的时间。

分析请求

只要DevTools处于打开状态,它就会在“网络”面板中记录所有请求。使用“网络”面板分析请求。

查看请求日志

使用“请求”表查看DevTools打开时所做的所有请求的日志。单击或将鼠标悬停在请求上会显示有关它们的更多信息。

请求表。
图16。请求表,以蓝色标出

“请求”表默认显示以下列:

  • 名字。资源的文件名或标识符。
  • 现状。HTTP状态代码。
  • 输入。请求的资源的MIME类型。
  • 发起人。以下对象或进程可以发起请求:
    • 解析器。Chrome的HTML解析器。
    • 重定向。HTTP重定向。
    • 脚本。一个JavaScript函数。
    • 其他。其他一些流程或操作,例如通过链接导航到页面或在地址栏中输入URL。
  • 大小。响应标头与响应主体的组合大小,由服务器提供。
  • 时间。从请求开始到响应中最后一个字节的接收的总持续时间。
  • 瀑布。每个请求的活动的视觉细分。

添加或删除列

右键单击“请求”表的标题,然后选择隐藏或显示它的选项。当前显示的选项旁边有复选标记。

将列添加到“请求”表。
图17。将列添加到“请求”表。

添加自定义列

要将自定义列添加到“请求”表,请右键单击“请求”表的标题,然后选择“ 响应标题” >“ 管理标题列”

将自定义列添加到“请求”表。
图18。将自定义列添加到“请求”表。

查看彼此相关的请求时间

使用瀑布查看彼此相关的请求时间。默认情况下,瀑布按请求的开始时间进行组织。因此,远离左侧的请求比远离右侧的请求更早开始。

请参阅按活动阶段排序,以查看可以对瀑布进行排序的不同方法。

“请求”窗格的“瀑布”列。
图19。“请求”窗格的“瀑布”列。

分析WebSocket连接的帧

要查看WebSocket连接的框架:

  1. 单击“ 请求”表的“ 名称”列下的WebSocket连接的URL 。
  2. 单击“ 框架”选项卡。该表显示了最后100帧。

要刷新表,请在“请求”表的“ 名称”列下重新单击WebSocket连接的 名称

框架选项卡。
图20。框架选项卡,以蓝色标出

该表包含三列:

  • 数据。消息有效负载。如果邮件是纯文本,则会在此处显示。对于二进制操作码,此列显示操作码的名称和代码。支持以下操作码:Continuation Frame,Binary Frame,Connection Close Frame,Ping Frame和Pong Frame。
  • 长度。消息有效负载的长度,以字节为单位。
  • 时间。收到或发送邮件的时间。

消息根据其类型进行颜色编码:

  • 传出的短信是浅绿色的。
  • 传入的短信是白色的。
  • WebSocket操作码是浅黄色的。
  • 错误是浅红色的。

查看响应正文的预览

要查看响应正文的预览:

  1. 单击“ 请求”表的“ 名称”列下的请求的URL 。
  2. 单击“ 预览”选项卡。

此选项卡主要用于查看图像。

预览选项卡。
图21。预览选项卡,以蓝色标出

查看回复正文

要查看请求的响应正文:

  1. 单击“ 请求”表的“ 名称”列下的请求的URL 。
  2. 单击“ 响应”选项卡。

响应选项卡。
图22。“响应”选项卡,以蓝色标出

查看HTTP标头

要查看有关请求的HTTP标头数据:

  1. 在“请求”表的“ 名称”列下单击请求的URL 。
  2. 单击“ 标题”选项卡。

标题选项卡。
图23。标题选项卡,以蓝色标出

查看HTTP标头源

默认情况下,“标题”选项卡按字母顺序显示标题名称。要按收到的顺序查看HTTP标头名称:

  1. 打开您感兴趣的请求的标题选项卡。请参阅 查看HTTP标头
  2. 单击“ 请求标头”或“ 响应标头”部分旁边的“ 查看源”

查看查询字符串参数

要以人类可读的格式查看URL的查询字符串参数:

  1. 打开您感兴趣的请求的标题选项卡。请参阅 查看HTTP标头
  2. 转到“ 查询字符串参数”部分。

查询字符串参数部分。
图24。“查询字符串参数”部分,以蓝色标出

查看查询字符串参数源

要查看请求的查询字符串参数源:

  1. 转到“查询字符串参数”部分。请参阅查看查询字符串参数
  2. 单击查看源

查看URL编码的查询字符串参数

要以人类可读的格式查看查询字符串参数,但保留了编码:

  1. 转到“查询字符串参数”部分。请参阅查看查询字符串参数
  2. 单击查看URL编码

查看cookie

要查看请求的HTTP标头中发送的cookie:

  1. 单击“ 请求”表的“ 名称”列下的请求的URL 。
  2. 单击Cookies选项卡。

有关每个列的说明,请参阅字段

Cookies选项卡。
图25。Cookies选项卡,以蓝色标出

查看请求的时间细分

要查看请求的时间细分:

  1. 单击“ 请求”表的“ 名称”列下的请求的URL 。
  2. 单击“ 计时”选项卡。

请参阅预览时序细分,以便更快地访问此数据。

有关您可能在“时序”选项卡中看到的每个阶段的详细信息,请参阅时序分解阶段

时间选项卡。
图26。时间选项卡,以蓝色标出

以下是有关每个阶段的更多信息。

有关访问此视图的另一种方法,请参阅查看时间细分

预览时间细分

要查看请求的计时细分预览,请将鼠标悬停在“请求”表的“ 瀑布”列中的请求条目上。

请参阅查看请求的时间细分,以获取访问此数据的方法,该方法不需要悬停。

预览请求的时间细分。
图27。预览请求的时间细分

时间分解阶段解释

以下是有关您在“时序”选项卡中可能会看到的每个阶段的更多信息:

  • 排队。浏览器在以下时间排队请求:
    • 有更高优先级的请求。
    • 此源已打开六个TCP连接,这是限制。仅适用于HTTP / 1.0和HTTP / 1.1。
    • 浏览器正在短暂分配磁盘缓存中的空间
  • 停滞不前。由于排队中描述的任何原因,请求可能会停止。
  • DNS查找。浏览器正在解析请求的IP地址。
  • 代理协商。浏览器正在与代理服务器协商请求。
  • 请求已发送。请求正在发送。
  • ServiceWorker准备。浏览器正在启动服务工作者。
  • 请求ServiceWorker。请求将发送给服务工作者。
  • 等待(TTFB)。浏览器正在等待响应的第一个字节。TTFB代表Time To First Byte。此时间包括1次往返延迟和服务器准备响应所用的时间。
  • 内容下载。浏览器正在接收响应。
  • 接收推送。浏览器通过HTTP / 2服务器推送接收此响应的数据。
  • 读推。浏览器正在读取先前收到的本地数据。

查看启动器和依赖项

要查看请求的启动器和依赖项,Shift 请在“请求”表中按住并将鼠标悬停在请求上。DevTools将启动器颜色设置为绿色,依赖关系设置为红色。

查看请求的启动器和依赖项。
图28。查看请求的启动器和依赖项

当Requests表按时间顺序排序时,您悬停在请求上方的第一个绿色请求是依赖项的发起者。如果上面有另一个绿色请求,则该更高的请求是发起者的发起者。等等。

查看加载事件

DevTools 在“网络”面板上的多个位置显示DOMContentLoadedload事件的时间。该DOMContentLoaded事件为蓝色,load事件为红色。

“网络”面板上DOMContentLoaded和加载事件的位置。
图29。“ 网络”面板中的事件DOMContentLoaded和 load事件 的位置

查看请求总数

“网络”面板底部的“摘要”窗格中列出了请求总数。警告:此数字仅跟踪自DevTools打开以来记录的请求。如果在DevTools打开之前发生了其他请求,则不会计算这些请求。

自DevTools打开以来的请求总数
图30。自DevTools打开以来的请求总数

查看总下载大小

请求的总下载大小列在“网络”面板底部的“摘要”窗格中。警告:此数字仅跟踪自DevTools打开以来记录的请求。如果在DevTools打开之前发生了其他请求,则不会计算这些请求。

请求的总下载大小
图31。请求的总下载大小

请参阅查看资源的未压缩大小以查看浏览器解压缩后资源的大小

查看导致请求的堆栈跟踪

当JavaScript语句导致请求资源时,将鼠标悬停在Initiator 列上以查看导致请求的堆栈跟踪。

堆栈跟踪导致资源请求
图32。堆栈跟踪导致资源请求

查看资源的未压缩大小

使用大请求行

单击“ 使用大型请求行” ,然后查看“ 大小”列的底部值。

未压缩资源的示例。
图33jquery-bundle.js通过网络发送的文件30.9 KB的压缩大小是,而未压缩的大小是 86.3 KB

导出请求数据

将所有网络请求保存到HAR文件

要将所有网络请求保存到HAR文件:

  1. 右键单击“请求”表中的任何请求。
  2. 选择另存为内容HAR。DevTools保存自您将DevTools打开到HAR文件以来发生的所有请求。无法过滤请求或仅保存单个请求。

获得HAR文件后,可以将其导入DevTools进行分析。只需将HAR文件拖放到“请求”表中即可。另请参阅HAR Analyzer

选择另存为内容HAR。
图34。选择另存为内容HAR

将一个或多个请求复制到剪贴板

在“ 请求”表的“ 名称”列下,右键单击某个请求,将鼠标悬停在“ 复制”上,然后选择以下选项之一:

  • 复制链接地址。将请求的URL复制到剪贴板。
  • 复制响应。将响应正文复制到剪贴板。
  • 复制为cURL。将请求复制为cURL命令。
  • 全部复制为cURL。将所有请求复制为一系列cURL命令。
  • 全部复制为HAR。将所有请求复制为HAR数据。

选择复制响应。
图35。选择复制响应

更改“网络”面板的布局

展开或折叠“网络”面板UI的各个部分,以关注对您来说重要的内容。

隐藏“过滤器”窗格

过滤

默认情况下,DevTools显示“ 过滤器”窗格。单击“ 过滤” 以隐藏它。

隐藏过滤器按钮
图36。隐藏过滤器,以蓝色标出

使用大型请求行

如果需要在网络请求表中添加更多空格,请使用大行。使用大行时,某些列还提供了更多信息。例如,“ 大小” 列的底部值是请求的未压缩大小。

“请求”窗格中的大型请求行的示例。
图37。“请求”窗格中的大型请求行的示例

使用大型请求行

单击“ 使用大型请求行” 以启用大行。

Large Request Rows按钮
图38。大请求行,以蓝色标出

隐藏“概述”窗格

隐藏概述

默认情况下,DevTools显示“ 概述”窗格。单击隐藏概述 以隐藏它。

隐藏概述按钮
图39。隐藏概述,以蓝色标出

Chrome 70.0.3538.67版本更新说明

修改了27项功能:

Symbol.prototype.description

JavaScriptA description property is being added to Symbol.prototype. This provides a more ergonomic way of accessing the description of a Symbol. Previously, the description could be only be accessed indirectly through the Symbol.protoype.toString().

TLS 1.3

SecurityTLS 1.3 is an overhaul of the TLS protocol with a simpler, less error-prone design that improves both efficiency and security. The new design reduces the number of round-trips required to establish a connection and removes legacy insecure options, making it easier to securely configure a server. It additionally encrypts more of the handshake and makes the resumption mode more resilient to key compromise.

The <rp> element defaults to display:none

CSSThe default style of the <rp> element is changed to “display:none” instead of “display:inline” even if it is not inside the <ruby>element as defined in HTML specification. This behavior is implemented in the UA style sheet, but the web author can override it.

Behavior in other browsers:
– Edge: display:inline (outside <ruby>), display:none (inside <ruby>)
– Firefox: display:none
– Safari: display:inline, display:none (inside <ruby>)

The ontouch* APIs default to disabled on desktop

DOMTo avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop devices (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as `addEventListener(“touchstart”, …)` is not being affected.

Update behavior of CSS Grid Layout percentage row tracks and gutters

CSSThis updates the behavior of percentage row tracks and gutters in grid containers with indefinite heights. Previously, these were behaving similarly to percentage heights in regular blocks, but the CSS WG has resolved to make them behave the same as for columns, making them symmetric. Percentages are now ignored when computing intrinsic height and resolved afterwards against that height. That way both column and row axes will have symmetric behavior to resolve percentages tracks and gutters.

WebUSB on Dedicated Workers

DeviceWebUSB is enabled inside dedicated worker contexts. This allows developers to perform heavy I/O and processing of data from a USB device on a separate thread to reduce the performance impact on the main thread.

Priority Hints

Network / ConnectivityPriority Hints provide developers a way to indicate a resource’s relative importance to the browser, allowing more control over the order resources are loaded.

Many factors influence a resource’s priority in browsers. These include type, visibility, and preload status of a resource. Priority Hints introduces a developer-set “importance” attribute allowing developers to influence the computed priority of a resource. Supported importance values are auto, low, and high.

RTCPeerConnection.getConfiguration()

Web RTCThis change implements getConfiguration() according to the WebRTC 1.0. Specifically it returns the last configuration applied via setConfiguration(), or if setConfiguration() hasn’t been called, the configuration the RTCPeerConnection was constructed with.

Remove AppCache from non-secure contexts

SecurityAppCache is now removed from insecure contexts. AppCache is a powerful feature that allows offline and persistent access to an origin, which is a powerful privilege escalation for an XSS. This will remove that attack vector by only allowing it over HTTPS.

This feature was deprecated in Chrome 67.

Remove HTMLFrameSetElement’s anonymous getter.

DOMDeprecate and remove HTMLFrameSetElement’s anonymous getter which is non-standard.

Remove OS build number from user-agent string

Network / ConnectivityThe OS build number (for example, “NJH47F” or “OPM4.171019.021.D1” on Android) has been removed from the user-agent identification (User-Agent header and navigator.userAgent) on Android and on iOS. The iOS change follows Safari’s implementation and freezes the build number as “15E148” instead of removing it.

This will prevent abuses of that information such as exploit targeting and fingerprinting. It’ll also bring Chrome closer in line with RFC 7231 section 5.5.3.

Shadow DOM v0

Web ComponentsChrome and other browsers implemented the new version, see https://www.chromestatus.com/features/4667415417847808.

V0 is deprecated at M70, and will be removed in M73, around, April 2019.
If you are still using this consider migrating to the new API or upgrading your Polymer library. Use –disable-blink-features=ShadowDOMV0 for testing if your site works without Shadow DOM V0 APIs.

For more info: https://groups.google.com/a/chromium.org/d/msg/blink-dev/h-JwMiPUnuU/sl79aLoLBQAJ

Shape Detection API

MultimediaPhotos and images constitute the largest chunk of the Web, and many include recognisable features, such as human faces, text, or QR codes. Detecting these features is computationally expensive, but, particularly on mobile devices, hardware manufacturers have long been supporting these features. This API allows accessing hardware-accelerated detectors where available. This is expected to be in origin trials in Chrome 70.

Support Opus in mp4 (ISO-BMFF) with Media Source Extensions (MSE)

MultimediaOpus is an audio codec already supported by the HTML5 src attribute on <url> elements. This applies to mp4, ogg, and webm containers as well as in webm containers using Media Source Extensions. This change adds support for the Opus codec in the mp4 container to MSE.

Support codec and container switching with MSE using SourceBuffer.changeType()

MultimediaThis change adds the SourceBuffer.changeType() method to improve cross-codec or cross-bytestream transitions during playback with Media Source Extensions.

globalThis

JavaScript`globalThis` enables a universal mechanism to access the global object even in strict functions or modules, regardless of the platform.

‘name’ attribute for dedicated workers

Chrome DevTools for Beginners:开始使用HTML和DOM

这是一系列教程中的第一篇,它们将教您Web开发的基础知识。您还将了解一组名为Chrome DevTools的Web开发人员工具,可以提高您的工作效率。

在这个特定的教程中,您将了解HTML和DOM。HTML是Web开发的核心技术之一。它是控制网页结构和内容的语言。DOM也与网页的结构和内容有关,但您稍后会对此有所了解。

目标

您将通过实际构建自己的网站来学习Web开发。当您完成DevTools for Beginners系列中的所有教程时,您完成的站点将如图1所示

完成的网站。
图1。完成的网站

在本教程结束时,您将了解:

  • HTML和DOM如何创建您在网页上看到的内容。
  • Chrome DevTools如何帮助您尝试HTML和DOM更改。
  • HTML和DOM之间的区别。

你还有一个真正的网站!您可以使用此站点来托管您的简历或博客。

先决条件

在尝试本教程之前,请完成以下先决条件:

  • 如果您不熟悉HTML,请阅读HTML 入门
  • 下载Google Chrome网络浏览器。本教程使用一组内置于Google Chrome中的Web开发工具,称为Chrome DevTools。

设置你的代码

您将在名为Glitch的在线代码编辑器中构建您的站点。

  1. 打开源代码。在本教程中,此选项卡将被称为编辑器选项卡
    编辑器选项卡。
    图2。编辑器选项卡
  2. 单击dfb1。“项目选项”菜单将在左上角打开。
    “项目选项”菜单。
    图3。“项目选项”菜单
  3. 单击“重新混音”。Glitch会创建项目的副本,您可以编辑该项目并随机为项目生成新名称。内容与以前相同。
    重新混合的项目。
    图4。重新混合的项目
  4. 如果您打算完成本系列的下一个教程,请单击“ 登录”并使用您的GitHub或Facebook帐户登录Glitch。如果您未登录,则在关闭编辑选项卡后,您将无法编辑此项目。
  5. 点击查看直播。将打开一个新选项卡,显示实时页面。在本教程中,此选项卡将被称为实时选项卡
    实时标签。
    图5。实时标签

添加内容

你的网站很空。请按照以下步骤添加一些内容!

  1. 编辑器选项卡中,替换<!-- You're "About Me" will go here. --> 为<h1>About Me</h1>
    ... 
    <body> <p> 您的网站!</ p> <main> <h1> 关于我</ h1> </ main>   ...
      
      
        
      
    
    新代码在编辑器选项卡中突出显示。
    图6。新代码在编辑器选项卡中突出显示
  2. 实时标签中查看您的更改。文本About Me在页面上可见。它比文本的其余部分大,因为<h1>元素代表一个部分标题。您的Web浏览器会自动为较大字体的标题设置样式。
    新标题在实时标签中可见。
    图7。新标题在实时标签中可见
  3. 返回编辑器选项卡<p>I am learning HTML. Recent accomplishments:</p>在下面的行中插入<h1>About Me</h1>
    ... 
    <body> <p> 您的网站!</ p> <main> <h1> 关于我</ h1> <p> 我正在学习网页开发。最近的成就:</ p> </ main>   ...
      
      
        
        
      
    
    新代码在编辑器选项卡中突出显示。
    图8。新代码在编辑器选项卡中突出显示
  4. 实时标签中查看您的更改。
  5. 返回编辑器选项卡,添加您的成就列表:
    ... 
      <p> 我正在学习网络开发。最近的成就:</ p> <ul> <li> 了解如何在Glitch中设置我的代码。</ li> <li> 向我的HTML添加了内容。</ li> <li> TODO:了解如何使用Chrome DevTools试验内容更改。</ li> <li> TODO:了解HTML和DOM之间的区别。</ li> </ ul> ......
      
        
        
        
        
      
    
    新代码在编辑器选项卡中突出显示。
    图4。新代码在编辑器选项卡中突出显示
  6. 再次,返回实时选项卡以确保新内容正确显示。
    新列表在实时选项卡中可见。
    图4。新列表在实时选项卡中可见

尝试Chrome DevTools中的内容更改

如果您正在开发包含大量HTML的大页面,您可以想象在编辑器选项卡和实时选项卡之间来回数百次以查看更改可能有点单调乏味,特别是如果您不知道究竟要放在页面上的是什么。Chrome DevTools可以帮助您体验内容更改,而无需离开实时标签。

了解HTML和DOM之间的区别

在您开始从Chrome DevTools编辑内容之前,了解HTML和DOM之间的区别很有帮助。学习的最佳方式是通过示例:

  1. 转到实时选项卡。在页面底部,您会看到文字A new element!?!
    在页面底部的文字'一个新的元素!?!' 看得见。
    图9。在页面底部A new element!?!可以看到 文本
  2. 返回编辑器选项卡,尝试查找此文本index.html。它不存在!
    在index.html中找不到神秘文本。
    图10。神秘的文字A new element!?!无处可寻index.html
  3. 返回实时选项卡,单击鼠标右键A new element!?!,然后选择“ 检查”
    检查一些文字。
    图11。检查一些文字

    DevTools会在您的页面旁边打开。<div>A new element!?!</div>突出显示为蓝色。虽然DevTools中的这个结构看起来像你的HTML,但实际上它是DOM树

    DevTools在页面旁边打开。
    图12。DevTools在页面旁边打开

当您的页面加载时,浏览器会使用您的HTML来创建页面的初始内容。DOM表示页面的当前内容,可以随时间变化。<div>A new element!?!</div由于<script src="new.js"></script>HTML底部的标记,神秘内容会添加到您的网页中 。此标记会导致某些JavaScript代码运行。您将在以后的教程中了解有关JavaScript的更多信息,但现在将其视为可以更改页面内容的编程语言。在这种特殊情况下,JavaScript代码会添加<div>A new element!?!</div>到您的页面中。这就是为什么这个神秘文本在您的实际页面上可见,而不是在您的HTML中。

编辑DOM

如果您想在不离开实时标签的情况下快速尝试内容更改,请尝试使用DevTools。

  1. 在DevTools中,右键单击Your site!并选择“ 编辑为HTML”
    将节点编辑为HTML。
    图13。将节点编辑为HTML
  2. 替换<p>Your site!</p>为下面的代码。
    <header> <p> <b> 欢迎来到我的网站!</ b> </ p> <button> 下载我的简历</ button> </ header>
      
      
    
    将节点编辑为HTML。
    图14。将节点编辑为HTML
  3. CommandEnter(Mac)或ControlEnter (Windows,Linux,Chrome OS)保存更改,或单击框外部。您的更改会自动显示在您网页的实时视图中。该文本Your site! 已被新内容替换。
    新内容会立即显示在页面上。
    图15。新内容会立即显示在页面上

此工作流程仅适用于试验内容更改。如果您重新加载页面或关闭选项卡,您的更改将永远消失。如果您正在使用此工作流程并且想要保存更改,则需要手动将这些更改复制到HTML。

接下来的几节将向您展示更多可以从DOM树更改内容的方法。

重新排序节点

您还可以更改DOM节点的顺序。例如,在您的网页上,导航菜单位于底部附近。将其移至顶部:

  1. <nav>在DevTools 的DOM树中查找节点。
    nav节点在DevTools中以蓝色突出显示。
    图16。nav节点在DevTools中以蓝色突出显示
  2. <nav>节点拖到顶部,这样它就是<body>节点下面的第一个子节点。
    将导航节点拖到顶部。
    图17。将导航节点拖到顶部

    <nav>节点现在显示在页面顶部。

    导航节点位于页面顶部。
    图18。导航节点位于页面顶部

删除节点

您还可以从DOM树中删除节点。

  1. DOM树中,单击<div>A new element!?!</div>。DevTools突出显示蓝色节点。
    选择要删除的节点。
    图19。选择要删除的节点
  2. Delete键盘上的键。该<div>A new element!?!</div>节点将从DOM树中删除。
    该节点已被删除。
    图20。该节点已被删除

复制您的更改

你几乎完成。您已在DevTools中对页面进行了一些更改,但它们尚未保存到您的源代码中。

  1. 重新加载您的实时标签。您在DOM树中所做的更改将消失。特别是,文本Your site!返回页面顶部,文本A new element!?!返回到底部。
    你所做的改变已经消失了。
    图21。你所做的改变已经消失了

在Chrome中与Flash说再见

今天,Adobe宣布计划在2020年底停止支持Flash。

20年来,Flash帮助塑造了您在网络上玩游戏,观看视频和运行应用程序的方式。但在过去的几年里,Flash变得不那么常见了。三年前,80%的桌面Chrome用户每天都会访问一个使用Flash的网站。今天使用率仅为17%并且继续下降。

这一趋势表明,网站正在迁移到开放式网络技术,这种技术比Flash更快,更节能。它们也更安全,因此您可以在购物,银行业务或阅读敏感文档时更安全。它们还适用于移动设备和桌面设备,因此您可以随时随地访问自己喜爱的网站。

这些开放式网络技术成为Chrome去年年底的默认体验,当时网站开始需要您的许可才能运行Flash。Chrome将在未来几年内继续淘汰Flash,首先要求您在更多情况下允许运行Flash,并最终在默认情况下禁用Flash。到2020年底,我们将从Chrome中完全删除Flash。

如果您定期访问今天使用Flash的网站,您可能想知道这会对您产生什么影响。如果站点迁移到打开Web标准,除了您将不再看到在该站点上运行Flash的提示之外,您不会发现太多差异。如果该站点继续使用Flash,并且您授予站点运行Flash的权限,则它将在2020年底之前运行。

与Adobe,其他浏览器和主要发布商进行了大量密切合作,以确保网络已准备好无Flash。我们今天支持Adobe的发布,我们期待与大家合作,让网络变得更好。

使用或修复 Flash 音频和视频

借助 Adobe Flash 插件,您可以在计算机上通过 Chrome 收听和观看 Flash 音频和视频内容。

注意:Adobe 将于 2020 年底停止支持 Flash。要想详细了解在 2020 年底之前 Chrome 如何与 Flash 协作,请访问这篇 Chrome 博客

允许网站播放 Flash 视频、动画和游戏

请仅允许 Flash 在您信任的网站上运行。某些网站可能会利用 Adobe Flash Player 来损害您的计算机。

在退出 Chrome 后,系统不会保存您的 Flash 设置。下次打开 Chrome 时,您必须重新允许之前添加的网站来使用 Flash。

  1. 当您访问您信任且包含 Flash 内容的网页时,点击点击即可启用 Adobe Flash Player
  2. 点击允许

网站需要使用 Flash 才能正常运行

如果某网站无法正常运行,您可能需要更改设置来允许该网站使用 Flash。

  1. 在网址的左侧,点击“锁定”图标 Lock 或“信息”图标 查看网站信息
  2. 点击底部的网站设置
  3. 在随即显示的新标签页中,依次点击“Flash”右侧的向下箭头 向下箭头 然后 允许
  4. 返回该网站并重新加载页面。

更改您的 Flash 设置

禁止所有网站使用 Flash

  1. 在计算机上打开 Chrome。
  2. 依次点击右上角的“更多”图标 更多 然后 设置
  3. 点击底部的高级
  4. 在“隐私设置和安全性”下方,点击内容设置
  5. 点击 Flash
  6. 关闭顶部的先询问(推荐)

移除已禁止或已允许使用 Flash 的网站

  1. 依次点击右上角的“更多”图标 更多 然后 设置
  2. 点击底部的高级
  3. 在“隐私设置和安全性”下方,点击内容设置
  4. 点击 Flash
  5. 点按网站右侧的“移除”图标 Remove

解决 Flash 出现的问题

如果 Flash 无法正常运行,或者您看到以下错误消息,请尝试按照下文介绍的问题排查步骤操作。

  • Adobe Flash 版本太旧,因此已被屏蔽
  • 无法加载插件
  • 该网页已屏蔽以下插件
  • 该插件不受支持
  • 插件 (Shockwave Flash) 未响应

第 1 步:开启 Flash

请仅允许 Flash 在您信任的网站上运行。

  1. 在计算机上打开 Chrome。
  2. 转到提供相应视频或游戏的网站。
  3. 在网址的左侧,点击“锁定”图标 Lock 或“信息”图标 查看网站信息
  4. 点击底部的网站设置
  5. 在随即显示的新标签页中,依次点击“Flash”右侧的向下箭头 向下箭头 然后 允许
  6. 返回该网站并重新加载页面。

第 2 步:更新 Flash

  1. 在计算机上打开 Chrome。
  2. 在顶部的地址栏中,输入 chrome://components,然后按 Enter 键。
  3. 找到“Adobe Flash Player”。
  4. 点击检查是否有更新
  5. 如果您看到“组件未更新”或“组件已更新”,则表明您的组件是最新版本。
  6. 返回到包含 Flash 内容的页面。如果 Flash 内容没有自动打开,请点击左上角的“重新加载”图标 Reload

第 3 步:更新 Chrome

  1. 在计算机上打开 Chrome。
  2. 点击右上角的“更多”图标 更多
  3. 点击更新 Google Chrome。如果您没有看到此按钮,则表明您的 Chrome 是最新版本。
  4. 点击重新启动
更新 Chrome 时遇到问题?了解如何解决 Chrome 更新问题

第 4 步:重新安装 Flash

确保您只通过 Adobe 的网站安装 Flash。
  1. 在计算机上打开 Chrome。
  2. 转到 adobe.com/go/chrome
  3. 在“第 1 步”下方,选择计算机的操作系统。
  4. 在“第 2 步”下方,选择列有“PPAPI”的选项。
  5. 点击立即下载,然后按照步骤安装 Flash。

修正其他 Flash 错误

系统显示“以下插件已崩溃”错误消息或显示插件图标 插件

  1. 如果 Adobe Flash 无法自动重新启动,请将其强行关闭:
    1. 点击右上角的“更多”图标 更多
    2. 依次点击更多工具 然后 任务管理器
    3. 选择“插件:Shockwave Flash”。
    4. 点击结束进程
  2. 关闭“任务管理器”窗口,然后返回包含 Flash 内容的网页。
  3. 点击左上角的“重新加载”图标 Reload

设置默认搜索引擎

您可以将地址栏(多功能框)用作搜索框。地址栏会自动使用 Google 进行搜索,但您也可将其他搜索引擎设为默认搜索引擎。

如果 Google 一直是您的默认搜索引擎,但突然不是了,则表明您的系统可能已遭到恶意软件的攻击。获取恢复 Chrome 设置的相关帮助

设置默认搜索引擎

  1. 在计算机上打开 Chrome。
  2. 依次点击右上角的“更多”图标 更多 接着 设置
  3. 在“搜索引擎”下方,点击“地址栏中使用的搜索引擎”旁边的向下箭头 向下箭头
  4. 选择新的默认搜索引擎。

如果您已尝试设置搜索引擎但发现无效,则意味着您的计算机上可能存在恶意软件。获取恢复 Chrome 设置的相关帮助

添加、修改或移除其他搜索引擎

  1. 在计算机上打开 Chrome。
  2. 依次点击右上角的“更多”图标 更多 接着 设置
  3. 在“搜索引擎”下方,点击管理搜索引擎
  4. 找到“其他搜索引擎”。
    • 添加:点击“其他搜索引擎”右侧的添加。填写文本字段,然后点击添加
    • 设为默认搜索引擎:依次点击相应搜索引擎右侧的“更多”图标 更多 接着 设为默认搜索引擎
    • 修改:依次点击相应搜索引擎右侧的“更多”图标 更多 接着 修改
    • 删除:依次点击相应搜索引擎右侧的“更多”图标 更多 接着 从列表中移除

文本字段填写提示

“搜索引擎”字段

请输入相应搜索引擎的标签或名称。

“关键字”字段

请为相应搜索引擎输入您要使用的文字快捷方式。这样一来,您便可以在地址栏中输入设置的关键字来快速打开相应搜索引擎。

“网址(用“%s”代替搜索字词)”字段

请输入相应搜索引擎的结果页对应的网址,然后使用 %s 代替搜索字词。

要查找并修改结果页对应的网址,请执行以下操作:

  1. 转至您要添加的搜索引擎。
  2. 执行一次搜索。
  3. 将搜索结果页的网址复制并粘贴到“网址”字段中。搜索结果页的网址与网站网址有所不同。
    • 例如,如果您搜索“soccer”,Google 搜索结果的网址就是 http://www.google.com/search?q=soccer
  4. 将网址中的搜索字词替换为 %s
    • 例如,如果您使用的是 Google 搜索结果网址,那么您的搜索引擎网址将为 http://www.google.com/search?q=%s

在 Chrome 上搜索网络信息

您可以在互联网上、书签列表和浏览记录中快速找到所需内容。

  1. 在计算机上打开 Chrome。
  2. 在顶部的地址栏中,输入您的搜索内容。
  3. 点击相应结果或按 Enter

在网页中搜索

您可以在计算机上的网页中查找特定字词或短语。

  1. 在计算机上,在 Chrome 中打开一个网页。
  2. 依次点击右上角的“更多”图标 更多 接着 查找
  3. 在右上角显示的栏中输入搜索字词。
  4. 按 Enter 键搜索网页。
  5. 系统会以黄色突出显示匹配内容。您可以使用滚动条上的黄色标记查看所有匹配内容在网页中的位置。

提示:您也可以使用键盘快捷键,通过按 Ctrl+F(Windows、Linux 和 Chrome 操作系统)或 ⌘+F (Mac) 来快速查找字词或短语。

搜索字词或图片

您可以在网页上查找特定字词、短语或图片的更多相关信息。

  1. 在计算机上,在 Chrome 中打开一个网页。
  2. 突出显示某个字词、短语或图片。
  3. 在计算机上右键点击它。如果使用的是 Mac 设备,则按住 Ctrl 的同时点击。
  4. 点击相应选项,即可使用您的默认搜索引擎开始搜索。例如,您可能会看到诸如“使用 Google 搜索‘帝企鹅’”或“使用 Bing 搜索此图片”之类的内容。