css3实现的Android Logo无js
时间：2023-12-27 16:23:57 来源：ALiz 作者：消息 阅读：
但是，为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载（speculative loading）。
在上面这种情况下，脚本和样式文件会严重阻塞页面的渲染。猜测预加载的目的就是减少这种阻塞时间。当渲染被阻塞的时候，它会做以下一些事：
•轻量级的HTML（或CSS）扫描器（scanner）继续在文档中扫描
•查找那些将来可能能够用到的资源文件的url
•在渲染器使用它们之前将其下载下来
但是，猜测预加载不能发现通过javascript脚本来加载的资源文件（如，document.write()）。
注：所有的“现代”浏览器都支持这种方式。
回过来再看上面的例子，通过猜测预加载这种方式是怎么工作的。
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>...
解析器返现了example.css，并从网络获取，解析器没有被阻塞，继续解析，当遇到了内联的script节点时，被阻塞住，由于样式文件没有加载完成，阻塞了脚本的执行。渲染树同样也被样式文件阻塞住，所以浏览器没有收到渲染请求，看不到任何东西。到目前为止，和刚才提到的那种方式是一样的。但是接下来就由变化了。
预加载器（Speculative loader）继续“阅读”文档，发现了last.js并视图加载它。接下来：
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="other.js"></scr' + 'ipt>');
</script>
一旦example.css文件加载完成，渲染树也就完成了构建，内联的脚本也可以执行，之后解析器又被other.js阻塞住。解析器被阻塞住之后，浏览器会收到第一个渲染请求，“Hi there!” 会被现实在页面上。这个步骤和刚才那种情况是一致的。然后：
复制代码代码如下:
<html>
<body>
<link rel="stylesheet" href="example.css">
<div>Hi there!</div>
<script>
document.write('<script src="other.js"></scr' + 'ipt>');
</script>
<div>Hi again!</div>
<script src="last.js"></script>
解析器发现了last.js，但是由于预加载器刚才已经把它给加载下来了，放在了浏览器的缓存里，所以last.js会被立即执行。之后，浏览器会收到渲染请求“Hi again”也被显示在了页面上。
通过前后两种情况的对比，希望大家可以对页面的渲染有一定的了解，然后再有针对性的做一些优化。晚安！ （完）^_^
本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载
发表评论
共有0条评论
