DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 支付寶新首頁的幾點前端實踐小結
支付寶新首頁的幾點前端實踐小結
編輯:前端技巧     
當然,也包括個人在頁面性能優化上的一些經驗。這裡只挑幾點說說。

一、HTML5 標簽的應用
HTML5 的應用不僅僅是標簽的應用,但她可以從標簽的應用開始。打開你的浏覽器,查看源代碼,你會發現 <header> <footer> 這些標准已經都用上了。還會發現一段 HTML5 Shiv 的 JS 代碼:

復制代碼代碼如下:
<!--[if lt IE 9]>
<script type="text/javascript">
// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(a,b){function r(a){var b=-1;while(++b<f)a.createElement(e[b])}if(!(!window.attachEvent||!b.createStyleSheet||!function(){var a=document.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}())){a.iepp=a.iepp||{};var c=a.iepp,d=c.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",e=d.split("|"),f=e.length,g=new RegExp("(^|\\s)("+d+")","gi"),h=new RegExp("<(/*)("+d+")","gi"),i=/^\s*[\{\}]\s*$/,j=new RegExp("(^|[^\\n]*?\\s)("+d+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),k=b.createDocumentFragment(),l=b.documentElement,m=l.firstChild,n=b.createElement("body"),o=b.createElement("style"),p=/print|all/,q;c.getCSS=function(a,b){if(a+""===undefined)return"";var d=-1,e=a.length,f,g=[];while(++d<e){f=a[d];if(f.disabled)continue;b=f.media||b,p.test(b)&&g.push(c.getCSS(f.imports,b),f.cssText),b="all"}return g.join("")},c.parseCSS=function(a){var b=[],c;while((c=j.exec(a))!=null)b.push(((i.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(g,"$1.iepp_$2")+c[4]);return b.join("\n")},c.writeHTML=function(){var a=-1;q=q||b.body;while(++a<f){var c=b.getElementsByTagName(e[a]),d=c.length,g=-1;while(++g<d)c[g].className.indexOf("iepp_")<0&&(c[g].className+=" iepp_"+e[a])}k.appendChild(q),l.appendChild(n),n.className=q.className,n.id=q.id,n.innerHTML=q.innerHTML.replace(h,"<$1font")},c._beforePrint=function(){o.styleSheet.cssText=c.parseCSS(c.getCSS(b.styleSheets,"all")),c.writeHTML()},c.restoreHTML=function(){n.innerHTML="",l.removeChild(n),l.appendChild(q)},c._afterPrint=function(){c.restoreHTML(),o.styleSheet.cssText=""},r(b),r(k);if(c.disablePP)return;m.insertBefore(o,m.firstChild),o.media="print",o.className="iepp-printshim",a.attachEvent("onbeforeprint",c._beforePrint),a.attachEvent("onafterprint",c._afterPrint)}})(this,document)@*/
</script>
<![endif]-->

其實就是這段代碼使這些 HTML5 專屬的標准可以在 IE6 ~ IE8 上運行。COPYRIGHT 信息還保留在頁面代碼上,大家可以自己去研究一下。原理很簡單,就是用 JS 創建標簽讓 IE 低下 9 的版本可以認識,然後就直接用了。

標簽應用需要著重關注的是其語義的傳達。像 <header> <footer> 這種很好理解,但像 <section> 和 <aside>,還有類似於用新語義的 <small> 標簽等,都是值得大家去深入研究的。這方面這次新首頁的改版我也有著重強調過,不過執行起來並不是很理想。接下來我會做一下這方面相應的研究,如果你有興趣,可以加入到我的團隊中來。

值得一提的是,HTML5 有一個特點是“有容乃大”,標簽可以非常靈活地去使用。比如可以用 "block-level" links,寫慣了 XHTML 的同學,一定不會習慣下面的代碼,甚至會覺得不可理喻,但這就是 HTML5 所允許的。

復制代碼代碼如下:
<article>
<a href="story1.html">
<h3>Bruce Lawson voted sexiest man on Earth</h3>
<p><img src="bruce.jpg" alt="gorgeous lovebundle. ">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p>
<p>Read more</p>
</a>
</article>

所以,上次分享的時候就說:“團隊協作,需要我們去擬定一套規范,來幫助我們在應用 HTML5 的標准時候,代碼能夠更統一。普遍來說,XHTML 是相對更符合我們標准的,支付寶也是采用這種方式,有一套約定規范,我們可以根據 XHTML,將 HTML5 轉化成 XHTML5,以更適合我們團隊開發”。你覺得呢?

二、可訪問性增強與速度提升
這次首頁改版幾乎整個頁面都是 CMS,有個很變態的需求是,所有圖標都需要運營可改。換個說法就是,用內存換速度的拼圖片(CSS sprites) 來減少 HTTP 請求數成了不可能。姐姐啊,HTTP 是換取速度最昂貴的東西,這樣搞,我的頁面性能該如何是好呢?

其實像大家可以體驗到的。普遍的感受就是,首頁放的東西比上一版多了,但速度竟然快了不少。另外一個很明顯的感受是,圖片都是最後出來的。是的,這就是為什麼這麼多請求,還能快起來的原因。

平行加載

所謂的延遲加載,把所有圖片都用相應的標記記錄圖片地址,然後用 JS 去創建一個 img 再把 src 的值變成已經標記在頁面中的那個地址。這樣做有兩個好處,一是先把文本內容顯示出來,再加載圖片,這樣一個先後的過程會給用戶心理給用戶安慰,讓其感覺頁面是正在加載的;一是平行加載圖片,從實際上加快頁面的速度。

但這樣做也有一個風險,當 JS 沒有開啟的時候,用戶就看不到圖片。所以,我們需要進一步增強頁面的可用性,讓其沒有 JS 的時候也可以顯示出來。當時想到的就是 <noscript> 標簽,專為無 JS 而生的標簽。現在,禁用你浏覽器的 JS 再訪問支付寶首頁吧。是吧,還是都有顯示出來吧,目換達到了。做法是這樣的,按 noscript > img 這樣的結構,給每一個 <img> 標簽外面都包一個 <noscript> 標簽,當有 JS 的時候,用 JS 把 <img> 提到 <noscript> 外面。

在技術實現上,有一個比較麻煩的是:從 noscript 中獲取的 innerHTML,在 firefox 等高級浏覽器中是被轉義過的 text 文本,而在 ie 中是未轉義過的,最重要的是在 ie7 中用 innerHTML 根本就獲取不到。轉義是小事,可以寫一個 Hack 來實現,但獲取不到才是最大的問題。所以,我們要用這樣的方式來寫一個 img:

復制代碼代碼如下:
<noscript data-noscript="https://img.alipay.com/sys/homeindex/style/pb.png">
<img src="https://img.alipay.com/sys/homeindex/style/pb.png" alt="新手課堂:快速輕松學會支付寶" />
</noscript>

在 <noscript> 標簽中添加一個 HTML5 格式的屬性,讓獲取不到 innerHTML 時,獲取其 data-noscript 這個屬性。然後創建一個 img,並把其 src 的值設置成 data-noscript 的值。下面給出這次首頁上我使用的代碼:

復制代碼代碼如下:
// 轉義 noscript 中獲取的 innerHTML
HI.text2HTML = function (text) {
if(text.indexOf('&lt') === -1) return text;
var tmp = document.createElement("DIV");
tmp.innerHTML = text;
return tmp.textContent || tmp.innerText;
}
// 將 img 提取出來,append 到 noscript 標准的前面。
// 使用 insertBefore + fragment 的方式
// hack 兼容各個浏覽器
HI.ns2Live = function (ns) {
var img,f = document.createDocumentFragment();
if(ns.innerHTML){
img = D.toDom(HI.text2HTML(ns.innerHTML));
} else {
img = document.createElement('IMG');
img.src = ns.getAttribute('data-noscript');
}
f.appendChild(img);
ns.parentNode.insertBefore(f, ns);
}

不過話說回來,支付寶的登陸控件現在還做得很爛,沒有 JS 的時候根本就出不來。所以,這個優化也只是蛋痛先做做,還需要控件那邊的升級。對於這個,我表示很心痛。

三、優化優化優化
其實這次改版,想優化的東西並沒有全部優化上去。比如說,靜態文件的緩存,其實可以調成 1 年(為什麼不是像 yahoo 那樣緩存 10 年,其實這是一個規定,只是我已經忘記了那個組織叫什麼了。汗);比如 js 和 css 的性能優化,圖片的壓縮,無障礙訪問的增強,字體增強等等。東西挺多的,首頁可優化的點還是挺可以。但這一次因為某些原因,項目被提前一周發布,沒有做全部優化。發布上去後的有升級包,但相應產品線的人對於這些性能優化也不是很 Care。作為架構組的同學,其實也做不了主,畢竟是別人線的產品,畢竟人家也不願意。

這裡強烈推薦大家看一下 Google 的建議,我的優化幾乎都是從這裡取經得來的:http://code.google.com/speed/page-speed/docs/overview.html

結語

好吧,就寫到這裡。就兩大點,其他都摻著說,沒有全部細化出來。其實還有更多的東西正在研究中。只是最近一直很懶,也有確實發生了很多事情。所以都疲於寫博。人還是應該偶爾寫寫博客做做總結,不然腦子很容易轉不起來,字也串不成完整的一句話。對於這次改版的代碼,HTML/CSS 代碼大多是實習生同學寫的,上次在微博上也有提起過。我主要負責 JS ,大方面的把握和優化方面的東西。發現現在的實習生都挺不錯的,大三的時候我還不會寫代碼呢。哈哈…

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved