您當前位置：首頁 > web前端 > 網絡優化 > 談談網絡蜘蛛爬開心網001的一些體會

談談網絡蜘蛛爬開心網001的一些體會

來源：程序員人生發布時間：2014-02-03 05:34:11 閱讀次數：3423次

前言

最近在搞自動登錄系統的框架。拿開心網001來實驗，可是非常郁悶，我發現開心網的html頁面是我所見到的所有頁面中最不規范的。

水平之爛，第一次見。在php中夾雜Javascript，javascript有使用了php動態生成變量；在div布局中又嵌入table；json格式亂七八糟，根本沒有統一的模型規范。

html標簽不應該關閉的關閉，應該關閉的開著，幾乎就是混亂。

我實在懷疑kaixin001到底能走多遠。在幾乎搖搖欲墜的架構上面開發，到底還有多少潛力？

雖然整個kaixin001如此之爛，而更令我驚奇是，無論IE、firefox、chrome依然能夠正確的解析頁面布局。實在佩服這些html解析器的內核，竟然可以容忍這么垃圾的html布局。

正文

使用網絡蜘蛛，首先必然要對html進行對象化，變成html樹，然后再根據 class / id，甚至節點的位置獲取自己需要的信息。

可以開心網的html如此之爛，采用標準的html規范解析，一定會崩潰的；既然ie的內核能夠正確解析這種html，那么我一定可以進行類似的智能修正操作。

首先看一段kaixin001惡心的html代碼，找找其中的問題。

代碼：

<div class="dxx_of" id="message7" onmouseover="msgOnmouseover(7)" onmouseout="msgOnmouseout(7)" /> ---------- 問題1：毫無道理的中斷
<div class="dxx1" style="padding: 15px 10px;">
</div>
<div class="dxx4">
<div class="l50_s" id="icon7">
<a href="/home/?uid=14682889" title="陳晨">
<img src="http://pic1.kaixin001.com.cn/logo/68/28/50_14682889_24.jpg" width="50"
height="50" /></a></div>
<div style="text-align: center; margin-top: -8px;">
<a href="/home/?uid=14682889" class="sl" title="陳晨">陳晨</a></div>
</div>
<div class="dxx5" style="width: 120px;">
<div class="c9 f10">
3月24日</div>
<div style="display: none; border: 1px solid #EEC0C7; padding: 2px 5px 0 5px; color: #EEC0C7;">
群發</div>
</div>
<div class="dxx6">
<table width="470" class="aa" border="0" cellpadding="0" cellspacing="0">
<colgroup>
<col width="463" />
</colgroup>
<tbody>
<tr basestyle="oRowLine2">
<td style="white-space: normal" valign="top" onclick="javascript:clickDirect('/msg/view.php?thread_mid=1871989755&pos=6');">
<img onload='_commentImageResize(this,350);' title="微笑" src="http://img1.kaixin001.com.cn/i/face/2.gif">
<div>
<span class='c9'>共2條會話</span><a href="/msg/view.php?thread_mid=1871989755&pos=6"
class="sl">+展開</a></span> -------- 問題2：沒有根據的結束符 </div>
<span class="c9"></span>
<div class="msg_encl" style="display: none;">
<img src="http://img.kaixin001.com.cn/i/enclosure.gif" />
此消息含有0個附件</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="dxx4" style="width: 78px;">
<div>
<a class="sl" href="/msg/view.php?thread_mid=1871989755&pos=6" title="查看該消息">查看該消息</a></div>
<div>
<a class="sl" href="/msg/view.php?thread_mid=1871989755&pos=6" title="回復該消息">回復該消息</a></div>
<div>
<a class="sl" href="/msg/write.php?thread_mid=1871989755" title="轉發該消息">轉發該消息</a></div>
<div id="Div6" style="display: none;" title="舉報不良短消息">
<div class="l">
<a class="sl cp" style="text-decoration: underline;" onclick="javascript:report(14682889,'1871989755');"
onmouseover="javascript:$('reportimg').src='/uploads/allimg/100331/200935O28-1.gif'"
onmouseout="javascript:$('reportimg').src='/uploads/allimg/100331/2009353146-2.gif'"
target="reportspam" title="舉報不良短消息">不良短消息</a> </div>
<div class="l mt5">
<img id="Img6" onclick="javascript:report(14682889,'1871989755');" onmouseover="this.src='/uploads/allimg/100331/200935O28-1.gif'"
onmouseout="this.src='/uploads/allimg/100331/2009353146-2.gif'" src="/uploads/allimg/100331/2009353146-2.gif"
width="14" height="12" alt="舉報不良短消息" /></div>
<div class="c">
</div>
</div>
</div>
<div class="dxx7" id="delete7">
<a href="javascript:delThread('1871989755', '0');" title="刪除該條消息包含的所有會話">
<img src="http://img.kaixin001.com.cn/i/close.gif" /></a></div>
<div class="c">
</div>
</div>

-------- 問題1：這個應該是開始的div的結束符

還有類似的代碼，例如：

<input type=hidden name=id_2 value="9813861"> --------- 沒有關上標簽
<input type=hidden name=num_2 value="0">
<input type=hidden name=del_2 value="0">

總之，問題數不勝數。我大概列舉一下：

1. 標簽是否關閉問題

根據html規范，部分標簽是不允許有子節點，例如br / hr / input / img 因此讀取到當前節點之后，不會進行嵌套讀取。

2. 布局的混亂

在第一個例子里面，

div過早的關閉了，如果按照html規范遞推建立節點，則會導致子節點無法正確的建立。解決方法就是，當遇到當前節點是關閉的節點，例如<a xxx />，同時允許帶有子節點，則進入遞歸繼續讀取。

3. 遇到結束節點

例如第一個例子里面多余的</span>，要解決這種問題，就需要對遞歸保存遞歸路徑，使用堆棧Stack。當發生遞歸后，壓入當前節點名稱到堆棧，所以讀取了結束節點，則判斷是否在堆棧中出現過，如果沒有，自動丟棄。

結束語