Acfun和Bilibili的首页头条比较

既然最近找工作没人要，那就研究研究别人家东西好了。

A站，俗称的Av，不是，Acfun，他的首页是这样的

B站，也就是Bilibili，首页是这样的

今天对比的是头条信息，也就是进站之后最先看到的内容，那么比较开始了

首先使用chrome的审查元素，可以清楚的看到网页的结构，俩家各有不同

Acfun使用了js每次替换显示的部分，也就是图中claaa="b"的部分，实现了信息的切换

而Bilibili采用了ul的方式，一次加载所有的li，通过切换margin-left的方式实现信息切换

表象的部分看完了，下面看看数据的来源

打开network标签，刷新页面，可以看到，Acfun的主页刷新后，先加载了网页的主体部分，然后加载了js，css和图片等网站的资源

但是在几分钟后，会不断出现online的json文件，打开之后发现存储了一些状态信息，应该是用来确认用户是否在线

{"success":true,"isdisabled":false,"level":17,"status":200,"duration":3947}

Bilibili在数据加载的过程采用了不同的方式，在加载的初期看起来同样加载了页面，js，css和图片，但是实际数据却没有真正加载进页面，在加载过程中，有多个json文件，这个才是信息的真正来源，如图中的slideshow.json文件，就是头条的信息

了解了两个网站首页的结构，下一步是抓取信息，使用了http-client 4.2.5 获取页面，同时结合了jsoup解析页面，其中还用到了json-lib-2.4等工具分析json信息

<span style="white-space:pre">	</span>public static String FetchAcfun() throws ClientProtocolException, IOException {
		String url = "http://www.acfun.tv";
		HttpGet httpget = new HttpGet(url);
		HttpClient client = new DefaultHttpClient();
		HttpResponse response = client.execute(httpget);
		String result = EntityUtils.toString(response.getEntity(), "UTF-8");
		httpget.releaseConnection();
		// System.out.println(result);
		AnalysesAcfun(result);
		return result;
	}

	public static void AnalysesAcfun(String html) {
		Document doc = Jsoup.parse(html);
		Element blocklightbox = doc.getElementById("area-a");
		Element box_lightbox = blocklightbox.getElementById("block-lightbox");
		Elements box_lightbox_div = box_lightbox.getElementsByClass("a");
		Element box_lightbox_div_a = box_lightbox_div.get(0);
		Elements results = box_lightbox_div_a.getElementsByTag("a");
		int size = results.size();
		for (int i = 0; i < size; i++) {
			Element a = results.get(i);
			System.out.print(a.attr("href") + "\t");
			System.out.print(a.attr("data-src") + "\t");
			System.out.print(a.getElementsByTag("h1").get(0).ownText() + "\t");
			System.out.print(a.getElementsByTag("h3").get(0).ownText());
			System.out.print("\n");
		}
	}

其中需要注意的是，Bilibili采用了gzip压缩，在没有意识到需要解压之前绕了不少弯子，最终才发现是自己蠢爆了

<span style="white-space:pre">	</span>// Bilibili 使用json填充内容
	// http://www.bilibili.com/index/slideshow.json 左边的6格广告
	// http://www.bilibili.com/index/ranking-3day.json 右侧的3日排行

	// 获取的json是gz压缩文件，需要解压
	public static String FetchBilibili() throws Exception {
		// doUncompressFile("json.gz");
		URL url = new URL("http://www.bilibili.com/index/slideshow.json");
		HttpURLConnection conn = (HttpURLConnection) url.openConnection();
		DataInputStream input = new DataInputStream(conn.getInputStream());
		GZIPInputStream gzipinput = null;
		try {
			gzipinput = new GZIPInputStream(input);
		} catch (Exception e) {
			e.printStackTrace();
		}
		Reader reader = new InputStreamReader(gzipinput, "UTF8");
		StringBuilder sb = new StringBuilder();
		char[] chars = new char[4096];
		while (reader.read(chars) > 0) {
			sb.append(chars);
		}
		return sb.toString();
	}

	public static void main(String[] args) {
		try {
			System.out
					.println(FetchBilibili());
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}