騰訊新聞中心首頁(yè)改版啦

MadPecker 發(fā)布于2019-08-02 15:54 / 1041人閱讀

摘要：本人博客正式地址騰訊新聞中心的首頁(yè)改版啦，歡迎訪問(wèn)。這次新聞首頁(yè)的改版，是從零開(kāi)始寫的一個(gè)新頁(yè)面。除要聞頁(yè)卡外，其他頁(yè)卡的新聞均是通過(guò)的方式獲取的?？偨Y(jié)新頁(yè)面上線后，還會(huì)有很多后續(xù)的功能需要添加。

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

騰訊新聞中心的首頁(yè)改版啦，歡迎訪問(wèn)【http://news.qq.com】。我是負(fù)責(zé)這次改版的前端開(kāi)發(fā)工程師，今天也從前端的角度分析一下改版的過(guò)程和效果。

我們先來(lái)看看改版前后的首屏效果：

從對(duì)比圖上來(lái)看，主要有以下的變化：

樣式更加簡(jiǎn)潔，刪除不必要的CSS裝飾

刪除額外的新聞介紹，更加突出新聞的標(biāo)題

頁(yè)面趨于扁平化

1. 網(wǎng)頁(yè)屬性和頭部信息

我們來(lái)看看兩個(gè)頁(yè)面中頭部信息的設(shè)置

舊頁(yè)面：

新頁(yè)面：

主要的變化有：

頁(yè)面從html4.01的聲明改為了html5的聲明

字符編碼從gb2312改為UTF-8

優(yōu)先使用 IE 最新版本和 Chrome

2. 頁(yè)面優(yōu)化

前幾個(gè)做的改版頁(yè)面，只是在原頁(yè)面上進(jìn)行了簡(jiǎn)單的CSS修改。這次新聞首頁(yè)的改版，是從零開(kāi)始寫的一個(gè)新頁(yè)面。因此自主權(quán)更大，能把優(yōu)化做到最大；不過(guò)因?yàn)楦鞣N客觀和主觀的原因，依然還有很大進(jìn)步的空間。

我在編寫頁(yè)面時(shí)盡量把CSS放在前面，js放到尾部。不過(guò)頁(yè)面里有很多公共的頁(yè)面片，只能include進(jìn)來(lái)，因此這些頁(yè)面片里的js也跟著include進(jìn)來(lái)。

2.1 圖片懶加載

在幾乎所有的頁(yè)面中，圖片是最拖延頁(yè)面加載的，之前的舊頁(yè)面在沒(méi)有任何懶加載的情況下，憑借著騰訊強(qiáng)大的服務(wù)器，也能快速的展示頁(yè)面。不過(guò)，在新頁(yè)面里，除了首屏展示的圖片外，幾乎所有的圖片都使用了懶加載，當(dāng)用戶看到這個(gè)地方時(shí)，才展示圖片。

圖片也是分塊加載的，滾動(dòng)到某個(gè)區(qū)域時(shí)，才加載這個(gè)區(qū)域里所有的圖片。整個(gè)頁(yè)面從上往下分成了5個(gè)區(qū)域：

右側(cè)影像力的輪播圖: page_cnt_1

要聞的列表區(qū)后半部分（第14條-第46條）: page_cnt_2

軍事|社會(huì)模塊: page_cnt_3

歷史|傳媒模塊: page_cnt_4

影像力模塊: page_cnt_5

對(duì)需要懶加載的圖片，把真實(shí)的圖片地址放到_src的屬性中，不要寫src屬性，因?yàn)閟rc的值為空時(shí)也會(huì)請(qǐng)求，或者為src設(shè)置一個(gè)1x1的占位圖片。

把整個(gè)頁(yè)面里的圖片劃分區(qū)域，每個(gè)區(qū)域按順序設(shè)置圖片的name屬性，值為page_cnt_{num}，num從1開(kāi)始依次遞增不能有間斷：

當(dāng)滾動(dòng)條滾動(dòng)到當(dāng)前區(qū)域時(shí)，則把a(bǔ)rea1區(qū)域里name的值是page_cnt_1的圖片都加載完成，而area2則在滾動(dòng)條再次滾動(dòng)到相應(yīng)的距離時(shí)才加載。

2.2 頁(yè)卡的新聞延遲加載

在第3條新聞和第4條新聞中間有13個(gè)頻道的頁(yè)卡，用戶可以通過(guò)把鼠標(biāo)放到某個(gè)頁(yè)卡上獲取當(dāng)前頁(yè)卡的新聞，點(diǎn)擊頁(yè)卡時(shí)跳轉(zhuǎn)到相應(yīng)的頻道。除要聞頁(yè)卡外，其他頁(yè)卡的新聞均是通過(guò)ajax的方式獲取的。

考慮到用戶可能頻繁的切換頁(yè)卡，或者用戶可能只是想簡(jiǎn)單從第1個(gè)頁(yè)卡移動(dòng)到第5個(gè)頁(yè)卡。這種情況下，是沒(méi)有必要請(qǐng)求第2，3，4個(gè)頁(yè)卡里的內(nèi)容的。因此為頁(yè)卡切換設(shè)置了延時(shí)請(qǐng)求，當(dāng)鼠標(biāo)在當(dāng)前頁(yè)卡停留240ms以上，才認(rèn)為用戶確實(shí)想看這個(gè)頁(yè)卡的內(nèi)容，否則認(rèn)為鼠標(biāo)只是從當(dāng)前頁(yè)卡滑過(guò)，而不是真的想看其內(nèi)容。

var timer_0 = null;
$(".news .title").on("mouseenter", "a", function(){
    // 若鼠標(biāo)放在當(dāng)前的頁(yè)卡上，不再重復(fù)請(qǐng)求
    if( $(this).parent().hasClass("current") ){
        return;
    }

    // 鼠標(biāo)hover到這個(gè)頁(yè)卡時(shí)，取消上個(gè)頁(yè)卡的請(qǐng)求
    timer_0 && clearTimeout(timer_0);

    var $self = $(this);
    timer_0 = setTimeout(function(){
        // 開(kāi)始請(qǐng)求內(nèi)容

    }, 240);
}).on("mouseout", function(){
    // 鼠標(biāo)離開(kāi)整個(gè)區(qū)域時(shí)也停止請(qǐng)求

    timer_0 && clearTimeout(timer_0);
});

2.3 js、css、img壓縮

這3個(gè)都是最基本的優(yōu)化原則。背景圖片能合并的則合并，不能合并的則通過(guò)工具進(jìn)行壓縮，js和css也進(jìn)行相應(yīng)的壓縮。

3. 功能提升

除了頁(yè)面基本的功能外，也還有其他的幾個(gè)亮點(diǎn)提升用戶的體驗(yàn)。

3.1 hover放大效果

整個(gè)頁(yè)面左側(cè)的圖片，鼠標(biāo)hover時(shí)有放大的效果，這里是使用到了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 影像力圖片的蒙層

在影像力模塊里，鼠標(biāo)hover時(shí)感覺(jué)會(huì)添加了一個(gè)蒙層效果，其實(shí)是圖片的透明度發(fā)生了變化：

.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 拖拽頁(yè)卡修改順序

頁(yè)卡的默認(rèn)順序是：財(cái)經(jīng)、體育、娛樂(lè)、房產(chǎn)...社會(huì)、教育。在“更多”的頁(yè)卡里有個(gè)排序選項(xiàng)，可以在彈出框里修改頁(yè)卡的展示順序，讓自己更感興趣的頻道排在前面。

拖拽相應(yīng)的頻道，完成后保存即可。下次打開(kāi)頁(yè)面時(shí)，就會(huì)展示之前拖拽好的順序。

其實(shí)在點(diǎn)擊“保存”后，程序會(huì)將調(diào)整后的頁(yè)卡順序保存到cookie中，以后每次打開(kāi)頁(yè)面時(shí)，都會(huì)檢查是否存在這個(gè)cookie，若存在cookie則展示相應(yīng)的順序，否則展示頁(yè)卡的默認(rèn)順序。

4. 總結(jié)

新頁(yè)面上線后，還會(huì)有很多后續(xù)的功能需要添加。在此也只是做個(gè)改版的階段性總結(jié)，望大家批評(píng)改正。

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

云服務(wù)器 GPU云服務(wù)器新聞中心騰訊云官網(wǎng)首頁(yè) 仿騰訊迷你首頁(yè) 亞洲交友中心首頁(yè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/54340.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MadPecker

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

換了云主機(jī)服務(wù)商為啥還要重新備案？

閱讀 1193·2021-11-22 13:53
程序員神器之Cmder

閱讀 1765·2021-11-17 09:33
你們要的3D太陽(yáng)系

閱讀 2525·2021-10-14 09:43
寶塔面板安裝小浣熊小說(shuō)CMS

閱讀 3087·2021-09-01 11:41
【衡天云】香港站群服務(wù)器：低至1010元/月_新人專享價(jià)

閱讀 2499·2021-09-01 10:44
WordPress淘寶客插件推薦高效率獲取聯(lián)盟CPS鏈接

閱讀 3184·2021-08-31 09:39
長(zhǎng)路漫漫，唯劍作伴，每日3+1，從今天開(kāi)始

閱讀 1657·2019-08-30 15:44
瀏覽器渲染的那些事（二）

閱讀 1978·2019-08-30 13:02

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

騰訊新聞中心首頁(yè)改版啦

相關(guān)文章