HTML/性能:呈现多个页面 [英] HTML/Performance: Prerendering of multiple pages
问题描述
在明确用户可能去往的方向(例如图片库或类似图片)的情况下，人们不仅可以猜测用户在其下次点击后将去向何方，还可以预测接下来的5次点击或更多次.
In case of a clear probable direction of where the user will go (for example image gallery or similar) one may not only guess where the user will go after his next click, one may predict the next 5 clicks or more.
当一个人使用"prerender"链接(对于不理解"prerender"的浏览器使用"prefetch"链接)到多个页面时，浏览器将下载并呈现所有这些链接，但会在用户之后忘记数据单击一个链接，预取/呈现版本可以使用多长时间?该功能是否有任何清晰的文档?
When one uses "prerender"-links (or "prefetch" for browsers that don't understand "prerender") to multiple pages, the browser will download and render all these links, but will it forget the data after the user has clicked on a link, and how long stays the prefetched/prerendered version usable? Is there any clear documentation on that feature?
换句话说:指向下5个页面的链接"链接会使网站变快(因为用户可以快速跳过页面)还是变慢(因为浏览器在每次点击时不必要地渲染5个页面)?
In other words: Would a "prerender"-link to the next 5 pages make the website faster (because the user can skip a page quickly) or slower (because the browser needlessly prerenders 5 pages on every click)?
我现在已经进行了一些测试，如果仅放置预渲染链接，似乎多个预渲染链接并不能使其更快.
I have now made some tests and it seems as if multiple prerender-links doesn't make it faster if you just put in prerender links.
推荐答案
好的问题， 首先，我们需要弄清楚"prerender"和"prefetch"是两个不同的功能，具有许多不同的限制和行为. 这里的主要问题之一是，它们的行为会因网络浏览器而略有不同，并且常常被误解和滥用.
Nice Question, First we need to make it clear that "prerender" and "prefetch" are two different features with many different limitations and behavior. One of the big issues here are that they will both act slightly different depending on the webrowser and they are often misunderstood and misused.
预取 HTML5中包含预取的概念spec 更好地用于加载资源(样式表，js，图片等)-这是因为它作为子资源加载到缓存中.在预取页面时，浏览器会下载(一旦当前页面已完全加载)链接页面的顶层(不会预取目标页面中的iframe).预取整个页面可能会导致性能下降.预取的好处是，限制要高得多-预取过程是每个选项卡的(不是Webbrowser实例)，并且您可以设置许多预取链接(IE< 9-最多10个链接，Mozilla未知).
prefetch The concept of prefetching is included in the HTML5 spec better used for loading resources (stylesheets,js,pictures etc) - that's because it loads into the cache as a subresource. When prefetching a page the browser downloads (once the current page is fully loaded) the top layer of the page that is linked (Iframes in the target page won't be prefetched). Prefetching an entire page may cause lack of performance. what's cool about prefetching is that the limits are way higher - Prefetching Process is per tab (not webbrowser instance), And you can set Many links for Prefetching (IE < 9 - Max 10 Links, Mozilla unknown).
prenderer 首先由Chrome呈现，并由IE11实施.后来-添加到页面时，它将在后台执行链接页面的页面完整加载过程(在隐藏的标签上)-您可以通过查看任务管理器(Chrome)，查看其触发状态(一旦加载了主页).
这里的主要问题之一是prerender process是针对浏览器的每个实例(不是按打开的选项卡)，这意味着如果已经打开并触发了另一个网站，则此过程可能会被忽略或延迟(取决于哪个浏览器) .
另一个有趣的事实是，每页只能添加一个"prerender"链接，如果添加更多，则它们将被忽略-如果动态加载prerender链接，则需要知道存在间隔限制问题(500毫秒-在Chrome中) ).
prerender First Presented By Chrome and implemented by IE11 Later - when added to a page it will execute a page full loading process (on a hidden tab) of the linked page at the background - You can see it firing (once the main page is loaded) by looking at the Task manager (Chrome).
One of the big issues here are that a prerender process is per instance of a browser (not per tabs open) that mean that in case another site is already opened and fired this process yours may be ignored OR delayed (it depends which browser).
Another interesting fact is that you can add only one "prerender" Link per page, if you add more they will be ignored - and if you are loading the prerender link dynamically you need to know there is an interval restrict issue (500ms - in Chrome).
预渲染扩展了预提取的概念.它不仅下载顶层资源，还完成了向用户显示页面所需的所有工作-在用户单击之前不会真正显示该页面.如果用户在页面上的链接上单击鼠标中键(在背景选项卡中将其打开)，然后又切换到该选项卡，则预渲染的行为类似于.但是，在预渲染中，该背景选项卡"对用户完全隐藏了，并且当用户单击时，其内容将无缝地交换到用户正在查看的同一选项卡中.从用户的角度来看，该页面的加载速度比以前快得多.
Prerendering extends the concept of prefetching. Instead of just downloading the top-level resource, it does all of the work necessary to show the page to the user—without actually showing it until the user clicks. Prerendering behaves similarly to if a user middle-clicked on a link on a page (opening it in a background tab) and then later switched to that tab. However, in prerendering, that "background tab" is totally hidden from the user, and when the user clicks, its contents are seamlessly swapped into the same tab the user was viewing. From the user’s perspective, the page simply loads much faster than before.
- 显示页面时，某些动画可能不会出现.这可能是因为它们是在后台加载页面时运行的.
- 计时器可能会产生意想不到的结果.
- 保留Cookie，缓存的内容以及异步操作(例如IndexedDB和Web存储)所做的更改.
- 某些浏览器中的私人浏览将禁用预渲染和预取(也为隐身").
- 某些浏览器不支持HTTPS链接(IE> 11，gecko< 1.9.1，Chrome将不支持).
- Chrome& IE不支持
HTTP Link: header - <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">
- Certain animations may not appear when the page is displayed. This is likely because they've already run while the page was loaded in the background.
- Timers may give unexpected results.
- Cookies, cached content, and changes made by asynchronous operations (such as IndexedDB and web storage) are retained.
- Private Browsing in some browsers will disable prerendering and prefetching ( "incognito" too ).
- Some Browsers Won't support HTTPS Links (IE > 11, gecko < 1.9.1, Chrome Won't).
- Chrome & IE won't support
HTTP Link: header - <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">
- 浏览器:是HTML5规范的一部分(较旧的IE< 9充当dns-prefetch).
- 加载到:作为当前Tab的子资源到缓存中.
- 限制::IE11中有10个链接(IE10未知，FireFox未知).
- 寿命: 5分钟.
- 下载深度:仅位于网页的顶层.
- 链接: HTTP，HTTPS(IE> 10，Gecko> 1.9.1)，没有相同来源"限制.
- 动态:受支持.
- Browsers: Is a part of HTML5 specs (Older IE < 9 acts as dns-prefetch).
- Loads To: as subresources of the current Tab into the cache.
- Limits: 10 links in IE11 (IE10 unknown, FireFox unknown).
- Life Time: 5min.
- Download Depth: Top layer only (of a webpage).
- Links: HTTP, HTTPS (IE > 10, Gecko > 1.9.1), No 'same origin' restrict.
- Dynamically: Supported.
- 浏览器: Chrome，IE> 10.
- 加载到:单独的隐藏标签页.
- 限制::1个链接-将为每个浏览器实例触发一个链接.
- 生存时间::直到触发另一个预渲染"过程(从任何打开的选项卡开始).
- 下载深度:整页加载.
- 链接: HTTP(不会使用HTTPS)，没有相同来源"限制.
- 动态:每次更改之间500毫秒.
- Browsers: Chrome, IE > 10.
- Loads To: Separate hidden Tab.
- Limits: 1 link - Will trigger one per instance of the browser.
- Life Time: Until another Prerendering process is fired (From any opened Tab).
- Download Depth: Full Page Load.
- Links: HTTP (HTTPS won't), No 'same origin' restrict.
- Dynamically: 500ms between each change.
- 目标URL不是HTTP GET XMLHTTPRequests-被忽略(POST，PUT，DELETE)
- 使用mozila下载内容-延迟
- IE> 9-页面上的10个以上链接-忽略
- 打开了两个浏览器(Mozila)，它们在带宽上竞争-延迟
- 开发人员工具打开-忽略
- 启用了专用模式-忽略
- 目标URL是文件下载-忽略
- The target URL is not a HTTP GET XMLHTTPRequests - ignored (POST,PUT,DELETE)
- Downloading Something using mozila - delayed
- IE > 9 - More than 10 Links on the page - ignored
- Two browsers (Mozila) are opened competing on bandwidth - delayed
- Developer Tools open - ignored
- Private mode Enabled - ignored
- The target URL is a file download - ignored
- 目标URL不是HTTP GET XMLHTTPRequests-被忽略(POST，PUT，DELETE)
- 另一个Prerender进程正在运行-已延迟(可以忽略)
- 页面上的链接超过1个-被忽略(只有第一个会运行)
- 浏览器在带宽上竞争-已延迟
- 开发人员工具或'隐身'-忽略
- 目标网址是文件下载-已终止
- 在IE中< 10:用户切换到其他标签页或浏览器实例-已终止&擦除 页面中的
- HTML音频或视频-已终止
- 弹出窗口创建-中止
- 触发恶意软件警告的页面-已终止
- The target URL is not a HTTP GET XMLHTTPRequests - ignored (POST,PUT,DELETE)
- Another Prerender process is running - delayed (May be ignored)
- More than 1 Links on the page - ignored (only first will run)
- Browsers is competing on bandwidth - delayed
- Developer Tools Or 'incognito' - ignored
- The target URL is a file download - aborted
- In IE < 10: The user switches to a different tab or browser instance - aborted & erased
- HTMLAudio or Video in the page - aborted
- Popup/window creation - aborted
- Pages that trigger the malware warning - aborted
- Chrome Prerendering
- Mozila (Firefox, Netscape etc) Prefetching
- IE Prerendering and Prefetching
这篇关于HTML/性能:呈现多个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
