當(dāng)今數(shù)字世界,存在著無數(shù)的網(wǎng)站,每天都需要處理各種不同的原因的訪問。然而,這些網(wǎng)站中有很大一部分顯得笨重,使用起來也很麻煩。沒怎么優(yōu)化的網(wǎng)站會(huì)被各種各樣的問題困擾,包括加載時(shí)間、不支持移動(dòng)設(shè)備、瀏覽器兼容性問題,等等。這篇文章講述可以幫助 改善優(yōu)化前端 的技術(shù),非常的有用諾~ 主要內(nèi)容有清理代碼、壓縮圖片、壓縮外部資源、使用 CDN,以及一些其它方法。這些方法會(huì)為你的網(wǎng)站帶顯著的速度提升和整體性能提升!(ps:覺得有用的請(qǐng)點(diǎn)個(gè)贊吧
)
HTML,即超文本標(biāo)記語言,幾乎是所有網(wǎng)站的支柱。HTML 為網(wǎng)頁帶來標(biāo)題、子標(biāo)題、列表和其它一些文檔結(jié)構(gòu)的格式。在最近更新的 HTML5 中,甚至可以創(chuàng)建圖表。
HTML 很容易被網(wǎng)絡(luò)爬蟲識(shí)別,因此搜索引擎可以根據(jù)網(wǎng)站的內(nèi)容在一定程度上實(shí)時(shí)更新。在寫 HTML 的時(shí)候,你應(yīng)該嘗試讓它 簡潔而有效 。此外,在 HTML 文檔中引用外部資源的時(shí)候也需要遵循一些最佳實(shí)踐方法。
Web 設(shè)計(jì)者喜歡在網(wǎng)頁建立起主要的 HTML 骨架之后再來創(chuàng)建樣式表。這樣一來,網(wǎng)頁中的樣式表往往會(huì)放在 HTML 的后面,接近文檔結(jié)束的地方。然而推薦的做法是把 CSS 放在 HTML 的上面部分,文檔頭之內(nèi),這可以確保正常的渲染過程。
<head>
<link >
</head>
這個(gè)策略不能提高網(wǎng)站的加載速度,但它不會(huì)讓訪問者長時(shí)間看著空白屏幕或者無格式的文本(FOUT)等待。如果網(wǎng)頁大部分可見元素已經(jīng)加載出來了,訪問者才更有可能等待加載整個(gè)頁面,從而帶來對(duì)前端的優(yōu)化效果。這就是知覺性能。
另一方面,如果將 Javascript 放置在 head 標(biāo)簽內(nèi)或 HTML 文檔的上部,這會(huì)阻塞 HTML 和 CSS 元素的加載過程。這個(gè)錯(cuò)誤會(huì)導(dǎo)致頁面加載時(shí)間增長,增加用戶等待時(shí)間,容易讓人感到不耐煩而放棄對(duì)網(wǎng)站的訪問。不過,您可以通過將 JavaScript 屬性置于 HTML 底部來避免此問題。
此外,在使用 JavaScript 時(shí),人們通常喜歡用異步腳本加載。這會(huì)阻止<script>標(biāo)簽在 HTML 中的呈現(xiàn)過程,如,在文檔中間的情況。
雖然對(duì)于網(wǎng)頁設(shè)計(jì)師來說, HTML 是最值得使用的工具之一,但它通常要與 CSS 和 JavaScript 一起使用,這可能會(huì)導(dǎo)致網(wǎng)頁瀏覽速度減慢。 雖然 CSS 和 JavaScript 有利于網(wǎng)頁優(yōu)化,但使用時(shí)也要注意一些問題。使用 CSS 和 JavaScript 時(shí),要避免嵌入代碼。因?yàn)楫?dāng)您嵌入代碼時(shí),要將 CSS 放置在樣式標(biāo)記中,并在腳本標(biāo)記中使用 JavaScript,這會(huì)增加每次刷新網(wǎng)頁時(shí)必須加載的 HTML 代碼量。
在過去,你可能會(huì)頻繁綁定 CSS 腳本到單個(gè)文件,以在 HTML 代碼中引用外部文件。在使用 HTTP1.1 協(xié)議時(shí),這是一項(xiàng)合理的實(shí)踐,然而這一協(xié)議不再是必需的。
感謝 HTTP/2,現(xiàn)在你可以通過使用多路技術(shù)將單個(gè) TCP 連接以異步方式收發(fā) HTTP 請(qǐng)求和響應(yīng)。
圖片來源:%20qnimate.com
這意味著你不再需要頻繁地將多個(gè)腳本綁定到單個(gè)文件。
CSS,即級(jí)聯(lián)樣式表,能從 HTML%20描述的內(nèi)容生成專業(yè)而又整潔的文件。很多 CSS%20需要通過 HTTP%20請(qǐng)求來引入(除非使用內(nèi)聯(lián)%20CSS),所以你要努力去除累贅的%20CSS%20文件,但要注意保留其重要特征。
如果你的%20Banner、插件和布局樣式是使用%20CSS%20保存在不同的文件內(nèi),那么,訪問者的瀏覽器每次訪問都會(huì)加載很多文件。雖然現(xiàn)在%20HTTP/2%20的存在,減少了這種問題的發(fā)生,但是在外部資源加載的情況下,仍會(huì)花費(fèi)較長時(shí)間。要了解如何減少%20HTTP%20請(qǐng)求以大幅度縮減加載時(shí)間,請(qǐng)閱讀Word網(wǎng)站加載地越快,則用戶體驗(yàn)越佳。因此, 對(duì)前端進(jìn)行優(yōu)化能使給你和你的用戶都帶來益處。如果你有任何其他好的優(yōu)化方法,請(qǐng)?jiān)谠u(píng)論區(qū)留下您的寶貴建議吧~!嘿嘿~~~~
|
新聞熱點(diǎn)
疑難解答
圖片精選