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

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),六盤(pán)水企業(yè)網(wǎng)站建設(shè),六盤(pán)水品牌網(wǎng)站建設(shè),網(wǎng)站定制,六盤(pán)水網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,六盤(pán)水網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

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

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

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

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

文本這里以簡(jiǎn)單的樣式為案例

目錄

1、日常需求上線的過(guò)程?

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

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

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

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

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

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

7、何去何從

---

1、日常需求上線的過(guò)程?

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

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

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

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

開(kāi)發(fā)人員實(shí)施階段，可長(zhǎng)可短

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

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

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

通過(guò)上圖可見(jiàn)，每個(gè)需求或者每個(gè)公司，對(duì)于需求都會(huì)有靈活處理，

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

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

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代碼生效

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

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

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

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

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、這樣做會(huì)產(chǎn)生的問(wèn)題?

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

△ 一旦訪問(wèn)量大了，對(duì)這個(gè)第三方配置平臺(tái)會(huì)產(chǎn)生很大的壓力；

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

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

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

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

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

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

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

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

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

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

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

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

7、何去何從

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

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

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

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

當(dāng)前名稱：在收到消息后秒級(jí)使網(wǎng)站變灰，不改代碼不上線，如何實(shí)現(xiàn)？-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/cepphs.html