web頁面性能優(yōu)化
前端優(yōu)化的目的是什么?
- 從用戶角度而言，優(yōu)化能夠讓頁面加載得更快谒亦、對(duì)用戶的操作響應(yīng)得更及時(shí)竭宰，能夠給用戶提供更為友好的體驗(yàn)。
- 從服務(wù)商角度而言份招，優(yōu)化能夠減少頁面請(qǐng)求數(shù)切揭、或者減小請(qǐng)求所占帶寬，能夠節(jié)省可觀的源锁摔。
優(yōu)化的方式有以下幾種：
一廓旬、編輯html的時(shí)候注意語義結(jié)構(gòu)化
結(jié)構(gòu)語義化：根據(jù)內(nèi)容的結(jié)構(gòu)，選擇合適的標(biāo)簽谐腰，以便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼嗤谚，同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。
結(jié)構(gòu)語義化的優(yōu)點(diǎn)包括：
- 在頁面沒有css或者css還未加載出來的時(shí)候怔蚌，頁面也能呈現(xiàn)出很好的結(jié)構(gòu)。
- 有利于SEO旁赊，易于被搜索引擎抓取桦踊，有利于推廣。
- 方便盲人閱讀器终畅、屏幕閱讀器等等設(shè)備來解析籍胯。
- 用戶體驗(yàn)更好，例如圖片的alt屬性离福，在圖片沒有加載出來時(shí)給予合理的解釋杖狼。
- 便于團(tuán)隊(duì)開發(fā)和維護(hù)。
- 遵循分離結(jié)構(gòu)和表現(xiàn)原則妖爷。
二蝶涩、 對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化
- 書寫css和js的時(shí)候要注意代碼優(yōu)化，盡量重復(fù)利用
- 可以用一個(gè)大的css文件來合并多個(gè)小的css文件，瀏覽器在請(qǐng)求每一個(gè)css文件時(shí)都會(huì)發(fā)送一個(gè)http請(qǐng)求绿聘，在http請(qǐng)求帶來的延遲沒有結(jié)束的時(shí)候嗽上，用戶都將在等待中度過。
- 如果網(wǎng)頁中使用了大量背景圖片熄攘，那么這些圖片每一張都會(huì)發(fā)送一個(gè)http請(qǐng)求兽愤，可以使用css sprite來合并網(wǎng)頁中的需要頻繁加載的多個(gè)圖片。對(duì)于合并之后的圖片挪圾，我們需要注意對(duì)它圖片質(zhì)量和大小的優(yōu)化浅萧，圖片越小加載速度越快。
- css文件放置在head哲思，js放置在文檔尾部洼畅。
三、利用多個(gè)域名來存儲(chǔ)網(wǎng)站資源
- 可以節(jié)約cookie帶寬也殖。
- 節(jié)約主域名的連接數(shù)土思，優(yōu)化頁面響應(yīng)速度。
四忆嗜、減少http請(qǐng)求己儒，合理設(shè)置 HTTP緩存
http協(xié)議是無狀態(tài)的應(yīng)用層協(xié)議，意味著每次http請(qǐng)求都需要建立通信鏈路捆毫、進(jìn)行數(shù)據(jù)傳輸闪湾，而在服務(wù)器端，每個(gè)http都需要啟動(dòng)獨(dú)立的線程去處理绩卤。這些通信和服務(wù)的開銷都很昂貴途样，減少http請(qǐng)求的數(shù)目可有效提高訪問性能。
減少http的主要手段是合并CSS濒憋、合并javascript何暇、合并圖片。將瀏覽器一次訪問需要的javascript和CSS合并成一個(gè)文件凛驮，這樣瀏覽器就只需要一次請(qǐng)求裆站。圖片也可以合并，多張圖片合并成一張黔夭，如果每張圖片都有不同的超鏈接宏胯，可通過CSS偏移響應(yīng)鼠標(biāo)點(diǎn)擊操作，構(gòu)造不同的URL本姥。
緩存的力量是強(qiáng)大的肩袍，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少 HTTP請(qǐng)求。怎樣才算合理設(shè)置 ?原則很簡單婚惫，能緩存越多越好氛赐，能緩存越久越好魂爪。
- 合并css，js文件鹰祸，減少css甫窟，js重復(fù)代碼，合并圖片等都是為了減少http請(qǐng)求蛙婴，應(yīng)為每次http請(qǐng)求的代價(jià)都是非常昂過的粗井，所以減少http請(qǐng)求能有效優(yōu)化訪問性能。
- 緩存能緩存得更多街图，緩存得更久浇衬，也是可以大大減少http請(qǐng)求，就優(yōu)化了訪問性能餐济。
五耘擂、使用瀏覽器緩存
對(duì)一個(gè)網(wǎng)站而言，CSS絮姆、javascript醉冤、logo、圖標(biāo)這些靜態(tài)資源文件更新的頻率都比較低篙悯，而這些文件又幾乎是每次http請(qǐng)求都需要的蚁阳，如果將這些文件緩存在瀏覽器中，可以極好的改善性能鸽照。通過設(shè)置http頭中的cache-control和expires的屬性螺捐，可設(shè)定瀏覽器緩存，緩存時(shí)間可以是數(shù)天矮燎，甚至是幾個(gè)月定血。
在某些時(shí)候，靜態(tài)資源文件變化需要及時(shí)應(yīng)用到客戶端瀏覽器诞外，這種情況澜沟，可通過改變文件名實(shí)現(xiàn)，即更新javascript文件并不是更新javascript文件內(nèi)容峡谊，而是生成一個(gè)新的JS文件并更新HTML文件中的引用倔喂。
使用瀏覽器緩存策略的網(wǎng)站在更新靜態(tài)資源時(shí)，應(yīng)采用逐量更新的方法靖苇，比如需要更新10個(gè)圖標(biāo)文件，不宜把10個(gè)文件一次全部更新班缰，而是應(yīng)該一個(gè)文件一個(gè)文件逐步更新贤壁，并有一定的間隔時(shí)間，以免用戶瀏覽器忽然大量緩存失效埠忘，集中更新緩存脾拆，造成服務(wù)器負(fù)載驟增馒索、網(wǎng)絡(luò)堵塞的情況。
六名船、啟用壓縮
在服務(wù)器端對(duì)文件進(jìn)行壓縮绰上，在瀏覽器端對(duì)文件解壓縮，可有效減少通信傳輸?shù)臄?shù)據(jù)量渠驼。如果可以的話蜈块，盡可能的將外部的腳本、樣式進(jìn)行合并迷扇，多個(gè)合為一個(gè)百揭。文本文件的壓縮效率可達(dá)到80%以上，因此HTML蜓席、CSS器一、javascript文件啟用GZip壓縮可達(dá)到較好的效果。但是壓縮對(duì)服務(wù)器和瀏覽器產(chǎn)生一定的壓力厨内，在通信帶寬良好祈秕，而服務(wù)器資源不足的情況下要權(quán)衡考慮。
七雏胃、圖片懶加載（lazyout images）
圖片懶加載一般運(yùn)用到圖片較多的頁面请毛，電商類的頁面一般都有圖片懶加載處理。
步驟：
- 將要懶加載的網(wǎng)頁中的圖片都設(shè)為同一張loading圖片丑掺；
- 給圖片設(shè)置data-src的屬性获印，保存圖片的真實(shí)地址；
- 當(dāng)圖片滾動(dòng)到可視區(qū)域時(shí)街州，將圖片src替換為真實(shí)地址兼丰。
八、CSS放在頁面最上部唆缴，javascript放在頁面最下面
瀏覽器會(huì)在下載完成全部CSS之后才對(duì)整個(gè)頁面進(jìn)行渲染鳍征，因此最好的做法是將CSS放在頁面最上面，讓瀏覽器盡快下載CSS面徽。如果將 CSS放在其他地方比如 BODY中艳丛，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面由無 CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)趟紊，用戶體驗(yàn)比較糟糕氮双，所以可以考慮將CSS放在HEAD中。
Javascript則相反霎匈，瀏覽器在加載javascript后立即執(zhí)行戴差，有可能會(huì)阻塞整個(gè)頁面，造成頁面顯示緩慢铛嘱，因此javascript最好放在頁面最下面暖释。但如果頁面解析時(shí)就需要用到j(luò)avascript袭厂，這時(shí)放到底部就不合適了。
Lazy Load Javascript（只有在需要加載的時(shí)候加載球匕，在一般情況下并不加載信息內(nèi)容纹磺。）隨著 Javascript框架的流行，越來越多的站點(diǎn)也使用起了框架亮曹。不過橄杨，一個(gè)框架往往包括了很多的功能實(shí)現(xiàn)，這些功能并不是每一個(gè)頁面都需要的乾忱，如果下載了不需要的腳本則算得上是一種資源浪費(fèi) -既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi)的時(shí)間讥珍。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定制一個(gè)專用的 mini版框架窄瘟，另一種則是 Lazy Load衷佃。
九、減少cookie傳輸
一方面蹄葱，cookie包含在每次請(qǐng)求和響應(yīng)中氏义，太大的cookie會(huì)嚴(yán)重影響數(shù)據(jù)傳輸，因此哪些數(shù)據(jù)需要寫入cookie需要慎重考慮图云，盡量減少cookie中傳輸?shù)臄?shù)據(jù)量惯悠。另一方面，對(duì)于某些靜態(tài)資源的訪問竣况，如CSS克婶、script等，發(fā)送cookie沒有意義丹泉，可以考慮靜態(tài)資源使用獨(dú)立域名訪問情萤，避免請(qǐng)求靜態(tài)資源時(shí)發(fā)送cookie，減少cookie傳輸次數(shù)摹恨。
十筋岛、Javascript代碼優(yōu)化
js中減少DOM操作，避免使用eval和 Function晒哄，減少作用域鏈查找（盡量把變量設(shè)為局部變量）睁宰。
十一、CDN加速
CDN（contentdistribute network寝凌，內(nèi)容分發(fā)網(wǎng)絡(luò)）的本質(zhì)仍然是一個(gè)緩存柒傻，而且將數(shù)據(jù)緩存在離用戶最近的地方，使用戶以最快速度獲取數(shù)據(jù)较木。
十二诅愚、反向代理
1.傳統(tǒng)代理服務(wù)器位于瀏覽器一側(cè)，代理瀏覽器將http請(qǐng)求發(fā)送到互聯(lián)網(wǎng)上，而反向代理服務(wù)器位于網(wǎng)站機(jī)房一側(cè)违孝，代理網(wǎng)站web服務(wù)器接收http請(qǐng)求。
2.反向代理也可以實(shí)現(xiàn)負(fù)載均衡的功能泳赋，而通過負(fù)載均衡構(gòu)建的應(yīng)用集群可以提高系統(tǒng)總體處理能力雌桑，進(jìn)而改善網(wǎng)站高并發(fā)情況下的性能。
SEO（Search Engine Optimization）
SEO（Search Engine Optimization）：搜索引擎優(yōu)化祖今。是一種方式：利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名校坑。目的是：為網(wǎng)站提供生態(tài)式的自我營銷。解決方案千诬，讓其在行業(yè)內(nèi)占據(jù)領(lǐng)先地位耍目，獲得品牌收益；SEO包含站外SEO和站內(nèi)SEO兩方面徐绑；為了從搜索引擎中獲得更多的免費(fèi)流量邪驮，從網(wǎng)站結(jié)構(gòu)、內(nèi)容建設(shè)方案傲茄、用戶互動(dòng)傳播毅访、頁面等角度進(jìn)行合理規(guī)劃，還會(huì)使搜索引擎中顯示的網(wǎng)站相關(guān)信息對(duì)用戶來說更具有吸引力盘榨。
通過了解各類搜索引擎抓取互聯(lián)網(wǎng)頁面喻粹、進(jìn)行索引以及確定其對(duì)特定關(guān)鍵詞搜索結(jié)果排名等技術(shù)，來對(duì)網(wǎng)頁進(jìn)行相關(guān)的優(yōu)化草巡，使其提高搜索引擎排名守呜，從而提高網(wǎng)站訪問量，最終提升網(wǎng)站的銷售或宣傳的效果山憨。
搜索引擎優(yōu)化
- 內(nèi)部優(yōu)化
〔槠埂（1）META標(biāo)簽優(yōu)化：例如：TITLE，KEYWORDS萍歉，DESCRIPTION等的優(yōu)化侣颂；
（2）內(nèi)部鏈接的優(yōu)化枪孩，包括相關(guān)性鏈接（Tag標(biāo)簽）憔晒，錨文本鏈接，各導(dǎo)航鏈接蔑舞，及圖片鏈接拒担；
（3）網(wǎng)站內(nèi)容更新：每天保持站內(nèi)的更新(主要是文章的更新等)攻询。 - 外部優(yōu)化
〈雍场（1）外部鏈接類別：友情鏈接、博客钧栖、論壇低零、B2B婆翔、新聞、分類信掏婶、貼吧啃奴、知道、百科雄妥、站群最蕾、相關(guān)信息網(wǎng)等盡量保持鏈接的多樣性；
±涎帷（2）外鏈運(yùn)營：每天添加一定數(shù)量的外部鏈接瘟则，使關(guān)鍵詞排名穩(wěn)定提升；
≈Τ印（3）外鏈選擇：與一些和你網(wǎng)站相關(guān)性比較高,整體質(zhì)量比較好的網(wǎng)站交換友情鏈接,鞏固穩(wěn)定關(guān)鍵詞排名醋拧。
搜索引擎優(yōu)化技術(shù)
可分為兩大類：白帽技術(shù)與黑帽技術(shù)。 - 白帽技術(shù)（Whitehat）：在搜索引擎優(yōu)化行業(yè)中宿百，使用正規(guī)符合搜索引擎網(wǎng)站質(zhì)量規(guī)范的手段和方式趁仙，使網(wǎng)站在搜索引擎中關(guān)鍵詞獲得良好的自然排名稱為白帽技術(shù)。白帽技術(shù)是較為流行的網(wǎng)絡(luò)營銷方式垦页，主要目的是增加特定關(guān)鍵字的曝光率以增加網(wǎng)站的能見度雀费，進(jìn)而增加銷售的機(jī)會(huì)。分為站外SEO和站內(nèi)SEO兩種痊焊。SEO的主要工作是通過了解各類搜索引擎如何抓取互聯(lián)網(wǎng)頁面盏袄、如何進(jìn)行索引以及如何確定其對(duì)某一特定關(guān)鍵詞的搜索結(jié)果排名等技術(shù)，來對(duì)網(wǎng)頁進(jìn)行相關(guān)的優(yōu)化薄啥，使其提高搜索引擎排名辕羽，從而提高網(wǎng)站訪問量，最終提升網(wǎng)站的銷售能力或宣傳能力的技術(shù)垄惧。
- 黑帽技術(shù)（Blackhat）：黑帽技術(shù)是指在seo就是通過一些類似作弊的方法或技術(shù)手段刁愿，以不符合主流搜索引擎優(yōu)化發(fā)行方針規(guī)定的手法來獲得短時(shí)間內(nèi)較好的搜索引擎優(yōu)化的一種技術(shù)。黑帽SEO獲利主要的特點(diǎn)就是短平快為了短期內(nèi)的利益而采用的作弊方法到逊，同時(shí)隨時(shí)會(huì)因?yàn)樗阉饕嫠惴ǖ母淖兌媾R懲罰铣口。
