什么是抑制增量渲染? [英] What is suppressesIncrementalRendering doing?

问题描述

我使用的是最新版本的 Xcode 和 Swift.

I'm using the newest version of Xcode and Swift.

我在谷歌上搜索以提高我的 KWWebView 速度并发现以下内容:

I was googling around to make my KWWebView even faster and found the following:

webConfiguration.suppressesIncrementalRendering = true

文档说明如下:

一个布尔值，指示 Web 视图是否抑制内容渲染直到它完全加载到内存中.

A Boolean value indicating whether the web view suppresses content rendering until it is fully loaded into memory.

但这意味着什么?这是否意味着，只要 WKWebView 并非完全加载了所有资源(如图像和 javascript 文件)，html 就不会被呈现和显示?

But what does this mean? Does it mean, the html doesn't not get rendered and shown as long as not all resources like images and javascript files are completely loaded by the WKWebView?

推荐答案

如文档中所述，它是一个标志，告诉 webview 引擎等待或不等待，直到事情准备就绪.是扫描文档(html+相关资源)以检查定期重绘的内容，还是等待完整的内容加载并准备就绪.

As stated in the documentation it's a flag to tell the webview engine to wait or not till things are set and ready. whether to scan the document (html+related resources) to check for what to be redrawn periodically, or just await the full stuff to be loaded and ready.

网络引擎:

渲染是一个渐进的过程，它依赖于组成页面的资产(js、Css、图像......).请务必了解，打开或关闭此功能只会打开/关闭加载内容的渲染算法.

Rendering is a progressive process that depends on the assets (js, Css, images..) that will compose the page. It is important to understand that Turning this feature on or off will simply turn the algorithm of rendering on/off for loaded content.

如何让我的页面更快?

很多因素，渲染算法(引擎的)，脚本的重量(包，内存分配，事件传递和处理等)，图像的大小，CSS 的结构如何，以及它的分层选择器组织(css 解析和应用).页面中加载(包含)资产的顺序.

A lot of factors, rendering algorithm (engine's), how heavy your scripts are(bundle, memory allocation,event pass through and handling, etc..), the size of the images, how well structured your CSS is, and its hierarchical selector orgnisation(css parsing and application). The order of which the assets are loaded( included) in the page.

您始终可以在现代浏览器中(例如 devtools) 检查您的页面的分析，以了解进展情况、分配的内存大小、包大小、脚本编写时间，页面是如何设计来消耗/利用设备资源的.

You can always check the profiling of your page in (devtools for example) on a modern browser to see how things go, what size of memory it allocates, the bundle size, time for scripting, how the page is designed to consume/utilise device resources.

长话短说:

一般来说，您的页面在浏览器中运行时必须经历三个主要阶段，总共五个步骤:

Generally speaking there are THREE main phases with a total of five steps through which your page has to go while living in the browser:

阶段 A:内存/计算 (CPU)

1- 脚本:

PHASE B:(主要处理CPU)

2- 造型

3- 布局

阶段 C:(GPU 功率！)

4- 油漆

5- 组成

当浏览器决定更新时，它必须通过这些，无论是完整通过还是部分通过都会产生很大的不同.考虑下面的例子

When the browser decides to to update it has to go through these, either a full pass or a partial pass will make a lot of difference. consider the following example

如果您有一个 div，并且您决定创建一个将其从屏幕左边缘移动到右边缘的动画，您会看到开发人员采用了两种方法:

if you have a div, and you decided to create an animation that moves it from the left edge of the screen to the right edge, you see developers doing two approaches:

• 那些只写代码的人:随着时间的推移更改 div 样式的左值.(简单吧?)

• THOSE WHO JUST WRITE CODE: change the left value of the div style over time. ( simple right?)

知道这些事情的人:使用 translateX 或 translate3D 进行转换.

THOSE WHO KNOW THE STUFF: do a transfom by using translateX or translate3D.

两种方式都可以，第一种会占用你的 CPU，而第二种会以非常高的 FPS 运行.

both ways will work, the first will eat up your CPU, while the second will run at a very high FPS.

为什么?

第一种方法使用神圣的左值，这意味着浏览器将不得不重新计算新的左值 (STEP1) >检查样式 (STEP2) >然后做一个新的布局(步骤 3)>画画(第 4 步)>然后进入作文阶段(STEP 5)

The first approach plays with sacred left value, that means the browser will have to re-calculate the new left (STEP1) > check style (STEP2) > THEN do a new LAYOUT (STEP 3) > Do a Paint ( step 4) > THEN enter Composition phase (STEP 5)

这将花费完全不必要的 5 个阶段！

this will cost a full pass 5 stages that is totally unnecessary!!

另一方面，除了合成(第 5 步)之外的另一种方法不需要任何东西，因为 GPU 中的矩阵操作(非常强大的能力！)可以处理使用 translate3d 或 translateX 隐含的位移！！你会看到人们谈论在你的 CSS 元素上包含一个 translate3d 道具来提高性能(嗯！)但真正的原因是上面解释的.所以了解幕后发生的事情可以拯救你.

The other approach on the other hand, will not require anything but a composition (one step #5) because the matrix manipulation in the GPU (pretty strong ability!) can handle displacements implied by using the translate3d or translateX!! you will see people talking about including a translate3d prop on your CSS elements to push performance (huh!) but the real reason is the above explained. so knowing what happens under the hood can save you.

超级渲染是在开始显示之前等待加载所有内容，或者只是尝试在加载时处理内容..

supperess rendering is about waiting to load everything before starting to show things up, or simply try to handle things as they load..

这篇关于什么是抑制增量渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！