文/李晶晶
前段時(shí)間官網(wǎng)優(yōu)化,從而進(jìn)一步的了解了 SEO,正好總結一下 SEO 知識,對于以后寫(xiě)界面也是一個(gè)參考和標準。
1.減少HTTP請求
當我們請求的網(wǎng)頁(yè)文件中有很多圖片、CSS、JS 甚至音樂(lè )等信息時(shí),將會(huì )頻繁的與服務(wù)器建立連接,與釋放連接,這必定會(huì )造成資源的浪費,且每個(gè) HTTP 請求都會(huì )對服務(wù)器和瀏覽器產(chǎn)生性能負擔。
網(wǎng)速相同的條件下,下載一個(gè) 100KB 的圖片比下載兩個(gè) 50KB 的圖片要快。
解決: 1.合并圖片(css sprites)
2.合并 CSS 和 JS 文件
3.圖片較多的頁(yè)面也可以使用 lazyLoad 等技術(shù)進(jìn)行優(yōu)化。
2.高效使用HTML標簽和css樣式
HTML 是一門(mén)用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言,它使用標記標簽來(lái)描述網(wǎng)頁(yè),作為一名合格的前端開(kāi)發(fā),你有必要去知道其常用標簽代表的含義(SEO)和屬性(表現形式)。
CSS 指層疊樣式表 (Cascading Style Sheets),如果說(shuō)把頁(yè)面想象成一個(gè)人, HTML 就是人的骨架,CSS 就是人的衣裝,一個(gè)人的品味從他的衣裝就能一目了然。
一名專(zhuān)業(yè)的前端開(kāi)發(fā)也是一名優(yōu)秀的重構,因為在頁(yè)面中經(jīng)常會(huì )有各種不合理的嵌套和重復定義的 CSS 樣式,不是說(shuō)要你重構頁(yè)面,只是希望在碰到這種情況的時(shí)候解決這些問(wèn)題。如這樣不合理的 HTML:
或者這樣的 CSS:
以上都是對 HTML 和 CSS 非常糟糕的使用方法。
正確理解:HTML 是一門(mén)標記語(yǔ)言,使用合理的 HTML 標簽前你必須了解其屬性,比如 Flow Elements(流元素),Metadata Elements(元數據元素),Phrasing Elements(語(yǔ)法元素)。比較基礎的就是得知道塊級元素和內聯(lián)元素、盒模型、 SEO 方面的知識。
CSS 是用來(lái)渲染頁(yè)面的,也是存在渲染效率的問(wèn)題。CSS 選擇符是從右向左進(jìn)行匹配的,這里對 css 選擇符按照開(kāi)銷(xiāo)從小到大的順序梳理一下:
ID 選擇符 #box
類(lèi)選擇符 .box
標簽 div
偽類(lèi)和偽元素 a:hover 當頁(yè)面被觸發(fā)引起回流(reflow)的時(shí)候,低效的選擇符依然會(huì )引發(fā)更高的
開(kāi)銷(xiāo),所以請避免低效。
3.將CSS和JS放到外部文件中引用,CSS放頭部,JS放尾
將 CSS 放在頂部能加快頁(yè)面內容顯示,并且能避免頁(yè)面產(chǎn)生白屏
將 JS 放在底部
JS 會(huì )阻塞對其后面內容的呈現
JS 會(huì )阻塞對其后面內容的下載
維護、易擴展,方便管理和重復利用。
正確理解:JavaScript 是瀏覽器中的霸主,為什么這么說(shuō),為在瀏覽器在執行 JavaScript 代碼時(shí),不能同時(shí)做其它事情即<script>每次出現都會(huì )讓頁(yè)面等待腳本的解析和執行(不論 JavaScript 是內嵌的還是外鏈的,JavaScript 代碼執行完成后才繼續渲染頁(yè)面。這個(gè)也就是 JavaScript 的阻塞特性。
因為這個(gè)阻塞的特點(diǎn),建議把 JavaScript 代碼放到</body>標簽以前,這樣既能有效的防止 JavaScript 的阻塞,又能使得頁(yè)面的 HTML 結構能更快的釋放。
4.壓縮圖片和使用圖片Sprite技術(shù)
其實(shí)壓縮圖片和圖片精靈是兩個(gè)方面的技術(shù)
現在由于工作的細分,專(zhuān)業(yè)的前端工程師已經(jīng)少有機會(huì )去切圖了,可是關(guān)于圖片壓縮還是得略微了解,一般圖片壓縮的方式有:
1.縮小圖片分辨率;
2.改變圖片格式;
3.降低圖片保存質(zhì)量;
關(guān)于圖片精靈(Sprite)技術(shù)就和我們工作直接相關(guān),不管是在 CSS 中的圖片還是在 HTML 結構中的圖片都會(huì )產(chǎn)生 HTTP 請求,前端優(yōu)化的第一條就是減少請求數,最直接有效的方法是使用圖片精靈(CSS Sprite)。圖片精靈就是把許多圖片放到一張大圖片里面,通過(guò) CSS 來(lái)顯示圖片的一部分。在背景整合的時(shí)候,也需要考慮圖片質(zhì)量同時(shí)也需要考慮圖片的大小,注意控制 Cookie 大小技術(shù),Cookie 是有生命周期的,所以請注意設置合理的過(guò)期時(shí)間,合理地 Expire 時(shí)間和不要過(guò)早去清除 coockie,都會(huì )改善用戶(hù)的響應時(shí)間。
5.減少對DOM的操作
在《高性能 JavaScript》中這么比喻:“把 DOM 看成一個(gè)島嶼,把 JavaScript(ECMAScript)看成另一個(gè)島嶼,者之間以一座收費橋連接”。所以每次訪(fǎng)問(wèn) DOM 都會(huì )教一個(gè)過(guò)橋費,而訪(fǎng)問(wèn)的次數越多,交的費用也就越多。所以一般建議盡量減少過(guò)橋次數。
解決辦法:修改和訪(fǎng)問(wèn) DOM 元素會(huì )造成頁(yè)面的 Repaint 和 Reflow,循環(huán)對 DOM 操作更是罪惡的行為。所以請合理的使用 JavaScript 變量?jì)Υ鎯热?考慮大量 DOM 元素中循環(huán)的性能開(kāi)銷(xiāo),在循環(huán)結束時(shí)一次性寫(xiě)入。
減少對 DOM 元素的查詢(xún)和修改,查詢(xún)時(shí)可將其賦值給局部變量。注:在 IE 中:hover 會(huì )降低響應速度。
6.代碼性能優(yōu)化
(1)display:none;優(yōu)于 visibility:hidden;前者隱藏不占用物理空間,后者會(huì )占用。
(2)合并 margin,padding,border 的-top,-left,-right,-bottom 的設置,簡(jiǎn)短簡(jiǎn)潔。
(3)選擇器在滿(mǎn)足效果的基礎上,盡量簡(jiǎn)單,減少嵌套,查詢(xún)的消耗。
(4)如若值為 0,則去掉單位,如 border-right:0px;可以寫(xiě)為 border-right:0; (5)沒(méi)有邊框,用 border:none;優(yōu)于 border;0;
(6)如果可以,顏色值盡量用三位字符表示,如 color:#336699;寫(xiě)為:color:#369;
(7)在保持代碼解耦的前提下,盡量合并重復的代碼。
(8)background,font 的多個(gè)屬性盡可能縮寫(xiě)。
如: 背景顏色,背景圖片,背景圖片的重復次數及背景圖片處于左右上下的位置,背景圖片的大小,都可以合在一起寫(xiě)。
(9)用 href="javascript：vold(0)"代替原來(lái)的 href="#",避免空鏈接點(diǎn)擊后重置到頁(yè)面首端。
(10)所有內頁(yè)指向首頁(yè)的鏈接寫(xiě)成<a href="/">不必寫(xiě)全。
(11)在 body 中,盡量少用圖片 repeat,且若用,圖片寬和高不少于 8px,否則加載背景圖片時(shí)候需要重復的次數會(huì )影響性能。
(12)圖片若小,盡可能使用 sprite 技術(shù),減少 http 請求次數?！?200KB 圖片所需的加載時(shí)間基本是差不多的?？蛻?hù)端每顯示一張圖片都會(huì )向服務(wù)器請求一次。所以圖片越多,請求次數越多,造成的延遲的可能性就越大。
(13)作為大型網(wǎng)站來(lái)說(shuō),首頁(yè)使用內聯(lián)式樣式表,這樣可以減少 http 請求數的同時(shí),也可以防止裸奔。當然其他頁(yè)面需要使用外聯(lián)樣式表,這樣才可以方便維護。因為作為大型網(wǎng)站來(lái)說(shuō),他的首頁(yè)訪(fǎng)問(wèn)量是非常的大的,所以:
把樣式表置于頂部
把腳本置于頁(yè)面底部
避免使用 CSS 表達式(Expression)
使用外部 JavaScript 和 CSS
削減 JavaScript 和 CSS
用 <link> 代替 @import
避免使用濾鏡
剔除重復腳本
減少 DOM 訪(fǎng)問(wèn)
開(kāi)發(fā)智能事件處理程序
最好的方案就是按照 HTML 規范在文檔 <head></head> 內加載你的
樣式表。
7.提高HTML加載速度
1頁(yè)面減肥頁(yè)面的肥瘦是影響加載速度最重要的因素;
刪除不必要的空格、注釋;
將 inline 的 script 和 css 移到外部文件;
可以使用 HTML Tidy 來(lái)給 HTML 減肥,還可以使用一些壓縮工具來(lái)給
JavaScript 減肥;
2減少文件數量
減少頁(yè)面上引用的文件數量可以減少 HTTP 連接數;
許多 JavaScript、CSS 文件可以合并最好合并;
3減少域名查詢(xún)
DNS 查詢(xún)和解析域名也是消耗時(shí)間的,所以要減少對外部 JavaScript、CSS、圖片等資源的引用,不同域名的使用越少越好;
4緩存重用數據使用緩存;
5優(yōu)化頁(yè)面元素加載順序首先加載頁(yè)面最初顯示的內容和與之相關(guān)的 JavaScript 和 CSS; 然后加載 DHTML 相關(guān)的東西;
像什么不是最初顯示相關(guān)的圖片、flash、視頻等很肥的資源就最后加載;
6減少 inline JavaScript 的數量
瀏覽器 parser 會(huì )假設 inline JavaScript 會(huì )改變頁(yè)面結構,所以使用 inline JavaScript 開(kāi)銷(xiāo)較大;
不要使用 document.write()這種輸出內容的方法,使用現代 W3C DOM 方法來(lái)為現代瀏覽器處理頁(yè)面內容;
7使用現代 CSS 和合法的標簽
使用現代 CSS 來(lái)減少標簽和圖像,例如使用現代 CSS+文字完全可以替代一些只有文字的圖片;
使用合法的標簽避免瀏覽器解析 HTML 時(shí)做“error correction”等操作,還可以被HTML Tidy(是用來(lái)清理 HTML 代碼的免費工具)來(lái)給 HTML 減肥;
8不要使用嵌套 tables 9指定圖像和 tables 的大小
如果瀏覽器可以立即決定圖像或 tables 的大小,那么它就可以馬上顯示頁(yè)面而不要重新做一些布局安排的工作,這不僅加快了頁(yè)面的顯示也預防了頁(yè)面完成加載后布局的一些不當的改變 image 使用 height 和 width;
table 使用 table-layout: fixed 并使用 col 和 colgroup 標簽指定 columns 的 width;
8.正確理解Repaint和Reflow
Repaint(重繪)就是在一個(gè)元素的外觀(guān)被改變,但沒(méi)有改變布局(寬高)的情況下發(fā)生,如改變 visibility、outline、背景色等等。
Reflow(重排)就是 DOM 的變化影響到了元素的幾何屬性(寬和高),瀏覽器會(huì )重新計算元素的幾何屬性,會(huì )使渲染樹(shù)中受到影響的部分失效,瀏覽器會(huì )驗證 DOM 樹(shù)上的所有其它結點(diǎn)的 visibility 屬性,這也是 Reflow 低效的原因。如:改變窗囗大小、改變文字大小、內容的改變、瀏覽器窗口變化,style 屬性的改變等等。如果 Reflow 的過(guò)于頻繁,CPU 使用率就會(huì )噌噌的往上漲。解決辦法:上面提到通過(guò)設置 style 屬性改變結點(diǎn)樣式的話(huà),每設置一次都會(huì )導致一次 reflow,所以最好通過(guò)設置 class 的方式;有動(dòng)畫(huà)效果的元素,它的 position 屬性應當設為 fixed 或 absolute,這樣不會(huì )影響其它元素的布局;如果功能需求上不能設置 position 為 fixed 或 absolute,那么就權衡速度的平滑性。
總之,因為 Reflow 有時(shí)確實(shí)不可避免,所以只能盡可能限制 Reflow 的影響范圍。
9.書(shū)寫(xiě)html的時(shí)候做到結構語(yǔ)義化
結構中主要包括了 head 和 body 兩個(gè)部分,但是我們經(jīng)常說(shuō)的是結構語(yǔ)義化主要是 body 中的標簽,但是我在這里還是簡(jiǎn)單的說(shuō)一下 head,head 中其實(shí)包括了一些對于我們 seo 很有用的一些東西,比如 title,Description,Keywords,這些東西在爬蟲(chóng)抓取的時(shí)候都是有幫助的,當然,還有其他的一些,比如設置緩存等一些其他的信息。
那么 body 中的話(huà),包括的標簽就很多了,我覺(jué)得作為一個(gè)合格的前端開(kāi)發(fā)人員你應該去熟悉他們,比如 div,span,h,ul,ol,dl,p 等等這類(lèi)的標簽的使用。應該非常合理,還有就是注意 h 標簽的斷層,及 h1 標簽的使用,這些都是非常重要的。
同時(shí)在我們的結構中不要出現 style 和 onclick 這樣的內聯(lián)的樣式和事件。能夠注意結構與表現、行為的分離。
標簽語(yǔ)義化的好處:
(1)有利于搜索引擎;
(2)結構清晰的 HTML 在團隊合作中的作用 (3)有利于盲人屏幕閱讀器
10.使用JSON格式來(lái)進(jìn)行數據交換
基本原理:
JSON 是一種輕量級的數據交換格式,采用完全獨立于語(yǔ)言的文本格式,是理想的數據交換格式。同時(shí),JSON 是 JavaScript 原生格式,這意味著(zhù)在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包。
與 XML 序列化相比,JSON 序列化后產(chǎn)生的數據一般要比 XML 序列化后數據體積小,所以在 Facebook 等知名網(wǎng)站中都采用了 JSON 作為數據交換方式。
JS 操作 JSON:
在 JSON 中,有兩種結構:對象和數組。
-
一個(gè)對象以 “ { ” 開(kāi)始,“ } ” 結束。每個(gè)“名稱(chēng)”后跟一個(gè) “ : ” ;“名稱(chēng)/ 值對”之間使用 “ , ”(逗號)分隔。名稱(chēng)用引號括起來(lái);值如果是字符串則必須用引號括起來(lái),數值型則不需要。如:
2. 數組是值(value)的有序集合。一個(gè)數組以 “ [ ” 開(kāi)始, “ ] ” 結束。值之間使用 “ , ” (逗號)分隔。如:
對這種數組和對象字面量的操作是非常方便且高效的。如果預先知道 JSON 結構的情況下,使用 JSON 進(jìn)行數據傳遞簡(jiǎn)直是太美妙了,可以寫(xiě)出很實(shí)用美觀(guān)可讀性強的代碼。
11.注意控制Cookie大小和污染
基本原理和使用方法:
有關(guān) Cookie 的基礎和高級知識可以去看一篇文章《JavaScript 操作 Cookie》; 因為 Cookie 是本地的磁盤(pán)文件,每次瀏覽器都會(huì )去讀取相應的 Cookie,所以建議去除不必要的 Cookie,使 Coockie 體積盡量小以減少對用戶(hù)響應的影響;
使用 Cookie 跨域操作時(shí)注意在適應級別的域名上設置 cookie 以便使子域名不受其影響;
Cookie 是有生命周期的,所以請注意設置合理的過(guò)期時(shí)間,合理地 Expire時(shí)間和不要過(guò)早去清除 cookie,都會(huì )改善用戶(hù)的響應時(shí)間。
12.使用CDN加速(內容分發(fā)網(wǎng)絡(luò ))
CDN 的全稱(chēng)是 Content Delivery Network,即內容分發(fā)網(wǎng)絡(luò )。
當頁(yè)面中有很多資源的時(shí)候,可以從不同的服務(wù)中去讀取,同時(shí)可以提高并行下載速度
其基本思路是盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數據傳輸速度和穩定性的瓶頸和環(huán)節,使內容傳輸的更快、更穩定。通過(guò)在網(wǎng)絡(luò )各處放置節點(diǎn)服務(wù)器所構成的在現有的互聯(lián)網(wǎng)基礎之上的一層智能虛擬網(wǎng)絡(luò ),CDN 系統能夠實(shí)時(shí)地根據網(wǎng)絡(luò )流量和各節點(diǎn)的連接、負載狀況以及到用戶(hù)的距離和響應時(shí)間等綜合信息將用戶(hù)的請求重新導向離用戶(hù)最近的服務(wù)節點(diǎn)上。
不足之處:實(shí)時(shí)性不太好是 CDN 的致命缺陷。隨著(zhù)對 CDN 需求的逐漸升溫, 這一缺陷將得到改進(jìn),使來(lái)自于遠程服務(wù)器的網(wǎng)絡(luò )內容網(wǎng)頁(yè)與復本服務(wù)器或緩存器中的網(wǎng)頁(yè)保持同步。
解決方法:是在網(wǎng)絡(luò )內容發(fā)生變化時(shí)將新的網(wǎng)絡(luò )內容從服務(wù)器端直接傳送到緩存器,或者當對網(wǎng)絡(luò )內容的訪(fǎng)問(wèn)增加時(shí)將數據源服務(wù)器的網(wǎng)絡(luò )內容盡可能實(shí)時(shí)地復制到緩存服務(wù)器。
13.添加http Expires頭
為圖片視頻之類(lèi)很少改變的資源設置長(cháng)的 Expires 時(shí)間將直接減少 http 請求; 如果資源設置了 Expires 頭為將來(lái)的某個(gè)時(shí)間,下次訪(fǎng)問(wèn)時(shí)候瀏覽器發(fā)現資源還沒(méi)有過(guò)期,會(huì )直接從緩存中讀取,不會(huì )再次產(chǎn)生 http 請求
14.壓縮組件
在 Server 端對 Response 資源進(jìn)行壓縮再傳給瀏覽器,一般使用 GZIP。
15.確保Ajax請求遵守性能,必要時(shí)候應具備長(cháng)久的expires頭
簡(jiǎn)化要點(diǎn):
(1)語(yǔ)義化 html 標簽,用合適的標簽嵌套合適的內容,不可過(guò)分依賴(lài) div,對瀏覽器更友善就能更容易被抓取
(2)重要的內容 html 代碼放在前面,放在左邊。搜索引擎爬蟲(chóng)是從左往右,從上到下進(jìn)行抓取的,利用布局來(lái)實(shí)現重要的代碼在上面
(3)重要內容要寫(xiě)在 html 架構里面,蜘蛛不會(huì )抓取 js 的內容
(4)盡量減少使用 iframe,因為蜘蛛不會(huì )抓取 iframe 的內容
(5)為圖片 img 加上 alt 屬性,加了 alt 就不必加 title 了,避免搜索引擎認為我們惡意優(yōu)化。alt 能讓圖片沒(méi)加載時(shí)都能有文字提示
(6)需要強調的地方加上 title,本頁(yè)面內跳轉 a 標簽內也要加 title (7)重要的地方可以保留文字,有些地方必須用圖,但是蜘蛛不會(huì )爬 img,這時(shí)應該設置文本,再用縮進(jìn)隱藏的方法去掉文字,例如 logo 的優(yōu)化就是這樣做的。注意隱藏不能用 display:none,蜘蛛不會(huì )檢索 display:none 的內容,應用這個(gè)方法的標簽一般是 logo,標題等重要信息
(8)盡量做到 js、css、html 的分離,不要在 html 中寫(xiě)樣式代碼 (9)注釋的東西能去掉應該去掉,對搜索引擎更加友好
(10)css 放在頭部,js 放在尾部,盡量使用外鏈或者工具對 css 和 js 進(jìn)行壓縮 (11)減少 http 的請求,使頁(yè)面更快加載 (12)使用本地緩存更快地訪(fǎng)問(wèn)網(wǎng)站,使用 cdn 網(wǎng)絡(luò ),加快用戶(hù)訪(fǎng)問(wèn)速度
(13)使用 G-ZIP 壓縮,瀏覽速度更快,搜索引擎抓取信息量更大
(14)Robots.txt 文件
(15)鏈接可根據實(shí)際需求添加 tilte 屬性以及 nofllow 值;非特殊性鏈接,鏈接地址一定要寫(xiě)入 herf 屬性,有些前端開(kāi)發(fā)人員為了省事,直接用 div 加個(gè) click 事件當鏈接, 在視覺(jué)上和使用上確實(shí)是實(shí)現了鏈接效果,但是做過(guò) SEO 優(yōu)化的人員都知道,蜘蛛目前對于 js 的支持很差,基本無(wú)法讀取里面的鏈接地址。所以說(shuō)用 click 事件是絕對不允許的,特別是一些重要的導航鏈接。
(16)關(guān)鍵一點(diǎn)是頭部的 title,description,keyword 的設置。
1.title 設置不宜過(guò)長(cháng),要簡(jiǎn)短,網(wǎng)站的名字與相關(guān)的小內容,一般為 10-20 個(gè)字。不能重復
2.keywords 設置 10 個(gè)關(guān)鍵詞,沒(méi)個(gè)詞不能太長(cháng),簡(jiǎn)短且符合你網(wǎng)站的特點(diǎn),
不能重復
3.description,50 個(gè)字內描述你的網(wǎng)站。注:description 寫(xiě)原創(chuàng )的話(huà),并包含 2-3 個(gè)關(guān)鍵詞比較好;
皖公網(wǎng)安備 34010202600669
