資訊專欄INFORMATION COLUMN
打算現(xiàn)在開始在博客里寫點(diǎn)東西，也能為自己看過的書學(xué)過的知識(shí)做一個(gè)歸納總結(jié)。
這幾日拜讀了Steve Souders的《高性能網(wǎng)站建設(shè)指南這本書》，雖然這本書可能已經(jīng)有些老了，但薄薄的一個(gè)小冊(cè)子里提出的網(wǎng)站性能優(yōu)化的準(zhǔn)則還是非常有價(jià)值的。這些規(guī)則都有個(gè)共同點(diǎn)，就是用很小的工作就能獲得很明顯的性能提升，性價(jià)比極高。廢話不多說了，總結(jié)一下書里的幾點(diǎn)性能優(yōu)化規(guī)則。
首先有一點(diǎn)需要說明的是書中所寫的性能黃金法則：只有10%~20%的響應(yīng)時(shí)間花在了下載HTML文檔上，其余的80%~90%時(shí)間花在了下載頁(yè)面的所有組件上。
這也是后面這些性能規(guī)則由來(lái)的核心。
規(guī)則一：減少HTTP請(qǐng)求。這本書的規(guī)則順序是按照其重要性來(lái)排名的，減少HTTP請(qǐng)求作為第一個(gè)規(guī)則，足見其重要性。根據(jù)黃金法則，減少組件數(shù)量從而減少HTTP請(qǐng)求是最有效的性能優(yōu)化方式，其中有幾項(xiàng)技術(shù)值得提一下：
CSS Sprites。應(yīng)該前端人都比較熟悉了，把圖片整合到一個(gè)大圖里，利用background-position來(lái)定位。
data:URL。值得一說把圖片變?yōu)閮?nèi)聯(lián)的，減少了圖片請(qǐng)求，webpack里圖片小于8kb就會(huì)轉(zhuǎn)為base64的data:URL。
合并腳本和CSS。
規(guī)則二：使用CDN。這個(gè)規(guī)則不用多說，分發(fā)內(nèi)容使之更靠近終端用戶，減少了請(qǐng)求時(shí)間。
規(guī)則三：添加Expires頭。善用緩存，給長(zhǎng)久不變的內(nèi)容組件設(shè)置有效期較久的Expires頭。
規(guī)則四：壓縮組件。利用gzip等內(nèi)容編碼對(duì)文檔或組件進(jìn)行壓縮，通常能將相應(yīng)數(shù)據(jù)量減少70%左右。
規(guī)則五：將樣式表放在頂部。頁(yè)面在打開工程中逐步呈現(xiàn)，用戶會(huì)覺得頁(yè)面快一些，也讓用戶在等待過程中有一個(gè)良好的反饋。把CSS放在底部的話有可能出現(xiàn)白屏現(xiàn)象。
規(guī)則六：將腳本放在底部。頁(yè)面下載腳本時(shí)會(huì)阻止其他內(nèi)容下載與呈現(xiàn)，以防止瀏覽器的重繪重排。所以把腳本放在頁(yè)面的底部不會(huì)阻止頁(yè)面內(nèi)容的呈現(xiàn)，而且頁(yè)面一些可視化組件可以盡早下載而不被阻塞。
規(guī)則七：避免使用CSS表達(dá)式。CSS表達(dá)式會(huì)進(jìn)行頻繁的求值，導(dǎo)致了性能低下。
規(guī)則八：使用外部JavaScript和CSS。純粹而言，內(nèi)聯(lián)更快一些，因?yàn)闈M足了規(guī)則一的減少HTTP請(qǐng)求，但是這個(gè)問題上，一定要考慮緩存帶來(lái)的性能優(yōu)化，外部文件很有可能被緩存下來(lái)，從而提升了性能。
規(guī)則九：減少DNS查找。善用DNS緩存，比如持久連接。
規(guī)則十：精簡(jiǎn)JavaScript。移除不必要的字符空格，我們常見的.min.js就是如此。
規(guī)則十一：避免重定向。3xx的響應(yīng)狀態(tài)碼代表著一股重定向的響應(yīng)。其中URL結(jié)尾缺少斜線造成的重定向需要特別注意，不要因?yàn)檫@一點(diǎn)失誤損傷性能。
規(guī)則十二：刪除重復(fù)腳本。
規(guī)則十三：配置ETag。說起這個(gè)不得不說條件請(qǐng)求If-Modified-Since和If-None-Match，都是用來(lái)進(jìn)行緩存再驗(yàn)證。ETag的問題是服務(wù)器構(gòu)造ETag時(shí)，盡管兩個(gè)文件完全一樣，但如果處于不同的服務(wù)器的話還是會(huì)有不同的ETag，增加了HTTP進(jìn)行請(qǐng)求下載的次數(shù)，這對(duì)于后臺(tái)是服務(wù)器集群的網(wǎng)站性能損傷很大。
規(guī)則十四：使Ajax可緩存。雖然Ajax是異步的，但也不能讓等待響應(yīng)的時(shí)間過長(zhǎng)。優(yōu)化準(zhǔn)則的話參見上面的性能準(zhǔn)則，其中善用緩存依然是我們重點(diǎn)關(guān)注的。
書最后用這些準(zhǔn)則分析了美國(guó)十大網(wǎng)站，發(fā)現(xiàn)有效利用這些規(guī)則性能有很大的提升空間，我也看了一下自己實(shí)習(xí)時(shí)候項(xiàng)目，發(fā)現(xiàn)可優(yōu)化的地方非常多。以后的開發(fā)過程中要謹(jǐn)記這些準(zhǔn)則，讓自己產(chǎn)品的用戶獲得更好的體驗(yàn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91549.html
摘要：本文將為大家介紹阿里云安全加速傳輸?shù)幕A(chǔ)概念解決方案技術(shù)優(yōu)勢(shì)和優(yōu)化實(shí)踐。和未來(lái)將標(biāo)記為不安全的協(xié)議。阿里云提供安全加速方案，僅需開啟安全加速模式后上傳加速域名證書私鑰，實(shí)現(xiàn)全網(wǎng)數(shù)據(jù)加密傳輸功能。 大家都知道，HTTP 本身是明文傳輸?shù)?，沒有經(jīng)過任何安全處理，網(wǎng)站HTTPS解決方案通過在HTTP協(xié)議之上引入證書服務(wù)，完美解決網(wǎng)站的安全問題。本文將為大家介紹阿里云CDN HTTPS安全加速...
摘要：本文將為大家介紹阿里云安全加速傳輸?shù)幕A(chǔ)概念解決方案技術(shù)優(yōu)勢(shì)和優(yōu)化實(shí)踐。和未來(lái)將標(biāo)記為不安全的協(xié)議。阿里云提供安全加速方案，僅需開啟安全加速模式后上傳加速域名證書私鑰，實(shí)現(xiàn)全網(wǎng)數(shù)據(jù)加密傳輸功能。 大家都知道，HTTP 本身是明文傳輸?shù)模瑳]有經(jīng)過任何安全處理，網(wǎng)站HTTPS解決方案通過在HTTP協(xié)議之上引入證書服務(wù)，完美解決網(wǎng)站的安全問題。本文將為大家介紹阿里云CDN HTTPS安全加速...
摘要：雖然如此，但是網(wǎng)站前端性能優(yōu)化的思路基本沒變。為什么前端性能如此重要數(shù)據(jù)顯示只有的最終用戶響應(yīng)時(shí)間花在了下載文檔上。前端性能優(yōu)化一味奉行最佳實(shí)踐有時(shí)候反而過而不及，所以針對(duì)項(xiàng)目的實(shí)際情況來(lái)優(yōu)化才是明智的選擇。 前端近幾年變化很大，各種工具，庫(kù)，框架并發(fā)。雖然如此，但是網(wǎng)站前端性能優(yōu)化的思路基本沒變。為什么前端性能如此重要？數(shù)據(jù)顯示: 只有 10%~20% 的最終用戶響應(yīng)時(shí)間花在了下載...
摘要：為了更加高效的網(wǎng)絡(luò)層，它需要不僅僅只是扮演套接字管理員的角色。用套接字池來(lái)組織套接字，以源來(lái)分組套接字，每個(gè)套接字池強(qiáng)制限制其連接數(shù)和安全約束。協(xié)商是一個(gè)為計(jì)算機(jī)網(wǎng)絡(luò)提供通信安全的加密協(xié)議。 原文請(qǐng)查閱這里，略有改動(dòng)，本文采用知識(shí)共享署名 4.0 國(guó)際許可協(xié)議共享，BY Troland。 本系列持續(xù)更新中，Github 地址請(qǐng)查閱這里。 這是 JavaScript 工作原理的第十二章...
閱讀 2327·2021-11-23 09:51
閱讀 3760·2021-11-11 10:57
閱讀 1407·2021-10-09 09:43
閱讀 2496·2021-09-29 09:35
閱讀 2026·2019-08-30 15:54
閱讀 1796·2019-08-30 15:44
閱讀 3191·2019-08-30 13:20
閱讀 1700·2019-08-30 11:19
