Skip to content
This repository has been archived by the owner on Jan 14, 2024. It is now read-only.

Latest commit

 

History

History
205 lines (151 loc) · 9.72 KB

readme.zh-TW.md

File metadata and controls

205 lines (151 loc) · 9.72 KB

Note

我個人不懂中文,所以我僱用了一個非常便宜的翻譯員。如果有明顯錯誤,請提交問題或請求拉取。

謝謝

Tachyon是一種微小的腳本,可使您的網站感覺飛快。它通過在用戶導航到它們之前預渲染頁面來實現這一點,使頁面轉換幾乎瞬間完成。

快速鏈接:

簡單的設置說明:

Tachyon Instant.Page Quicklink Turbolinks
大小 738 b 3.14 kb
(大約是Tachyon的4.3倍)
60.1 kb
(大約是Tachyon的83倍)
111 kb
(大約是Tachyon的153倍)
帶寬開銷 最低 最高
預渲染
(最快的加載速度)
無需額外
代碼
在所有
鏈接上工作
白名單和
黑名單

使用Tachyon

使用Tachyon非常簡單;它非常小,因此您可以直接內嵌它。您只需要將以下<script></script>標記複製並將它們放在網站的某個位置即可。

<script type="module" defer>/* tachyon 2.0.1 */var e=document.body.dataset;const o="tachyonWhitelist"in e,n="tachyonSameOrigin"in e,a=e.tachyonTimer||50;let r=null;function i(){r=r?null:this;const t="tachyon";var e=document.getElementById(t);e?e.remove():setTimeout(()=>{var e;r===this&&((e=document.createElement("link")).id=t,e.href=this.href,e.rel="prerender",document.head.appendChild(e))},a)}function t(t){var e;t.dataset&&(e="tachyon"in t.dataset,"A"!==t.tagName||!t.href||e!=o&&!n||n&&!e&&t.origin!==window.location.origin||["mouseover","mouseout","touchstart","touchend"].forEach(e=>t.addEventListener(e,i,{passive:!0})))}new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(t))).observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll("a").forEach(t);</script>

要完成了!您的網站現在比光速還要快!

如果您查看網站,那裡還有簡單的安裝說明,包括Google Tag ManagerShopifyWordPress等等。

Tachyon也可以通過npm作為tachyonjs使用。

npm i tachyonjs

您也可以從任何JavaScript CDN獲取Tachyon-建議使用unpkg

<script src="https://unpkg.com/tachyonjs@2.0.1/tachyon.min.js" integrity="sha384-4iJteL1FYnj4Ju83AJvNthpx5gZ1QaXCamXhY3lxhAjTNXUN+NXq5LQV/fXOSRme" type="module" crossorigin defer></script>

緣由及方式

Tachyon 的核心是簡潔易用,這不是 by chance 的。這種專注於簡潔的特點使得使用 Tachyon 的人,從管理員到終端使用者,都能從中獲得性能、可擴展性、可維護性、安全性和易用性方面的好處。

Tachyon 在比其他選擇方案更好的地方之一是使用了<link rel="prerender" href="...">,而不是常見的<link rel="prefetch" href="...">這使得___頁面加載的速度顯著地___更快。二者之間的差異就不言而喻了:prefetch只下載該頁面,而prerender則下載和開始渲染該頁面。

Tachyon 還以比其他選擇方案更高效,更不具侵入性的方式實現了預加載。它只預加載可能被單擊的頁面。當用戶的鼠標離開該鏈接時,它會停止預先加載頁面。這正是我創建 Tachyon 的原因,迄今為止我仍然不知道其他替代品為什麼不這樣做。因此,Tachyon 對網站的帶寬負載比任何其他替代方案都低得多。

它不像 Tachyon 提供的特點比其他項目少(它具有與 instant.page 的虛擬特點相當,以及一些額外的特點);只是 Tachyon 的特點比其他項目更簡潔明了。它支持移動設備,而無需進行任何配置,還實現了白名單黑名單自定義時間同源約束,並使這些特點變得更易於使用。如果您需要超級複雜的東西,Tachyon 可能不是您最佳的選擇-對於其他所有人,Tachyon 從一開始就建立了成為最佳選擇的基礎。

預設行為

默認情況下,Tachyon 將運行在所有<a href="...">標記上。 當終端使用者將鼠標懸停在一個鏈接上超過 50 毫秒時,Tachyon 就會為該錨點的 href="..." 屬性生成一個 <link id="tachyon" rel="prerender" href="..."> 標記。這會導致瀏覽器開始在後台下載 href="..."的頁面內容,因此,當用戶單擊該鏈接時,該頁面已在下載並準備好開始加載到框架中。

當用戶將鼠標移開鏈接時,Tachyon 將刪除 <link id="tachyon" rel="prerender" href="..."> 標記,取消下載。這是為了防止瀏覽器下載用戶可能不會單擊的內容,以避免浪費帶寬。同一時間只會預先加載一個頁面,節省額外的帶寬。

這些預加載請求給予了極低的優先級;它們不會影響其他請求的速度。

高級配置

Tachyon 允許您通過幾個簡單的屬性對腳本進行微調以滿足您的網站需求。絕大多數的 Tachyon 使用者不需要更改這些配置,但它們對於希望進行更改的人是可用的。

Tachyon 的配置特點通過使用data-tachyon-*屬性進行切換。

自定義時間

如果您能夠確定 50 毫秒的默認時序不適合您的網站,您可以通過向網站的<body>標記添加data-tachyon-timer屬性來更改默認值。該屬性接受一個整數(毫秒)作為值,這將改變腳本的行為。例如,如果您想將定時器設置為 100 毫秒,您的 body 標記應該如下所示:

<body data-tachyon-timer="100">
    ...
</body>

黑名單

如果您想讓 Tachyon 忽略某些鏈接,可以在<a>標記上添加data-tachyon。黑名單是 Tachyon 的默認行為,因此您無需採取任何措施即可啟用它,只需將<a>標記標記為 data-tachyon 屬性即可。

在以下示例中,第一個<a>標記將被 Tachyon 忽略並且不會被預加載,但是第二個<a>標記將被預加載,因為它沒有data-tachyon屬性,因此不在黑名單上。

<body>
    <a href="https://example.com" data-tachyon>❌❌❌</a>
    <a href="https://example.com">✅✅✅</a>
</body>

白名單

要啟用白名單模式,請在頁面的<body>標記上添加data-tachyon-whitelist。Tachyon 的白名單以與黑名單完全相反的方式工作。在白名單模式下,Tachyon 將在具有 data-tachyon 屬性的<a>標記上運行。

在以下示例中,第二個<a>標記將被 Tachyon 忽略並且不會被預加載,但是第一個<a>標記將被預加載,因為它具有 data-tachyon 屬性,因此在白名單上。

<body data-tachyon-whitelist>
    <a href="https://example.com" data-tachyon>✅✅✅</a>
    <a href="https://example.com">❌❌❌</a>
</body>

僅限來源

默認情況下,Tachyon 將從任何域名預先加載內容。如果您希望 Tachyon 僅從同一域名預先加載內容,請在<body>標記上添加data-tachyon-same-origin。**啟用此功能還將啟用白名單。**這意味著您可以使用 data-tachyon 屬性選擇預先加載網站外的鏈接。

<body data-tachyon-same-origin>
    <a href="https://mywebsite.com/cart.php">✅✅✅</a>
    <a href="https://mywebsite.com/info.php">✅✅✅</a>
    <a href="https://some.otherwebsite.com">❌❌❌</a>
    <a href="https://shop.store.com" data-tachyon>✅✅✅</a>
</body>

以上示例假設您的域名為 mywebsite.com

問題

Tachyon遵循以下哲學:

  • 如果這個項目沒有幫助到您,那麼就存在一個錯誤
  • 如果您在使用這個項目時遇到困難,那麼就存在一個錯誤
  • 如果文檔令人困惑,那麼文檔存在錯誤
  • 如果項目中有錯誤,那麼我們可以一起修復它。

網站上有一個已知問題列表 -如果還有其他問題,請在問題跟踪器提出問題

致敬