web智能算法

❶ web应用系统中常用的哈希算法

web应用系统中常用的哈希算法有MD5、SHA-1、SHA-256、HMAC、bcrypt等。

1、MD5

MD5是一种广泛使用的哈希算法，用于将任意长度的数据映射为128位的固定长度哈希值。然而，由于MD5算法存在安全性问题，已被广泛认为是不安全的。

❷ web前端diff 算法深入一下

有同学问：能否详细说一下 diff 算法。

详细的说，请阅读这篇文章，有疑问的地方欢迎留言一起讨论。

因为 diff 算法是 vue2.x ， vue3.x 以及 react 中关键核心点，理解 diff 算法，更有助于理解各个框架本质。

说到“diff 算法”，不得不说“虚拟 Dom”，因为这两个息息相关。

比如：

等等

我们先来说说虚拟 Dom，就是通过 JS 模拟实现 DOM ，接下来难点就是如何判断旧对象和新对象之间的差异。

Dom 是多叉树结构，如果需要完整的对比两棵树的差异，那么算法的时间复杂度 O(n ^ 3)，这个复杂度很难让人接收，尤其在 n 很大的情况下，于是 React 团队优化了算法，实现了 O(n) 的复杂度来对比差异。

实现 O(n) 复杂度的关键就是只对比同层的节点，而不是跨层对比，这也是考虑到在实际业务中很少会去跨层的移动 DOM 元素。

虚拟 DOM 差异算法的步骤分为 2 步：

实际 diff 算法比较中，节点比较主要有 5 种规则的比较

部分源码 https://github.com/vuejs/vue/blob//src/core/vdom/patch.js#L501 如下：

在 reconcileChildren 函数的入参中

diff 的两个主体是：oldFiber（current.child）和 newChildren（nextChildren，新的 ReactElement），它们是两个不一样的数据结构。

部分源码

很多时候手工优化 dom 确实会比 virtual dom 效率高，对于比较简单的 dom 结构用手工优化没有问题，但当页面结构很庞大，结构很复杂时，手工优化会花去大量时间，而且可维护性也不高，不能保证每个人都有手工优化的能力。至此，virtual dom 的解决方案应运而生。

virtual dom 是“解决过多的操作 dom 影响性能”的一种解决方案。

virtual dom 很多时候都不是最优的操作，但它具有普适性，在效率、可维护性之间达到平衡。

virutal dom 的意义：

vue2.x 的 diff 位于 patch.js 文件中，该算法来源于 snabbdom，复杂度为 O(n)。了解 diff 过程可以让我们更高效的使用框架。react 的 diff 其实和 vue 的 diff 大同小异。

最大特点：比较只会在同层级进行, 不会跨层级比较。

对比之前和之后：可能期望将 直接移动到

的后边，这是最优的操作。

但是实际的 diff 操作是：

vue 中也使用 diff 算法，有必要了解一下 Vue 是如何工作的。通过这个问题，我们可以很好的掌握，diff 算法在整个编译过程中，哪个环节，做了哪些操作，然后使用 diff 算法后输出什么？

解释：

mount 函数主要是获取 template，然后进入 compileToFunctions 函数。

compileToFunction 函数主要是将 template 编译成 render 函数。首先读取缓存，没有缓存就调用 compile 方法拿到 render 函数的字符串形式，在通过 new Function 的方式生成 render 函数。

compile 函数将 template 编译成 render 函数的字符串形式。后面我们主要讲解 render

完成 render 方法生成后，会进入到 mount 进行 DOM 更新。该方法核心逻辑如下：

上面提到的 compile 就是将 template 编译成 render 函数的字符串形式。核心代码如下：

compile 这个函数主要有三个步骤组成：

分别输出一个包含

parse 函数：主要功能是 将 template 字符串解析成 AST（抽象语法树） 。前面定义的 ASTElement 的数据结构，parse 函数就是将 template 里的结构（指令，属性，标签） 转换为 AST 形式存进 ASTElement 中，最后解析生成 AST。

optimize 函数（src/compiler/optomizer.js）:主要功能是 标记静态节点 。后面 patch 过程中对比新旧 VNode 树形结构做优化。被标记为 static 的节点在后面的 diff 算法中会被直接忽略，不做详细比较。

generate 函数（src/compiler/codegen/index.js）:主要功能 根据 AST 结构拼接生成 render 函数的字符串 。

其中 genElement 函数（src/compiler/codgen/index.js）是根据 AST 的属性调用不同的方法生成字符串返回。

总之：

就是 compile 函数中三个核心步骤介绍，

patch 函数 就是新旧 VNode 对比的 diff 函数，主要是为了优化 dom，通过算法使操作 dom 的行为降低到最低， diff 算法来源于 snabbdom，是 VDOM 思想的核心。snabbdom 的算法是为了 DOM 操作跨级增删节点较少的这一目标进行优化， 它只会在同层级进行，不会跨层级比较。

总的来说：

在创建 VNode 就确定类型，以及在 mount/patch 的过程中采用位运算来判断一个 VNode 的类型，在这个优化的基础上再配合 Diff 算法，性能得到提升。

可以看一下 vue3.x 的源码：https://github.com/vuejs/vue/blob//src/core/vdom/patch.js

对 oldFiber 和新的 ReactElement 节点的比对，将会生成新的 fiber 节点，同时标记上 effectTag，这些 fiber 会被连到 workInProgress 树中，作为新的 WIP 节点。树的结构因此被一点点地确定，而新的 workInProgress 节点也基本定型。在 diff 过后，workInProgress 节点的 beginWork 节点就完成了，接下来会进入 completeWork 阶段。

snabbdom 算法：https://github.com/snabbdom/snabbdom

定位：一个专注于简单性、模块化、强大功能和性能的虚拟 DOM 库。

snabbdom 中定义 Vnode 的类型(https://github.com/snabbdom/snabbdom/blob//src/vnode.ts#L12)

init 函数的地址：

https://github.com/snabbdom/snabbdom/blob//src/init.ts#L63

init() 函数接收一个模块数组 moles 和可选的 domApi 对象作为参数，返回一个函数，即 patch() 函数。

domApi 对象的接口包含了很多 DOM 操作的方法。

源码：

https://github.com/snabbdom/snabbdom/blob//src/init.ts#L367

源码：

https://github.com/snabbdom/snabbdom/blob//src/h.ts#L33

h() 函数接收多种参数，其中必须有一个 sel 参数，作用是将节点内容挂载到该容器中，并返回一个新 VNode。

在 vue2.x 不是完全 snabbdom 算法，而是基于 vue 的场景进行了一些修改和优化，主要体现在判断 key 和 diff 部分。

1、在 snabbdom 中 通过 key 和 sel 就判断是否为同一节点，那么在 vue 中，增加了一些判断 在满足 key 相等的同时会判断，tag 名称是否一致，是否为注释节点，是否为异步节点，或者为 input 时候类型是否相同等。

https://github.com/vuejs/vue/blob//src/core/vdom/patch.js#L35

2、diff 差异，patchVnode 是对比模版变化的函数，可能会用到 diff 也可能直接更新。

https://github.com/vuejs/vue/blob//src/core/vdom/patch.js#L404

❸ WEB超链分析算法超链分析基本原理

超链分析的基本原理是：在某次搜索的所有结果中，被其他网页用超链指向得越多的网页，其价值就越高，就越应该在结果排序中排到前面。

超链分析是一种引用投票机制，对于静态网页或者网站主页，它具有一定的合理性，因为这样的网页容易根据其在互联网上受到的评价产生不同的超链指向量，超链分析的结果可以反映网页的重要程度，从而给用户提供更重要、更有价值的搜索结果。

搜索引擎并不能真正理解网页上的内容，它只能机械地匹配网页上的文字。它收集了互联网上几千万到几十亿个网页并对网页中的每一个文字（即关键词）进行索引，建立索引数据库的全文搜索引擎。当用户查找某个关键词的时候，所有在页面内容中包含了该关键词的网页都将作为搜索结果被搜出来。在经过复杂的算法进行排序后，这些结果将按照与搜索关键词的相关度高低，依次排列。

搜索引擎在查询时主要根据一个站点的内容与查询词的关联程度进行排序。对于一个站点的内容搜索引擎则是根据标题、关键词、描述、页面开始部分的内容以及这些内容本身之间的关联程度以及一个站点在整个网络上的关联程度来确定的。

使用超链分析技术，除要分析索引网页本身的文字，还要分析索引所有指向该网页的链接的URL、AnchorText，甚至链接周围的文字。所以，有时候，即使某个网页A 中并没有某个词，比如“软件”，但如果有别的网页B 用链接“软件”指向这个网页A，那么用户搜索“软件”时也能找到网页A。而且，如果有越多网页（C、D、E、F……）用名为“软件”的链接指向这个网页A，或者给出这个链接的源网页（B、C、D、E、F……）越优秀，那么网页A 在用户搜索“超链分析”时也会被认为相关度越高，排序也会越靠前。

❹ web前端javascript能实现什么算法或者计算

在Web开发中，JavaScript很重要，算法也很重要。下面整理了一下一些常见的算法在JavaScript下的实现，包括二分法、求字符串长度、数组去重、插入排序、选择排序、希尔排序、快速排序、冒泡法等等。仅仅是为了练手，不保证高效与美观，或许还有Bug，有时间再完善吧。

1.二分法：

function binary(items,value){

var startIndex=0,

stopIndex=items.length-1,

midlleIndex=(startIndex+stopIndex)>>>1;

while(items[middleIndex]!=value && startIndex

if(items[middleIndex]>value){

stopIndex=middleIndex-1;

}else{

startIndex=middleIndex+1;

}

middleIndex=(startIndex+stopIndex)>>>1;

}

return items[middleIndex]!=value ? false:true;

}

2.十六进制颜色值的随机生成：

function randomColor(){

var arrHex=["0","2","3","4","5","6","7","8","9","a","b","c","d"],

strHex="#",

index;

for(var i=0;i < 6; i++){

index=Math.round(Math.random()*15);

strHex+=arrHex[index];

}

return strHex;

}

一个求字符串长度的方法：

function GetBytes(str){

var len=str.length,

bytes=len;

for(var i=0;i < len;i++){

if(str.CharCodeAt>255){

bytes++;

}

}

return bytes;

}

3.js实现数组去重：

Array.protype.delRepeat=function(){

var newArray=new Array();

var len=this.length;

for(var i=0;i < len;i++){

for(var j=i+1;j < len;j++)

{

if(this[i]==this[j])

{

++i;

}

}

newArray.push(this[i]);

}

return newArray;

}

4.插入排序。所谓的插入排序，就是将序列中的第一个元素看成一个有序的子序列，然后不段向后比较交换比较交换。

function insertSort(arr){

var key;

for(var j = 1; j < arr.length ; j++){

//排好序的

var i = j - 1;

key = arr[j];

while(i >= 0 && arr[i] > key){

arr[i + 1] = arr[i];

i --;

}

arr[i + 1] = key;

}

return arr;

}

5.选择排序。其实基本的思想就是从待排序的数组中选择最小或者最大的，放在起始位置，然后从剩下的数组中选择最小或者最大的排在这公司数的后面。

function selectionSort(data)

{

var i, j, min, temp , count=data.length;

for(i = 0; i < count - 1; i++) {

/* find the minimum */

min = i;

for (j = i+1; j < count; j++)

{

if (data[j] < data[min])

{ min = j;}

}

/* swap data[i] and data[min] */

temp = data[i];

data[i] = data[min];

data[min] = temp;

}

return data;

}

6.希尔排序，也称递减增量排序算法。其实说到底也是插入排序的变种。

function shellSort(array){

var stepArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1]; //
reverse()在维基上看到这个最优的步长较小数组

var i = 0;

var stepArrLength = stepArr.length;

var len = array.length;

var len2 = parseInt(len/2);

for(;i < stepArrLength; i++){

if(stepArr[i] > len2){

continue;

}

stepSort(stepArr[i]);

}

// 排序一个步长

function stepSort(step){

//console.log(step) 使用的步长统计

var i = 0, j = 0, f, tem, key;

var stepLen = len%step > 0 ? parseInt(len/step) + 1 : len/step;

for(;i < step; i++){// 依次循环列

for(j=1;/*j < stepLen && */step * j + i < len;
j++){//依次循环每列的每行

tem = f = step * j + i;

key = array[f];

while((tem-=step) >= 0){// 依次向上查找

if(array[tem] > key){

array[tem+step] = array[tem];

}else{

break;

}

}

array[tem + step ] = key;

}

}

}

return array;

}

7.快速排序。其实说到底快速排序算法就系对冒泡排序的一种改进，采用的就是算法理论中的分治递归的思想，说得明白点，它的做法就是：通过一趟排序将待排序的纪录分割成两部分，其中一部分的纪录值比另外一部分的纪录值要小，就可以继续分别对这两部分纪录进行排序;不段的递归实施上面两个操作，从而实现纪录值的排序。

function quickSort(arr,l,r){

if(l < r){

var mid=arr[parseInt((l+r)/2)],i=l-1,j=r+1;

while(true){

while(arr[++i] < mid);

while(arr[--j]>mid);

if(i>=j)break;

var temp=arr[i];

arr[i]=arr[j];

arr[j]=temp;

}

quickSort(arr,l,i-1);

quickSort(arr,j+1,r);

}

return arr;

}

8.冒泡法：

function bullSort(array){

var temp;

for(var i=0;i < array.length;i++)

{

for(var j=array.length-1;j > i;j--){

if(array[j] < array[j-1])

{

temp = array[j];

array[j]=array[j-1];

array[j-1]=temp;

}

}

}

return array;

}