注意：文本不是講如何將網(wǎng)站置灰的那個技術(shù)點(diǎn)，那個技術(shù)點(diǎn)之前汶川地震的時候說過。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、瑪納斯網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為瑪納斯等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

本文不講如何實(shí)現(xiàn)技術(shù)，而是講如何在第一時間知道消息后，更快速的實(shí)現(xiàn)這個置灰需求的上線。

實(shí)現(xiàn)需求不是樂趣，指揮別人去實(shí)現(xiàn)需求才是樂趣，你有沒有過這種想法？我們老板就是這種想法。

最近發(fā)生了舉國悲痛的事情，所以很多網(wǎng)站為了表示哀悼，聽到消息后，將網(wǎng)站置灰了。

但有的網(wǎng)站呢，做的比較迅速，很快讓程序員做了修改，上個線；

但有的呢，后知后覺，看見別人家的網(wǎng)站都這么做了，我們不這么做不好，我們也置灰一下吧。來，小王，置灰一下把網(wǎng)站，上個線，注意測試啊，別弄壞了。于是小王接到了一項(xiàng)重要任務(wù)。

那有一天寶島被收復(fù)了，需要設(shè)置成大紅色了，再把代碼改成紅色，再上個線？慶祝完了，再把代碼改回來嗎？

文本這里以簡單的樣式為案例

目錄

1、日常需求上線的過程?

2、本需求中的重點(diǎn)?

3、網(wǎng)站置灰或者置紅的CSS代碼

3、如何做到更快速使CSS代碼生效

4、這樣做會產(chǎn)生的問題?

5、消息觸發(fā)機(jī)制?

6、但是每次都調(diào)用仍然會造成損耗?

7、何去何從

---

1、日常需求上線的過程?

日常需求上線經(jīng)歷了，產(chǎn)品的可行性分析階段，要經(jīng)過一些市場分析，數(shù)據(jù)分析，來決定這個需求是否值得做；

然后開始產(chǎn)出需求報(bào)告，需求文檔，并且準(zhǔn)備開始需求評審；

評審的過程，會有相關(guān)人員參與，而且一旦能夠走到需求評審這一階段，也肯定是要做的

然后就是開始排工期，相關(guān)人員排了工時，項(xiàng)目制定了工期，看跟其他項(xiàng)目是否沖突

開發(fā)人員實(shí)施階段，可長可短

然后就是跟測階段，測試結(jié)束

部署（本地部署、測試部署、預(yù)發(fā)部署、線上部署）完成，上線。

2、本需求中的重點(diǎn)?

通過上圖可見，每個需求或者每個公司，對于需求都會有靈活處理，

最靈活的莫過于老板發(fā)現(xiàn)一個契機(jī)，然后自己去開發(fā)，開發(fā)完直接上線

所以，本需求的重點(diǎn)在于上線的過程

3、網(wǎng)站置灰或者置紅的CSS代碼

還用剛才我們新建的DOM元素為例，這是正常的樣式

div {
   color: blue;
}
button {
   width: 70px;
   height: 20px;
   line-height: 20px;
   background: blue;
   color: #FFF;
   text-align: center;
}



   這里是網(wǎng)站內(nèi)容按鈕

置灰代碼：

html {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

3、如何做到更快速使CSS代碼生效

△ 這就需要借助另外一個平臺，用來維護(hù)我們需要顯示的更高優(yōu)先級的CSS代碼；

△ HTML頁面呢也不能放在前端了，需要放到服務(wù)端去，Node Java的項(xiàng)目里都行；

以koa項(xiàng)目來舉例，在渲染HTML頁面之前，先發(fā)送請求，向另外的這個平臺去發(fā)送請求，獲取最新維護(hù)好的CSS代碼

然后獲取到之后渲染到HTML頁面中，這樣就可以不需要上線，還可以更快速的渲染優(yōu)先級更高的置灰代碼了。

doctype html
html
  head
    title= title
    style(type="text/css")
    html { 
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: drop-shadow(#EFE2DA);
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
  body
    block content

4、這樣做會產(chǎn)生的問題?

一旦這樣做了，速度倒是很快了，但產(chǎn)生的問題是，頁面每次刷新之前都會去調(diào)用一下第三方平臺的接口，

△ 一旦訪問量大了，對這個第三方配置平臺會產(chǎn)生很大的壓力；

△ 而且如果日常不需要置灰的情況下，平臺無故的去調(diào)用，也是做了一個無用功

5、消息觸發(fā)機(jī)制?

這就涉及到一個消息觸發(fā)機(jī)制，什么意思呢？

△ 在我們的koa項(xiàng)目里添加一個接口方法A，用于接收第三方平臺的調(diào)用；

△ 同時添加全局變量，例如B = false，當(dāng)監(jiān)測到B為false的時候，并不需要每次刷新頁面都去調(diào)用第三方那個全局css的數(shù)據(jù)；

△ 就是說第三方平臺需要和我們的koa項(xiàng)目產(chǎn)生一定的關(guān)系。當(dāng)我們決定要發(fā)送這段置灰css代碼做為一條消息的時候，去觸發(fā)這個接口方法A

△ 接口方法A此時需要改變一個全局變量，就是這個全局變量B，此時改為true.

△ 那么當(dāng)下次再有用戶刷新頁面的時候，監(jiān)測到B為true ，則開始調(diào)用最新的css那段代碼數(shù)據(jù)

6、但是每次都調(diào)用仍然會造成損耗?

即便我們使用了這個消息觸發(fā)機(jī)制，并且成功了，但近幾天一定是時刻都要置灰的，而且每次請求頁面都要調(diào)用這個第三方接口，仍然是一個損耗。

這個時候，我們可以添加一個緩存，將獲取到的css數(shù)據(jù)做為緩存；

每次請求頁面的時候，既要判斷當(dāng)前的B是否為true，又要判斷是否有緩存數(shù)據(jù)，最后再決定是否要發(fā)送請求，從而降低一定的損耗。

7、何去何從

如果是單純的前端上線呢，雖然后知后覺，但不用費(fèi)這么多前期準(zhǔn)備得功夫；

如果把這一套做下來呢，不僅可以用于文本的場景，還可以利用到更多的場景種，而且可以做到第一時間收到消息后，快速的發(fā)布需求。

你覺得哪種更適合你當(dāng)前的團(tuán)隊(duì)呢？

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

當(dāng)前文章：秒級使網(wǎng)站變灰，不改代碼不上線，如何做到？-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/ccdcdo.html