html" title=css>css html" title=web>webkit" width="403px" height="256px" style="outline: none;" />

html" title=css>css html" title=web>webkit

This post brought to you via Facebook engineers Jeff Morrison and Andrey Sukhachev, who discovered and helped isolate the issue.

这篇文章是通过Facebook工程师Jeff Morrison和Andrey Sukhachev带给您的，他们发现并帮助隔离了该问题。

用例 (Use case)

Think a "single page app" use case. You click a button. Content comes via XHR. But content is complex (and app is as lazy-loading as possible) and content requires extra CSS. In an external file.

考虑一个“单页应用程序”用例。 您单击一个按钮。 内容来自XHR。 但是内容很复杂(并且应用程序尽可能延迟加载)，并且内容需要额外CSS。 在外部文件中。

Only when the external CSS arrives should the app show the content. Otherwise content will be weirdly styled.

仅当外部CSS到达时，应用程序才显示内容。 否则，内容将被奇怪地设置样式。

执行 (Execution)

Two "modules" (or "widgets") of the app require two different CSS files. Both modules are requested at about the same time. We listen to onload of the CSS files. Expected behavior: whenever a module and its CSS dependency arrive - show that module. Asynchronously. No one cares which module shows first, as long as they show up as soon as possible.

应用程序的两个“模块”(或“小部件”)需要两个不同CSS文件。 大约同时请求两个模块。 我们聆听CSS文件的加载。 预期的行为：每当模块及其CSS依赖项到达时，请显示该模块。 异步地。 只要它们尽快出现，谁都不会在乎哪个模块首先显示。

实验性 (Experimentation)

Two modules. Two CSS files. 1st CSS happens to take one second. The second CSS takes 5 seconds.

两个模块。 两个CSS文件。 第一个CSS刚好花费一秒钟。 第二个CSS需要5秒钟。

Test pages: one and two

测试页：第一页和第二页

Here's the end result. The first module is pinky, the second is yellow. All good.

这是最终结果。 第一个模块为粉红色，第二个模块为黄色。 都好。

Same with network panel ON:

与网络面板打开相同：

The question is what does the user see during the ?-mark - between the first CSS is done and the second one is still loading.

问题是用户在？标记期间看到了什么-在第一个CSS完成之后，第二个CSS仍在加载。

Oh, and here's the load() function that runs when the user clicks the button "load" initiating the new modules to appear:

哦，这是当用户单击“加载”按钮启动新模块出现时运行的load()函数：

function load() {
  var these = ['class1.html" title=css>css.php', 'class2.html" title=css>css.php'];
  var classes = ['class1', 'class2'];
  var head = document.getElementsByTagName('head')[0];
  
  for (var i = 0; i < these.length; i++) {
    var url = these[i];
    var link = document.createElement('link');
    
    link.type = "text/html" title=css>css";
    link.rel = "stylesheet"
    link.href = url;
    link.onload = (function (i) {
      return function () {
        console.log(these[i]);
        var div = document.createElement('div')
        div.appendChild(document.createTextNode(these[i]));
        result.appendChild(div);
        div.className = classes[i];
        //s = getComputedStyle(result).height;
      }
    }(i));
    
    head.appendChild(link);
  }
 
}

预期行为 (Expected behavior)

In FF, whenever the the first CSS is loaded, we see a new module.

在FF中，无论何时加载第一个CSS，我们都会看到一个新模块。

Test for yourself (in Firefox)

自行测试(在Firefox中)

＃1问题：“高效” Webkit (#1 issue: "efficient" html" title=web>webkit)

You know that browsers batch layout and paints tasks because these tend to be expensive. For example they wait for all CSS (even useless print and other @media stylesheets) to arrive and block the rendering of the page. (More on these topics: here, here)

您知道浏览器会批处理布局并绘制任务，因为它们往往很昂贵。 例如，他们等待所有CSS(甚至是无用的打印和其他@media样式表)到达并阻止页面的呈现。 (有关这些主题的更多信息：此处，此处)

So turns out that here html" title=web>webkit also waits for both CSS files to arrive before rendering anything.

因此，事实证明，这里的html" title=web>webkit在渲染任何内容之前还等待两个CSS文件到达。

You see in the console we know (in JavaScript) that CSS has arrived. But html" title=web>webkit (chrome, safari, mobile safari) doesn't paint anything, waiting for the second CSS. Bummer!

您会在控制台中看到我们知道(在JavaScript中)CSS已经到达。 但是html" title=web>webkit(chrome，safari，mobile safari)什么也没画，等待第二个CSS。 mm！

问题2：绘制未样式化的内容 (Issue #2: painting unstyled content)

While issue #1 is just a bummer that can be done better for the progressive feedback-y user experience, #2 is a bug. This is the issue that Jeff and Andrey found and were floored.

虽然问题＃1简直是无赖，对于渐进式的y用户体验而言，它可以做得更好，但问题＃2是一​​个错误。 这是Jeff和Andrey发现并提出的问题。

If there's a paint going on between the two stylesheets, the browser dumps the unstyled content on the page. Ugly stuff.

如果两个样式表之间有油漆，则浏览器会将未样式化的内容转储到页面上。 丑陋的东西。

This was only happening sometimes, but after forming and testing an hypothesis, I was able to distill a reproducible test case. The only change is: after the load of the first CSS, flush the rendering queue by requesting a style information. e.g.

这只是偶尔发生，但是在形成并测试了假设之后，我能够提炼出可重现的测试用例。 唯一的变化是：在加载第一个CSS之后，通过请求样式信息刷新渲染队列。 例如

link.onload = function () {
  s = getComputedStyle(dom).height;
}

复制并提交错误 (Repro and file a bug)

You can reproduce for yourself. Use chrome and try:

您可以自己复制。 使用chrome并尝试：

1. Issue: no paint till all CSS is here

   问题：直到所有CSS都在这里才上漆

2. Bug: unstyled paint while waiting for all CSS

   错误：等待所有CSS时未样式化的绘制

I was faced with "registration wall" trying to file a html" title=web>webkit bug, hence this post. Someone please file a bug and feel free to use the provided test cases.

我遇到了“注册墙”，试图提交一个html" title=web>webkit错误，因此发布了这篇文章。 有人请提交错误，并随时使用提供的测试用例。

The solution, IMO, is to make html" title=web>webkit behave like FF. No waiting for all CSS. This solves both issues. In the worst case, at least the unstyled bug (issue #2) should be addressed.

IMO的解决方案是使html" title=web>webkit表现得像FF。 无需等待所有CSS。 这解决了两个问题。 在最坏的情况下，至少应解决无样式错误(问题2)。

Interim solution for html" title=web>web developers: inline CSS required by the module together with the module content.

针对Web开发人员的临时解决方案：模块所需的内联CSS以及模块内容。

Thanks for reading!

谢谢阅读！

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/html" title=web>webkit-html" title=css>css-on-demand-issues/

html" title=css>css html" title=web>webkit