僅用18行JavaScript實現一個倒數計時器

言

有時，您將需要構建一個JavaScript倒數時鐘。您可能有活動，銷售，促銷或游戲。您可以使用原始JavaScript構建時鐘，而不用尋找最近的插件。雖然有很多很棒的時鐘插件，但是使用原始JavaScript可以帶來以下好處：

您的代碼將是輕量級的，因為它將具有零依賴性。
您的網站將表現更好。您無需加載外部腳本和樣式表。
您將擁有更多控制權。您將構建時鐘，使其行為完全符合您希望的方式（而不是嘗試將插件彎曲到您的意愿）。

因此，事不宜遲，這里介紹了如何僅用18行JavaScript來制作自己的倒計時時鐘

基本時鐘：倒數到特定的日期或時間

以下是創建基本時鐘所涉及步驟的快速概述：

設置有效的結束日期。
計算剩余時間。
將時間轉換為可用格式。
將時鐘數據輸出為可重復使用的對象。
在頁面上顯示時鐘，并在時鐘為零時停止時鐘。

設定有效的結束日期

首先，您需要設置一個有效的結束日期。這應該是JavaScript的Date.parse（）方法可以理解的任何格式的字符串。例如：

在ISO 8601格式：

const deadline = '2015-12-31';

簡短格式：

const deadline = '31/12/2015';

或者，長格式：

const deadline = 'December 31 2015';

這些格式中的每一種都允許您指定確切的時間和時區（對于ISO日期，則為UTC的偏移量）。例如：

const deadline = 'December 31 2015 23:59:59 GMT+0200';

您可以在本文中閱讀有關JavaScript中日期格式的更多信息。

計算剩余時間

下一步是計算剩余時間。我們需要編寫一個函數，該函數需要一個表示給定結束時間的字符串（如上所述）。然后，我們計算該時間與當前時間之間的時差。看起來像這樣：

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

首先，我們創建一個變量total，以保留剩余時間直到截止日期。該Date.parse()函數將時間字符串轉換為毫秒值。這使我們可以相減兩次，并獲得兩者之間的時間量。

const total = Date.parse(endtime) - Date.parse(new Date());

將時間轉換為可用格式

現在，我們要將毫秒轉換為天，小時，分鐘和秒。讓我們以秒為例：

const seconds = Math.floor( (t/1000) % 60 );

讓我們分解一下這里發生的事情。

將毫秒除以1000可轉換為秒： (t/1000)
將總秒數除以60，然后取余數。您不希望所有的秒數，僅需要計算分鐘數之后剩下的秒數：(t/1000) % 60
四舍五入到最接近的整數。這是因為您需要完整的秒數，而不是幾分之一秒：Math.floor( (t/1000) % 60 )

重復此邏輯，將毫秒轉換為分鐘，小時和天。

輸出時鐘數據作為可重用對象

準備好幾天，幾小時，幾分鐘和幾秒鐘之后，我們現在可以將數據作為可重用的對象返回：

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

該對象允許您調用函數并獲取任何計算值。這是如何獲取剩余時間的示例：

getTimeRemaining(deadline).minutes

方便吧？

顯示時鐘并在達到零時停止

現在，我們有了一個可以花費剩余的天，小時，分鐘和秒的功能，我們可以構建時鐘了。首先，我們將創建以下HTML元素來保存時鐘：

<div id="clockdiv"></div>

然后，我們將編寫一個在新div中輸出時鐘數據的函數：

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const timeinterval = setInterval(() => {
    const t = getTimeRemaining(endtime);
    clock.innerHTML = 'days: ' + t.days + '<br>' +
                      'hours: '+ t.hours + '<br>' +
                      'minutes: ' + t.minutes + '<br>' +
                      'seconds: ' + t.seconds;
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  },1000);
}

該函數有兩個參數。這些是包含我們時鐘的元素的ID，以及倒計時的結束時間。在函數內部，我們將聲明一個clock變量并將其用于存儲對我們的時鐘容器div的引用。這意味著我們不必繼續查詢DOM。

接下來，我們將使用setInterval每秒執行一個匿名函數。此功能將執行以下操作：

計算剩余時間。
將剩余時間輸出到我們的div。
如果剩余時間為零，請停止計時。

此時，剩下的唯一步驟是像這樣運行時鐘：

initializeClock('clockdiv', deadline);

恭喜你！現在，您僅用18行JavaScript就擁有了一個基本時鐘。

準備顯示時鐘

在設置時鐘樣式之前，我們需要進行一些細化。

消除初始延遲，使您的時鐘立即顯示。
提高時鐘腳本的效率，以免持續重建整個時鐘。
根據需要添加前導零。

消除初始延遲

在時鐘中，我們習慣于setInterval每秒更新一次顯示。多數情況下，這很好，除非在開始時會有一秒鐘的延遲。要消除此延遲，我們必須在間隔開始之前更新一次時鐘。

讓我們將要傳遞給setInterval它的匿名函數移到其自己的獨立函數中。我們可以命名這個函數updateClock。在updateClock外部調用該函數setInterval，然后在內部再次調用setInterval。這樣，時鐘顯示就沒有延遲了。

在您的JavaScript中，替換為：

const timeinterval = setInterval(() => { ... },1000);

有了這個：

function updateClock(){
  const t = getTimeRemaining(endtime);
  clock.innerHTML = 'days: ' + t.days + '<br>' +
                    'hours: '+ t.hours + '<br>' +
                    'minutes: ' + t.minutes + '<br>' +
                    'seconds: ' + t.seconds;
  if (t.total <= 0) {
    clearInterval(timeinterval);
  }
}

updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);

避免持續重建時鐘

我們需要使時鐘腳本更高效。我們只想更新時鐘中的數字，而不是每秒重新構建整個時鐘。實現此目的的一種方法是將每個數字放在span標簽中，然后僅更新這些跨度的內容。

這是HTML：

<div id="clockdiv">
    Days: <span class="days"></span><br>
    Hours: <span class="hours"></span><br>
    Minutes: <span class="minutes"></span><br>
    Seconds: <span class="seconds"></span>
</div>

現在讓我們參考這些元素。在clock定義變量的位置之后添加以下代碼

const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');

接下來，我們需要更改updateClock功能以及更新數字。新代碼如下所示：

function updateClock(){
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = t.hours;
    minutesSpan.innerHTML = t.minutes;
    secondsSpan.innerHTML = t.seconds;

    ...
}

添加前導零

現在時鐘不再每秒都在重建，我們還有另一件事要做：添加前導零。例如，不是讓時鐘顯示7秒，而是顯示07秒。一種簡單的方法是在數字的開頭添加字符串“ 0”，然后切掉最后兩位數字。

例如，要在“ seconds”值上添加前導零，您可以對此進行更改：

secondsSpan.innerHTML = t.seconds;

對此：

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

如果需要，您也可以在分鐘和小時中添加前導零。如果您走了這么遠，恭喜！您的時鐘現在可以顯示了。

注意：您可能需要在CodePen中單擊“重新運行”才能開始倒計時。

更進一步

下面的示例演示如何針對某些用例擴展時鐘。它們都是基于上面看到的基本示例。

自動安排時鐘

假設我們希望時鐘顯示在某些日子，而不是其他日子。例如，我們可能會發生一系列事件，并且不想每次都手動更新時鐘。這是提前安排事情的方法。

通過在CSS中將其display屬性設置為隱藏時鐘none。然后將以下內容添加到initializeClock函數中（以開頭的行之后var clock）。一旦initializeClock調用此函數，這將導致時鐘僅顯示：

clock.style.display = 'block';

接下來，我們可以指定顯示時鐘的日期。這將替換deadline變量：

const schedule = [
    ['Jul 25 2015', 'Sept 20 2015'],
    ['Sept 21 2015', 'Jul 25 2016'],
    ['Jul 25 2016', 'Jul 25 2030']
];

schedule數組中的每個元素代表一個開始日期和一個結束日期。如上所述，可以包括時間和時區，但是我在這里使用了簡單的日期來保持代碼的可讀性。

最后，當用戶加載頁面時，我們需要檢查是否在指定的時間范圍內。該代碼應替換先前對該initializeClock函數的調用。

// iterate over each element in the schedule
for (var i=0; i<schedule.length; i++) {
  var startDate = schedule[i][0];
  var endDate = schedule[i][1];

  // put dates in milliseconds for easy comparisons
  var startMs = Date.parse(startDate);
  var endMs = Date.parse(endDate);
  var currentMs = Date.parse(new Date());

  // if current date is between start and end dates, display clock
  if (endMs > currentMs && currentMs >= startMs ) {
    initializeClock('clockdiv', endDate);
  }
}

schedule.forEach(([startDate, endDate]) => {
  // put dates in milliseconds for easy comparisons
  const startMs = Date.parse(startDate);
  const endMs = Date.parse(endDate);
  const currentMs = Date.parse(new Date());

  // if current date is between start and end dates, display clock
  if (endMs > currentMs && currentMs >= startMs ) {
    initializeClock('clockdiv', endDate);
  }
});

現在，您可以提前安排時鐘，而無需手動更新。您可以根據需要縮短代碼。為了便于閱讀，我讓我變得冗長。

從用戶到達起將計時器設置為10分鐘

用戶到達或開始特定任務后，有必要在給定的時間內設置倒計時。我們將在此處將計時器設置為10分鐘，但是您可以使用任意時間。

我們需要做的就是deadline用這個替換變量：

const timeInMinutes = 10;
const currentTime = Date.parse(new Date());
const deadline = new Date(currentTime + timeInMinutes*60*1000);

該代碼將花費當前時間，并增加十分鐘。這些值將轉換為毫秒，因此可以將它們加在一起并變成新的截止日期。

現在，我們有了一個時鐘，可以從用戶到達時開始倒數十分鐘。隨意玩耍，嘗試不同的時間長度。

跨頁面保持時鐘進度

有時，有必要將時鐘狀態保留的時間不僅限于當前頁面。如果我們想在整個網站上設置10分鐘的計時器，則我們不希望在用戶轉到其他頁面時將其重置。

一種解決方案是將時鐘的結束時間保存在cookie中。這樣，導航到新頁面不會將結束時間重置為現在的十分鐘。

這是邏輯：

如果Cookie中記錄了截止日期，請使用該截止日期。
如果不存在該cookie，則設置一個新的截止日期并將其存儲在cookie中。

要實現這一點，請用deadline以下內容替換變量：

let deadline;

// if there's a cookie with the name myClock, use that value as the deadline
if(document.cookie && document.cookie.match('myClock')){
  // get deadline value from cookie
  deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
} else {
  // otherwise, set a deadline 10 minutes from now and 
  // save it in a cookie with that name

  // create deadline 10 minutes from now
  const timeInMinutes = 10;
  const currentTime = Date.parse(new Date());
  deadline = new Date(currentTime + timeInMinutes*60*1000);

  // store deadline in cookie for future reference
  document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';
}

這段代碼利用了cookie和正則表達式，它們本身就是單獨的主題。因此，我在這里不再贅述。需要注意的一件事是，您需要更改.yourdomain.com為實際域。

有關客戶端事件的重要警告

JavaScript日期和時間是從用戶計算機中獲取的。這意味著用戶可以通過更改計算機上的時間來影響JavaScript時鐘。在大多數情況下，這無關緊要。但是，在某些超級敏感的情況下，有必要從服務器獲取時間。可以使用一些PHP或Ajax來完成，這兩者都超出了本教程的范圍。

從服務器獲取時間后，我們可以使用本教程中的相同技術來使用它。

加起來

閱讀完本文中的示例之后，您現在知道如何僅用幾行原始JavaScript代碼創建自己的倒數計時器！我們已經研究了如何制作基本的倒數時鐘并有效顯示它。我們還介紹了添加一些有用的附加功能，包括計劃，絕對時間和相對時間，以及使用Cookie保留頁面和站點訪問之間的狀態。

完整代碼

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Countdown Clock</title>
<style type="text/css">
  body{
    text-align: center;
    background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
}

#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}

.smalltext{
    padding-top: 5px;
    font-size: 16px;
}
  </style>
</head>
<body>
    <h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>
<script type="text/javascript">
  function getTimeRemaining(endtime) {
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor((total / 1000) % 60);
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const days = Math.floor(total / (1000 * 60 * 60 * 24));
  
  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>
</body>
</html>

推薦JavaScript經典實例學習資料文章

《圖文細說JavaScript 的運行機制》

節課讓我們來一起做一個常見的網頁效果——無縫滾動。

在制作無縫滾動前，我們需要解決的最基礎的問題是——要如何讓一個頁面上的物體動起來？JS有很多復雜的運動，我們今天要做的是通過我們前面所學的基礎知識來制作一些運動效果。

實際上，讓一個元素動起來，我們目前能想到的最簡單的方法就是修改一個元素的位置，在JS里我們通過定時器讓元素定位的值（例如）不斷變化，這樣就實現了運動的效果。

在這里，我們先介紹一個屬性：offsetLeft，用于獲取元素的左邊值（返回類型為數值型）:

<html>
<head>
 <meta charset="utf-8" />
 <title>無標題文檔</title>
 <style>
 #div1 {width:200px; height:200px; background:red; position:absolute; left:200px; top:150px; margin:50px;}
 </style>
</head>
<body>
 <div id="div1" onclick="alert(this.offsetLeft);">
 </div> 
</body>
</html>

結果如下：

offsetLeft的最大優點在于可以綜合考慮所有影響物體位置的因素，在這個例子里如果我們僅僅只取元素的left屬性那么margin對元素位置的影響將被忽略掉。當然，相對的，也有offsetTop屬性用于獲取元素的頂邊值，以及offsetWidth和offsetHeight獲取元素的寬度和高度。

現在我們來使用定時器和offsetLeft來做一個物體的基礎運動：

<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>無標題文檔</title> 
 <style>
#div1 {width:200px; height:200px; background:red; position:absolute; left:0; top:50px;}
</style> 
 <script>
 setInterval(function (){
 var oDiv=document.getElementById('div1');
 
 oDiv.style.left=oDiv.offsetLeft+10+'px';
 }, 30);
</script> 
 </head> 
 <body> 
 <div id="div1"> 
 </div> 
 </body>
</html>

計時器每運行一次，oDiv的left屬性就會增加10，因此在計時器的作用下oDiv就運動了起來。效果如下：

現在，我們就可以著手開始制作我們的無縫滾動了。

首先，我們需要準備幾張大小相同的圖片，并用ul列表的形式放入html中。為了實現我們的滾動效果，我們將ul放在一個div，并將該div的position屬性設置為relative，將ul的position屬性設置為absolute，這樣我們在制作運動效果時移動ul就可以了。

但我們思考一下，如果只是這么制作的話，僅僅只是實現了圖片的移動，并沒有做到無縫銜接，因此我們需要將布局進行修改：

如上圖所示，實際上我們是將兩份相同的圖片組合拼接到了一起這樣當圖片移動，第一張圖片在左側消失時，又會在右側出現。

這樣離我們想實現的效果就很接近了。但試想一下，當兩組圖片全部滾動完畢后，依然沒有后續內容出現，因此這里我們需要使用一個小小的障眼法：因為我們需要顯示的圖片只有四張，所以當第一組圖片全部消失，第二組圖片全部出現的時候（也就是滾動到一半的時候），其效果和頁面剛刷新時是一致的，所以我們考慮當圖片滾動到這個地方的時候，直接回到拉回到開頭，這樣就可以達到無縫滾動的效果了。完整代碼如下：

<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>無標題文檔</title> 
 <style>
 * {margin:0; padding:0;}
 #div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
 #div1 ul {position:absolute; left:0; top:0;}
 #div1 ul li {float:left; width:178px; height:108px; list-style:none;}
 </style> 
 <script>
 window.onload=function ()
 {
 var oDiv=document.getElementById('div1');
 var oUl=oDiv.getElementsByTagName('ul')[0];
 var aLi=oUl.getElementsByTagName('li');
 
 oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
 oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
 
 setInterval(function (){
 if(oUl.offsetLeft<-oUl.offsetWidth/2)
 {
 oUl.style.left='0';
 }
 oUl.style.left=oUl.offsetLeft-2+'px';
 }, 30);
 };
 </script> 
 </head> 
 <body> 
 <div id="div1"> 
 <ul> 
 <li><img src="img2/1.jpg" /></li> 
 <li><img src="img2/2.jpg" /></li> 
 <li><img src="img2/3.jpg" /></li> 
 <li><img src="img2/4.jpg" /></li> 
 </ul> 
 </div> 
 </body>
</html>

現在我們為它增加一個效果：不僅可以向左滾動，也可以向右滾動。需要修改的地方有兩個：首先是每次定時器啟動的時候將oUl的left值由-2變為+2，其次需要進行一個判斷：當ul的left值已經>0的時候，同樣將其拉回去。

<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>無標題文檔</title> 
 <style>
 * {margin:0; padding:0;}
 #div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
 #div1 ul {position:absolute; left:0; top:0;}
 #div1 ul li {float:left; width:178px; height:108px; list-style:none;}
 </style> 
 <script>
 window.onload=function ()
 {
 var oDiv=document.getElementById('div1');
 var oUl=oDiv.getElementsByTagName('ul')[0];
 var aLi=oUl.getElementsByTagName('li');
 
 oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
 oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
 
 setInterval(function (){
 if(oUl.offsetLeft<-oUl.offsetWidth/2)
 {
 oUl.style.left='0';
 }
 if(oUl.offsetLeft>0)
 {
 oUl.style.left=-oUl.offsetWidth/2+'px';
 }
 oUl.style.left=oUl.offsetLeft+2+'px';
 }, 30);
 };
 </script> 
 </head> 
 <body> 
 <div id="div1"> 
 <ul> 
 <li><img src="img2/1.jpg" /></li> 
 <li><img src="img2/2.jpg" /></li> 
 <li><img src="img2/3.jpg" /></li> 
 <li><img src="img2/4.jpg" /></li> 
 </ul> 
 </div> 
 </body>
</html>

效果如下：

接下來我們再給這個程序增加一個功能：鼠標移入時暫停，鼠標移出時停止。遠離很簡單，使用onmouseover事件和onmouseout事件與定時器的開啟與停止搭配就可以了，不過這里為了讓代碼更加簡潔，我們使用一個move函數取代之前寫在定時器里的匿名函數。

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLi=oUl.getElementsByTagName('li');

	oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

	function move(){
		if(oUl.offsetLeft<-oUl.offsetWidth/2)
		{
			oUl.style.left='0';
		}
		if(oUl.offsetLeft>0)
		{
			oUl.style.left=-oUl.offsetWidth/2+'px';
		}
		oUl.style.left=oUl.offsetLeft+2+'px';
	}
	var timer=setInterval(move, 30);

	oDiv.onmouseover=function ()
	{
		clearInterval(timer);
	};

	oDiv.onmouseout=function ()
	{
		timer=setInterval(move, 30);
	};
};

最后，我們還想通過按鈕來控制圖片的運動方向。向左和向右運動的程序我們都已經寫好，因此我們只需要將兩端代碼合并簡化即可。我們用一個變量speed來代替之前的+2/-2，根據點擊不同的按鈕給speed賦不同值，這樣不僅可以改變運動的方向，還可以改變運動的速度。

1 月 18 日凌晨，Google 正式發布 Chrome 87，作為計劃中 2020 最后的一次更新，Google 不僅在這個版本中為我們帶來了一些實用的功能改進，此前一直在測試的性能提升和能耗優化本次也正式實裝。

因此 Chrome 87 也被認為是近年來 Chrome 在性能表現上最大的一次改進，一起來看看。

又快又省電，標簽頁資源調度更聰明

關鍵更新點：

更新后即默認開啟
后臺標簽頁面功耗大幅降低
多任務時瀏覽器整體資源調度更智能
Android 版頁面導航加載速度更快

本次正式版更新帶來的最大更新是針對后臺標簽頁的性能消耗限制。

在我們使用瀏覽器的過程中，大部分網頁幾乎都會采用一種名為 JavaScript 計時器的東西來定時執行代碼任務，以此實現各種各樣的網頁功能。Google 早前被吐槽過于耗電之后痛定思痛，一番調查研究發現那些被用戶放在后臺的標簽頁面的 JavaScript 計時器依然會占用了大量的系統資源來保持工作。解決方法應運而生。

在 Chrome 87 正式版之前，這項名為 Throttle Javascript timers in background 的技術（chrome://flags/#intensive-wake-up-throttling）已經在 Canary、Dev 和 Beta 版本 Chrome 中測試已久，通過將后臺標簽頁面 JaveScript 計時器喚醒頻率降低到 1 分鐘一次的方法來減少后臺標簽頁所需要的系統資源，但同時又能保證一些需要后臺運行的任務（比如媒體播放）正常工作。

對應的功能標簽

根據 Google 自己做的測試，這項改進最多可以降低 5 倍 CPU 使用率，帶來將近 1.25 小時的額外使用時間，對于筆記本這類便攜設備來說是絕對的利好。

這種優化后臺頁面保證前臺工作的思路同樣也被應用到了瀏覽器本身：針對 Windows 版本，Chrome 87 也正式引入了 Occlusion Tracking 技術，它可以幫助 Chrome 判斷當前網頁標簽和瀏覽器窗口是否為用戶焦點，進而優化瀏覽器的整體資源調度，根據 Google 的說法，這項改進能夠在使用更少內存的前提下提高 25% 的瀏覽器啟動速度和 7% 的標簽頁加載速度。

對應的功能標簽

最后，針對 Android 版本的性能調整主要針對網頁導航操作（前進和后退）。Google 表示大家在瀏覽網頁時五分之一的操作都集中在前進、后退這兩件事情上，本次加入的后退/前進緩存功能則可以讓相關操作后的網頁內容加載速度提高近 20%，未來這項改進還會提高到 50%，達到近乎即時加載頁面一樣的效果。

開啟后與開啟前的后退效果

如果你對相關的性能改進和技術細節感興趣，不妨移步至 Chromium Blog 的這篇文章了解更多。

標簽頁功能再進步，現在還能搜索了

關鍵更新點：

Chrome OS 先行，桌面端后續推送
多標簽瀏覽更高效

在之前的幾個版本更新中，Chrome 加入了固定標簽頁和分組標簽頁功能，你可以將經常打開的網頁固定到 Chrome 的標簽頁欄的最左邊，而針對多個標簽頁，還可以通過分組和顏色標記的方式進行歸類。

在斷了部分標簽頁管理擴展后路之后，本次 Chrome 87 繼續發力，又宣布加入一項新的特性：標簽頁搜索。簡而言之，當你打開多個標簽頁又希望可以快速定位到某一個標簽頁，直接點擊瀏覽器頂部標題欄最右側的箭頭按鈕就能呼出標簽頁搜索面板。對于日常工作中需要保持多個標簽頁面打開的用戶來說，這個功能配合上面提到的后臺標簽頁資源限制應該可以做到又高效又省電。

遺憾的是目前這項功能在桌面端尚未正式上線，Google 表示它將首先登錄 Chrome OS，不久后將向桌面平臺版本進行推送。

具有復合功能的地址欄來了

關鍵更新點：

陸續推送中，可手動開啟
直接通過地址欄跳轉至常用瀏覽器設置（例如「清除歷史記錄」）
支持中文

地址欄可以玩的花樣也非常多，尤其是 Chrome 的地址欄，既可以輸入網址也可以執行搜索操作，而現在 Chrome 87 又有新的功能特性：多功能框。

這個多功能可以看作是一些終端命令的 Chrome 功能設置專版，其作用就是打開一系列的 Chrome 內置的功能頁面，而不用在不同的 Chrome 位置中反復點擊，比如說，你希望刪除歷史記錄，那么只需要在 Chrome 的地址欄鍵入：delete my history，然后就會打開對應的操作頁面。

?值得一提的是，這個功能雖然有那么點「自然語義」的味道（只是打個比方二者并不沾邊），但根據我們的實際測試是完全支持中文的。如果你在更新后這個功能無法使用，可以手動開啟 Omnibox suggestion button row (chrome://flags/#omnibox-suggestion-button-row) 和 Omnibox Pedal suggestions (chrome://flags/#omnibox-pedal-suggestions) 這兩個功能標簽來進行啟用。

中文支持也是沒問題的

目前 Google 也給出了部分已經可以執行的命令，并表示未來這項功能中可以執行的命令還會繼續增加。

新標簽頁面內容更豐富了

關鍵更新點：

尚未實裝，需要個人瀏覽數據積累
從新標簽頁面直接進行話題頁面回溯

網上搜索過的信息過一段時間后突然想再回顧或繼續研究，除了翻找歷史記錄之外還有什么新的辦法？Chrome 87 利用起了新標簽頁，通過新標簽頁面下方的卡片模組幫你「溫故知新」。

根據 Google 的介紹，這些卡片會根據我們的瀏覽歷史集中展示不同話題的歷史頁面和相關頁面，主要應用場景包括禮物挑選、購物、菜譜等等，所以我們暫時應該不用擔心什么奇奇怪怪的「精彩集錦」內容出現新標簽頁面……

使用功能標簽中的模擬數據生成的卡片效果

PDF 閱讀器迎頭趕上

關鍵更新點：

陸續推送，可手動開啟
PDF 查看器功能更完善
支持查看標注，但不支持編輯標注

一直以來我們都認為 Chrome 的 PDF 閱讀器相比 Edge 而言過于簡陋，但 Chrome 87 終于迎頭趕上，帶來了不少針對 PDF 閱讀器的改進。

Chrome 87 中 PDF 閱讀器最為直觀的變化在于導航欄的加入：在瀏覽頁面左側新增的導航欄可以顯示所有頁面的縮略圖預覽，如果 PDF 文件本身有目錄的話還可以切換到目錄視圖跳轉查看，便利性和實用性都提升了不少。。?

另外，工具欄中還加入了縮放控件和新的視圖控件，如果你的屏幕夠大，完全可以設置并排查看兩頁 PDF 頁面。唯一令人遺憾的是雖然該版本支持了 PDF 標注的查看，但依然不支持編輯。

目前新版 PDF 閱讀器已經開始推送，更新后如果你看不到新界面，也可以前往功能標簽頁面中搜索? PDF Viewer Update (chrome://flags/#pdf-viewer-updat) 手動開啟。

最佳 Apple 開發者 & 一些技術細節

關鍵更新點：

針對 macOS Big Sur 和 Apple M1 進行適配
更完善的網絡攝像頭控制功能，網頁版會議工具會用得上
Chrome OS 的新壁紙真好看

Apple 在近期正式發布了 macOS Big Sur 桌面操作系統，UI 大改的同時也帶來新的應用圖標適配問題，而本次 Chrome 87 的正式推出也加入了適用于新系統的圖標，相比以往的圖標加入了更多的留白。開發團隊表示還在進一步優化從而讓視覺上看更加統一。

?另外針對剛剛發布的基于 ARM 架構 Apple M1 處理器的 Mac 硬件，本次 Chrome 87 正式版推出了基于兩種架構的版本：Intel 架構版本以及 Apple M1 架構版本，后者采用了原生編譯效率會更高也更適合新硬件。

最后，Chrome 87 也帶來了一系列針對網頁功能的技術細節更新，比如現在我們可以直接在 Chrome 網頁中控制帶有縮放、傾斜、平移等功能的攝像頭；另外，針對 Chrome OS 本次更新還加入了新的壁紙。

以上便是本次 Chrome 87 穩定版更新的全部內容。Chrome 的性能和功耗改進在你的設備上表現怎么樣？歡迎在評論區留言分享。

在線咨詢

上一篇：在Django中使用Markdown
下一篇：好神奇！使用jquery.particleground.js制作絢麗的粒子背景

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

僅用18行JavaScript實現一個倒數計時器

言

基本時鐘：倒數到特定的日期或時間

設定有效的結束日期

計算剩余時間

將時間轉換為可用格式

輸出時鐘數據作為可重用對象

顯示時鐘并在達到零時停止

準備顯示時鐘

消除初始延遲

避免持續重建時鐘

添加前導零

更進一步

自動安排時鐘

從用戶到達起將計時器設置為10分鐘

跨頁面保持時鐘進度

有關客戶端事件的重要警告

加起來

完整代碼

推薦JavaScript經典實例學習資料文章

又快又省電，標簽頁資源調度更聰明

標簽頁功能再進步，現在還能搜索了

具有復合功能的地址欄來了

新標簽頁面內容更豐富了

PDF 閱讀器迎頭趕上

最佳 Apple 開發者 & 一些技術細節

您的項目需求