成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端性能優(yōu)化指南

Ethan815 / 1732人閱讀

摘要：為了可以頂下這個(gè)雷，特意買了高性能網(wǎng)站建設(shè)指南。規(guī)則七避免使用表達(dá)式原因表達(dá)式在你不知道得情況下執(zhí)行多次，嚴(yán)重影響前端性能。這也是會(huì)降低前端性能的。

最近要實(shí)現(xiàn)前端性能探測(cè)，可是對(duì)于一個(gè)剛?cè)肼殘龅奈襾碚f前端性能是個(gè)啥，我還是個(gè)只追求頁面展示效果的娃兒~。為了可以頂下這個(gè)雷，特意買了高性能網(wǎng)站建設(shè)指南。這本書真的不錯(cuò)，強(qiáng)烈推薦看到本文的朋友看一下。

規(guī)則一 減少http請(qǐng)求數(shù)

原因：為什么要減少http請(qǐng)求數(shù)量呢？ http建立連接是需要時(shí)間成本的，http協(xié)議規(guī)定瀏覽器對(duì)于統(tǒng)一域名的資源請(qǐng)求數(shù)有限制。因此需要采取一些手段降低請(qǐng)求數(shù)量。

方案：

使用圖片精靈合并小圖片為一張大圖片

合并js資源和css資源

內(nèi)聯(lián)小圖片(data:url)

規(guī)則二 使用內(nèi)容發(fā)布網(wǎng)絡(luò)

原因： 用戶距離我們的服務(wù)器可能十萬八千里，為了提高資源的響應(yīng)速度可以將其放在距離用戶較近的代理服務(wù)器上，缺點(diǎn)嗎，可能會(huì)花點(diǎn)錢去購買cdn服務(wù)。

規(guī)則三 添加Expires頭----使用緩存

將靜態(tài)資源緩存在用戶本地，當(dāng)用戶二次訪問時(shí)直接從本地獲取資源，大大的降低了網(wǎng)絡(luò)請(qǐng)求的成本。
方案：

使用Expires頭，可能會(huì)存在用戶的代理和服務(wù)器的時(shí)間標(biāo)準(zhǔn)不同造成緩存失效的時(shí)機(jī)不準(zhǔn)確。

使用Cache-control: max-age=xxxxxxx

二者本質(zhì)相同，cache-control的優(yōu)先級(jí)大于前者，可以使用修改文件名的方式簡單粗暴的解決緩存可能存在的問題。

規(guī)則四 壓縮組件

使用壓縮減少資源的大小，進(jìn)而減少網(wǎng)絡(luò)響應(yīng)的時(shí)間。目前gzip壓縮使用的較為廣泛。壓縮腳本和樣式表文件比較值得，不要壓縮圖片和pdf文件，它們本身已被壓縮。

規(guī)則五 將樣式表放在頂部

該方案可以使的網(wǎng)頁逐步呈現(xiàn)，用戶體驗(yàn)會(huì)很好，感覺網(wǎng)站響應(yīng)的比較快。不會(huì)出現(xiàn)閃爍。

規(guī)則六 將腳本放在底部

原因： 腳本的下載和解析會(huì)阻塞其他資源的并行下載。目前瀏覽器為script標(biāo)簽提供了兩個(gè)新的屬性defer async二者都實(shí)現(xiàn)資源的異步下載不會(huì)阻塞其他資源的下載。區(qū)別在于defer會(huì)等頁面渲染完成后在執(zhí)行，async無法保證它執(zhí)行的時(shí)間，下載完就執(zhí)行。對(duì)比起來defer更具有實(shí)際使用價(jià)值。

規(guī)則七 避免使用css表達(dá)式

原因： 表達(dá)式在你不知道得情況下執(zhí)行n多次，嚴(yán)重影響前端性能。

規(guī)則八 使用外部的js和css文件

對(duì)于首次訪問而言，內(nèi)聯(lián)形式的渲染速度會(huì)高于外鏈的形式。但是外部文件的形式可以緩存啊。用戶再次訪問該頁面時(shí)就不用再次請(qǐng)求資源。

規(guī)則九 減少DNS查詢

方案: 利用http的keep-alive的連接復(fù)用，控制域名的數(shù)量?？刂朴蛎麛?shù)量同時(shí)存在資源并行下載數(shù)限制的問題，因此呢，需要實(shí)際情況做好權(quán)衡。

規(guī)則十 精簡JS代碼

刪除注釋、空格、將長變量名置換為短的變量名。也就是壓縮和混淆了。css代碼也需要去除空格和注釋。

規(guī)則十一 避免重定向

瀏覽器做重定向這個(gè)操作是需要時(shí)間的。因此呢，要盡量避免重定向。前端同學(xué)需要注意的就是不要忽略結(jié)尾的斜線

借此機(jī)會(huì)就簡單聊聊常用的3xx狀態(tài)碼

301 永久重定向。301重定向會(huì)導(dǎo)致用戶的書簽更新。

302 臨時(shí)重定向。

303 See Other 不論重定向之前的請(qǐng)求方式是什么，本次請(qǐng)求都以get的形式請(qǐng)求

304 Not Modified 發(fā)生的場景：瀏覽器使用緩存，但是緩存過期了此時(shí)瀏覽器請(qǐng)求服務(wù)器資源，服務(wù)器的資源并沒有更新過，瀏覽器繼續(xù)使用本地資源。響應(yīng)的響應(yīng)體是沒有內(nèi)容的。該請(qǐng)求成為條件請(qǐng)求。

307 重定向前請(qǐng)求是什么方式，本次請(qǐng)求還以該方式請(qǐng)求資源

和 307是302的一個(gè)規(guī)范化變種。302原則上講是不允許我們將原來的post請(qǐng)求換為get請(qǐng)求方式的，但是大家都這么做。因此才會(huì)出現(xiàn)后來的303和307.

規(guī)則十二 刪除重復(fù)的腳本（廢棄吧）

隨著項(xiàng)目規(guī)模的擴(kuò)大及參與人員的增多，可能會(huì)出現(xiàn)重復(fù)引入資源的情況。這也是會(huì)降低前端性能的。但是在這個(gè)前端工程化的年代，打包工具會(huì)幫我們處理好該問題。

規(guī)則十三 配置ETag

Etag是web服務(wù)器和瀏覽器用于確認(rèn)緩存組件是否有效的一種機(jī)制。服務(wù)器配置一下即可。

規(guī)則十四 使用AJAX緩存

可以通過http的響應(yīng)和請(qǐng)求頭控制ajax是否需要緩存。緩存這個(gè)東西呢用好了就是天使，用不好就是魔鬼。哈哈。

高性能網(wǎng)站建設(shè)指南

移動(dòng)端優(yōu)化知識(shí)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83119.html

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 設(shè)計(jì)架構(gòu)

    摘要：先來看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計(jì)方案，希望具有參考價(jià)值。，和都是常見的軟件架構(gòu)設(shè)計(jì)模式，它通過分離關(guān)注點(diǎn)來改進(jìn)代碼的組織方式。 如何無痛降低 if else 面條代碼復(fù)雜度 相信不少同學(xué)在維護(hù)老項(xiàng)目時(shí)，都遇到過在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對(duì)這樣的一團(tuán)亂麻，簡單粗暴地繼續(xù)增量修改常常只會(huì)讓復(fù)雜度越來越高，可讀性越來越差，有沒...

    graf 評(píng)論0 收藏0

  • 前端每周清單年度總結(jié)與盤點(diǎn)

    摘要：前端每周清單年度總結(jié)與盤點(diǎn)在過去的八個(gè)月中，我?guī)缀踔蛔隽藘杉?，工作與整理前端每周清單。本文末尾我會(huì)附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵(lì)過的朋友，希望你們能夠繼續(xù)支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結(jié)與盤點(diǎn) 在過去的八個(gè)月中，我?guī)缀踔蛔隽?..

    jackwang 評(píng)論0 收藏0

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對(duì)頁面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁面的優(yōu)化。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：單頁應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個(gè)單頁應(yīng)用中，往往只有一...

    Dean 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<