騰訊新聞中心首頁改版啦

SillyMonkey 發布于2019-08-19 18:20 / 3140人閱讀

摘要：本人博客正式地址騰訊新聞中心的首頁改版啦，歡迎訪問。這次新聞首頁的改版，是從零開始寫的一個新頁面。除要聞頁卡外，其他頁卡的新聞均是通過的方式獲取的。總結新頁面上線后，還會有很多后續的功能需要添加。

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

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

我們先來看看改版前后的首屏效果：

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

樣式更加簡潔，刪除不必要的CSS裝飾

刪除額外的新聞介紹，更加突出新聞的標題

頁面趨于扁平化

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開始依次遞增不能有間斷：

當滾動條滾動到當前區域時，則把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)
}

3.3 拖拽頁卡修改順序

頁卡的默認順序是：財經、體育、娛樂、房產...社會、教育。在“更多”的頁卡里有個排序選項，可以在彈出框里修改頁卡的展示順序，讓自己更感興趣的頻道排在前面。

拖拽相應的頻道，完成后保存即可。下次打開頁面時，就會展示之前拖拽好的順序。

其實在點擊“保存”后，程序會將調整后的頁卡順序保存到cookie中，以后每次打開頁面時，都會檢查是否存在這個cookie，若存在cookie則展示相應的順序，否則展示頁卡的默認順序。

4. 總結

新頁面上線后，還會有很多后續的功能需要添加。在此也只是做個改版的階段性總結，望大家批評改正。

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

GPU云服務器云服務器新聞中心騰訊云官網首頁仿騰訊迷你首頁亞洲交友中心首頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79467.html

騰訊新聞中心首頁改版啦

摘要：本人博客正式地址騰訊新聞中心的首頁改版啦，歡迎訪問。這次新聞首頁的改版，是從零開始寫的一個新頁面。除要聞頁卡外，其他頁卡的新聞均是通過的方式獲取的。總結新頁面上線后，還會有很多后續的功能需要添加。本人博客：http://www.xiabingbao.com 正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...

MadPecker 2019-08-02 15:54 評論0 收藏0
ReactJS新聞 #22 Next.js發布2.0

摘要：第期新聞發布是熱門的通用服務器端的延伸框架，近日發布了版本。官方博客相關報導官網全新改版工具的官網近日全新改版上線，文檔與首頁都有全新的版面與改善。官方網站研習會報導是在月底，于歐洲的社群的一個研習會活動。第022期 (2017.04.02) 新聞 Next.js發布2.0 Next.js是熱門的通用(服務器端)的React延伸框架，近日發布了2.0版本。2.0的目標有三個，是針對...

or0fun 2019-08-20 15:32 評論0 收藏0
云計算哪家強？BAT數據中心總和不及亞馬遜一半

摘要：日前，騰訊技術工程事業群數據中心負責人鐘遠河在中國數據中心周接受澎湃新聞采訪時表示，目前中國百度阿里巴巴騰訊三家互聯網巨頭所擁有的數據中心服務器數量之和，還不及美國亞馬遜一家公司的一半。中國網民規模達7.31億，相當于歐洲人口總量，是全球最大的互聯網市場，但是中國數據中心的規模卻遠遠不及美國，還有很多用戶沒有使用過云計算服務。日前，騰訊（00700.HK）技術工程事業群數據中心負責人鐘遠河在...

The question 2019-04-30 11:30 評論0 收藏0
微信中打開頭條新聞，返回卻到頭條webApp首頁源碼，實現PV回流增長！

摘要：日常生活中經常可以遇到，有朋友通過微信向你分享今日頭條騰訊新聞等各大門戶的新聞，但是當你點擊進去查看完后，在點擊手機的返回鍵，發現不是直接返回的微信聊天界面，而是先返回到該新聞網站的首頁，再次返回才到聊天界面。日常生活中經常可以遇到，有朋友通過微信向你分享今日頭條、騰訊新聞等各大門戶的新聞，但是當你點擊進去查看完后，在點擊手機的返回鍵，發現不是直接返回的微信聊天界面，而是先返回到該新...

546669204 2019-08-21 17:52 評論0 收藏0
這個冬天，讓騰訊視頻帶給你溫暖

摘要：金秋之后，便是寒冬。年就要過去了，這一年承載了太多的記憶，一個騰訊視頻，幫助我們記錄下來這些或難過，或美好，或感動的瞬間。有任何問題，你可以通過以下方式找到我郵箱源碼，歡迎個人主頁金秋之后，便是寒冬。2017年就要過去了，這一年承載了太多的記憶，一個騰訊視頻demo，幫助我們記錄下來這些或難過，或美好，或感動的瞬間。一個仿騰訊視頻的小程序：開發工具：微信開發者工具小程序開...

Bryan 2019-08-02 16:00 評論0 收藏0