延遲加載，晉升首屏的加載速度
當(dāng)用戶打開(kāi)一個(gè)很長(zhǎng)的網(wǎng)頁(yè)時(shí)，首屏內(nèi)容的加載給了最直不美觀的速度體驗(yàn)。所以，讓首屏盡快的完成加載也是用戶權(quán)衡該頁(yè)面是否夠“快”的最首要的身分。5173的首頁(yè)，圖片根基都集中不才面的位置，讓下面的這些圖片全數(shù)都延遲加載就可以盡可能快的晉升首屏的加載速度。常見(jiàn)的圖片延遲加載手藝想必巨匠都不會(huì)目生了，這里就不復(fù)述。在 TAB 內(nèi)容中也同樣有良多圖片，這里也讓它們?cè)谟|發(fā) TAB 菜單的時(shí)辰再進(jìn)行加載。給圖片在HTML代碼中添加固定的尺寸自然也不再話下。so easy? no!
具體實(shí)施
圖片中不僅僅有營(yíng)業(yè)設(shè)置裝備擺設(shè)的圖片，也有來(lái)自第三方廣告系統(tǒng)的圖片(搜羅首屏的輪播年夜圖也是此類型的)。這些廣告圖片的 URL 是一個(gè) JavaScript 鏈接，其中包含了使用 document.write 的體例來(lái)加載廣告圖片的代碼。還有些 TAB 中包含了使用 iframe 嵌入到頁(yè)面的合作站點(diǎn)的內(nèi)容。廣告圖片以及 iframe 都是梗阻頁(yè)面加載的元兇。
最初的設(shè)法是年夜頭開(kāi)發(fā)一套廣告系統(tǒng)，換一種廣告加載體例，可是開(kāi)發(fā)成本太高。最后想到了使用 textarea 來(lái)延遲加載廣告和 iframe，玉伯供給的這種體例確實(shí)挺好用的。textarae 是個(gè)好工具，非論是通俗的 HTML 代碼亦或是 CSS、JavaScript 代碼，都可以扔到瑯縵沔去實(shí)現(xiàn)延遲加載。廣告圖片的優(yōu)化斗勁麻煩，我在另一篇文章中有具體的介紹。有了 textarea，良多內(nèi)容都可以像實(shí)現(xiàn)圖片延遲加載那樣來(lái)實(shí)施延遲加載，在 TAB 內(nèi)容中的 iframe 也可以在觸發(fā) TAB 菜單時(shí)再去加載 iframe。
處事端的優(yōu)化
針對(duì)頁(yè)面總體積過(guò)年夜的問(wèn)題，代碼的重構(gòu)確實(shí)能減小不少的體積，此外靜態(tài)資本一律都要添加gzip，僅僅是添加gzip，帶來(lái)的機(jī)能晉升也是斗勁較著的。
合理的操作瀏覽器端的緩存也是很主要的，除了登錄信息以及 cookie 的這種時(shí)效性較高的請(qǐng)求外，所有能添加 cache-control 的請(qǐng)求都加上了 max-age 的過(guò)時(shí)時(shí)刻。關(guān)于瀏覽器端的緩存添加，這里有一篇斗勁具體的文章 Cache them if you can。緩存的添加也會(huì)給更新帶來(lái)麻煩，所以要有響應(yīng)的體例來(lái)斷根緩存，給靜態(tài)資本的請(qǐng)求加上時(shí)刻戳即可。
此外處事端此次也斗膽的采用了 varnish 作為緩存加速處事器，這在國(guó)內(nèi)年夜型網(wǎng)站中應(yīng)該還不多見(jiàn)。
優(yōu)化成不美觀
做了這么多工作是時(shí)辰看磕暌古化成不美觀了，先來(lái)砍寤鏖數(shù)據(jù)對(duì)比：
優(yōu)化前后的請(qǐng)求數(shù)對(duì)比：
請(qǐng)求數(shù)的年夜年夜削減，緩解了處事器的壓力，可以撤失蹤良多處事器了。
優(yōu)化前后的靜態(tài)資本的文件體積對(duì)比，沒(méi)有包含ajax數(shù)據(jù)等其他文件體積：
JavaScript的重構(gòu)太孔殷了，原本竟有41個(gè) JavaScript 外鏈文件，當(dāng)然這些外鏈也搜羅了15個(gè)廣告的外鏈，廣告的優(yōu)化我稍后再說(shuō)，可是還剩下26個(gè)外鏈 JavaScript。這些臃腫不勝的 JavaScript文件即是造成頁(yè)面加載堵塞的元兇，也是系統(tǒng)資本占用的蛀蟲(chóng)，這是整個(gè)項(xiàng)目的可貴之一。
年夜文件體積的對(duì)比來(lái)看，優(yōu)化后節(jié)約了494KB的下載量，假若按照日PV1000000(估值，現(xiàn)實(shí)值弘遠(yuǎn)于該值，氖灼戀耐計(jì)?隙啵??允灼戀乃俁瓤歟?墑?dòng)H薌釉厥笨桃?ち級(jí)啵?比凰?塹南略亓懇慘?暌沽級(jí)啵?173的首屏是DOM數(shù)較多，下載量也小良多，所以總時(shí)刻和首屏?xí)r刻相當(dāng)接近。這里說(shuō)得總下載量是頁(yè)面初度加載完成的總下載量，因?yàn)槎加玫窖舆t加載手藝，向下滾動(dòng)時(shí)又會(huì)有圖片加載，這些時(shí)刻是不計(jì)較在內(nèi)的。
到底應(yīng)該若何來(lái)權(quán)衡網(wǎng)頁(yè)加載的快慢?此次的優(yōu)化我沒(méi)有用 yslow 和 pagespeed 等測(cè)試分?jǐn)?shù)的軟件，而是以現(xiàn)實(shí)的加載速度為優(yōu)化的方針，首屏的加載速度晉升就是最合適現(xiàn)實(shí)的聲名。如不美觀一個(gè)網(wǎng)站打開(kāi)半天仍是白屏，相信年夜年夜都人城市感受很慢。這就是現(xiàn)實(shí)的體驗(yàn)，測(cè)分軟件是紡暌鉤不出來(lái)的。
原載于：雨夜帶刀's Blog
本文鏈接：http://stylechen.com/5173homepage-optimized.html
如需轉(zhuǎn)載請(qǐng)以鏈接形式注明原載或原文地址。
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示