默认分类,CSS,JavaScriptinstantclick中文文档2018-12-01 Read 1025 No comments # instantclick 中文文档 ---- 文档官网：http://instantclick.io/documentation 文档基于：instantclick 3.1.0版本 翻译感谢；有道云翻译/谷歌翻译 细节说明；部分基于自己理解有所改动，其中部分我没有接触过的位置，并没有进行翻译，以免误导 特殊声明；文章允许转载，但是必须保留原文超链接出处，放置文章底部或者顶部方便查看位置！ # 入门指南 ---- # 1，开始 ---- 下载InstantClick，公布的最新稳定版本是3.1.0 2014/12/25版本（[日志](http://instantclick.io/changelog "日志")） [下载压缩的版本2.7kb](http://instantclick.io/v3.1.0/instantclick.min.js "下载压缩的版本2.7kb") 或者 [下载未压缩的版本21kb](http://instantclick.io/v3.1.0/instantclick.js "下载未压缩的版本21kb") 其他下载选项 [最新的开发板在github上面](https://github.com/dieulot/instantclick "最新的开发板在github上面") Bower: bower install instantclick 初始化 InstantClick 包括InstantClick和初始化它的页面: ```html <script src="instantclick.min.js" data-no-instant></script><script data-no-instant>InstantClick.init();</script></body></html> ``` InstantClick现在在你的网站上激活了。 阅读以下内容会更好的有助于你使用InstantClick # 2，InstantClick是如何工作的 ---- 从传统的web开发InstantClick几乎没有差异,但重要的是要了解他们。 InstantClick避开浏览器的页面变化周期 可以这样的理解:InstantClick技术使你的网站一个单页面应用程序; 这意味着浏览器不会改变页面了。 注意事项： 你不能依靠DOMContentLoaded或内jQuery.ready()来触发代码(相反可以使用文章事件和脚本的重新加载中的方法)。 第三方脚本,想要兼容InstantClick可能需要一些调整(看文章下面：事件和脚本的重新加载) 在页面变化上浏览器不会显示加载痕迹(看下文的自定义进度条). 第二个最重要的理解是InstantClick只改变body和title,这样你的js脚本是只会加载一次(这带来能一个不错的明显的速度提升)。 这所有的一切意味着什么: 你的css样式和js脚本的head应该是一样的在页面InstantClick上。 如果在你的head取决于页面的内容（像把一些js脚本或者css运行在页面里），它需要一点调整。 InstantClick增强:如果访问者的浏览器不支持InstantClick站点，那么链接将像往常一样工作（补充翻译：就是没有预加载效果正常的浏览），只是没有速度上的提高了。 # 3，预加载 ---- InstantClick有不同的预压的选择,使用一个或另一个取决于你的服务器将允许。 In any case, not recalculating scripts and styles on every page change will already make your pages up to twice as fast (measured with Turbolinks, another project using this technique).【没看懂部分，故不翻译，好像就是个介绍】 默认值：on mouseover (hover) 鼠标移到超链接上就进行预加载，如果页面内容不是特别多，用户点击链接进入文章会立即显示。 代码按照初始化中提到的代码即可。 没有额外的服务器上的负载：on mousedown 在用户鼠标点击的瞬间来预加载页面，让服务器开销几乎为零，同时还有个不错的速度提升。 使用,将“mousedown”作为参数传递给InstantClick.init。 ```javascript InstantClick.init('mousedown'); ``` 在两者之间： on mouseover with a delay 如果用户将鼠标悬停你的超链接后，InstantClick将根据你设置的时间延迟预加载。 建议延迟是100 ms和50 ms。超过100 ms实际上可能比on mousedown慢，小于50 ms和on mouseover (hover)几乎无差异 让InstantClick预加载延迟后,通过延迟毫秒InstantClick.init作为参数 ```javascript InstantClick.init(50); ``` 移动端会怎样 预加载会在用户手触摸超链接的一瞬间开始 如果你的网站优化的移动(设备宽度视窗在Android上,使用FastClick iOS),“点击”当游客从链接,发布他的手指给大约100毫秒的延迟预加载 如果你的网站不是优化了手机,这取决于操作系统。 Android给300 ms,iOS给450 ms。 3g请求在同一网站通常大约需要200 ms。 该怎样去选择 如果你的站点可以处理额外的负载：on mouseover (hover) 如果你的站点服务器不能有太多额外负载，那么用on mousedown，您的网站仍然会快于99%的网站。 If you’d like to determine if your server can, start with mousedown which will put virtually zero additional stress on your server. Then use mouseover with a 100 ms delay. Then with a 50 ms delay (or go by smaller decrements, if you’re patient). Then with mouseover directly. If server-side analytics are important you are limited to mousedown, as using anything else would skew the data.【又一段翻译不好的，不太重要】 # 4，黑名单 ---- 如果一些链接不需要InstantClick预加载。黑名单可以做到。 什么事黑名单 什么样的连接需要设置黑名单，并且不能用白名单： 链接指向一个动作,如注销和切换语言。 链接指向html内容,需要一段时间来加载。 链接指向页面<head>部分有不同css/js脚本 在JavaScript链接触发一个动作。 一些内部链接已经列入黑名单,不能白名单: 含有target或者download属性的超链接上。 在不同的域名上或者协议上。 在相同的页面上链接指向一个#锚。 黑名单的链接这样设置 黑名单的链接,添加一个data-no-instant属性。 ```html <a href="/blog/" data-no-instant>Blog</a> ``` 如何设置一组黑名单 有的时候为了方便，我们需要给一整组设置黑名单，这样的话就不是挨个超链接加data-no-instant属性了。 只需要给父级元素添加data-no-instant属性即可 例如 ```html <div data-no-instant> 无数个需要加黑名单的超链接 </div> ``` 白名单的链接或一组链接 如果上述无数个需要加黑名单的超链接中有那么几个不需要添加黑名单的，可以额外为这几个链接添加白名单属性data-instant 在幕后发生了什么是InstantClick穿过所有的父元素,从当前链接<html>,如果发现data-no-instant属性它认为列入黑名单并停止遍历的联系父母。如果找到一个data-instant它认为白名单的超链接。 如果你想黑名单默认情况下所有的链接,然后白名单链接一个接一个的加,或白名单只有链接在一个容器,那么添加data-no-instant属性到<body>,并且将data-instant属性添加到需要预加载的容器/链接。 ## 白名单模式 The following is deprecated and will likely be removed in 4.0. It’s only useful to know if you’re dealing with a website that has it activated (the true argument is passed to InstantClick.init). The Correct Way™: If you want to accomplish the same as the whitelist mode, just add data-no-instant to your , as described in “Whitelist a link or group of links”. 启用白名单模式通过true来InstantClick.init ```javascript InstantClick.init(true); /* or */ InstantClick.init(50, true); /* or */ InstantClick.init('mousedown', true); ``` # 5，事件和脚本的重新加载 ---- InstantClick技术让你的网站成为一个单页面应用程序,所以没有DOMContentLoaded开始页面内的变化了。正因为如此,其他的js脚本可能需要调整与InstantClick正常工作。 InstantClick 4个事件提供钩子为页面的生命周期: change：页面更改完毕，即click触发 fetch：页面开始预加载 receive：页面预加载完毕，即：hover或mousedown触发的预加载，但不一定会change，因为用户不一定click。 wait：用户点击一个链接,但是还没有加载的页面。只有立即触发页面时不显示。 如不在body中有个脚本不希望被重新加载，那么给他加上黑名单属性即可 ```html <script data-no-instant>alert("I’m only run once.");</script> ``` 如果你的脚本与预加载冲突，你需要一个一个的找出来，并解决他 为例,这是如何让Google Analytics(2013年底代码)工作: ```html <script src="instantclick.min.js" data-no-instant></script><script data-no-instant> /* Google Analytics code here, without ga('send', 'pageview') */ InstantClick.on('change', function() { ga('send', 'pageview', location.pathname + location.search); }); InstantClick.init(); </script> ``` 改变内容receive【这部分我不熟悉，故不翻译】 Sometimes it’s simpler to alter pages on the fly than to rearchitect your back end for InstantClick. receive allows you to do that. It gets three arguments: url, body and title. url is the address of the page received, it includes the hash. It’s read-only. body is the body object and title is the title text. You can modify those two and return an object with them (or with just one of them to modify only one) if you want to alter pages before they’re displayed. Here’s an example. ```javascript InstantClick.on('receive', function(url, body, title) { var dont_display = body.querySelector('#dont_display_me_when_loaded_with_instantclick') if (dont_display) { dont_display.setAttribute('hidden', ''); } title += ' (loaded with InstantClick)'; return { body: body, title: title }; }); ``` Keep in mind the body object here is body and not document.body! When you have more than one callback listening to receive, each subsequent callback will get the last altered content. If you don’t want to alter the page on receive, either don’t return anything or return false. # 进一步 ---- ## 1，跟踪资源的变化 ---- 现在跟踪资产的方式改变目前有点笨拙。它可能会在InstantClick 4.0上有所改变。 检查当样式表或脚本(外部或内联)被更新时,将其添加data-instant-track属性: ```html <link rel="stylesheet" href="style.css" data-instant-track><script src="script.js" data-instant-track></script><style data-instant-track>body{background:aliceblue}</style><script data-instant-track>window.timingStart = performance.now();</script> ``` InstantClick将检查更改href或src属性是否存在，表明一个文件被更新,修改其属性: ```html <link rel="stylesheet" href="style.css?20140308" data-instant-track><script src="script.js?20140308" data-instant-track></script> ``` 如果是内联js脚本或css风格,InstantClick将检查改变元素的内容 ```html <style data-instant-track>body{background:midnightblue;font:13px Helvetica}</style><script data-instant-track>var timingStart = performance && performance.now();</script> ``` 当检测到任何变化,InstantClick将重新加载页面,从而使浏览器重新评估所有脚本和样式。 ## 2，自定义进度条 ---- 这个进度条进度条是假的,只是让用户意识到将要发生什么。 在未来可能会展示真正的进度条 在未来的改变中，The bar is displayed even if the page has been loaded instantly。在GitHub上讨论。 默认情况下,进度条的颜色是#29d,你可以用CSS改变: ```css #instantclick-bar { background: white; } ``` 你也可以让他消失: ```css #instantclick { display: none; } ``` 目标 [Roadmap](http://instantclick.io/roadmap "Roadmap") [Changelog](http://instantclick.io/changelog "Changelog") 转载自:https://qqdie.com/archives/instantclick.html 文章参数data协议codefunctionvar黑名单链接instantclick脚本页面