《高性能網(wǎng)站建設(shè)指南》筆記

0 評(píng)論 4719 瀏覽 4 收藏 7 分鐘
🔗 B端产品经理需要更多地进行深入的用户访谈、调研、分析,而C端产品经理需要更多地快速的用户测试、反馈、迭代

《高性能網(wǎng)站建設(shè)指南》,這是一本值得所有網(wǎng)站前端人員、網(wǎng)站開發(fā)人員、網(wǎng)站產(chǎn)品經(jīng)理一讀的好書。

《高》首先分析了網(wǎng)站的用戶響應(yīng)時(shí)間都花在哪里,然后在這個(gè)基礎(chǔ)上歸納出提高性能的若干辦法,最后以十大網(wǎng)站為例進(jìn)行了實(shí)例解析。這本書,把我們之前關(guān)于網(wǎng)站性能的一些散碎了解,體系地串了起來。篇幅不長(zhǎng),認(rèn)真讀的話,兩三天也就能讀完了。

前端優(yōu)化的重要性:

改進(jìn)前端通常只要較少的時(shí)間和資源,例如修改Web服務(wù)器配置文件、將腳本和樣式表放在特定位置、合并圖片、合并腳本等,這些修改只需要幾個(gè)小時(shí)或幾天;而改進(jìn)后端通常很麻煩,例如重新設(shè)計(jì)應(yīng)用程序架構(gòu)和代碼、查找和優(yōu)化臨界代碼路徑、添加或改動(dòng)硬件、對(duì)數(shù)據(jù)庫(kù)進(jìn)行分布化等,這些需要花費(fèi)數(shù)周或數(shù)月。

只有10%~20%的最終用戶響應(yīng)時(shí)間花在了下載HTML文檔上,其余的80%~90%時(shí)間花在了下載頁(yè)面中的所有組件上。[鄧熔注:這數(shù)據(jù)不是猜測(cè)的,著者列舉了十大網(wǎng)站的具體數(shù)據(jù)。]

前端優(yōu)化的舉措:

著者列舉了14個(gè)舉措,歸納方式有點(diǎn)散亂。我按我認(rèn)為容易理解的方式,重新歸納如下:

  1. 減少http請(qǐng)求次數(shù)(http請(qǐng)求次數(shù)對(duì)性能的影響很大):
    • 在圖片方面,有三個(gè)具體方案:圖片地圖、CSS Sprites、內(nèi)聯(lián)圖片三種,最值得關(guān)注的是CSS Sprites。
    • 腳本和樣式表也要合并,雖然合并有悖于模塊化開發(fā)的原則,但非常有利于性能。
    • 緩存可以使一些http請(qǐng)求轉(zhuǎn)為調(diào)用客戶端的已有資源。所以,必須關(guān)注Expires頭的設(shè)置。另外,HTTP1.1引入了“Cache-Control”頭,可以用“max-age”來設(shè)置緩存的時(shí)間長(zhǎng)度。
    • 移除ETag或者對(duì)ETag進(jìn)行專門配置,以免影響緩存調(diào)取。因?yàn)槟J(rèn)配置的ETag,和原始服務(wù)器的屬性相關(guān),當(dāng)多臺(tái)服務(wù)器時(shí),會(huì)導(dǎo)致緩存調(diào)取失敗。(N臺(tái)服務(wù)器,緩存調(diào)取成功的概率是1/N)
    • 對(duì)于用戶的著陸頁(yè)(Landing Page),腳本和樣式表究竟應(yīng)該內(nèi)聯(lián)(寫到html里)還是應(yīng)該外置??jī)?nèi)聯(lián)有利于減少http請(qǐng)求數(shù),外置有利于緩存。對(duì)這個(gè)問題的探討,產(chǎn)生了所謂“加載后下載(Post-Onload Download)”的方案:內(nèi)聯(lián),但在頁(yè)面加載完成后通過onload事件,動(dòng)態(tài)下載外部腳本和樣式表。[鄧熔注:除“加載后下載”之外,還有一個(gè)“動(dòng)態(tài)內(nèi)聯(lián)”的方案,但涉及到Cookie,把問題弄復(fù)雜了。]
  2. 充分利用并行下載:
    • 使用兩個(gè)主機(jī)名。HTTP1.1建議瀏覽器從每個(gè)主機(jī)名并行下載兩個(gè)元素,使用多個(gè)主機(jī)名能進(jìn)行更多的并行下載,但由于帶寬和CPU速度,過多的并行下載也會(huì)降低性能。Yahoo!的研究表明,使用兩個(gè)主機(jī)名性能最優(yōu)。
    • 將腳本放在底部,以避免對(duì)并行下載的影響。因?yàn)橄螺d腳本時(shí),并行下載是禁止的。
  3. 減小元素的大小:
    • 精簡(jiǎn)腳本。用JSMin精簡(jiǎn)外置腳本,這能移除所有的注釋以及不必要的空白字符,使腳本減小20%。(內(nèi)聯(lián)的腳本也應(yīng)該盡量精簡(jiǎn))
    • 優(yōu)化CSS。CSS中的注釋和空白字符比較少,優(yōu)化空間在于合并相同的類、移除不使用的類。同時(shí),應(yīng)避免使用CSS表達(dá)式,改用一次性表達(dá)式和使用事件處理器。因?yàn)镃SS表達(dá)式會(huì)頻繁求值,當(dāng)頁(yè)面滾動(dòng)、甚至用戶鼠標(biāo)移動(dòng)時(shí)都會(huì)求值。
    • 務(wù)必使用Gzip對(duì)腳本、樣式表、html文檔進(jìn)行壓縮,這通常能減小60%的數(shù)據(jù)量。刪除注釋、縮短URL等雖然也有用,但費(fèi)事得多且效果微弱。
  4. 其他:
    • 避免沒必要的重定向(例如在URL的結(jié)尾必須出現(xiàn)“/”但沒有出現(xiàn)時(shí)),因?yàn)樵谥囟ㄏ蛲戤叢⑶襤tml文檔下載完畢之前,沒有任何東西展示給用戶;對(duì)于為了跟蹤流量而使用的重定向,建議改用“referer”(僅可監(jiān)測(cè)流向內(nèi)部的流量),或“beacon+XMLHttpRequest”(可檢測(cè)所有流量,但方法較復(fù)雜);對(duì)于為了轉(zhuǎn)換新舊網(wǎng)站而進(jìn)行的重定向,著者在P81上提供了解決方案。[鄧熔注:關(guān)于流量監(jiān)控方面,是否改用其他方案,還需要綜合評(píng)估方案相應(yīng)的數(shù)據(jù)統(tǒng)計(jì)易用性;關(guān)于P81上的解決方案,我不知道是否對(duì)SEO會(huì)有影響,改善性能的時(shí)候,也需要綜合平衡SEO。]
    • 使用CDN(Content Delivery Network),縮小內(nèi)容和用戶的距離。
    • 將樣式表放在頂部,這樣能使內(nèi)容在瀏覽器中逐步呈現(xiàn)。盡管整個(gè)頁(yè)面的加載總耗時(shí)可能并無變化,但逐步呈現(xiàn)內(nèi)容,能使用戶感覺更快。[鄧熔注:這也是滾動(dòng)條的作用,有心理學(xué)依據(jù)。]
    • 適當(dāng)減少主機(jī)名,以減少DNS查找。[鄧熔注:主機(jī)名通常是出于其他考慮而設(shè)置的,比如SEO策略、運(yùn)維策略等,設(shè)置時(shí)避免泛濫即可。]
    • P96-102頁(yè)探討了Ajax下的優(yōu)化問題。

附注:著者推薦了四個(gè)工具,HTTP請(qǐng)求圖表使用IBM Page Detailer,響應(yīng)時(shí)間的測(cè)量使用Gomez的Web監(jiān)視服務(wù),頁(yè)面中的腳本及CSS分析使用Firebug,分析頁(yè)面性能使用YSlow。

來源:http://www.raydeng.com/《高性能網(wǎng)站建設(shè)指南》筆記.html

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!
专题
11906人已学习12篇文章
在日常生活中,使用APP或者网页加载时,加载按钮常常会出现,加载效率影响着用户体验。本专题的文章分享了加载功能的原理和设计。
专题
56772人已学习14篇文章
一次成功的线上活动能让你刷爆朋友圈,拉新活跃留存应有尽有。
专题
12703人已学习17篇文章
在一些老系统可能会有流程复杂、扩展性不强的问题,此时便需要进行重构。本专题的文章分享了产品重构指南。
专题
36263人已学习27篇文章
作为AIGC的代表性应用之一,ChatGPT仅仅只用了2个月的时间就已经突破了1亿用户。
专题
15203人已学习13篇文章
用户画像是指根据用户的基本属性、用户偏好、生活习惯、用户行为等信息而抽象出来的标签化用户模型。本专题的文章分享了如何设计和应用用户画像。
专题
14269人已学习13篇文章
裂变是研究用户增长的重要一环。本专题的文章分享了如何做裂变活动。