在當(dāng)今這個(gè)唯快不破的互聯(lián)網(wǎng)大環(huán)境下抱究，項(xiàng)目從架構(gòu)的時(shí)候就要考慮性能是否最優(yōu)焕刮，怎么樣讓用戶體驗(yàn)更好
質(zhì)量相同的情況下邓馒，用戶體驗(yàn)好壞一般分兩種：
初始渲染：首屏加載速度
頁(yè)面跳轉(zhuǎn)：頁(yè)面跳轉(zhuǎn)加載速度
一轿塔、大環(huán)境下的優(yōu)化
1.css樣式置頂特愿，優(yōu)化樣式減少不必要的重繪
1）樣式表放在網(wǎng)頁(yè)的head中，首先勾缭，這樣會(huì)給用戶加載速度快的感覺(jué)揍障，其次，因?yàn)闃邮奖頉Q定了網(wǎng)頁(yè)的繪制信息俩由，所以放在頭部可以最大話的避免重繪和重排
2）樣式表中盡量避免使用計(jì)算屬性和@import 如：calc毒嫡，因?yàn)橛?jì)算屬性不可避免造成重繪和重排
3）樣式表中盡量使用簡(jiǎn)寫如：
/*16進(jìn)制顏色*/
#000000
/*可以寫成*/
#000
margin-top:2px
margin-right:3px;
margin-bottom:4px;
margin-left:5px;
margin:2px 3px 4px 5px;
2.javascript腳本置底，優(yōu)化dom操作
由于javascript是阻塞加載幻梯，所以盡量把javascript放在網(wǎng)頁(yè)下邊兜畸，在首屏加載的時(shí)候盡量減少對(duì)dom的操作努释，因?yàn)檫@回引起頁(yè)面大量的重繪
3.減少http請(qǐng)求
可以通過(guò)合并靜態(tài)文件，使用圖標(biāo)字體咬摇，精靈圖伐蒂，合并接口等方式減少http請(qǐng)求次數(shù)
4.延時(shí)加載
可以把首屏顯示之外的文件使用延時(shí)加載，來(lái)提高首屏速度
5.避免請(qǐng)求空src
src值為空的時(shí)候肛鹏，依然會(huì)發(fā)送http請(qǐng)求
6.使用壓縮工具壓縮傳輸
gzip等
7.使用CDN加速
CDN通過(guò)尋找離請(qǐng)求最近的資源服務(wù)器來(lái)提高用戶的下載速度逸邦，合理使用CDN可以是網(wǎng)站加載速度倍增
8.使用緩存技術(shù)
在靜態(tài)資源配置的時(shí)候可以給承載資源加載鏈接(如:index.html)以強(qiáng)制不緩存，其余資源做強(qiáng)制緩存龄坪，靜態(tài)資源做打包的時(shí)候可以直接附加hash值昭雌，從而合理給頁(yè)面緩存，合理使用緩存可以使網(wǎng)站加載速度倍增
9.打包優(yōu)化
充分利用webpack等打包工具的打包功能健田，對(duì)代碼進(jìn)行拆包烛卧，壓縮，以及組件的按需導(dǎo)入
二妓局、代碼內(nèi)部?jī)?yōu)化
1.組件化
首先組件化代碼可以提高代碼重用率总放，其次組件化代碼能減少不必要的計(jì)算和更新提高頁(yè)面二次渲染性能
2.使用狀態(tài)管理工具
預(yù)估項(xiàng)目最終程度，如果項(xiàng)目達(dá)到一定程度使用狀態(tài)管理工具好爬，方便管理狀態(tài)局雄，方便各個(gè)組件之間狀態(tài)共享，減少不必要請(qǐng)求存炮，
3.框架使用優(yōu)化
優(yōu)化各個(gè)框架提供屬性和方法：比如減少refs使用炬搭，合理設(shè)置更新邏輯，避免不必要的重復(fù)渲染
4.請(qǐng)求優(yōu)化
合理優(yōu)化調(diào)用請(qǐng)求方式穆桂，減少不必要的維護(hù)和代碼量比如：
//比如get請(qǐng)求宫盔，每次調(diào)用需要添加 method:'get'
require({url:'/test',method:'get'})
/*可以替換一下，
*使用一個(gè)方法來(lái)封裝一下享完，
*直接省去了每個(gè)調(diào)用method:'get'這幾個(gè)字符
*/
function get(url){
return require({url,method:'get'})
}
/*雖然這么寫看起來(lái)知識(shí)省掉了幾個(gè)字符灼芭，
*但是如果請(qǐng)求多了還是可以減少不小的打包量的，
*其次請(qǐng)求后還需要數(shù)據(jù)處理般又，
*如：
*/
require({url:'/test',method:'get'}).then(data=>data).catch(err=>err)
/*如果我們?cè)谂浜蠣顟B(tài)管理彼绷，
*那么我們可以節(jié)約的代碼已經(jīng)非常可觀了
*/
function get({url,commit,type,params}){
require({url:'/test',method:'get'})
.then(data=>{
commit(type,{data})
})
.catch(err=>{
commit(type,err)
})
}
action({commit}){
get({url:'/test',commit,type})
}
5.路由優(yōu)化
1）可以合理安排使用嵌套路由茴迁，嵌套路由可以減少不必要的重復(fù)加載寄悯，現(xiàn)實(shí)局部更新
2）把一些權(quán)限有關(guān)的組件可以進(jìn)行封裝，通過(guò)路由來(lái)實(shí)現(xiàn)堕义，減少不必要的判斷和加載
<!--
比如列表：操作 列需要固定權(quán)限才可以使用
-->
<table>
<tr>
<td>姓名</td>
<td>賬號(hào)</td>
<td>出生日期</td>
<td>愛好</td>
<td>操作</td>
</tr>
</table>
<!--
可以提取共有表格
-->
<table>
<tr>
<td>姓名</td>
<td>賬號(hào)</td>
<td>出生日期</td>
<td>愛好</td>
<child/>
</tr>
</table>
<!--
在有權(quán)限的路由調(diào)用的時(shí)候傳入操作列
-->
<MyUserTable>
<td>操作</td>
</MyUserTable>
<!--
不同的前端框架有不同的組件使用模式热某，
但原理是相同的，我們通過(guò)這種方式，
可以把操作列和操作相關(guān)的代碼拿出來(lái)昔馋，
這樣沒(méi)有對(duì)應(yīng)權(quán)限的用戶，
就不需要加載這部分永遠(yuǎn)不會(huì)用到的代碼了
-->
