新一代预渲染技术

145 阅读1分钟

传统技术

preload

正常资源加载:

image.png

使用了preload

image.png

image.png

prefetch

image.png

image.png

prerender(已被弃用)

新一代技术

chrome浏览器功能

当在浏览器地址栏中输入搜索词时,浏览器会给出一些搜索建议;

通过浏览器访问:chrome://predictors/

绿色的代表 Chrome 认为你有大于 80% 的概率会访问该页面,让你还没开始访问时,Chrome 已经开始为你渲染这个页面了。

黄色代表 Chrome 认为你有大于 50% 的概率会访问该页面,这时候 Chrome 不会进行预渲染,但是会提前帮你预取资源。

Speculation Rules API
  • prefetch

image.png

image.png

source: 目前,唯一指定的规则类型是列表规则,用“source”:“list”表示。列表规则具有应用该规则的URL的明确列表。该列表可以包含任何 URL,甚至文档中不存在对该URL的链接或其他引用的URL。这在预期导航对应于将动态添加的链接或预期的脚本启动的导航的情况下特别有用。

urls: 这些URL将相对于文档基本URL(如果内联在文档中)或相对于外部资源URL(如果从外部获取)进行解析。

  • prerender

image.png

  • 动态创建规则

image.png