在当今这个唯快不破的互联网大环境下，项目从架构的时候就要考虑性能是否最优，怎么样让用户体验更好
质量相同的情况下，用户体验好坏一般分两种：
初始渲染：首屏加载速度
页面跳转：页面跳转加载速度
一、大环境下的优化
1.css样式置顶，优化样式减少不必要的重绘
1）样式表放在网页的head中，首先，这样会给用户加载速度快的感觉，其次，因为样式表决定了网页的绘制信息，所以放在头部可以最大话的避免重绘和重排
2）样式表中尽量避免使用计算属性和@import 如：calc，因为计算属性不可避免造成重绘和重排
3）样式表中尽量使用简写如：
/*16进制颜色*/
#000000
/*可以写成*/
#000
margin-top:2px
margin-right:3px;
margin-bottom:4px;
margin-left:5px;
margin:2px 3px 4px 5px;
2.javascript脚本置底，优化dom操作
由于javascript是阻塞加载，所以尽量把javascript放在网页下边，在首屏加载的时候尽量减少对dom的操作，因为这回引起页面大量的重绘
3.减少http请求
可以通过合并静态文件，使用图标字体，精灵图，合并接口等方式减少http请求次数
4.延时加载
可以把首屏显示之外的文件使用延时加载，来提高首屏速度
5.避免请求空src
src值为空的时候，依然会发送http请求
6.使用压缩工具压缩传输
gzip等
7.使用CDN加速
CDN通过寻找离请求最近的资源服务器来提高用户的下载速度，合理使用CDN可以是网站加载速度倍增
8.使用缓存技术
在静态资源配置的时候可以给承载资源加载链接(如:index.html)以强制不缓存，其余资源做强制缓存，静态资源做打包的时候可以直接附加hash值，从而合理给页面缓存，合理使用缓存可以使网站加载速度倍增
9.打包优化
充分利用webpack等打包工具的打包功能，对代码进行拆包，压缩，以及组件的按需导入
二、代码内部优化
1.组件化
首先组件化代码可以提高代码重用率，其次组件化代码能减少不必要的计算和更新提高页面二次渲染性能
2.使用状态管理工具
预估项目最终程度，如果项目达到一定程度使用状态管理工具，方便管理状态，方便各个组件之间状态共享，减少不必要请求，
3.框架使用优化
优化各个框架提供属性和方法：比如减少refs使用，合理设置更新逻辑，避免不必要的重复渲染
4.请求优化
合理优化调用请求方式，减少不必要的维护和代码量比如：
//比如get请求，每次调用需要添加 method:'get'
require({url:'/test',method:'get'})
/*可以替换一下，
*使用一个方法来封装一下，
*直接省去了每个调用method:'get'这几个字符
*/
function get(url){
return require({url,method:'get'})
}
/*虽然这么写看起来知识省掉了几个字符，
*但是如果请求多了还是可以减少不小的打包量的，
*其次请求后还需要数据处理，
*如：
*/
require({url:'/test',method:'get'}).then(data=>data).catch(err=>err)
/*如果我们在配合状态管理，
*那么我们可以节约的代码已经非常可观了
*/
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.路由优化
1）可以合理安排使用嵌套路由，嵌套路由可以减少不必要的重复加载，现实局部更新
2）把一些权限有关的组件可以进行封装，通过路由来实现，减少不必要的判断和加载
<!--
比如列表：操作 列需要固定权限才可以使用
-->
<table>
<tr>
<td>姓名</td>
<td>账号</td>
<td>出生日期</td>
<td>爱好</td>
<td>操作</td>
</tr>
</table>
<!--
可以提取共有表格
-->
<table>
<tr>
<td>姓名</td>
<td>账号</td>
<td>出生日期</td>
<td>爱好</td>
<child/>
</tr>
</table>
<!--
在有权限的路由调用的时候传入操作列
-->
<MyUserTable>
<td>操作</td>
</MyUserTable>
<!--
不同的前端框架有不同的组件使用模式，
但原理是相同的，我们通过这种方式，
可以把操作列和操作相关的代码拿出来，
这样没有对应权限的用户，
就不需要加载这部分永远不会用到的代码了
-->
