今天给大家分享一下倒排索引的一些事情，为什么要说倒排索引呢?因为当用户搜索一个词的时候，返回的搜索结果页面就是经过倒排索引和一系列算法过滤后的结果排序，seo苦苦追求的不就是排名的多少吗?说的通俗一点，其实搜索引擎的索引好比是我们平时看书时的目录，为了让大家更快找到适合自己的东西，比如导航站其实就是互联网上小型索引的结构案例。上面会有一些分类比如新闻、电影、小说、图片等等板块，让用户快速的找到自己所需。索引是搜索引擎中最为核心的技术之一，因为在大量的网页中，怎样才能更快、更精准的找到用户查询这个词的搜索意图。先给大家说几个概念，为了下面的讲述中，大家都能看得懂。1、文档：我们是以网页的形式看到互联网页面的，而网页中包含很多的东西，比如：TXT、EXCEL、PDF等等很多各式各样的文件都被成为文档。2、文档集合：由很多的文档组成一个集合，称为文档集合。3、文档编号：互联网上每一个文档都有各自且独一无二的编号。4、单词编号：每个单词都有各自的唯一编号，用编号来代表这个单词或、短语者句子。5、倒排索引：是在搜索引起的索引库中，以单词对应网页的一种存储的形式，可以根据单词快速的获取相关的文档。其实倒排索引非常的简单，下面就结合一些特征案例来渐渐深入的分析这个算法，大家先了解一些基本的思路即可。上图是每个文档编号对应的不同文档，如编号“1”对应“小明吃早饭”，编号“2”对应“小明早上吃了什么”，以此类推。另外由于中文和英文的文化属性不相同，中文的汉字之间没有明显像英文单词那样的分隔符，索引首先对中文要进行一下分词(下面举例中暂时不去掉停止词)，这样就把一句话变成了一个个的词组，如下图。上图单词的ID记录了每个单词的编号，第二列是编号所对应的单词，第三列是哪几个文档中包含了这个单词。比如单词“小明”，其其单词编号为“1”，倒排列表“1，2，4，5”，表示这几个文档集合中都包含了这个单词。实际上搜索引擎更为复杂，不仅仅记录了单词的文档编号，还记录了单词的频率(TF，什么意思呢?很多seo从业者都在说关键词的密度，市面上计算页面中关键词密度的计算公式有三个：公式一： 关键词次数/页面总字数 x100%公式二： 关键词次数/页面总字数/关键词字数 x 100%公式三： 关键词次数/页面分词数量 x 100%先不讨论哪个公式的计算方式更加精准，我们发现公式中都出现了关键词的次数，那这个TF就是该单词在页面中出现的次数)这个TF在搜索引擎计算搜索结果排序时，分析查询词和文档库中哪个文档更为相关的一个参考因素。上图是比较复杂的，我们来看看文档频率为多个文档包含这个单词，如：“小明”在“4个文档”中出现了。“吃”在“4个文档”中出现了，后面的以此类推。倒排列表小明 (1;1<1>)，1为文档1，中间的1为这个词在这个文档中出现的频率，<1>是这个词在文档中出现的位置1，即在文档中第一个词。实战应用，在纸上谈的再多，不如通过实战去验证这个论点，是否对排名有帮助。下面就来看看。以首页自然排名的10个网站的网页类型和标题为例：首页，排名第一，“早点培训_早餐培训班_早点培训学校【免费吃住】”首页，排名第二，“早餐培训_早餐培训班_早餐培训学校【免费加盟】”首页，排名第三，“上海顶正小吃培训学校_早点培训_生煎包培训_烧烤培训全国最专.....”首页，排名第四，“上海早点培训|重庆小面培训|山东杂粮饼培训|卤菜培训|小吃培训.......”首页，排名第五，“小吃培训_特色小吃_小吃项目加盟-老灶台特色小吃培训学校”内页，排名第六，“早点培训 正规早点培训班-培训通”首页，排名第七，“艺尚食代-早餐早点培训”首页，排名第八，“小吃培训,早点培训,上海面点培训,上海德志厨艺美食培训中心021-...”首页，排名第九，“早餐店加盟_营养早餐加盟_特色早点加盟店_早餐店连锁加盟培训_开...”内页，排名第十，“早点培训班 正宗早点培训中心-培训通”分析得出：早点培训在这个10个网站中基本上都出现了2词，大家有没有发现早点和早餐是近义词，(比如：我早点吃了什么，我早餐吃了什么。这两句话表达的是同一个意思。)等于是增加了一遍词频，也就是3次了，在这里提醒大家关键词千万不要堆砌，要保持一个自然性。另外通过之前的实验数据得出标题最左边的词权重最高，仅仅结合这两点，排名第一的网站标题做的比其他的网站标题都到位。另外标题结尾处“【免费吃住】”这是一个吸引用户点击的营销点，所以标题是技术与艺术的结合。下图是网站从上线到目前的收录和权重的部分截图：从上面的两张图片我们可以看出，这个网站的权重从2017年12月11日的站长权重是0，4天后权重到达1，还是比较轻松的。而且后来站内文章到投稿为止已经5个月没有更新了，为什么有些seoer天天更新文章，网站排名却做不起来?有小伙伴说如果不写文章，那么每天都不知道做些什么。在我看来这个不是影响排名的重要因素，因为前期网站信任度做好可以节省后期的很多事情(PS:这就是佛系SEO，让网站自己让排名)。通过上图发现早点培训这个词一直在首页第一，非常的稳定。所以通过算法来优化网站还是非常靠谱的。搜索引擎是这个世界上最复杂的程序之一，公开的算法不胜其数，有兴趣的小伙伴们可以看看搜索引擎公司他们申请专利的一个文档，文档中也会涉及到高等数学等等知识，如果你能坚持的去看并且结合实践的话，那么你优化网站不用再靠猜排名了。

一段js你可以放入网站也可以单独建立一个html文件来放代码，使用复制下面代码到你要放的地方，代码里备注了要修改的，如果你要限制宽长写个css来解决。代码如下：<canvas id="caojiefeng" style="background:#111"></canvas> <script type="text/javascript"> window.onload = function(){ //获取画布对象 var canvas = document.getElementById("mom"); //获取画布的上下文 var context =canvas.getContext("2d"); //获取浏览器屏幕的宽度和高度 var W = window.innerWidth; var H = window.innerHeight; //设置canvas的宽度和高度 canvas.width = W; canvas.height = H; //每个文字的字体大小 var fontSize = 16; //计算列 var colunms = Math.floor(W /fontSize); //记录每列文字的y轴坐标 var drops = []; //给每一个文字初始化一个起始点的位置 for(var i=0;i<colunms;i++){ drops.push(0); } //运动的文字 var str ="曹杰峰 曹杰峰 博客"; //4:fillText(str,x,y);原理就是去更改y的坐标位置 //绘画的函数 function draw(){ context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,W,H); //给字体设置样式 context.font = "700 "+fontSize+"px 微软雅黑"; //给字体添加颜色 context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色，十六进制颜色 //写入画布中 for(var i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); //如果要改变时间，肯定就是改变每次他的起点 if(y >= canvas.height && Math.random() > 0.99){ drops[i] = 0; } drops[i]++; } }; function randColor(){ var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,30); }; </script>

1.3D字体效果 Text:<script>console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")</script>2.Colorful彩色背景 CSS<script>console.log("%cColorful CSS","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em")</script> 3.Rainbow彩虹字 Text<script>console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');</script>更新：在Chrome控制台输出图片除了上面介绍的那些炫目的文字效果外，你还可以在Chrome控制台中显示图片,自然地，显示gif这样的动态图片也是没问题的。 还是应用差不多的代码，只是将内容变成指定背景为图片。 下面是一个例子：<script>console.log("%c", "padding:50px 700px;line-height:120px;background:url('http://wx1.sinaimg.cn/large/ba098b64ly1fjz4j8pju5j20p002sgm4.jpg') no-repeat;");</script>下面是我自己的一些样式，如果你喜欢就直接复制吧！<script> console.log("%c%c源码作者%c曹杰峰","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#FADFA3;font-size:14px;","padding:4px;background:#FADFA3;color:#000;line-height:28px;font-size:14px;"); console.log("%c%c网站地址%chttps://www.caojiefeng.com","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#FADFA3;font-size:14px;","padding:6px 6px 6px 2px;background:#FADFA3;color:#0093fff;line-height:28px;font-size:12px;"); console.log("%c%c新浪微博%c杰峰","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#FADFA3;font-size:14px;","padding:4px;background:#FADFA3;color:red;line-height:28px;font-size:14px;"); console.log("%c%c就知道阻挡不住你观看源码的冲动，但你至少要记住我！-----曹杰峰","line-height:28px;","line-height:28px;padding:4px 0px;color:#fff;font-size:16px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,#5500ff));color:transparent;-webkit-background-clip:text;"); </script>