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;

}