在收到消息后秒级使网站变灰,不改代码不上线,如何实现?-创新互联-古蔺大橙子建站
RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
在收到消息后秒级使网站变灰,不改代码不上线,如何实现?-创新互联

注意:文本不是讲如何将网站置灰的那个技术点,那个技术点之前汶川地震的时候说过。

创新互联建站是一家集网站建设,六盘水企业网站建设,六盘水品牌网站建设,网站定制,六盘水网站建设报价,网络营销,网络优化,六盘水网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

本文不讲如何实现技术,而是讲如何在第一时间知道消息后,更快速的实现这个置灰需求的上线。

实现需求不是乐趣,指挥别人去实现需求才是乐趣,你有没有过这种想法?我们老板就是这种想法。

最近发生了举国悲痛的事情,所以很多网站为了表示哀悼,听到消息后,将网站置灰了。

但有的网站呢,做的比较迅速,很快让程序员做了修改,上个线;

但有的呢,后知后觉,看见别人家的网站都这么做了,我们不这么做不好,我们也置灰一下吧。来,小王,置灰一下把网站,上个线,注意测试啊,别弄坏了。于是小王接到了一项重要任务。

那有一天宝岛被收复了,需要设置成大红色了,再把代码改成红色,再上个线?庆祝完了,再把代码改回来吗?

文本这里以简单的样式为案例

51275872749b450e9578a06d7d91b663.png

目录

1、日常需求上线的过程 

2、本需求中的重点 

3、网站置灰或者置红的CSS代码

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

4、这样做会产生的问题 

5、消息触发机制 

6、但是每次都调用仍然会造成损耗 

7、何去何从


1、日常需求上线的过程 

日常需求上线经历了,产品的可行性分析阶段,要经过一些市场分析,数据分析,来决定这个需求是否值得做;

然后开始产出需求报告,需求文档,并且准备开始需求评审;

评审的过程,会有相关人员参与,而且一旦能够走到需求评审这一阶段,也肯定是要做的

然后就是开始排工期,相关人员排了工时,项目制定了工期,看跟其他项目是否冲突

开发人员实施阶段,可长可短

然后就是跟测阶段,测试结束

部署(本地部署、测试部署、预发部署、线上部署)完成,上线。

176efe36df7e4f5cb66aad05e12b89c3.png

2、本需求中的重点 

通过上图可见,每个需求或者每个公司,对于需求都会有灵活处理,

最灵活的莫过于老板发现一个契机,然后自己去开发,开发完直接上线

所以,本需求的重点在于上线的过程

3、网站置灰或者置红的CSS代码

还用刚才我们新建的DOM元素为例,这是正常的样式

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



   这里是网站内容

置灰代码:

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);
}

5f55477fd3d647d9ba65b9980d03f242.png

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

△ 这就需要借助另外一个平台,用来维护我们需要显示的更高优先级的CSS代码;

△ HTML页面呢也不能放在前端了,需要放到服务端去,Node Java的项目里都行;

以koa项目来举例,在渲染HTML页面之前,先发送请求,向另外的这个平台去发送请求,获取最新维护好的CSS代码

然后获取到之后渲染到HTML页面中,这样就可以不需要上线,还可以更快速的渲染优先级更高的置灰代码了。

b963f2fafc5941179113ce15c4d4b71a.png

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、这样做会产生的问题 

一旦这样做了,速度倒是很快了,但产生的问题是,页面每次刷新之前都会去调用一下第三方平台的接口,

△ 一旦访问量大了,对这个第三方配置平台会产生很大的压力;

△ 而且如果日常不需要置灰的情况下,平台无故的去调用,也是做了一个无用功

5、消息触发机制 

这就涉及到一个消息触发机制,什么意思呢?

△ 在我们的koa项目里添加一个接口方法A,用于接收第三方平台的调用;

△ 同时添加全局变量,例如B = false,当监测到B为false的时候,并不需要每次刷新页面都去调用第三方那个全局css的数据;

△ 就是说第三方平台需要和我们的koa项目产生一定的关系。当我们决定要发送这段置灰css代码做为一条消息的时候,去触发这个接口方法A

△ 接口方法A此时需要改变一个全局变量,就是这个全局变量B,此时改为true.

△ 那么当下次再有用户刷新页面的时候,监测到B为true ,则开始调用最新的css那段代码数据

ded6a003a2f04f73872ea1a764028b1d.png

6、但是每次都调用仍然会造成损耗 

即便我们使用了这个消息触发机制,并且成功了,但近几天一定是时刻都要置灰的,而且每次请求页面都要调用这个第三方接口,仍然是一个损耗。

这个时候,我们可以添加一个缓存,将获取到的css数据做为缓存;

每次请求页面的时候,既要判断当前的B是否为true,又要判断是否有缓存数据,最后再决定是否要发送请求,从而降低一定的损耗。

7、何去何从

如果是单纯的前端上线呢,虽然后知后觉,但不用费这么多前期准备得功夫;

如果把这一套做下来呢,不仅可以用于文本的场景,还可以利用到更多的场景种,而且可以做到第一时间收到消息后,快速的发布需求。

你觉得哪种更适合你当前的团队呢?

你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧


当前题目:在收到消息后秒级使网站变灰,不改代码不上线,如何实现?-创新互联
文章源于:http://scgulin.cn/article/cepphs.html