vue项目 样式动态渲染_渲染样式

vue项目 样式动态渲染

The question is - what will a browser do, given a page with several stylesheets, each of them probably overwriting definitions from the previous ones? Will the browser render the page using the first received css file, while downloading the other ones and after that partially re-rendering where required? The answer is: no, the browser will wait until all CSS files are downloaded, (then probably merge all definitions, just a wild guess) and will render once.

问题是-给定一个页面包含多个样式表的情况下，浏览器将如何处理，每个样式表可能会覆盖先前样式表的定义？ 浏览器是否会在下载其他文件时使用接收到的第一个CSS文件来渲染页面，然后在需要时部分重新渲染？ 答案是：不会，浏览器将等到所有CSS文件下载完毕(然后可能会合并所有定义，只是一个疯狂的猜测)，并将呈现一次。

测试 (Test)

I did this test - one page with two stylesheets that contain pretty much the same selectors for different table styles (thanks to this gallery). Each of the CSS files is actually a PHP script and has a call to sleep(), one sleeps for 5 seconds, the other one for 10.

我进行了此测试-一页包含两个样式表，其中包含几乎相同的选择器，用于不同的表格样式(感谢此Gallery )。 每个CSS文件实际上都是一个PHP脚本，并调用了sleep() ，一个睡眠5秒钟，另一个睡眠10秒钟。

结果 (Result)

The browser sits there and waits for the both styles, rendering nothing (except for the page title, but that's not really rendering, is it?). So nothing happens for 10 seconds, then the second style is used for the final rendering. This happens in both FF and IE.

浏览器坐在那儿，等待这两种样式，什么都不呈现(页面标题除外，但这不是真正的呈现，是吗？)。 因此10秒钟没有任何React，然后将第二种样式用于最终渲染。 在FF和IE中都会发生这种情况。

杂项 (Misc)

I also tried sleeping in the actual page, and flushing the output after each row. In my home environment FF renders each row as it's received, but in my hosted environment, it waits for the whole table. IE alsways waits for the complete table.

我还尝试在实际页面中Hibernate，并在每一行之后刷新输出。 在我的家庭环境中，FF会在接收到每一行时对其进行渲染，但是在我的托管环境中，它将等待整个表。 IE始终等待完整的表。

If I put the page to too much sleep so that the php script dies before the second stylesheet is dowloaded, the browser uses whatever is at hand (css1) to render the page.

如果我让页面睡得太多，以致php脚本在下载第二个样式表之前就死了，那么浏览器将使用手头的任何东西(css1)来呈现页面。

演示/下载 (Demo/download)

• the actual test - two CSS files, first one sleeping 5 seconds, the other one 10

  实际测试-两个CSS文件，第一个CSS睡眠5秒，另一个10

• table with no styles, sleeping 1 second after each row

  没有样式的桌子，每排睡一秒钟

• table with css1 only, css sleeps 5 seconds

  仅具有css1的表，css睡眠5秒

• zipped test for your testing pleasure

  压缩测试为您带来测试乐趣

Tell your friends about this post on Facebook and Twitter

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

翻译自: https://www.phpied.com/rendering-styles/

vue项目 样式动态渲染