Google 決定停止備份網(wǎng)頁，不再提供“網(wǎng)頁快照”

Google 決定停止備份網(wǎng)頁，不再提供“網(wǎng)頁快照”功能

CSDN 編者按】Google 搜索已廢棄其“網(wǎng)頁快照”鏈接功能，這一決策反映了互聯(lián)網(wǎng)技術(shù)的進(jìn)步和用戶需求的變化。此功能曾幫助用戶訪問不穩(wěn)定或已更新的網(wǎng)頁版本，但隨著加載問題的減少，Google 覺得不再必要。盡管直接訪問快照的按鈕已移除，特定的操作仍能訪問緩存的頁面。此舉釋放了大量資源，同時(shí)對互聯(lián)網(wǎng)檔案館記錄網(wǎng)頁變化的任務(wù)造成了影響。

鏈接：https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/

作者 | RON AMADEO

譯者 | 明明如月責(zé)編 | 鄭麗媛

出品 | CSDN（ID：CSDNnews）

長期以來，Google 搜索通過其“網(wǎng)頁快照”功能，為用戶提供了訪問已關(guān)閉或更新網(wǎng)站的備選方式。然而，根據(jù) Google 的搜索聯(lián)絡(luò)人 Danny Sullivan 在 X 平臺（原推特）上的聲明，這一功能已經(jīng)停止。Sullivan 解釋說，這項(xiàng)功能最初旨在早期互聯(lián)網(wǎng)時(shí)期，為用戶提供幫助，以解決網(wǎng)頁加載不穩(wěn)定的問題。隨著技術(shù)進(jìn)步，這類問題已經(jīng)大幅減少，因此 Google 決定逐步淘汰此項(xiàng)功能。

Danny Sullivan 在 X 平臺（原推特）上的聲明截圖

從去年 12 月開始，用戶發(fā)現(xiàn)網(wǎng)頁快照功能時(shí)而有效時(shí)而失效，現(xiàn)在在 Google 搜索中已經(jīng)很難看到這類鏈接了。雖然網(wǎng)頁快照的按鈕已不可用，用戶仍然可以通過直接訪問特定的 URL 或在 Google 搜索中輸入“cache:”指令加上網(wǎng)址來訪問網(wǎng)頁的緩存版本。目前，例如 Ars Technica 網(wǎng)站的網(wǎng)頁快照仍然可用。與此同時(shí)，Google 已刪除了所有有關(guān)網(wǎng)頁快照的支持頁面。

網(wǎng)頁快照原先位于 Google 搜索結(jié)果旁的下拉菜單中。它是直接訪問 Google 爬蟲在搜索新的或已更新網(wǎng)頁時(shí)保存的網(wǎng)頁內(nèi)容副本的方式。這一做法最終讓 Google 幾乎擁有了整個(gè)互聯(lián)網(wǎng)的備份，其數(shù)據(jù)量龐大到難以估計(jì)。考慮到 Google 目前正在節(jié)約成本，減少緩存數(shù)據(jù)可能會釋放出大量資源。

網(wǎng)頁快照不僅在網(wǎng)站關(guān)閉或內(nèi)容快速變化時(shí)有用，多年來還提供了洞見，幫助人們了解 Google Bot 如何瀏覽網(wǎng)頁。然而，網(wǎng)頁快照可能與用戶預(yù)期的顯示方式有所不同。過去，Google Bot 只能識別文本，但隨著時(shí)間的推移，它開始能夠處理媒體和其他復(fù)雜數(shù)據(jù)，如 JavaScript。盡管 Google 為了防止 SEO 垃圾郵件攻擊而對Google Bot 的許多細(xì)節(jié)保密，通過查看網(wǎng)頁快照，用戶仍可獲得有關(guān)其工作方式的信息。盡管如此，如果你想了解自己的網(wǎng)站在 Google Bot 眼中的樣子，仍然可以通過搜索控制臺來實(shí)現(xiàn)，不過這只適用于你自己的網(wǎng)站。

隨著網(wǎng)頁快照功能的消失，互聯(lián)網(wǎng)檔案館在記錄和跟蹤全球網(wǎng)頁變化方面的任務(wù)變得更加艱巨。

你對 Google 取消網(wǎng)頁快照的功能有什么看法？你覺得這對網(wǎng)站的可靠性和可訪問性有什么影響？歡迎在評論區(qū)發(fā)表你的觀點(diǎn)。

家好，很高興又見面了，我是"高級前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動(dòng)力。

未使用的 JavaScript 會拖慢頁面加載速度，主要體現(xiàn)在以下幾點(diǎn)：

如果 JavaScript 是渲染阻塞的，則瀏覽器必須下載、解析、編譯和執(zhí)行腳本，然后才能繼續(xù)渲染頁面所需的所有其他工作。
即使 JavaScript 是異步的（不是渲染阻塞），代碼在下載時(shí)也會與其他資源競爭帶寬，這會對性能產(chǎn)生重大影響。在昂貴的手機(jī)流量費(fèi)用面前，通過網(wǎng)絡(luò)發(fā)送未使用的代碼也是一種浪費(fèi)。

如何刪除未使用的代碼

查找未使用的代碼

Chrome DevTools 中的coverage選項(xiàng)卡可以為開發(fā)者提供未使用代碼的逐行細(xì)分。 Puppeteer 中的 Coverage 類也可以幫助自動(dòng)執(zhí)行檢測未使用代碼和提取已使用代碼的過程，比如下面的代碼：

// 啟動(dòng) JavaScript 和 CSS coverage分析
await Promise.all([
  page.coverage.startJSCoverage(),
  page.coverage.startCSSCoverage(),
]);
// 導(dǎo)航到一個(gè)頁面
await page.goto('https://example.com');
// 禁止 JavaScript 和 CSS coverage分析
const [jsCoverage, cssCoverage]=await Promise.all([
  page.coverage.stopJSCoverage(),
  page.coverage.stopCSSCoverage(),
]);
let totalBytes=0;
let usedBytes=0;
const coverage=[...jsCoverage, ...cssCoverage];
for (const entry of coverage) {
  totalBytes +=entry.text.length;
  for (const range of entry.ranges) usedBytes +=range.end - range.start - 1;
}
console.log(`Bytes used: ${(usedBytes / totalBytes) * 100}%`);

在瀏覽器中，可以通過下面的方法查找未使用的代碼：

當(dāng) DevTools 處于焦點(diǎn)狀態(tài)時(shí)，按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、ChromeOS）可打開命令菜單，輸入coverage。

選擇Show Coverage

單機(jī)錄制按鈕，Coverage選項(xiàng)卡提供了瀏覽器加載的每個(gè)文件使用了多少 CSS（和 JavaScript）的概覽。

綠色代表使用的 CSS，紅色代表未使用的 CSS。

單擊 CSS 文件可在上面的預(yù)覽中查看其使用的 CSS 的逐行細(xì)分

在上面的屏幕截圖中，devsite-google-blue.css 的第 55 至 57 行和 65 至 67 行未使用，而第 59 至 63 行已使用。

支持刪除未使用代碼的構(gòu)建工具

查看以下 Tooling.Report 測試，了解打包程序是否支持刪除未使用的代碼的功能：

代碼分割

代碼分割是交付高性能 JavaScript 應(yīng)用程序的重要組成部分，有助于避免下載和執(zhí)行超出給定頁面所需的 JavaScript。從更高的層次上來說，“代碼拆分”是指將打包的代碼分解為多個(gè)較小的 Bundle 包的過程，這些 Bundle 包可以根據(jù)需要獨(dú)立加載和執(zhí)行。

死代碼消除（Unused Code Elimination）

死代碼消除是刪除當(dāng)前應(yīng)用程序未使用的代碼的過程。代碼被解析以創(chuàng)建一個(gè)抽象語法樹，然后遍歷該樹以查找未使用的函數(shù)和變量，最后該樹被轉(zhuǎn)換回 JavaScript 源代碼。

有許多工具可以在 JavaScript 源代碼上執(zhí)行死代碼消除，其中最流行的是 Terser 和 Closure Compiler。

在下面的測試中，每個(gè)構(gòu)建工具都配置為通過其內(nèi)置的“production”選項(xiàng)來優(yōu)化 Bundle 包，或者在沒有此類選項(xiàng)的情況下使用最常見的配置。一些工具能夠作為 Bundle 的一部分執(zhí)行死代碼消除，其他工具可能依賴于 Terser 等其他工具。

// index.js
import { logCaps } from './utils.js';
logCaps(exclaim('This is index'));

function thisIsNeverCalled() {
  console.log(`No, really, it isn't`);
}

下面是 Utils.js 的內(nèi)容：

export function logCaps(msg) {
  console.log(msg.toUpperCase());
}

export function thisIsNeverCalledEither(msg) {
  return msg + '!';
}

一旦為生產(chǎn)而構(gòu)建， thisIsNeverCalled 和 thisIsNeverCalledEither 函數(shù)都應(yīng)該從包中完全刪除。

死導(dǎo)入代碼（Dead Imported Code）

未由應(yīng)用程序中的任何其他模塊導(dǎo)入或使用的模塊的導(dǎo)出也可以被視為死代碼并需要?jiǎng)h除。

然而，這可能會導(dǎo)致一些棘手的優(yōu)化問題，因?yàn)?strong>模塊的導(dǎo)出可能會以難以靜態(tài)分析的方式被使用。動(dòng)態(tài)導(dǎo)入就是其中一種情況，因?yàn)閯?dòng)態(tài)導(dǎo)入返回的模塊記錄具有每個(gè)導(dǎo)出的屬性，可以通過多種不同的方式引用這些屬性，其中一些無法在構(gòu)建時(shí)確定。

下面的測試用使用了兩個(gè)模塊，一個(gè)入口模塊和一個(gè)動(dòng)態(tài)導(dǎo)入以創(chuàng)建分割點(diǎn)的 utils.js 模塊。動(dòng)態(tài)導(dǎo)入的模塊有兩個(gè)導(dǎo)出，但只使用了 logCaps 導(dǎo)出。

// index.js
(async function () {
  const { logCaps }=await import('./utils.js');
  logCaps('This is index');
})();

下面是 utils.js 內(nèi)容：

// utils.js
export function logCaps(msg) {
  console.log(msg.toUpperCase());
}

export function thisIsNeverCalled(msg) {
  return msg + '!';
}

一旦為生產(chǎn)而構(gòu)建，utils.js 中的 thisIsNeverCalled 函數(shù)不應(yīng)出現(xiàn)在生成的 Bundle 中。

然而，不同的打包工具在這個(gè)功能上表現(xiàn)差異非常大。如：browserify 不支持懶加載而無法實(shí)現(xiàn)該功能、rollup 不支持、parcel 表現(xiàn)亮眼、而 webpack 不支持如下的特殊解構(gòu)語法。

const { logCaps }=await import('./utils.js');

但 webpack 允許手動(dòng)列出通過魔術(shù)注釋使用的導(dǎo)出：

const { logCaps }=await import(/* webpackExports: "logCaps" */ './utils.js');

不同框架的應(yīng)對策略

React

如果不是服務(wù)器端渲染，可以使用 React.lazy() 拆分 JavaScript 包。否則，使用第三方庫（例如：loadable-components）進(jìn)行代碼分割。

比如下面的示例，Loadable 允許開發(fā)者將動(dòng)態(tài)導(dǎo)入渲染為常規(guī)組件：

import loadable from '@loadable/component';
const OtherComponent=loadable(()=> import('./OtherComponent'));
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

Vue

如果不是服務(wù)器端渲染并使用 Vue router，可以通過延遲加載路由拆分包。Vue Router 原生支持開箱即用的動(dòng)態(tài)導(dǎo)入，這意味著可以用動(dòng)態(tài)導(dǎo)入替換靜態(tài)導(dǎo)入：

const UserDetails=()=> import('./views/UserDetails.vue')

const router=createRouter({
  // ...
  routes: [
    { path: '/users/:id', component: UserDetails }
    // or use it directly in the route definition
    { path: '/users/:id', component: ()=> import('./views/UserDetails.vue') },
  ],
})

component（和components）選項(xiàng)接受一個(gè)返回組件 Promise 的函數(shù)，Vue Router 僅在第一次進(jìn)入頁面時(shí)獲取，然后使用緩存的版本。這意味著開發(fā)者還可以擁有更復(fù)雜的函數(shù)，只要它們返回 Promise：

const UserDetails=()=>
  Promise.resolve({
    /* component definition */
  });

一般來說，最好始終對所有路由使用動(dòng)態(tài)導(dǎo)入。當(dāng)使用像 webpack 這樣的打包器時(shí)將自動(dòng)受益于代碼分割使用 Babel 時(shí)，需要添加 syntax-dynamic-import 插件，以便 Babel 能夠正確解析語法。

參考資料

https://developer.chrome.com/docs/devtools/css/reference/#coverage

https://bundlers.tooling.report/transformations/dead-code/

https://bundlers.tooling.report/transformations/dead-code-dynamic/

https://loadable-components.com/docs/getting-started/

https://pptr.dev/api/puppeteer.coverage/

https://router.vuejs.org/guide/advanced/lazy-loading.html

afari瀏覽器怎么清除歷史記錄？ 現(xiàn)在，不少人都在使用iphone手機(jī)或者M(jìn)ac電腦。而safari瀏覽器是蘋果設(shè)備自帶的瀏覽器，但是很多朋友都找不到safari瀏覽器清理緩存和歷史記錄的地方，那么safari怎么清除歷史記錄？safari怎么清除緩存？讓小編來給大家介紹safari瀏覽器清除歷史記錄教程吧！

軟件版本：
軟件大小：
軟件授權(quán)：
適用平臺：
http://dl.pconline.com.cn/download/79644.html

safari瀏覽器清除歷史記錄

使用蘋果手機(jī)的朋友們一般都會使用蘋果手機(jī)自帶的safari瀏覽器，幾乎很少人會去使用第三方瀏覽器，大家都知道，第三方手機(jī)瀏覽器清理緩存都是在瀏覽器設(shè)置中操作，而Safari則不同，正因?yàn)槿绱耍艜泻芏喙叟笥眩恢繱afari如何清理緩存，下面小編就來詳細(xì)介紹下。

1.依次進(jìn)入iPhone 「設(shè)置」-》然后下拉點(diǎn)擊進(jìn)入「Safari」設(shè)置。

safari瀏覽器清除歷史記錄

2.進(jìn)入 Safari 瀏覽器設(shè)置后，點(diǎn)擊底部的“清空歷史數(shù)據(jù)與網(wǎng)站數(shù)據(jù)”，之后會彈出一個(gè)確認(rèn)清空選項(xiàng)，繼續(xù)點(diǎn)擊底部的“清空歷史記錄與數(shù)據(jù)”就可以完成Safari緩存清理了，如下圖所示。

safari瀏覽器清除歷史記錄

PS： Safari 瀏覽器也支持設(shè)置無痕瀏覽，也就是瀏覽網(wǎng)頁不會產(chǎn)生緩存與歷史數(shù)據(jù)，這個(gè)需要在 Safari 瀏覽器中進(jìn)行設(shè)置。

在線咨詢

上一篇：CSS 實(shí)現(xiàn)弧形卡片的 3 種方式
下一篇：手把手教你用jQuery Mobile做相冊