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