騰訊新聞中心首頁改版啦

時間 2019-11-08

標籤騰訊中心首頁改版欄目騰訊简体版

原文原文鏈接

本人博客：http://www.xiabingbao.com
正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision css

騰訊新聞中心的首頁改版啦，歡迎訪問【http://news.qq.com】。我是負責此次改版的前端開發工程師，今天也從前端的角度分析一下改版的過程和效果。 html

咱們先來看看改版先後的首屏效果：前端

從對比圖上來看，主要有如下的變化：html5

樣式更加簡潔，刪除沒必要要的CSS裝飾web
刪除額外的新聞介紹，更加突出新聞的標題ajax
頁面趨於扁平化chrome

1. 網頁屬性和頭部信息

咱們來看看兩個頁面中頭部信息的設置服務器

舊頁面：cookie

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

新頁面：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

主要的變化有：

頁面從html4.01的聲明改成了html5的聲明
字符編碼從gb2312改成UTF-8
優先使用 IE 最新版本和 Chrome

2. 頁面優化

前幾個作的改版頁面，只是在原頁面上進行了簡單的CSS修改。此次新聞首頁的改版，是從零開始寫的一個新頁面。所以自主權更大，能把優化作到最大；不過由於各類客觀和主觀的緣由，依然還有很大進步的空間。

我在編寫頁面時儘可能把CSS放在前面，js放到尾部。不過頁面裏有不少公共的頁面片，只能include進來，所以這些頁面片裏的js也跟着include進來。

2.1 圖片懶加載

在幾乎全部的頁面中，圖片是最拖延頁面加載的，以前的舊頁面在沒有任何懶加載的狀況下，憑藉着騰訊強大的服務器，也能快速的展現頁面。不過，在新頁面裏，除了首屏展現的圖片外，幾乎全部的圖片都使用了懶加載，當用戶看到這個地方時，才展現圖片。

圖片也是分塊加載的，滾動到某個區域時，才加載這個區域裏全部的圖片。整個頁面從上往下分紅了5個區域：

右側影像力的輪播圖: page_cnt_1
要聞的列表區後半部分（第14條-第46條）: page_cnt_2
軍事|社會模塊: page_cnt_3
歷史|傳媒模塊: page_cnt_4
影像力模塊: page_cnt_5

對須要懶加載的圖片，把真實的圖片地址放到_src的屬性中，不要寫src屬性，由於src的值爲空時也會請求，或者爲src設置一個1x1的佔位圖片。

把整個頁面裏的圖片劃分區域，每一個區域按順序設置圖片的name屬性，值爲page_cnt_{num}，num從1開始依次遞增不能有間斷：

<div class="area1">
    <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_1" />
    <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_1" />
    <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_1" />
</div>
<div class="area2">
    <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_2" />
    <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_2" />
    <img _src="http://inews.gtimg.com/newsapp_ls/0/301518240_150120/0" name="page_cnt_2" />
</div>

當滾動條滾動到當前區域時，則把area1區域裏name的值是page_cnt_1的圖片都加載完成，而area2則在滾動條再次滾動到相應的距離時才加載。

2.2 頁卡的新聞延遲加載

在第3條新聞和第4條新聞中間有13個頻道的頁卡，用戶能夠經過把鼠標放到某個頁卡上獲取當前頁卡的新聞，點擊頁卡時跳轉到相應的頻道。除要聞頁卡外，其餘頁卡的新聞均是經過ajax的方式獲取的。

考慮到用戶可能頻繁的切換頁卡，或者用戶可能只是想簡單從第1個頁卡移動到第5個頁卡。這種狀況下，是沒有必要請求第2，3，4個頁卡里的內容的。所以爲頁卡切換設置了延時請求，當鼠標在當前頁卡停留240ms以上，才認爲用戶確實想看這個頁卡的內容，不然認爲鼠標只是從當前頁卡滑過，而不是真的想看其內容。

var timer_0 = null;
$('.news .title').on('mouseenter', 'a', function(){
    // 若鼠標放在當前的頁卡上，再也不重複請求
    if( $(this).parent().hasClass('current') ){
        return;
    }

    // 鼠標hover到這個頁卡時，取消上個頁卡的請求
    timer_0 && clearTimeout(timer_0);

    var $self = $(this);
    timer_0 = setTimeout(function(){
        // 開始請求內容

    }, 240);
}).on('mouseout', function(){
    // 鼠標離開整個區域時也中止請求

    timer_0 && clearTimeout(timer_0);
});

2.3 js、css、img壓縮

這3個都是最基本的優化原則。背景圖片能合併的則合併，不能合併的則經過工具進行壓縮，js和css也進行相應的壓縮。

3. 功能提高

除了頁面基本的功能外，也還有其餘的幾個亮點提高用戶的體驗。

3.1 hover放大效果

整個頁面左側的圖片，鼠標hover時有放大的效果，這裏是使用到了CSS3的transition屬性，所以在IE8及如下是看不到這種效果的。

img{
    -webkit-transition: transform .2s ease-out;
    -moz-transition: transform .2s ease-out;
    -ms-transition: transform .2s ease-out;
    -o-transition: transform .2s ease-out;
    transition: transform .2s ease-out;
}
img:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

3.2 影像力圖片的蒙層

在影像力模塊裏，鼠標hover時感受會添加了一個蒙層效果，實際上是圖片的透明度發生了變化：

.yingxiangli .con img {
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
.yingxiangli .con img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80)
}