資訊專欄INFORMATION COLUMN
摘要：發(fā)布自的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處提高前端性能的方法宏觀上看加速什么是內(nèi)容分發(fā)網(wǎng)絡(luò)由于位于用戶網(wǎng)絡(luò)的第一跳，將大多數(shù)靜態(tài)文件啟用加速可以大大提高效率，很多框架用的很多的靜態(tài)文件都啟用了加速反向代理什么是反向代理正常的代理服務(wù)器是
發(fā)布自Kindem的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處提高前端性能的方法 宏觀上看
CDN加速
什么是CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))
由于 CDN 位于用戶網(wǎng)絡(luò)的第一跳，將大多數(shù)靜態(tài)文件啟用 CDN 加速可以大大提高效率，很多框架用的很多的靜態(tài)文件都啟用了 CDN 加速
反向代理
什么是反向代理 ? 正常的代理服務(wù)器是位于瀏覽器一端，代理用戶發(fā)送 http 請(qǐng)求給 Web 服務(wù)器，但是反向代理服務(wù)器則是位于 Web 服務(wù)器一端，代理 Web 服務(wù)器接受請(qǐng)求，然后再將請(qǐng)求處理轉(zhuǎn)發(fā)，這樣可以提高效率，用過 Nginx 的同學(xué)可能就有印象， Nginx 就可以做反向代理
減少 http 請(qǐng)求，合理設(shè)置 http 緩存
將多個(gè)文件合并成一個(gè)文件，將多個(gè)請(qǐng)求合并成一個(gè)請(qǐng)求
能夠進(jìn)行緩存的情況下緩存越多越好，越久越好
使用瀏覽器緩存
某些靜態(tài)文件長(zhǎng)期不變化，可以使用 http 頭中的 cache-control 和 expires設(shè)置瀏覽器緩存
壓縮文件
很常見，html、css、js 等文件壓縮后的效果很好，很多框架支持構(gòu)建 min 文件，即是這么一種辦法
CSS Sprites
即使用該技術(shù)將很多零散的圖片合成一張大圖，比較適合圖標(biāo)之類的使用，可以參照很多游戲制作中的 Sprites 貼圖，效果類似，這種辦法能夠大大減少 http 請(qǐng)求量
LazyLoad Images
懶加載，比如旋轉(zhuǎn)木馬，可以先加載第一張圖片，如果用戶不繼續(xù)翻閱，后面的圖片也沒有加載的必要了
CSS 放在頁面最上部，javascript 放在頁面最下面
這與頁面的渲染順序有關(guān)，CSS盡早加載可以使得頁面盡早開始渲染，而js是會(huì)阻塞頁面的，js的加載需要等到 DOM 完成形成之后才會(huì)開始生效，所以js最好放到最下面
減少 cookie 傳輸
cookie 是會(huì)包含在每一次 http 請(qǐng)求中的(如果啟用 cookie)，所以太大的 cookie 是會(huì)影響到性能的
微觀(代碼層面)上看
虛擬 DOM
什么是虛擬 DOM ? 大體上來說就是使用 js 模擬了 DOM，對(duì)虛擬 DOM 的操作會(huì)影響到真正的 DOM，這樣的方式提高了性能，很多前端框架都采用了虛擬 DOM，比如 Vue、React 等等
詳細(xì)了說有點(diǎn)麻煩，看這里吧：虛擬DOM介紹
慎用eval
這玩意真的慢
js 鏈?zhǔn)阶饔糜蛐枰⒁獾牡胤?/p>
js 的鏈?zhǔn)阶饔糜颍河玫揭粋€(gè)變量的時(shí)候，現(xiàn)在當(dāng)前作用域下的局部變量查詢，查不到了再往上一級(jí)作用域查詢
因?yàn)檫@樣的作用域，當(dāng)使用到全局變量的時(shí)候，最好先將全局變量緩存到本地
變量/常量訪問開銷
常量最快
局部變量次之
鏈?zhǔn)阶饔糜蛘业降淖兞吭俅沃?/p>
對(duì)象和數(shù)組的操作涉及到尋址，很慢
字符串拼接
想想都慢
可以使用模板字符串或者盡量避免
css 選擇器優(yōu)化
選擇器實(shí)際上是從右往左選，所以 div#hello 會(huì)比 #hello div 效率高很多
參考資料前端影響性能的細(xì)節(jié) - CSDN - i秋風(fēng)伴落葉
百度百科 - CDN
虛擬 DOM 介紹
侵刪
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96206.html
摘要：端優(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)化向：?jiǎn)雾搼?yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個(gè)單頁應(yīng)用中，往往只有一...
摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí)，結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況，發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí)，結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況，發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要：特意對(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ì)不定期更...
摘要：感謝王下邀月熊分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列，并以年月為單位進(jìn)行分類，具體內(nèi)容看這里前端每周清單年度總結(jié)與盤點(diǎn)。 感謝 王下邀月熊_Chevalier 分享的前端每周清單，為方便大家閱讀，特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列，并以年/月為單位進(jìn)行分類，具...
閱讀 2072·2021-11-19 11:37
閱讀 752·2021-11-11 16:54
閱讀 1204·2021-11-02 14:44
閱讀 3118·2021-09-02 15:40
閱讀 2403·2019-08-30 15:44
閱讀 997·2019-08-29 11:17
閱讀 1090·2019-08-26 14:06
閱讀 1591·2019-08-26 13:47
