一种高效的网页预读方法

预读网页的做法，一般是提前获取下一页引用的资源，在进入下一页时可以缩短加载时间

获取资源有以下一些方法

1. 读取 html，分析其中的资源，再预读资源
   缺点：前后端分离使得现代网页的 DOM 大多是动态生成，其中的资源无法简单的静态分析出来

2. 为下一页生成隐形 iframe，因为其中有完整的网页渲染，资源全部可见
   缺点：即便读到了资源，进入下一页时仍然需要重新渲染 DOM，有时有性能问题

3. 对个别网站单独分析，得到下一页引用的资源地址，在本页更新 DOM(比如图集的无限滚动)
   缺点：需要对每个网站单独编写规则，URL 的标记位置功能弱化

方法 1 基本是落后的做法，已没有实际意义；
方法 3 对每个网站编写规则过于繁琐；
对方法 2，只要稍加改动，就能极大改善效率，即：用 iframe 中渲染完成的 DOM 直接替换上层页面的 DOM，瞬间完成切换

document.body.replaceWith( iframe.contentWindow.document.body );

以下是以豆瓣图集为例子的油猴代码
https://gist.github.com/autoxbc/badda87b6867b377a834b664d7f735d1

测试页
https://movie.douban.com/subject/27010768/photos

页面载入完毕后，点击下一页按钮，可以看到过渡是瞬间完成的，没有延迟和抖动

同时，豆瓣图集脚本里实现了一个简单的暗黑主题模式。
一般来说，暗黑主题经常出现进入下一页时显示一个瞬间白屏，破坏了暗黑状态。 这是因为不管暗黑主题的加载代码性能多好，都会有个瞬间露出 html 的纯白底色 而上面的 DOM 替换法，没有过渡过程，使得暗黑主题不会漏白

虽然上面的代码稍长，其中预读的部分仅有一句代码

preLoadURL( target ,'.paginator .next a');

对任意网站，只需要找出翻页按钮的选择器，不需要分析页面结构和资源地址。 进一步的，用一段代码去查找翻页按钮的位置，甚至可以省略选择器，达到完全网站无关