您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

一秒幾十萬(wàn)!網(wǎng)頁(yè)載入速度很重要

Amazon 的網(wǎng)頁(yè)載入時(shí)間每多一秒,該公司的年度營(yíng)收就減少 16 億美元;Google 的搜索時(shí)間每多 0.4 秒,每天的搜尋次數(shù)就會(huì)減少 8 百萬(wàn)。這些都告訴我們網(wǎng)頁(yè)的載入時(shí)間長(zhǎng)短非常重要,而 i黑馬先前也寫(xiě)過(guò)一篇“科技發(fā)展使人們開(kāi)始失去耐心?”談?dòng)捌妮d入時(shí)間與使用者行為的關(guān)系,那么網(wǎng)頁(yè)的載入時(shí)間是不是也是這樣子呢?

  Cucumbertown 用了許多不同的策略,以確保網(wǎng)頁(yè)可以在 2 秒內(nèi)載完,最多 3 秒。我們非常熱衷于改善這件事,甚至還設(shè)定了一些提醒機(jī)制以防載入時(shí)間超過(guò) 3 秒。

  然而,就在 Chris Zacharias 寫(xiě)了“Page Weight 很重要(Page Weight 只的不單是網(wǎng)頁(yè)檔案大小,還包括網(wǎng)頁(yè)自動(dòng)執(zhí)行的動(dòng)作多寡等)”(注一)這篇文章之前,一封 Google Analytics 寄來(lái)的信通知了我們,網(wǎng)頁(yè)的載入時(shí)間超過(guò)了 20 秒,我們立刻放下手邊的一切去找出究竟發(fā)生了什么事。

  通常網(wǎng)頁(yè)載入的延遲發(fā)生之后,就會(huì)馬上被隨機(jī)測(cè)試或是我們的重度使用者給發(fā)現(xiàn),但這次并沒(méi)有,提醒機(jī)制甚至隔了一天才啟動(dòng)。這把你嚇壞了,一個(gè)你還沒(méi)有搞清楚的未知問(wèn)題,比起一些大的臭蟲(chóng)來(lái)說(shuō)更加危險(xiǎn)。

  我們便開(kāi)始進(jìn)行探測(cè),而結(jié)果就如下圖所看到的:

  當(dāng)然,Google Analytics 分析了平均載入時(shí)間,而這分析影響了結(jié)果。但將這與其他分析結(jié)果放在一起看,似乎還是可以得出一些結(jié)果。Cucumbertown 的連結(jié)被放在一個(gè)奈及利亞的美食頻道和一個(gè)泰國(guó)的知名博客上,導(dǎo)致大量的流量湧入。網(wǎng)頁(yè)載入速度在這些國(guó)家就如同你所看到的,可笑的慢。

  我們的 Cucumbertown 是一個(gè)內(nèi)容很多的網(wǎng)站,即便利用 requireJS 延遲以及基于使用者需求來(lái)載入 JavaScript,與網(wǎng)頁(yè)腳本載入有關(guān)的成本還是相當(dāng)顯著。即便載入文件物件模型(Document Object Models)都要花時(shí)間。

  在美國(guó)地區(qū)的網(wǎng)頁(yè)載入時(shí)間為 2.5 秒證實(shí)了這件事,DSL 裝置的 43 毫秒載入時(shí)間普及全球(注二),現(xiàn)在是時(shí)候開(kāi)始考慮內(nèi)容傳遞網(wǎng)絡(luò)(Content Delivery Network)了。

  我們?cè)?Zynga 一開(kāi)始是依賴(lài) Akamai(編按:作者為前 Zynga 資深軟件工程師),隨后換成 LimeLight 。但最近我們發(fā)現(xiàn) CloudFlare 在 Hacker News 上有一些活動(dòng),而且他們提供的功能也很吸引人去一探究竟,于是我就決定做個(gè)小小嘗試。

  現(xiàn)在這個(gè)博客(gigpeppers)就是通過(guò) CloudFlare 來(lái)提供的服務(wù),并透過(guò)內(nèi)容傳遞網(wǎng)絡(luò)來(lái)傳遞內(nèi)容。當(dāng)網(wǎng)站有大量的流量湧入的時(shí)候,這個(gè)模式帶來(lái)的體驗(yàn)非常的棒,但如果沒(méi)有持續(xù)的請(qǐng)求時(shí),這個(gè)模式反而會(huì)讓之后的網(wǎng)頁(yè)載入效率變差,但效率依然還是可以漸漸回到 1.5~2 秒之間。(編按:有點(diǎn)類(lèi)似靜摩擦力的啟動(dòng)阻力比動(dòng)摩擦力還要大的概念。)

  我依然認(rèn)為內(nèi)容傳遞網(wǎng)絡(luò)是一種企業(yè)用的昂貴方式。但我們這樣一個(gè)新創(chuàng)公司現(xiàn)在就正在使用,并把服務(wù)提供給全世界,而且這似乎是一個(gè)很重要的解決方法。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/wd1290.html
網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
CSS布局中一個(gè)簡(jiǎn)單的應(yīng)用BFC的例子
圖趣網(wǎng)微信
建議反饋
×