黑帽seo工具網(wǎng)

黑帽seo排名軟件-黑帽seo程序論壇

當(dāng)前位置：首頁 ? 黑帽文章 ? 正文

網(wǎng)站頁面花里胡哨對優(yōu)化排名沒啥用

968 人參與 2021年12月11日 03:39 分類 : 黑帽文章評論

網(wǎng)站頁面花里胡哨對優(yōu)化排名沒啥用

　　網(wǎng)站頁面花里胡哨對網(wǎng)站優(yōu)化排名真心沒個(gè)鳥用，和黃金亞索沒區(qū)別！只考慮視覺效果網(wǎng)頁代碼一頓亂搞那就只能自己看看啦！本文提供一個(gè)優(yōu)化網(wǎng)頁性能的大概思路，具體操作網(wǎng)上資料很多。網(wǎng)頁性能優(yōu)化，緩存優(yōu)化、加載時(shí)優(yōu)化、動畫優(yōu)化！　　　　緩存優(yōu)化 　　

　　性能優(yōu)化第一步，便是管理好頁面的緩存，避免重復(fù)下載資源。否則，即增加服務(wù)器壓力，又折磨用戶的錢包。　　　　瀏覽器緩存機(jī)制　　　　訪問頁面，請求各種資源，瀏覽器檢查本地是否有緩存。　　　　如果有，檢查資源是否過期。沒過期，直接使用緩存。過期了，便向服務(wù)器發(fā)出請求。　　　　發(fā)出的請求中會帶上etag和last-modified首部字段。　　　　服務(wù)器會通過Etag和last-modified來判斷瀏覽器緩存的資源是否已經(jīng)不可用。　　　　如果資源仍然有效，便返回304告知瀏覽器使用緩存。否則返回更新后的資源。　　　　按照這一套邏輯，便可規(guī)劃好網(wǎng)站的緩存。　　　　如果資源提前過期，如何通知瀏覽器更新資源？　　　　通常無法做到這一點(diǎn)，因?yàn)闉g覽器發(fā)現(xiàn)資源沒過期，根本不會發(fā)出請求。但是可以通過修改資源的網(wǎng)址來實(shí)現(xiàn)。所以需要給資源文件名加上版本號或者隨機(jī)標(biāo)記。例如 style.1234.css。也就是說，不要讓瀏覽器緩存html文件，否則，過期之前，瀏覽器都不會請求服務(wù)器。　　　　加載時(shí)優(yōu)化 　　　　消滅不必要的下載　　　　最好的優(yōu)化，便是根本不下載資源。所以要盡量減少比不要的資源。　　　　評估所有依賴是否必要，權(quán)衡利弊。　　　　依賴的下載路徑是否可靠，不可用時(shí)候是否會阻礙整個(gè)頁面。　　　　產(chǎn)品設(shè)計(jì)時(shí)候就需要拋棄浪費(fèi)帶寬的設(shè)計(jì)。　　　　壓縮所有可以壓縮的資源　　　　代碼自不用說，都是文本，全部壓縮。　　　　優(yōu)化圖片 　　　　去掉不必要的圖片　　　　多使用css3來代替圖片　　　　使用壓縮率更高的圖片。特別是gif動圖，一些視頻格式（H.264或WebM）的體積比gif小很多。　　　　用藝術(shù)字字體，不要用圖片　　　　仔細(xì)權(quán)衡圖片和文字的關(guān)系。要表達(dá)一個(gè)意思，可能一圖勝千言。多了一張圖片，反而節(jié)省了大量文字。　　　　使用progressive jpeg。相比隨著數(shù)據(jù)下載從上到下顯示的baseline jpeg，progressive jpeg是由模糊到清晰，用戶體驗(yàn)好，也不會導(dǎo)致reflow。　　　　圖片分辨率要盡可能小，避免圖片分辨率大于顯示分辨率。　　　　為使用更新瀏覽器的用戶提供更現(xiàn)代的圖片格式。　　　　多種分辨率的位圖供不同頁面大小使用。　　　　要給標(biāo)簽指明寬高，否則會導(dǎo)致reflow。　　　　使用HTTP/2。比如，精靈圖是由很多小圖片組成的一張大圖片，可以減少http請求。但是卻難以緩存，修改一個(gè)小圖片，導(dǎo)致所有小圖片緩存失效。HTTP/2，一個(gè)鏈接內(nèi)可以發(fā)起多個(gè)請求，便無需使用精靈圖。　　　　優(yōu)化字體 　　　　@font-face 中unicode-range可以制定字符范圍，用來避免下載不需要的語言的字符。　　　　確保字體都被壓縮過。　　　　用@font-face的display屬性和FontFace對象管理好字體加載時(shí)的邏輯。　　　　關(guān)鍵渲染路徑 　　　　瀏覽器渲染一張網(wǎng)頁通過以下步驟。　　　　處理 HTML 標(biāo)記并構(gòu)建 DOM 樹。　　　　處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹。　　　　將 DOM 與 CSSOM 合并成一個(gè)渲染樹。　　　　根據(jù)渲染樹來布局，以計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息。　　　　將各個(gè)節(jié)點(diǎn)繪制到屏幕上。　　　　優(yōu)化關(guān)鍵渲染路徑，便是指優(yōu)化這個(gè)渲染過程，讓網(wǎng)頁盡快呈現(xiàn)出來。　　　　css 　　　　CSS文件會阻塞渲染。瀏覽器構(gòu)建好DOM樹后，必須等待CSSOM樹構(gòu)建完成。　　　　在文檔頂部防止外聯(lián)CSS的標(biāo)簽，讓瀏覽器盡快請求CSS文件。　　　　避免在css文件中使用@import，因?yàn)橹挥邪琲mport的文件被下載編譯后，瀏覽器才會發(fā)現(xiàn)并下載import的css。　　　　可以考慮使用內(nèi)聯(lián)CSS，無需額外請求，不會阻塞渲染。　　　　js 　　　　在CSSOM構(gòu)建完成前，js不會開始執(zhí)行。　　　　js也會阻止DOM樹構(gòu)建。除非在 <script>標(biāo)簽上標(biāo)記async。　　　　用Chrome開發(fā)者工具的audits檢查網(wǎng)頁。　　　　動畫優(yōu)化　　　　重繪過程　　　　CSS選擇器　　　　選擇器越復(fù)雜，瀏覽器計(jì)算得越久。最糟情況下，瀏覽器需要遍歷整個(gè)DOM-tree，計(jì)算量等于元素總個(gè)數(shù)乘以選擇器個(gè)數(shù)。　　　　盡量不要使選擇器太復(fù)雜，事先給需要被操作的元素加上類名。　　　　reflow, layout 　　　　Chrome, Opera, Safari, Internet Explorer中叫l(wèi)ayout. 火狐稱之為Reflow。　　　　reflow, repaint次數(shù)越少越好，牽連的元素越少越好。　　　　reflow總是牽涉整個(gè)文檔流。　　　　修改元素css后立刻讀取css計(jì)算值，將導(dǎo)致瀏覽器同步reflow，阻塞js線程。　　　　Paint 　　　　瀏覽器渲染網(wǎng)頁時(shí)，會將網(wǎng)頁分層(layer)，最后將不同層合并，然后完成渲染。同一層中，哪怕只有一個(gè)小小的元素發(fā)生變化，整個(gè)層都會被repaint。這一點(diǎn)可以在開發(fā)者工具的Paint Profiler界面中觀察到，layer界面中可以觀察網(wǎng)頁有多少個(gè)layer。　　　　paint是耗費(fèi)性能的。　　　　修改transform和opacity會導(dǎo)致repaint 　　　　創(chuàng)建新layer來減少repaint區(qū)域。　　　　will-change屬性可以為元素創(chuàng)建新layer(works in Chrome, Opera and Firefox).或 transform: translateZ(0);(works in all browsers). 　　　　過多l(xiāng)ayer也消耗內(nèi)存和性能，用Performance判斷新layer是否帶來優(yōu)化，否則不要創(chuàng)建新layer。　　　　高dpi屏幕下，fixed元素自動擁有自己的layer。低dpi需要自行創(chuàng)建。　　　　repaint某個(gè)layer時(shí)，如果layer與其他元素重疊，將導(dǎo)致layer和重疊的元素都被repaint。　　　　最好的動畫是跳過layout和paint直接composite。　　　　用transform, opacity來制作動畫，可實(shí)現(xiàn)無layout和repaint. (Devtool Performance的main中無動畫相關(guān)事件。) 　　　　debounce 　　　　debounce:不要高頻率調(diào)用函數(shù)，事件連續(xù)觸發(fā)時(shí)，只調(diào)用一次函數(shù)。　　　　交互事件的監(jiān)聽函數(shù)的執(zhí)行時(shí)間不能太長，否則會阻塞頁面滾動。　　　　不要再交互事件的監(jiān)聽函數(shù)中修改樣式，會導(dǎo)致強(qiáng)制同步reflow，阻塞js執(zhí)行。　　　　debounce，活用requestAnimationFrame方法。　　　　監(jiān)聽函數(shù)可能會調(diào)用perventDefault, 導(dǎo)致compositor線程必須等待監(jiān)聽函數(shù)執(zhí)行完成。不過新擴(kuò)展的addEventListener方法第三個(gè)參數(shù)可以解決此問題。　　　　小技巧 　　　　動畫不能低于60幀。ui反饋不能低于100ms。　　　　ui反饋不必追求最快，可故意拖延到100ms。并利用這個(gè)時(shí)間做其他事。　　　　盡量增加線程空閑時(shí)間，以快速反饋。　　　　ui反饋優(yōu)先級最高，交互期間盡量停下其他任務(wù)。

黑帽SEO工具網(wǎng),提供黑帽軟件下載,黑帽seo程序下載,seo學(xué)習(xí)資料及課程。包括全網(wǎng)站群程序,目錄程序,寄生蟲程序,快排軟件,蜘蛛池程序等。(本站所有程序僅供參考學(xué)習(xí)研究，請勿不正當(dāng)使用)

來源：黑帽工具網(wǎng)（/QQ號：25496334），轉(zhuǎn)載請保留出處和鏈接！

本文鏈接：http://m.sugarbabysoaps.com/fuzhuruanjian/148.html

本站內(nèi)容來源于合作伙伴及網(wǎng)絡(luò)搜集，版權(quán)歸原作者所有。如有侵犯版權(quán)，請立刻和本站聯(lián)系，我們將在三個(gè)工作日內(nèi)予以改正。

百度分享獲取地址：http://share.baidu.com/code

微信：heimaowiki