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

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

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

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

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

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

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

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

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

目錄

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

2、本需求中的重點?

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

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

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

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

6、但是每次都調用仍然會造成損耗?

7、何去何從

---

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

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

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

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

然后就是開始排工期，相關人員排了工時，項目制定了工期，看跟其他項目是否沖突

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

然后就是跟測階段，測試結束

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

2、本需求中的重點?

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

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

所以，本需求的重點在于上線的過程

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)站內容按鈕

置灰代碼：

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

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

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

以koa項目來舉例，在渲染HTML頁面之前，先發(fā)送請求，向另外的這個平臺去發(fā)送請求，獲取最新維護好的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)生的問題是，頁面每次刷新之前都會去調用一下第三方平臺的接口，

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

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

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

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

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

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

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

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

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

6、但是每次都調用仍然會造成損耗?

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

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

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

7、何去何從

如果是單純的前端上線呢，雖然后知后覺，但不用費這么多前期準備得功夫；

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

你覺得哪種更適合你當前的團隊呢？

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

新聞名稱：秒級使網(wǎng)站變灰，不改代碼不上線，如何做到？-創(chuàng)新互聯(lián)
URL鏈接：http://aaarwkj.com/article10/ccdcdo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、品牌網(wǎng)站建設、App開發(fā)、小程序開發(fā)、用戶體驗、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)